/* Satoshi — self-hosted (Fontshare free license, no external font requests). */
@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("assets/fonts/satoshi-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --white: #fff;
  --ink: #151515;
  --glass: rgba(255, 255, 255, 0.92);
  --line: rgba(255, 255, 255, 0.72);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: #111;
  color: var(--white);
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  align-items: center;
  display: flex;
  gap: 28px;
  justify-content: space-between;
  left: 0;
  padding: 18px 48px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 20;
}

.brand {
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: clamp(28px, 2.2vw, 42px);
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1;
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.22);
}

.brand .mark {
  margin-left: 2px;
}

/* Rundes Badge statt breiter Wortmarke: Es enthält Ort und Telefonnummer in
   kleiner Schrift, deshalb deutlich höher als eine Wortmarke — sonst ist die
   Feinschrift im Header nicht mehr lesbar. */
.brand-logo {
  display: block;
  /* 17.08.2026: auf Wunsch von Melanie 15 % groesser (vorher 52-68px). */
  height: clamp(60px, 5.75vw, 78px);
  width: auto;
}

.menu-toggle {
  align-items: center;
  /* PFLICHT: Ohne align-content ziehen sich die beiden Grid-Zeilen auf die
     volle Buttonhöhe auseinander (bei 44px sind die Striche 21px entfernt).
     Die Kreuz-Animation verschiebt sie aber nur um je 4px, sie treffen sich
     also nie und es entsteht ein „>" statt eines X. Mit center sind die
     Zeilen genau 2+6+2px hoch, die Mitten liegen 8px auseinander und
     translateY(±4px) bringt sie exakt zusammen. */
  align-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: none;
  gap: 6px;
  height: 34px;
  justify-items: end;
  padding: 4px;
  width: 42px;
  z-index: 22;
}

.menu-toggle span {
  background: var(--line);
  display: block;
  height: 2px;
  transition: transform 180ms ease, width 180ms ease;
  width: 31px;
}

.menu-toggle:focus-visible,
.dot:focus-visible,
.cta:focus-visible,
.nav-panel a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.88);
  outline-offset: 4px;
}

.menu-toggle span:last-child {
  width: 22px;
}

.menu-open .menu-toggle span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.menu-open .menu-toggle span:last-child {
  transform: translateY(-4px) rotate(-45deg);
  width: 31px;
}

.nav-panel {
  align-items: center;
  background: transparent;
  display: flex;
  flex: 1 1 auto;
  gap: clamp(18px, 2.2vw, 46px);
  justify-content: center;
  min-width: 0;
  opacity: 1;
  padding: 0;
  pointer-events: auto;
  position: static;
  transform: none;
  transition: none;
  width: auto;
  z-index: 1;
}

.menu-open .nav-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.nav-panel a {
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  font-size: clamp(15px, 1.05vw, 21px);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.22);
  white-space: nowrap;
}

.nav-panel a:hover,
.nav-group:focus-within .nav-parent,
.nav-group:hover .nav-parent {
  color: #fff;
}

.nav-group {
  display: inline-flex;
  position: relative;
}

.nav-group::after {
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid rgba(255, 255, 255, 0.96);
  content: "";
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 18px);
  transform: translateX(-50%) translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.submenu {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 5px;
  display: grid;
  gap: 18px;
  left: 50%;
  min-width: 202px;
  opacity: 0;
  padding: 32px 28px 28px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 30px);
  transform: translateX(-50%) translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.submenu a {
  color: #142026;
  font-size: 18px;
  line-height: 1.1;
  text-shadow: none;
}

.nav-group:hover::after,
.nav-group:focus-within::after,
.nav-group:hover .submenu,
.nav-group:focus-within .submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.join-action {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  color: #142026;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: clamp(16px, 1.05vw, 21px);
  font-weight: 900;
  justify-content: center;
  min-height: 60px;
  min-width: 150px;
  padding: 0 30px;
  white-space: nowrap;
}

.join-action:hover {
  background: #fff;
}

.sections {
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  overscroll-behavior: none;
  position: relative;
  scroll-snap-type: y mandatory;
  width: 100vw;
}

.panel {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Rating panel (last homepage section) — fits exactly one viewport. */
.rating-panel {
  background:
    radial-gradient(circle at 82% 12%, rgba(118, 184, 42, 0.16), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(118, 184, 42, 0.1), transparent 38%),
    linear-gradient(180deg, #0c0f14, #090b0e);
}

.rp-glow {
  background: radial-gradient(ellipse at 50% -20%, rgba(163, 217, 119, 0.14), transparent 55%);
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.rp-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.6vh, 30px);
  height: 100%;
  justify-content: flex-end;
  margin: 0 auto;
  max-width: 1180px;
  padding: 104px clamp(22px, 5vw, 64px) clamp(16px, 3vh, 30px);
  position: relative;
}

.rp-head {
  align-items: flex-end;
  display: flex;
  gap: 28px;
  justify-content: space-between;
}

.rp-kicker {
  color: #a3d977;
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.rp-title h1,
.rp-title h2 {
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 900;
  line-height: 1;
  margin: 0;
}

.rp-score {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
}

.rp-score strong {
  background: linear-gradient(180deg, #fff, #a3d977);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(52px, 5.4vw, 84px);
  font-weight: 900;
  line-height: 0.9;
}

.rp-score-meta {
  display: grid;
  gap: 4px;
}

.rp-stars {
  color: #f6c453;
  font-size: clamp(16px, 1.5vw, 22px);
  letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(246, 196, 83, 0.45);
}

.rp-score-meta small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.rp-grid {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  grid-template-columns: repeat(3, 1fr);
}

.rp-card {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(16px, 1.9vw, 26px);
  transition: transform 260ms ease, border-color 260ms ease, background 260ms ease;
}

.rp-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(163, 217, 119, 0.45);
  transform: translateY(-5px);
}

.rp-card-featured {
  background: linear-gradient(160deg, rgba(118, 184, 42, 0.16), rgba(118, 184, 42, 0.05));
  border-color: rgba(163, 217, 119, 0.4);
}

.rp-card-head {
  align-items: center;
  display: flex;
  gap: 11px;
}

.rp-card-head > div {
  flex: 1 1 auto;
  min-width: 0;
}

.rp-card-head strong {
  color: #fff;
  display: block;
  font-size: 14.5px;
  line-height: 1.2;
}

.rp-card-head small {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
}

.rp-card-stars {
  color: #f6c453;
  font-size: 12px;
  letter-spacing: 1.5px;
}

.rp-card p {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.6;
  margin: 0;
}

.rp-cta-row {
  align-items: center;
  display: flex;
  gap: 14px;
}

.rp-footer {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  padding-top: clamp(12px, 2vh, 18px);
}

.rp-brand {
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.rp-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
}

.rp-legal a {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  padding: 0 13px;
  transition: color 160ms ease;
}

.rp-legal a:first-child {
  border-left: none;
  padding-left: 0;
}

.rp-legal a:hover {
  color: #fff;
}

.rp-credit {
  color: rgba(255, 255, 255, 0.42);
  font-size: 12px;
}

.rp-credit a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .rp-inner {
    gap: 14px;
    padding-top: 88px;
  }

  .rp-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .rp-score strong {
    font-size: 48px;
  }

  .rp-grid {
    display: flex;
    gap: 12px;
    margin: 0 -22px;
    overflow-x: auto;
    padding: 0 22px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .rp-grid::-webkit-scrollbar {
    display: none;
  }

  .rp-card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  .rp-cta-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .rp-footer {
    justify-content: flex-start;
  }

  .rp-credit {
    width: 100%;
  }
}

.panel img,
.panel video {
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

#we-are video {
  object-position: center;
}

#programs img,
#club img,
#stories img,
#team img {
  object-position: center;
}

#coaches img {
  object-position: center right;
}

/* Portrait photos in a landscape panel: anchor near the top so the faces
   survive the cover-crop instead of being cut off above the fold.
   #team braucht das NICHT mehr: dort liefert <picture> seit 11.08.2026 je
   Breakpoint das passende Seitenverhältnis (16:9 Desktop, 9:16 Handy),
   deshalb bleibt es bei zentriertem, verlustarmem Zuschnitt. */

/* #contact liefert per <picture> jetzt 16:9 bzw. 9:16 — der frühere
   Versatz (center 16%) war nur ein Ausgleich für den Zwangs-Crop. */

#rehasport img {
  object-position: center 18%;
}

/* Keeps the studio sign and door in frame rather than the empty forecourt. */
#zugang img {
  object-position: center 34%;
}

/* Panel CTA row — centred on desktop to match .copy, left-aligned on mobile
   where .copy switches to text-align: left. */
.copy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.shade {
  background:
    radial-gradient(circle at 12% 42%, rgba(24, 31, 62, 0.34), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.34)),
    rgba(0, 0, 0, 0.18);
  inset: 0;
  position: absolute;
}

/* Panel-Text sitzt im unteren Drittel statt mittig: Das Bild/Video bleibt
   dadurch frei sichtbar und der Blick landet direkt über dem CTA.
   (Mobil steht der Block ohnehin schon unten links.) */
.copy {
  bottom: clamp(72px, 12vh, 132px);
  left: 50%;
  max-width: min(920px, calc(100vw - 48px));
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
}

.copy h1,
.copy h2 {
  /* KEIN white-space: nowrap mehr. Es zwang die Überschrift in eine Zeile;
     passen konnte sie dann nur, indem clamp() die Schrift kleinreduzierte —
     bei 970px landete sie auf 45px und stand mit 88px Restrand gequetscht
     über die volle Breite. Jetzt darf sie umbrechen, dadurch trägt sie auch
     wieder eine selbstbewusste Größe. `in Hermannsburg` bleibt über das
     <span class="nowrap"> im HTML zusammen.
     text-wrap: balance verteilt die Zeilen gleichmäßig statt lang/kurz. */
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 900;
  line-height: 1.02;
  margin: 0 0 18px;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.26);
  text-wrap: balance;
}

.copy p {
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 700;
  line-height: 1.6;
  margin: 0 auto 28px;
  /* 780px waren bei zentriertem Satz zu lang (~70 Zeichen). 620px liegen
     bei ~55 Zeichen und lassen sich deutlich leichter verfolgen. */
  max-width: 620px;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
  /* Verhindert Schusterjungen: vorher stand „die Uhr." als 58px kurze
     Restzeile allein. Browser ohne Unterstützung ignorieren es folgenlos. */
  text-wrap: pretty;
}

.cta {
  background: var(--glass);
  border-radius: 999px;
  color: var(--ink);
  display: inline-flex;
  font-size: 17px;
  font-weight: 900;
  min-width: 146px;
  justify-content: center;
  padding: 15px 26px 16px;
  transition: background 160ms ease, transform 160ms ease;
}

.cta:hover {
  background: #fff;
  transform: translateY(-1px);
}

.dots {
  display: grid;
  gap: 16px;
  position: fixed;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 18;
}

.dot {
  background: rgba(255, 255, 255, 0.88);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 9px;
  opacity: 0.78;
  padding: 0;
  position: relative;
  width: 9px;
}

.dot.active::before {
  border: 2px solid #fff;
  border-radius: 50%;
  content: "";
  height: 17px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 17px;
}

.reviews-panel {
  background:
    radial-gradient(circle at 18% 0%, rgba(88, 116, 118, 0.18), transparent 34%),
    linear-gradient(180deg, #0d1c21, #0a171c);
  color: rgba(255, 255, 255, 0.92);
  overflow-y: auto;
}

.reviews-page {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100%;
  padding: 112px clamp(30px, 4.2vw, 78px) 36px;
}

.reviews-page h1 {
  font-size: clamp(22px, 1.55vw, 30px);
  font-weight: 1000;
  line-height: 1;
  margin: 0 0 18px;
  text-align: center;
}

.rating-banner {
  align-items: center;
  background: rgba(29, 45, 51, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  display: flex;
  justify-content: space-between;
  margin: 0 auto 16px;
  max-width: 1534px;
  min-height: 72px;
  padding: 14px 24px;
  width: 80vw;
}

.rating-copy {
  display: grid;
  gap: 9px;
}

.rating-source {
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 900;
  letter-spacing: 0;
}

.rating-source span {
  background: linear-gradient(90deg, #6aa1ff, #ff6b5f 42%, #f7c843 70%, #4fb978);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rating-score {
  align-items: center;
  display: flex;
  gap: 12px;
  line-height: 1;
}

.rating-score strong {
  font-size: 25px;
}

.rating-score span,
.stars {
  color: #fac643;
  font-size: 23px;
  letter-spacing: 1px;
}

.rating-score small {
  color: rgba(255, 255, 255, 0.54);
  font-size: 13px;
  font-weight: 900;
}

.review-button {
  align-items: center;
  background: #76b82a;
  border-radius: 7px;
  box-shadow: 0 12px 28px rgba(118, 184, 42, 0.22);
  display: inline-flex;
  font-size: 15px;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  transition: background 160ms ease, transform 160ms ease;
}

.review-button:hover {
  background: #4d8aff;
  transform: translateY(-1px);
}

.review-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin: 0 auto;
  max-width: 1534px;
  width: 80vw;
}

.review-item {
  display: grid;
  gap: 14px;
}

.review-card {
  background: rgba(29, 45, 51, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
  min-height: 160px;
  padding: 18px 20px;
  position: relative;
}

.review-card::after {
  border: 18px solid transparent;
  border-left-color: rgba(29, 45, 51, 0.94);
  bottom: -13px;
  content: "";
  height: 0;
  left: 28px;
  position: absolute;
  transform: rotate(38deg);
  width: 0;
}

.review-card p {
  font-size: clamp(15px, 0.9vw, 17px);
  font-weight: 850;
  line-height: 1.42;
  margin: 8px 0 6px;
}

.review-card span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 16px;
  font-weight: 900;
}

.reviewer {
  align-items: center;
  display: flex;
  gap: 12px;
  min-height: 44px;
}

.reviewer strong {
  font-size: clamp(14px, 0.82vw, 16px);
  line-height: 1.2;
}

.avatar {
  align-items: center;
  background: linear-gradient(135deg, #426f91, #f3b56d);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 42px;
  font-size: 13px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.avatar.warm {
  background: linear-gradient(135deg, #c9b093, #526d7b);
}

.avatar.rose {
  background: linear-gradient(135deg, #dfb1a0, #684c73);
}

.avatar.violet {
  background: #656ed1;
}

.avatar.light {
  background: linear-gradient(135deg, #f2f2f2, #9babb0);
  color: #213036;
}

.review-footer {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: clamp(32px, 4vh, 48px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 48px;
}

.review-footer [data-rexity-credit] {
  grid-column: 1 / -1;
}

.footer-brand {
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  max-width: 300px;
}

.footer-nav {
  display: flex;
  justify-content: flex-end;
}

.footer-nav a {
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  min-height: 18px;
  padding: 0 14px;
  transition: color 160ms ease;
}

.footer-nav a:first-child {
  border-left: none;
  padding-left: 0;
}

.footer-nav a:hover {
  color: #fff;
}

/* Brand intro overlay — wordmark slides in, panel wipes off to the right. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0d1c21;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: introOut 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1.5s forwards;
}
.intro-word {
  color: #fff;
  font-size: clamp(2.6rem, 10vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  transform: translateX(-60px);
  opacity: 0;
  animation: introWordIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}

.intro-word b {
  color: #76b82a;
  font-weight: 800;
}

/* Logo-Reveal: aus der Unschärfe heranschweben, dann grüner Glow.
   Timing so gelegt, dass alles VOR dem introOut-Fade (Start 1,5 s) fertig ist. */
.intro-logo {
  /* Rundes Badge (800x838) statt breiter Wortmarke — nach Höhe begrenzen,
     damit es auch auf flachen Viewports komplett sichtbar bleibt. */
  height: auto;
  max-height: 62vh;
  width: min(62vw, 360px);
  animation: introLogoIn 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

@keyframes introLogoIn {
  0% {
    opacity: 0;
    transform: scale(1.18) translateY(14px);
    filter: blur(16px) drop-shadow(0 0 0 rgba(118, 184, 42, 0));
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0) drop-shadow(0 0 30px rgba(118, 184, 42, 0.32));
  }
}

/* Lichtstreif, der einmal über die Badge-Konturen läuft. Die PNG-Alpha dient
   als Maske, damit der Glanz NUR auf dem Logo selbst sichtbar ist. */
.intro::after {
  animation: introShine 0.65s ease-in-out 1.05s both;
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255, 255, 255, 0.9) 50%,
    transparent 58%
  );
  background-position: -80% 0;
  background-repeat: no-repeat;
  background-size: 260% 100%;
  content: "";
  inset: 0;
  -webkit-mask-image: url("assets/logo-badge-light.png?v=1");
  mask-image: url("assets/logo-badge-light.png?v=1");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: min(62vw, 360px) auto;
  mask-size: min(62vw, 360px) auto;
  pointer-events: none;
  position: absolute;
}

@keyframes introShine {
  from {
    background-position: -80% 0;
  }
  to {
    background-position: 180% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-logo {
    animation: none;
    filter: none;
    opacity: 1;
    transform: none;
  }

  .intro::after {
    display: none;
  }
}
@keyframes introWordIn {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes introOut {
  to {
    transform: translateX(105%);
  }
}
.no-intro .intro {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none;
  }
}

.detail-main {
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.detail-panel {
  align-items: center;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: 128px clamp(28px, 6vw, 96px) 58px;
  position: relative;
}

/* Auch <picture>-Wrapper abdecken: Der frühere Direktkind-Selektor griff
   nicht mehr, sobald ein <img> in <picture> steckt — das Bild verlor dann
   position:absolute und object-fit und rutschte in Originalgröße ins Layout. */
.detail-panel > img,
.detail-panel > picture > img,
.detail-panel > video {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}

/* Personen-Aufmacher: Bei Portraits steht der Kopf im oberen Bildbereich.
   Der Panel-Rahmen ist deutlich breiter als ein 9:16-Foto, `cover`
   schneidet deshalb oben und unten je ~16 % ab — und genau da ist der
   Kopf. `top` verankert den Ausschnitt oben, der Beschnitt passiert
   ausschliesslich unten (Beine), wo nichts verloren geht.
   NUR fuer Bilder mit Personen setzen; bei Raumaufnahmen ist die
   zentrierte Standardregel richtig. */
.detail-panel > picture > img.focus-top,
.detail-panel > img.focus-top {
  object-position: center top;
}

.detail-panel .shade {
  z-index: 1;
}

.detail-content {
  display: grid;
  gap: 26px;
  max-width: min(760px, calc(100vw - 56px));
  position: relative;
  z-index: 2;
}

.detail-kicker {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.detail-content h1 {
  font-size: clamp(48px, 5vw, 78px);
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 0.96;
  margin: 0;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.detail-content p {
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 760;
  line-height: 1.55;
  margin: 0;
  max-width: 650px;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ghost-cta {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 16px;
  font-weight: 900;
  justify-content: center;
  min-height: 50px;
  min-width: 136px;
  padding: 0 22px;
}

.detail-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: min(900px, calc(100vw - 56px));
  position: relative;
  z-index: 2;
}

.detail-card {
  background: rgba(17, 29, 34, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  min-height: 142px;
  padding: 22px;
}

.detail-card strong {
  display: block;
  font-size: 17px;
  font-weight: 1000;
  margin-bottom: 10px;
}

.detail-card span {
  color: rgba(255, 255, 255, 0.72);
  display: block;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.45;
}

.split-detail {
  align-items: end;
  display: flex;
  gap: clamp(24px, 5vw, 74px);
  justify-content: space-between;
  position: relative;
  z-index: 2;
  width: 100%;
}

.pricing-list {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
}

.price-row {
  align-items: center;
  background: rgba(17, 29, 34, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  padding: 18px 20px;
}

.price-row strong {
  font-size: 17px;
}

.price-row span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 16px;
  font-weight: 900;
}

.standalone-reviews {
  overflow-y: auto;
}

.standalone-reviews .reviews-page {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 128px;
}

@media (max-width: 1180px) {
  .reviews-page {
    padding-top: 64px;
  }

  .rating-banner,
  .review-grid {
    width: min(88vw, 930px);
  }

  .review-card {
    min-height: 204px;
  }

  .review-footer {
    gap: 28px;
    grid-template-columns: 1fr auto;
    margin-top: 54px;
  }

  .footer-nav {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 1320px) and (min-width: 1081px) {
  .site-header {
    gap: 18px;
    padding: 28px 34px;
  }

  .nav-panel {
    gap: 19px;
  }

  .nav-panel a {
    font-size: 15px;
  }

  .join-action {
    min-height: 52px;
    min-width: 126px;
    padding: 0 22px;
  }
}

/* MENU-BREAKPOINT: Off-Canvas-Menü bis 1080px — script.js menuQuery MUSS
   denselben Maximalwert verwenden (dort ebenfalls markiert). */
@media (max-width: 1080px) and (min-width: 761px) {
  .site-header {
    padding: 26px 34px;
  }

  .brand {
    font-size: 30px;
    max-width: calc(100vw - 130px);
  }

  .menu-toggle {
    display: grid;
    height: 44px;
    width: 44px;
  }

  .nav-panel {
    align-items: flex-start;
    background: rgba(10, 10, 10, 0.94);
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    min-height: 100svh;
    opacity: 0;
    padding: 92px 34px 34px;
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: opacity 180ms ease, transform 180ms ease;
    width: min(420px, 100vw);
    z-index: -1;
  }

  .nav-panel a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    font-size: 24px;
    line-height: 1.1;
    padding: 18px 0;
    width: 100%;
  }

  .nav-group {
    display: grid;
    width: 100%;
  }

  .nav-group::after {
    display: none;
  }

  .submenu {
    background: transparent;
    gap: 0;
    left: auto;
    min-width: 0;
    opacity: 1;
    padding: 0 0 0 18px;
    pointer-events: auto;
    position: static;
    transform: none;
  }

  .submenu a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 18px;
    padding: 12px 0;
  }

  .join-action {
    display: none;
  }

  .detail-panel {
    align-items: end;
    padding: 96px 22px 34px;
  }

  .detail-content {
    gap: 18px;
    max-width: calc(100vw - 44px);
  }

  .detail-kicker {
    font-size: 12px;
  }

  .detail-content h1 {
    font-size: clamp(38px, 12vw, 54px);
    white-space: normal;
  }

  .detail-content p {
    font-size: 15px;
    line-height: 1.45;
  }

  .detail-actions {
    gap: 10px;
  }

  .ghost-cta,
  .detail-actions .cta {
    font-size: 15px;
    min-height: 48px;
  }

  .split-detail {
    align-items: stretch;
    flex-direction: column;
    gap: 24px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    max-width: calc(100vw - 44px);
  }

  .detail-card {
    min-height: 0;
    padding: 18px;
  }

  .price-row {
    padding: 16px;
  }

  .standalone-reviews .reviews-page {
    padding-top: 96px;
  }

  .detail-panel {
    padding: 112px 22px 42px;
  }

  .detail-content {
    gap: 20px;
    max-width: calc(100vw - 44px);
  }

  .detail-content h1 {
    font-size: clamp(40px, 11.5vw, 58px);
  }

  .detail-content p {
    font-size: 16px;
    max-width: 560px;
  }

  .split-detail {
    align-items: start;
    flex-direction: column;
    gap: 30px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    max-width: calc(100vw - 44px);
  }
}

@media (max-width: 760px) {
  html,
  body {
    min-height: 100svh;
  }

  .site-header {
    padding: max(18px, env(safe-area-inset-top)) 22px 16px;
  }

  .brand {
    font-size: clamp(19px, 5.6vw, 22px);
    max-width: calc(100vw - 96px);
    white-space: normal;
  }

  .menu-toggle {
    display: grid;
    height: 44px;
    width: 44px;
  }

  .menu-toggle span {
    width: 28px;
  }

  .menu-toggle span:last-child {
    width: 20px;
  }

  /* Im geöffneten Zustand setzt die Basisregel den unteren Strich auf 31px —
     das ist der Desktop-Wert. Hier sind die Striche 28px breit, sonst wird
     das X ungleich lang und sitzt schief. */
  .menu-open .menu-toggle span:last-child {
    width: 28px;
  }

  .nav-panel {
    align-items: flex-start;
    background: rgba(10, 10, 10, 0.94);
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    min-height: 100svh;
    opacity: 0;
    padding: calc(78px + env(safe-area-inset-top)) 26px calc(26px + env(safe-area-inset-bottom));
    pointer-events: none;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: opacity 180ms ease, transform 180ms ease;
    width: 100vw;
    z-index: -1;
  }

  .nav-panel a {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    font-size: 23px;
    line-height: 1.1;
    padding: 18px 0;
    width: 100%;
  }

  .nav-group {
    display: grid;
    width: 100%;
  }

  .nav-group::after {
    display: none;
  }

  .submenu {
    background: transparent;
    gap: 0;
    left: auto;
    min-width: 0;
    opacity: 1;
    padding: 0 0 0 18px;
    pointer-events: auto;
    position: static;
    transform: none;
  }

  .submenu a {
    color: rgba(255, 255, 255, 0.68);
    font-size: 18px;
    padding: 12px 0;
  }

  .join-action {
    display: none;
  }

  .detail-panel {
    align-items: end;
    padding: 96px 22px 34px;
  }

  .detail-content {
    gap: 18px;
    max-width: calc(100vw - 44px);
  }

  .detail-kicker {
    font-size: 12px;
  }

  .detail-content h1 {
    font-size: clamp(38px, 12vw, 54px);
    white-space: normal;
  }

  .detail-content p {
    font-size: 15px;
    line-height: 1.45;
  }

  .detail-actions {
    gap: 10px;
  }

  .ghost-cta,
  .detail-actions .cta {
    font-size: 15px;
    min-height: 48px;
  }

  .split-detail {
    align-items: stretch;
    flex-direction: column;
    gap: 24px;
  }

  .detail-grid {
    grid-template-columns: 1fr;
    max-width: calc(100vw - 44px);
  }

  .detail-card {
    min-height: 0;
    padding: 18px;
  }

  .price-row {
    padding: 16px;
  }

  .standalone-reviews .reviews-page {
    padding-top: 96px;
  }

  .sections {
    height: 100svh;
  }

  .panel img,
  .panel video {
    object-position: 58% center;
  }

  #we-are video {
    object-position: center;
  }

  #programs img,
  #coaches img {
    object-position: 67% center;
  }

  #club img {
    object-position: 53% center;
  }

  #stories img {
    object-position: 70% center;
  }

  /* On mobile the panel is portrait, so these portrait photos need almost no
     crop. (#team liefert per <picture> bereits 9:16 — kein Versatz nötig.) */

  #contact img,
  #rehasport img,
  #zugang img {
    object-position: center;
  }

  .copy-actions {
    justify-content: flex-start;
  }

  /* Mobil lag früher bis zu ~83 % Schwarz über dem Video — das Motiv war kaum
     noch zu erkennen. Abgesenkt auf ~70 % am unteren Rand und ~27 % oben.
     Der Text bleibt lesbar, weil die Kopfzeile ohnehin im hellsten Drittel
     sitzt und der CTA einen eigenen Hintergrund hat. Nicht weiter absenken,
     ohne die Subline gegenzuprüfen — die leidet zuerst. */
  .shade {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.04) 24%, rgba(0, 0, 0, 0.38) 58%, rgba(0, 0, 0, 0.55)),
      radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.34) 74%);
  }

  .copy {
    bottom: calc(86px + env(safe-area-inset-bottom));
    left: 22px;
    max-width: calc(100vw - 44px);
    top: auto;
    transform: none;
    text-align: left;
  }

  .copy h1,
  .copy h2 {
    font-size: clamp(30px, 8.6vw, 40px);
    line-height: 1.02;
    margin-bottom: 10px;
    white-space: normal;
  }

  .copy p {
    font-size: clamp(13.5px, 3.7vw, 15px);
    line-height: 1.42;
    margin: 0 0 16px;
    max-width: min(340px, calc(100vw - 56px));
  }

  .cta {
    font-size: 16px;
    min-height: 52px;
    min-width: 142px;
    padding: 15px 24px;
  }

  .dots {
    bottom: calc(24px + env(safe-area-inset-bottom));
    display: flex;
    gap: 13px;
    left: 22px;
    right: auto;
    top: auto;
    transform: none;
  }

  .dot {
    height: 8px;
    width: 8px;
  }

  .dot.active::before {
    height: 18px;
    width: 18px;
  }

  .reviews-open .dots {
    display: none;
  }

  .reviews-page {
    display: block;
    min-height: 100%;
    padding: 88px 18px 72px;
  }

  .reviews-page h1 {
    font-size: 25px;
    line-height: 1.08;
    margin-bottom: 18px;
    text-align: left;
  }

  .rating-banner {
    align-items: flex-start;
    border-radius: 21px;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
    min-height: 0;
    padding: 18px;
    width: 100%;
  }

  .rating-source {
    font-size: 18px;
  }

  .rating-score {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  .rating-score strong {
    font-size: 22px;
  }

  .rating-score span,
  .stars {
    font-size: 19px;
  }

  .review-button {
    font-size: 14px;
    min-height: 42px;
    width: 100%;
  }

  .review-grid {
    display: flex;
    gap: 16px;
    margin: 0 -18px;
    overflow-x: auto;
    padding: 0 18px 8px;
    scroll-snap-type: x mandatory;
    width: auto;
  }

  .review-item {
    flex: 0 0 min(82vw, 310px);
    scroll-snap-align: start;
  }

  .review-card {
    border-radius: 21px;
    min-height: 202px;
    padding: 20px;
  }

  .review-card p {
    font-size: 15px;
  }

  .review-card span {
    font-size: 15px;
  }

  .review-footer {
    align-items: flex-start;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 30px;
    min-height: 0;
  }

  .footer-brand {
    font-size: 28px;
  }

  .footer-nav {
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
  }

  .footer-nav a {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 14px;
    min-height: 46px;
    padding: 0 16px 0 0;
  }

  .footer-nav a:last-child {
    border-right: 0;
  }
}

@media (max-width: 380px) {
  .site-header {
    padding-left: 18px;
    padding-right: 18px;
  }

  .copy {
    bottom: calc(76px + env(safe-area-inset-bottom));
    left: 18px;
    max-width: calc(100vw - 36px);
  }

  .copy h1,
  .copy h2 {
    font-size: clamp(27px, 8.4vw, 34px);
  }

  .copy p {
    font-size: 13.5px;
    max-width: calc(100vw - 48px);
  }

  .dots {
    left: 18px;
  }
}

/* Legal pages (Impressum, Datenschutz, AGB, Haftungsausschluss) — plain,
   scrollable text layout under the fixed header. */
.legal-main {
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-inner {
  margin: 0 auto;
  max-width: 760px;
  padding: 148px 28px 90px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15.5px;
  line-height: 1.7;
}

.legal-inner h1 {
  color: #fff;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.1;
  margin: 0 0 6px;
}

.legal-updated {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin: 0 0 36px;
}

.legal-inner h2 {
  color: #fff;
  font-size: 19px;
  margin: 34px 0 10px;
}

.legal-inner p,
.legal-inner li {
  margin: 0 0 12px;
}

.legal-inner ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.legal-inner a {
  color: #a3d977;
  text-decoration: underline;
}

.legal-placeholder {
  background: rgba(118, 184, 42, 0.12);
  border: 1px dashed rgba(118, 184, 42, 0.45);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  margin: 0 0 28px;
  padding: 12px 16px;
}

.legal-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 48px;
  padding-top: 20px;
}

.legal-nav a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  text-decoration: none;
}

.legal-nav a:hover {
  color: #fff;
}

/* Below-hero content sections on subpages (booking, contact info). */
.page-section {
  background: #0e1013;
  padding: clamp(56px, 8vh, 96px) clamp(24px, 6vw, 96px);
  position: relative;
}

.page-section-inner {
  margin: 0 auto;
  max-width: 1040px;
}

.page-section h2 {
  color: #fff;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  margin: 0 0 10px;
}

.page-section .section-lead {
  color: rgba(255, 255, 255, 0.68);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 34px;
  max-width: 560px;
}

/* Lead forms (Probetraining + Kontakt) */
.lead-form {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}

.lead-form .field {
  display: grid;
  gap: 7px;
}

.lead-form .field.full {
  grid-column: 1 / -1;
}

/* Hinweis unter einem Feld — z. B. „bitte keine Gesundheitsdaten senden". */
.field-hint {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
}

.field-hint strong {
  color: rgba(255, 255, 255, 0.85);
}

.lead-form label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  background: #16181a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: #fff;
  font: inherit;
  font-size: 15px;
  outline: none;
  padding: 13px 15px;
  transition: border-color 160ms ease;
  width: 100%;
}

.lead-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa3ad' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 15px center;
  background-repeat: no-repeat;
}

.lead-form textarea {
  min-height: 110px;
  resize: vertical;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: #76b82a;
}

.lead-form .check {
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.68);
  display: flex;
  font-size: 13.5px;
  gap: 10px;
  grid-column: 1 / -1;
  line-height: 1.5;
}

.lead-form .check input {
  accent-color: #76b82a;
  height: 18px;
  margin-top: 1px;
  width: 18px;
}

.lead-form .check a {
  color: #a3d977;
  text-decoration: underline;
}

.lead-form .submit {
  grid-column: 1 / -1;
}

.lead-form button[type="submit"] {
  background: #76b82a;
  border: none;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  min-height: 54px;
  padding: 15px 34px;
  transition: transform 200ms ease, filter 200ms ease;
}

.lead-form button[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.lead-form button[type="submit"]:disabled {
  cursor: default;
  filter: grayscale(0.4);
  transform: none;
}

.form-status {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  grid-column: 1 / -1;
  margin: 0;
}

.form-status-error {
  color: #ff8f8f;
}

.form-success {
  background: rgba(118, 184, 42, 0.1);
  border: 1px solid rgba(118, 184, 42, 0.4);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.6;
  padding: 26px 28px;
}

.form-success strong {
  color: #fff;
  display: block;
  font-size: 19px;
  margin-bottom: 8px;
}

.form-success a {
  color: #a3d977;
  text-decoration: underline;
}

/* Contact info cards (address, hours, direct contact) */
.info-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 44px;
}

.info-card {
  background: #16181a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 22px 24px;
}

.info-card h3 {
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.info-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0;
}

.info-card p + p {
  margin-top: 14px;
}

/* Personalzeiten: Tag links, Zeit rechts. Zwei Spalten statt einer
   Textzeile, damit die Zeiten untereinander stehen und vergleichbar
   sind — auf dem Handy bricht die Zeit unter den Tag. */
.hours-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.hours-list li {
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  flex-wrap: wrap;
  font-size: 14.5px;
  gap: 4px 14px;
  justify-content: space-between;
  line-height: 1.5;
}

.hours-list li span:first-child {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}

.hours-list li span:last-child {
  font-variant-numeric: tabular-nums;
}

.info-card a {
  color: #a3d977;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .lead-form {
    grid-template-columns: 1fr;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}

/* Team cards (Trainer page) */
.team-avatar {
  align-items: center;
  background: linear-gradient(135deg, #76b82a, #4a7a1e);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 17px;
  font-weight: 700;
  height: 52px;
  justify-content: center;
  margin-bottom: 14px;
  width: 52px;
}

.team-avatar.warm {
  background: linear-gradient(135deg, #d9a765, #8a5a2b);
}

.team-avatar.rose {
  background: linear-gradient(135deg, #c98ba2, #7e4258);
}

.info-card .role {
  color: #a3d977;
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* Story quote cards */
.story-quote {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.65;
  margin: 0 0 14px;
}

.story-name {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  font-weight: 700;
}

/* Kursplan table (Kurse page) */
.kursplan-wrap {
  overflow-x: auto;
}

.kursplan {
  border-collapse: collapse;
  min-width: 560px;
  width: 100%;
}

.kursplan th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  color: #a3d977;
  font-size: 12.5px;
  letter-spacing: 0.07em;
  padding: 12px 16px;
  text-align: left;
  text-transform: uppercase;
}

.kursplan td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  padding: 14px 16px;
}

.kursplan td.tba {
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

.kursplan-note {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin: 18px 0 26px;
}

.kursplan-note a {
  color: #a3d977;
  text-decoration: underline;
}

/* Team photo cards */
.team-photo-card {
  background: #16181a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

.team-photo-card img {
  aspect-ratio: 4 / 5;
  display: block;
  /* height:auto ist Pflicht, sobald das <img> ein height-Attribut trägt —
     sonst gewinnt der Attributwert und aspect-ratio greift nicht. */
  height: auto;
  object-fit: cover;
  /* Porträts: Gesichter sitzen im oberen Drittel, deshalb nicht mittig
     beschneiden. */
  object-position: center 22%;
  width: 100%;
}

/* Qualifikationen in den Team-Karten */
.tp-quals {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.tp-quals li {
  color: rgba(255, 255, 255, 0.74);
  font-size: 13.5px;
  line-height: 1.4;
  padding-left: 15px;
  position: relative;
}

.tp-quals li::before {
  color: var(--accent, #76b82a);
  content: "›";
  font-weight: 900;
  left: 0;
  position: absolute;
}

.tp-quals li small {
  color: rgba(255, 255, 255, 0.5);
  display: block;
  font-size: 12.5px;
}

.team-photo-card .tp-body {
  padding: 18px 20px 20px;
}

.team-photo-card h3 {
  color: #fff;
  font-size: 17px;
  margin: 0 0 4px;
}

.team-photo-card .role {
  margin-bottom: 8px;
}

.team-photo-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Wide feature image (team hero, studio shots) */
.feature-img {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  display: block;
  margin: 0 0 34px;
  max-height: 460px;
  object-fit: cover;
  width: 100%;
}

/* Google rating chip */
.g-note {
  align-items: center;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  font-size: 12.5px;
  gap: 6px;
  margin-top: 6px;
}

/* Wellness cards (Sauna, Solarium, Ruheraum) */
.wellness-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 34px;
}

.wellness-card {
  background: #16181a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  margin: 0;
  overflow: hidden;
}

/* 16:9 entspricht dem Seitenverhältnis ALLER drei Quelldateien
   (sauna-, solarium- und ruheraum-16x9 sind je 1672x941). Dadurch ist
   in jeder Kachel das VOLLSTÄNDIGE Bild zu sehen, ohne Beschnitt — auf
   jeder Bildschirmbreite. club.html liefert bewusst KEIN
   Hochformat-<source> mehr an diese Kacheln: ein 9:16-Bild in einem
   16:9-Rahmen zeigte nur 42 % des Fotos.
   Beim Ändern immer gegen die echten Dateimaße prüfen. */
.wellness-card img {
  aspect-ratio: 16 / 9;
  display: block;
  /* PFLICHT, sonst gewinnt das height-Attribut aus dem HTML gegen
     aspect-ratio (HANDOVER, Gotcha 5). Ohne diese Zeile rendern die
     Kacheln 331x893 statt 331x186 — also als extrem hohe, stark
     beschnittene Streifen. Genau das war hier bis zum 14.08. der Fall. */
  height: auto;
  object-fit: cover;
  width: 100%;
}

.wellness-card figcaption {
  padding: 20px 22px 22px;
}

.wellness-card h3 {
  color: #fff;
  font-size: 18px;
  margin: 0 0 8px;
}

.wellness-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.wellness-times {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.wellness-times li {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  padding: 8px 0;
}

.wellness-times strong {
  color: #a3d977;
  display: inline-block;
  min-width: 78px;
}

@media (max-width: 900px) {
  .wellness-grid {
    grid-template-columns: 1fr;
  }

  /* KEINE Abweichung vom 16:9-Rahmen mehr (20.08.2026).
     Vorher stand hier 4/3, damit die Bilder einspaltig mehr Präsenz
     haben. Zusammen mit den Querformat-Dateien schnitt das aber links
     und rechts je ein Achtel weg — sichtbar waren nur 75 % des Fotos.
     Sauna, Solarium und Ruheraum sind Raumaufnahmen: Was am Rand
     steht (Bank, Liege, Gerät) gehört zur Bildaussage und darf nicht
     verschwinden. Querformat-Bild in Querformat-Rahmen zeigt 100 %.
     Wer hier wieder ein anderes Verhältnis setzt, schneidet zwangs-
     läufig etwas weg — dann vorher gegen die echten Dateimaße prüfen. */
}

/* Area photo gallery (Studio page) */
.area-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 26px;
}

.area-card {
  background: #16181a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin: 0;
  overflow: hidden;
  transition: transform 240ms ease, border-color 240ms ease;
}

.area-card:hover {
  border-color: rgba(163, 217, 119, 0.4);
  transform: translateY(-4px);
}

.area-card img {
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  width: 100%;
}

.area-card figcaption {
  padding: 16px 18px 18px;
}

.area-card h3 {
  color: #fff;
  font-size: 16.5px;
  margin: 0 0 6px;
}

.area-card p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1080px) {
  .area-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .area-grid {
    grid-template-columns: 1fr;
  }
}

/* Honeypot: hidden from humans, visible to naive bots. Not display:none —
   some bots skip those; this keeps it in the layout but off-screen. */
.hp-field {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

/* Weekly course plan */
.week-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 8px;
}

.day-card {
  background: #16181a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px 18px 20px;
}

.day-card h3 {
  border-bottom: 1px solid rgba(163, 217, 119, 0.35);
  color: #a3d977;
  font-size: 14px;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  padding-bottom: 10px;
  text-transform: uppercase;
}

.day-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.day-card li {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px;
  line-height: 1.4;
  padding: 9px 0;
}

.day-card li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.day-card .t {
  color: rgba(255, 255, 255, 0.55);
  display: block;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* Rehasport highlight */
.reha-box {
  background: linear-gradient(160deg, rgba(118, 184, 42, 0.14), rgba(118, 184, 42, 0.04));
  border: 1px solid rgba(163, 217, 119, 0.4);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 40px);
}

.reha-box h2 {
  margin-top: 6px;
}

.reha-times {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.reha-times li {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  padding: 9px 16px;
}

.reha-times strong {
  color: #a3d977;
}

@media (max-width: 1080px) {
  .week-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .week-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   Sprint 2 — Zugänglichkeit, Footer, Robustheit
   ========================================================================= */

/* Skip-Link: unsichtbar, bis er den Fokus bekommt. Erstes fokussierbares
   Element jeder Seite, damit die 8-Punkte-Navigation überspringbar ist. */
.skip-link {
  background: #fff;
  border-radius: 0 0 10px 0;
  color: #111;
  font-weight: 900;
  left: 0;
  padding: 12px 18px;
  position: fixed;
  top: 0;
  transform: translateY(-120%);
  transition: transform 140ms ease;
  z-index: 100;
}

.skip-link:focus-visible,
.skip-link:focus {
  transform: translateY(0);
}

/* Sichtbarer Fokus überall. Vorher entfernte das Formular den Outline und
   ersetzte ihn nur durch eine 1px-Randfarbe — für Tastatur- und
   Sehbehinderten-Bedienung zu wenig. */
:focus-visible {
  outline: 2px solid #a3d977;
  outline-offset: 3px;
}

.lead-form input:focus-visible,
.lead-form textarea:focus-visible,
.lead-form select:focus-visible {
  border-color: var(--accent, #76b82a);
  outline: 2px solid #a3d977;
  outline-offset: 2px;
}

/* Formularmeldungen für Screenreader (role=status/alert wird in forms.js
   gesetzt) — hier nur die Optik. */
.form-status,
.form-error {
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 14px;
}

.form-error {
  background: rgba(220, 76, 70, 0.14);
  border: 1px solid rgba(220, 76, 70, 0.5);
}

/* --------------------------------------------------------------- Footer
   Impressum und Datenschutz müssen nach § 5 DDG von jeder Seite unmittelbar
   erreichbar sein — vorher gab es nur auf Startseite und Bewertungen einen
   Footer. */
.site-footer {
  background: #0d0f10;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  padding: 34px 22px 40px;
}

.site-footer-inner {
  display: grid;
  gap: 14px;
  margin: 0 auto;
  max-width: 1120px;
}

.sf-brand {
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.sf-nav,
.sf-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.sf-nav a,
.sf-legal a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13.5px;
  transition: color 160ms ease;
}

.sf-nav a:hover,
.sf-legal a:hover {
  color: #fff;
}

.sf-legal a {
  font-size: 12.5px;
}

.sf-credit {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding-top: 14px;
}

.sf-credit a {
  color: inherit;
  text-decoration: underline;
}

/* ------------------------------------------------- Scroll-Snap-Robustheit
   Feste Viewport-Höhe plus overflow:hidden schneidet Inhalt ab, sobald der
   Text größer wird, das Gerät quer liegt oder auf 200 % gezoomt wird. Dann
   lieber normal scrollen lassen als Inhalt verstecken. */
@media (max-height: 560px), (max-width: 380px) {
  .sections {
    scroll-snap-type: y proximity;
  }

  .panel {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
}

/* Bei stark vergrößerter Schrift Snapping ganz abschalten. */
@media (prefers-reduced-motion: reduce) {
  .sections {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

/* Hinweis: Die sichtbaren KI-Bild-Labels wurden am 09.08.2026 auf Wunsch
   von Sunny entfernt (Nutzer-Wahrnehmung). Die Einstufung der Bilder bleibt
   in docs/ki-register.md dokumentiert; vor dem oeffentlichen Launch entweder
   echte Fotos einsetzen (C10) oder Kennzeichnung erneut entscheiden. */
.area-card,
.wellness-card {
  position: relative;
}

/* Umbruch-Helfer: hält kurze Wortgruppen zusammen (z. B. „in Hermannsburg"),
   damit im Hero nicht jedes Wort einzeln umbricht. */
.nowrap {
  white-space: nowrap;
}

/* ============================================================================
   Studio-Galerien (club.html) — echte Hochformat-Aufnahmen
   ========================================================================= */

/* Abschnitts-Kopfbild. WICHTIG: height:auto, sonst gewinnt das
   height-Attribut des <img> gegen aspect-ratio (siehe Team-Karten-Bug). */
.section-hero {
  display: block;
  margin: 0 0 22px;
}

.section-hero img {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 760px) {
  .section-hero img {
    aspect-ratio: 4 / 5;
  }
}

/* Waagerechte Snap-Galerie: Hochformate bleiben hochformatig, statt in
   Querformat-Karten gequetscht zu werden. */
.studio-gallery {
  display: grid;
  gap: 14px;
  grid-auto-columns: min(72vw, 300px);
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.studio-gallery .sg-item {
  margin: 0;
  scroll-snap-align: start;
}

.studio-gallery img {
  aspect-ratio: 9 / 16;
  background: #16181a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* Ab Tablet als ruhiges Raster statt Scroller. */
@media (min-width: 761px) {
  .studio-gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    overflow-x: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-gallery {
    scroll-snap-type: none;
  }
}


/* ===================================================================
   KURSBUCHUNG — Formular + Bot-Slider (kurs-buchen.html)
   =================================================================== */
/* ===================================================================
   Agent A — CSS-Fragment fuer kurs-buchen.html
   NICHT in styles.css einfuegen, bevor der Orchestrator integriert.
   Enthaelt AUSSCHLIESSLICH neue Klassen. .lead-form, .field, .check,
   .form-status und .page-section werden wiederverwendet und hier
   bewusst NICHT umgestylt.
   =================================================================== */

/* Kurs-Select ist das Herz der Seite und traegt lange Optionstexte
   ("Montag 08:30-09:30 - Pilates (11 Plaetze frei)"). Tabellenziffern,
   damit die Uhrzeiten in der aufgeklappten Liste untereinander stehen. */
.kurs-form #kurs-select {
  font-variant-numeric: tabular-nums;
}

/* Waehrend GET /api/kurse laeuft (aria-busy am Formular) signalisieren
   wir Warten statt Kaputt — sonst wirkt das leere Select wie ein Fehler. */
.kurs-form[aria-busy="true"] {
  opacity: 0.72;
}

.kurs-form[aria-busy="true"] #kurs-select {
  cursor: progress;
}

/* Ausgebuchte Slots bleiben sichtbar, damit der Wochenplan vollstaendig
   wirkt — aber deutlich abgesetzt. */
.kurs-form #kurs-select option:disabled {
  color: rgba(255, 255, 255, 0.38);
}

/* ------------------------------------------------------------------
   Bot-Slider
   ------------------------------------------------------------------ */

.bot-slider-field {
  gap: 12px;
}

.bot-slider-label {
  /* erbt Groesse/Transform von .lead-form label — hier nur die
     Ausrichtung zum Regler darunter */
  display: block;
}

.bot-slider-wrap {
  align-items: center;
  background: #16181a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  display: flex;
  gap: 16px;
  padding: 12px 20px;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.bot-slider-wrap.is-confirmed {
  background: rgba(118, 184, 42, 0.12);
  border-color: rgba(118, 184, 42, 0.55);
}

.bot-slider-state {
  color: rgba(255, 255, 255, 0.55);
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-width: 11ch; /* verhindert Layout-Sprung beim Textwechsel */
  text-align: right;
  text-transform: uppercase;
}

.bot-slider-wrap.is-confirmed .bot-slider-state {
  color: #a3d977;
}

/* .lead-form input faerbt JEDES input dunkel und gibt ihm 13px Padding.
   Fuer type=range muss das komplett zurueckgenommen werden, sonst sitzt
   der Regler in einem zweiten Kasten im Kasten. */
.bot-slider[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: grab;
  flex: 1 1 auto;
  height: 28px;
  margin: 0;
  padding: 0;
  width: auto;
}

.bot-slider[type="range"]:active {
  cursor: grabbing;
}

.bot-slider-wrap.is-confirmed .bot-slider[type="range"] {
  cursor: default;
}

/* --- Track: WebKit/Blink --- */
.bot-slider[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  height: 8px;
}

/* --- Track: Firefox --- */
.bot-slider[type="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  height: 8px;
}

/* Firefox faerbt den bereits geschobenen Teil ein — Blink kann das ohne
   JS nicht, deshalb bleibt der Track dort einfarbig. Bewusst akzeptiert:
   der Fortschritt ist am Daumen ablesbar. */
.bot-slider[type="range"]::-moz-range-progress {
  background: #76b82a;
  border-radius: 999px;
  height: 8px;
}

/* --- Daumen: WebKit/Blink --- */
.bot-slider[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  background: #76b82a;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  height: 28px;
  /* (8px Track - 28px Daumen) / 2 = -10px, damit der Daumen mittig sitzt */
  margin-top: -10px;
  transition: background-color 200ms ease, transform 120ms ease;
  width: 28px;
}

.bot-slider[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.06);
}

/* --- Daumen: Firefox --- */
.bot-slider[type="range"]::-moz-range-thumb {
  background: #76b82a;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  height: 28px;
  transition: background-color 200ms ease;
  width: 28px;
}

.bot-slider-wrap.is-confirmed .bot-slider[type="range"]::-webkit-slider-thumb {
  background: #a3d977;
}

.bot-slider-wrap.is-confirmed .bot-slider[type="range"]::-moz-range-thumb {
  background: #a3d977;
}

/* Sichtbarer Fokusring. Der globale :focus-visible-Ring greift bei
   ::-webkit-slider-thumb nicht zuverlaessig, deshalb zusaetzlich ein
   Ring am Wrapper — sonst waere fuer Tastaturnutzer nicht erkennbar,
   dass der Regler aktiv ist. */
.bot-slider[type="range"]:focus-visible {
  outline: 2px solid #a3d977;
  outline-offset: 4px;
}

.bot-slider-wrap:focus-within {
  border-color: #76b82a;
}

.bot-slider[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(163, 217, 119, 0.4);
}

.bot-slider[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(163, 217, 119, 0.4);
}

/* Reduzierte Bewegung: Das Zurueckfedern in kurs-buchen.js laeuft ueber
   requestAnimationFrame und ist davon unberuehrt — hier nehmen wir
   wenigstens die CSS-Uebergaenge raus. */
@media (prefers-reduced-motion: reduce) {
  .bot-slider[type="range"],
  .bot-slider[type="range"]::-webkit-slider-thumb,
  .bot-slider[type="range"]::-moz-range-thumb,
  .bot-slider-wrap {
    transition: none;
  }

  .bot-slider[type="range"]:active::-webkit-slider-thumb {
    transform: none;
  }
}

@media (max-width: 560px) {
  .bot-slider-wrap {
    align-items: stretch;
    border-radius: 18px;
    flex-direction: column;
    gap: 10px;
  }

  .bot-slider-state {
    text-align: left;
  }
}


/* ===================================================================
   KURSVERWALTUNG — Adminpanel (admin.html)
   Alle Regeln sind auf .adm-* bzw. html.adm gescopt, damit sie die
   oeffentlichen Seiten nicht beeinflussen.
   =================================================================== */
/* ============================================================================
   Body & Care — Kursverwaltung (admin.html)
   SCRATCH-DATEI. Wird vom Orchestrator in styles.css integriert.
   styles.css wird hier NICHT angefasst (SPEC, Zuständigkeiten).

   Alles ist mit .adm- präfixiert, damit beim Zusammenführen garantiert
   nichts aus der öffentlichen Website überschrieben wird.

   Diese Datei wird NACH styles.css geladen — das ist Absicht, weil sie ein
   paar globale Regeln der Website gezielt zurücknehmen muss (siehe unten).
   ========================================================================= */

/* ---------------------------------------------------------------------------
   0. Rücknahmen aus styles.css
   styles.css setzt html,body { height:100%; overflow:hidden } für das
   Scroll-Snap-Layout der öffentlichen Seiten. Das Adminpanel ist eine
   normale, beliebig lange Seite — ohne diese Rücknahme wäre die
   Wochenübersicht ab dem zweiten Wochentag unerreichbar.
------------------------------------------------------------------------- */
html.adm,
html.adm body {
  height: auto;
  min-height: 100%;
  overflow: visible;
  overscroll-behavior: auto;
}

.adm-page {
  --adm-bg: #111;
  --adm-card: #16181a;
  --adm-line: rgba(255, 255, 255, 0.1);
  --adm-line-strong: rgba(255, 255, 255, 0.16);
  --adm-text: #fff;
  --adm-muted: rgba(255, 255, 255, 0.62);
  --adm-muted-2: rgba(255, 255, 255, 0.45);
  --adm-accent: #76b82a;
  --adm-accent-lite: #a3d977;
  --adm-warn: #e8a33d;
  --adm-full: #d1553f;
  --adm-radius: 18px;

  background: var(--adm-bg);
  color: var(--adm-text);
  font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Sichtbarer Fokus ist im Studio Pflicht: das Panel wird auch mit
   angeschlossener Tastatur am Empfangs-Rechner bedient. */
.adm-page :focus-visible {
  outline: 2px solid var(--adm-accent-lite);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   1. Ansichts-Umschaltung
   Ein Dokument, zwei Ansichten. Die Klasse auf <body> entscheidet — so kann
   admin.js den Zustand mit einer einzigen Zeile wechseln und es gibt keinen
   Moment, in dem beide Ansichten gleichzeitig sichtbar sind.
------------------------------------------------------------------------- */
.adm-page.view-login .adm-dash,
.adm-page.view-login .adm-logout,
.adm-page.view-dash .adm-login {
  display: none;
}

/* ---------------------------------------------------------------------------
   2. Topbar — bewusst KEINE Seitennavigation. Das hier ist ein Werkzeug.
------------------------------------------------------------------------- */
.adm-topbar {
  align-items: center;
  background: rgba(17, 17, 17, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--adm-line);
  display: flex;
  gap: 12px;
  left: 0;
  padding: 10px 16px;
  position: sticky;
  right: 0;
  top: 0;
  z-index: 10;
}

/* height:auto ist PFLICHT — das <img> trägt width/height-Attribute
   (800x838) und die würden sonst gegen die CSS-Breite gewinnen
   (HANDOVER, Gotcha 5). */
.adm-logo {
  border-radius: 50%;
  display: block;
  flex: 0 0 auto;
  height: auto;
  width: 34px;
}

.adm-topbar-title {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
}

.adm-logout {
  background: transparent;
  border: 1px solid var(--adm-line-strong);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 15px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.adm-logout:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.adm-main {
  margin: 0 auto;
  max-width: 1060px;
  padding: 20px 16px 64px;
}

/* ---------------------------------------------------------------------------
   3. Login
------------------------------------------------------------------------- */
.adm-login {
  align-items: center;
  display: flex;
  /* Spalte statt Zeile: unter der Karte steht seit 20.08. der Rueckweg
     ("Zurueck zur Website"). Als Zeile landete er DANEBEN statt darunter. */
  flex-direction: column;
  justify-content: center;
  /* 100svh statt 100vh: auf iOS springt die Adressleiste, vh rechnet dann
     mit einer Höhe, die es real nie gibt, und die Karte sitzt zu tief. */
  min-height: calc(100svh - 160px);
  padding: 24px 0;
}

.adm-login-card {
  background: var(--adm-card);
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  display: grid;
  gap: 14px;
  max-width: 380px;
  padding: 26px 22px 24px;
  width: 100%;
}

.adm-login-card h1 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.adm-login-card .adm-lead {
  color: var(--adm-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: -6px 0 2px;
}

.adm-field {
  display: grid;
  gap: 7px;
}

.adm-field label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adm-field input {
  background: #111315;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: #fff;
  font: inherit;
  /* 16px verhindert den Auto-Zoom von iOS Safari beim Fokus. Am
     Empfangstresen wird fast nur auf dem Handy getippt. */
  font-size: 16px;
  padding: 13px 14px;
  transition: border-color 160ms ease;
  width: 100%;
}

.adm-field input:focus {
  border-color: var(--adm-accent);
}

.adm-field input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.adm-submit {
  background: var(--adm-accent);
  border: 0;
  border-radius: 999px;
  color: #10240a;
  cursor: pointer;
  font: inherit;
  font-size: 15.5px;
  font-weight: 900;
  padding: 14px 22px;
  transition: background 160ms ease, transform 160ms ease, opacity 160ms ease;
  width: 100%;
}

.adm-submit:hover {
  background: #83c92f;
  transform: translateY(-1px);
}

.adm-submit:active {
  transform: translateY(0);
}

.adm-submit[disabled] {
  cursor: progress;
  opacity: 0.6;
  transform: none;
}

/* Fehlermeldungen. Sie sind NIE nur farbig — es steht immer Text da,
   sonst ist der Fehler für Farbfehlsichtige unsichtbar. */
.adm-error {
  background: rgba(209, 85, 63, 0.14);
  border: 1px solid rgba(209, 85, 63, 0.48);
  border-radius: 12px;
  color: #ffd9d1;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 11px 13px;
}

.adm-error[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   4. Dashboard-Kopf
------------------------------------------------------------------------- */
.adm-dash-head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: space-between;
  margin: 4px 0 20px;
}

.adm-dash-head h1 {
  font-size: clamp(24px, 5vw, 30px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 4px;
}

.adm-dash-head .adm-lead {
  color: var(--adm-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

.adm-reload {
  background: transparent;
  border: 1px solid var(--adm-line-strong);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  transition: background 160ms ease, border-color 160ms ease;
}

.adm-reload:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.3);
}

.adm-status {
  color: var(--adm-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
}

.adm-status[hidden],
.adm-dash-error[hidden] {
  display: none;
}

.adm-dash-error {
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   5. Wochentag-Gruppen
------------------------------------------------------------------------- */
.adm-day + .adm-day {
  margin-top: 30px;
}

.adm-day > h2 {
  align-items: baseline;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  font-size: 13px;
  font-weight: 700;
  gap: 10px;
  letter-spacing: 0.12em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

/* Dünne Linie hinter der Ueberschrift zieht die Gruppe optisch zusammen,
   ohne eine weitere Kartenkante einzuführen. */
.adm-day > h2::after {
  background: var(--adm-line);
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

.adm-day > h2 .adm-day-meta {
  color: var(--adm-muted-2);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  order: 3;
  text-transform: none;
}

.adm-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

/* ---------------------------------------------------------------------------
   6. Kurskacheln
------------------------------------------------------------------------- */
.adm-tile {
  background: var(--adm-card);
  border: 1px solid var(--adm-line);
  border-radius: var(--adm-radius);
  color: inherit;
  cursor: pointer;
  /* Flex-Spalte statt Grid, damit .adm-tile-foot per margin-top:auto unten
     klebt. Sonst sitzt der Balken bei Kacheln mit Badge tiefer als bei
     Kacheln ohne — in einer Reihe nebeneinander sieht das schief aus. */
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 10px;
  padding: 16px 17px 15px;
  position: relative;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  width: 100%;
}

.adm-tile:hover {
  background: #191c1f;
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.adm-tile:active {
  transform: translateY(0);
}

.adm-tile-when {
  color: var(--adm-muted-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.adm-tile-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.adm-tile-foot {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 2px;
}

.adm-count {
  flex: 0 0 auto;
  font-size: 14px;
  /* Tabellenziffern: sonst tanzen die Zahlen von Kachel zu Kachel und die
     Spalte wirkt unruhig. */
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.adm-count .adm-count-cap {
  color: var(--adm-muted-2);
  font-weight: 400;
}

/* Kapazitätsbalken. Die Füllung kommt über --adm-fill aus admin.js,
   damit im HTML kein style-Attribut händisch gepflegt werden muss. */
.adm-bar {
  background: rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  flex: 1 1 auto;
  height: 8px;
  overflow: hidden;
}

.adm-bar > span {
  background: var(--adm-accent);
  border-radius: 999px;
  display: block;
  height: 100%;
  transition: width 320ms cubic-bezier(0.22, 0.8, 0.3, 1), background 200ms ease;
  width: var(--adm-fill, 0%);
}

/* Die Zustandsklasse sitzt am Balken selbst, nicht an der Kachel — so
   funktioniert derselbe Balken unverändert auch im Dialogkopf. */

/* Ab 90 % wird es eng — Bernstein. */
.adm-bar.is-warn > span {
  background: var(--adm-warn);
}

.adm-tile.is-warn {
  border-color: rgba(232, 163, 61, 0.32);
}

/* Voll — rot, plus Klartext-Badge. Farbe allein reicht nicht. */
.adm-bar.is-full > span {
  background: var(--adm-full);
}

.adm-tile.is-full {
  border-color: rgba(209, 85, 63, 0.4);
}

.adm-badge {
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  text-transform: uppercase;
  white-space: nowrap;
}

.adm-badge-full {
  background: rgba(209, 85, 63, 0.16);
  border: 1px solid rgba(209, 85, 63, 0.5);
  color: #ffbcae;
}

.adm-badge-paused {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--adm-line-strong);
  color: rgba(255, 255, 255, 0.72);
}

.adm-tile-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adm-tile-flags:empty {
  display: none;
}

/* Pausierter Kurs: sichtbar zurückgenommen, aber bedienbar bleiben —
   der Kurs muss ja wieder aktiviert werden können. */
.adm-tile.is-paused {
  background: #131517;
}

.adm-tile.is-paused .adm-tile-name,
.adm-tile.is-paused .adm-count {
  color: rgba(255, 255, 255, 0.5);
}

.adm-bar.is-paused > span {
  background: rgba(255, 255, 255, 0.22);
}

/* ---------------------------------------------------------------------------
   7. Dialog (nativ, ohne Bibliothek)
------------------------------------------------------------------------- */
.adm-dialog {
  background: var(--adm-card);
  border: 1px solid var(--adm-line);
  border-radius: 18px 18px 0 0;
  color: var(--adm-text);
  font-family: inherit;
  /* Auf dem Handy als Bottom-Sheet: der Daumen erreicht die untere
     Bildschirmhälfte, ein zentrierter Dialog wäre Fingerakrobatik. */
  margin: auto auto 0;
  max-height: 88svh;
  max-width: 100%;
  padding: 0;
  width: 100%;
}

.adm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.adm-dialog[open] {
  animation: adm-sheet-in 260ms cubic-bezier(0.22, 0.8, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.adm-dialog[open]::backdrop {
  animation: adm-fade-in 260ms ease;
}

@keyframes adm-sheet-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes adm-fade-in {
  from {
    opacity: 0;
  }
}

.adm-dialog-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--adm-line);
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  padding: 18px 18px 14px;
  position: relative;
}

/* Griff oben mittig signalisiert auf dem Handy die Sheet-Geste-Erwartung. */
.adm-dialog-head::before {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  content: "";
  height: 4px;
  left: 50%;
  position: absolute;
  top: 8px;
  transform: translateX(-50%);
  width: 38px;
}

.adm-dialog-titles {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 6px;
}

.adm-dialog-when {
  color: var(--adm-muted-2);
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.adm-dialog-titles h2 {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 8px;
}

.adm-dialog-cap {
  align-items: center;
  display: flex;
  gap: 10px;
}

.adm-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--adm-line);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 18px;
  height: 36px;
  line-height: 1;
  margin-top: 4px;
  padding: 0;
  transition: background 160ms ease, color 160ms ease;
  width: 36px;
}

.adm-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.adm-dialog-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 22px;
}

.adm-section-title {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   8. Teilnehmerliste
------------------------------------------------------------------------- */
.adm-part-list {
  border: 1px solid var(--adm-line);
  border-radius: 14px;
  list-style: none;
  margin: 0 0 22px;
  overflow: hidden;
  padding: 0;
}

.adm-part-list:empty {
  display: none;
}

.adm-part + .adm-part {
  border-top: 1px solid var(--adm-line);
}

.adm-part-head {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 15px;
  text-align: left;
  transition: background 140ms ease;
  width: 100%;
}

.adm-part-head:hover {
  background: rgba(255, 255, 255, 0.04);
}

.adm-part-head .adm-chevron {
  color: var(--adm-muted-2);
  flex: 0 0 auto;
  font-size: 12px;
  transition: transform 200ms ease;
}

.adm-part-head[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.04);
}

.adm-part-head[aria-expanded="true"] .adm-chevron {
  transform: rotate(180deg);
}

.adm-part-detail {
  border-top: 1px dashed rgba(255, 255, 255, 0.09);
  display: grid;
  gap: 12px;
  padding: 13px 15px 15px;
}

.adm-part-detail[hidden] {
  display: none;
}

.adm-part-detail dl {
  display: grid;
  gap: 6px 12px;
  grid-template-columns: auto 1fr;
  margin: 0;
}

.adm-part-detail dt {
  color: var(--adm-muted-2);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

.adm-part-detail dd {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  margin: 0;
  overflow-wrap: anywhere;
}

.adm-part-detail dd a {
  color: var(--adm-accent-lite);
  text-decoration: underline;
}

.adm-danger {
  background: transparent;
  border: 1px solid rgba(209, 85, 63, 0.5);
  border-radius: 999px;
  color: #ffbcae;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  justify-self: start;
  padding: 9px 16px;
  transition: background 160ms ease, color 160ms ease;
}

.adm-danger:hover {
  background: rgba(209, 85, 63, 0.18);
  color: #fff;
}

/* Zweistufige Bestätigung direkt in der Zeile. Bewusst kein window.confirm:
   das Systemdialogfeld sieht auf dem Handy nach Browserfehler aus und
   verdeckt genau die Zeile, um die es geht. */
.adm-confirm {
  align-items: center;
  background: rgba(209, 85, 63, 0.1);
  border: 1px solid rgba(209, 85, 63, 0.35);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 11px 12px;
}

.adm-confirm[hidden] {
  display: none;
}

.adm-confirm p {
  flex: 1 1 100%;
  font-size: 13.5px;
  line-height: 1.45;
  margin: 0;
}

.adm-confirm-yes {
  background: var(--adm-full);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 16px;
}

.adm-confirm-yes:hover {
  background: #e0664f;
}

.adm-confirm-no {
  background: transparent;
  border: 1px solid var(--adm-line-strong);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  padding: 9px 16px;
}

.adm-confirm-no:hover {
  background: rgba(255, 255, 255, 0.07);
}

.adm-empty {
  color: var(--adm-muted);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 22px;
}

/* ---------------------------------------------------------------------------
   9. Teilnehmer eintragen (<details> — native Aufklappmechanik, kein JS)
------------------------------------------------------------------------- */
.adm-add {
  background: #131517;
  border: 1px solid var(--adm-line);
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden;
}

.adm-add > summary {
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 700;
  list-style: none;
  padding: 14px 15px;
  position: relative;
  user-select: none;
}

.adm-add > summary::-webkit-details-marker {
  display: none;
}

.adm-add > summary::after {
  color: var(--adm-accent-lite);
  content: "+";
  font-size: 19px;
  line-height: 1;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.adm-add[open] > summary::after {
  content: "\2212"; /* Minus */
}

.adm-add[open] > summary {
  border-bottom: 1px solid var(--adm-line);
}

.adm-add-form {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.adm-add-form .adm-submit {
  font-size: 14.5px;
  padding: 12px 20px;
}

/* ---------------------------------------------------------------------------
   10. Kurs pausieren / aktivieren
------------------------------------------------------------------------- */
.adm-dialog-foot {
  border-top: 1px solid var(--adm-line);
  display: grid;
  gap: 10px;
  padding-top: 16px;
}

.adm-toggle {
  background: transparent;
  border: 1px solid var(--adm-line-strong);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  justify-self: start;
  padding: 11px 18px;
  transition: background 160ms ease, border-color 160ms ease;
}

.adm-toggle:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.32);
}

/* Reaktivieren ist die positive Aktion — deshalb grün umrandet. */
.adm-toggle.is-activate {
  border-color: rgba(118, 184, 42, 0.55);
  color: var(--adm-accent-lite);
}

.adm-toggle.is-activate:hover {
  background: rgba(118, 184, 42, 0.14);
}

.adm-foot-hint {
  color: var(--adm-muted-2);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

/* Buttons während eines laufenden Requests: nicht verschwinden lassen,
   sonst springt das Layout unter dem Finger weg. */
.adm-dialog button[disabled],
.adm-dialog .adm-submit[disabled] {
  cursor: progress;
  opacity: 0.55;
}

/* ---------------------------------------------------------------------------
   11. Breakpoints — mobile first
------------------------------------------------------------------------- */
@media (min-width: 620px) {
  .adm-topbar {
    padding: 12px 24px;
  }

  .adm-logo {
    width: 38px;
  }

  .adm-topbar-title {
    font-size: 16px;
  }

  .adm-main {
    padding: 26px 24px 80px;
  }

  .adm-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Ab Tablet ist der zentrierte Dialog wieder die ruhigere Form. */
  .adm-dialog {
    border-radius: var(--adm-radius);
    margin: auto;
    max-height: 86vh;
    max-width: 540px;
  }

  .adm-dialog-head::before {
    display: none;
  }

  .adm-dialog-titles {
    padding-top: 0;
  }

  .adm-dialog[open] {
    animation: adm-pop-in 200ms cubic-bezier(0.22, 0.8, 0.3, 1);
  }

  @keyframes adm-pop-in {
    from {
      opacity: 0;
      transform: scale(0.97);
    }
  }
}

@media (min-width: 980px) {
  .adm-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .adm-main {
    padding: 32px 24px 96px;
  }
}

/* ---------------------------------------------------------------------------
   12. Bewegung reduzieren
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .adm-page *,
  .adm-page *::before,
  .adm-page *::after,
  .adm-dialog[open],
  .adm-dialog[open]::backdrop {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }

  .adm-tile:hover,
  .adm-submit:hover {
    transform: none;
  }
}

/* --- Wochennavigation im Adminpanel (14.08.2026) --------------------
   Bookings sind jetzt datumsgebunden; Melanie blaettert +/- Wochen.
   ------------------------------------------------------------------ */
/* ============================================================================
   Body & Care — CSS-Fragment: Wochenschalter im Adminpanel

   SCRATCH-DATEI, NICHT VERLINKT. styles.css wird laut SPEC von keinem
   Agent angefasst; dieses Fragment gehoert vom Orchestrator per Hand in
   styles.css uebernommen — sinnvoll direkt hinter Abschnitt "4. Dashboard-
   Kopf" (dort endet .adm-reload) und vor "5. Wochentag-Gruppen".
   Danach styles.css?v=51 in admin.html setzen.

   Bewusst NICHT verlinkt: eine Datei mit fuehrendem Punkt wird von vielen
   Static-Hostern nicht ausgeliefert - ein <link> darauf waere in
   Produktion ein 404. Das Markup in admin.html traegt deshalb zusaetzlich
   .adm-reload an den drei Knoepfen: ohne dieses Fragment sieht die Leiste
   schlichter aus, ist aber vollstaendig bedienbar.

   Verwendet ausschliesslich bestehende Custom Properties aus styles.css
   (--adm-*), damit sich das Panel bei einer Farbaenderung mitzieht.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   4b. Wochenschalter
------------------------------------------------------------------------- */

.adm-weeknav {
  align-items: center;
  border: 1px solid var(--adm-line);
  border-radius: 999px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  margin: 0 0 22px;
  padding: 8px 8px 8px 18px;
}

/* Der Zeitraum ist die eigentliche Information dieser Leiste - deshalb
   groesser und heller als die Knoepfe daneben, nicht als Beiwerk. */
.adm-week-range {
  color: var(--adm-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  /* Verhindert, dass die Zeile beim Wochenwechsel in der Breite springt
     und die Knoepfe unter dem Finger wegrutschen. */
  min-width: 15ch;
}

.adm-week-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adm-weekbtn {
  /* Etwas kompakter als .adm-reload: drei Knoepfe nebeneinander muessen
     auf ein Handy passen. */
  font-size: 12px;
  padding: 8px 13px;
  white-space: nowrap;
}

/* Am Anschlag deaktiviert statt unsichtbar: der Knopf bleibt an seinem
   Platz, damit die Leiste nicht springt, und sagt per Kontrast, dass hier
   Schluss ist. cursor:default statt not-allowed - das Verbotsschild waere
   fuer eine schlichte Bereichsgrenze zu dramatisch. */
.adm-reload:disabled,
.adm-weekbtn:disabled {
  background: transparent;
  border-color: var(--adm-line);
  color: var(--adm-muted-2);
  cursor: default;
}

.adm-reload:disabled:hover,
.adm-weekbtn:disabled:hover {
  background: transparent;
  border-color: var(--adm-line);
}

/* Auf schmalen Displays untereinander: nebeneinander waere jeder Knopf
   schmaler als eine Fingerkuppe. */
@media (max-width: 560px) {
  .adm-weeknav {
    align-items: stretch;
    border-radius: var(--adm-radius);
    flex-direction: column;
    padding: 14px 16px;
  }

  .adm-week-buttons {
    display: grid;
    /* "Diese Woche" in die Mitte, die Pfeilknoepfe aussen - dieselbe
       Anordnung wie in der Breitversion, nur gestapelt. */
    grid-template-columns: 1fr 1fr;
  }

  .adm-week-buttons .adm-weekbtn:nth-child(2) {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* Claim aus dem Fragebogen (1.4) — steht ueber der Beschreibung und traegt
   die Markenaussage, deshalb etwas groesser und in Akzentfarbe. */
.hero-claim {
  color: var(--accent-lite, #a3d977);
  font-weight: 800;
  margin-bottom: 10px !important;
}

/* Hinweisbox auf den Rechtsseiten: markiert die Texte als Entwurf, bis
   der Betreiber sie freigegeben hat (Vertrag § 8 Abs. 3 - Rechtstexte
   werden vom Auftraggeber verantwortet). NACH der Freigabe entfernen:
   Box aus allen vier Rechtsseiten loeschen, diese Regel darf bleiben. */
.legal-review-note {
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.45);
  border-radius: 10px;
  color: #ffd97a;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 28px;
  padding: 12px 16px;
}

/* ── Selbst-Storno: Ergebnisliste auf kurs-buchen.html ──────────────────
   kurs-storno.js baut die Liste, hier steht nur ihr Aussehen. Bewusst
   dieselbe Kartenoptik wie die uebrigen Formularbausteine, damit der
   Abschnitt nicht wie ein Fremdkoerper unter dem Buchungsformular wirkt. */
.storno-head {
  font-size: 18px;
  margin: 28px 0 12px;
}

.storno-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.storno-item {
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.storno-when {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.storno-when span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
}

.storno-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 16px;
  transition: background 160ms ease, border-color 160ms ease;
}

.storno-cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.42);
}

.storno-cancel:disabled {
  cursor: default;
  opacity: 0.55;
}

/* Stornierte Zeile bleibt stehen statt zu verschwinden — so sieht man,
   dass wirklich der richtige Platz weg ist. */
.storno-item.is-cancelled {
  border-color: rgba(118, 184, 42, 0.5);
}

/* Ganzes Panel klickbar (script.js setzt die Klasse). Der Zeiger ist das
   einzige sichtbare Signal dafuer — ohne ihn merkt niemand, dass mehr als
   der Button klickbar ist. Auf dem Handy gibt es keinen Zeiger; dort ist
   die Flaeche einfach grosszuegiger, was ohnehin nur hilft. */
.panel-clickable {
  cursor: pointer;
}

/* Kicker ueber der Hero-Headline: ersetzt den frueheren Fliesstext
   "Seit 2002: Fitness, Kurse, ..." als kompakte Einordnung. */
.hero-kicker {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── Kursverwaltung-Chip in der Navigation ────────────────────────────
   Zugang zum internen Adminbereich. Bewusst als Chip statt als normaler
   Menuepunkt: kein Angebot fuer Besucher, sondern Werkzeug fuers Team.
   rel="nofollow" + Disallow in robots.txt halten ihn aus dem Index.

   WICHTIG — Selektor: `.nav-panel a` hat Spezifitaet 0,1,1 und schlaegt
   ein blosses `.nav-admin` (0,1,0) unabhaengig von der Reihenfolge. Ohne
   `.nav-panel a.nav-admin` (0,2,1) greifen display und width nicht und der
   Chip zieht sich ueber die volle Menuebreite. Nicht vereinfachen. */
.nav-panel a.nav-admin {
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  display: inline-flex;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease;
  white-space: nowrap;
  width: auto;
}

.nav-panel a.nav-admin:hover,
.nav-panel a.nav-admin:focus-visible {
  border-color: var(--accent, #76b82a);
  color: #fff;
}

/* Mobil ist die Navigation eine Off-Canvas-Spalte mit
   `.nav-panel a { width: 100% }`. Abstand statt Trennlinie — der Chip hat
   schon eine eigene Kontur. */
@media (max-width: 1080px) {
  .nav-panel a.nav-admin {
    align-self: flex-start;
    margin-top: 26px;
    padding: 9px 16px;
  }
}

/* --- Adminpanel: Login mit E-Mail + Anzeige des angemeldeten Nutzers ---
   Enthaelt eine Korrektur an .adm-topbar-title: ohne overflow-Handling
   quetscht Flexbox den Titel zusammen, sobald ein viertes Element in
   der Topbar steht, und der Text laeuft ueber die Begruessung.
   --------------------------------------------------------------- */
/* ===========================================================================
   Body & Care — CSS-Fragment für den Mehrbenutzer-Login (Adminbereich)

   NICHT verlinkt. Nach SPEC (docs/spec-kursbuchung.md) fasst kein Agent
   styles.css an; dieses Fragment wird vom Orchestrator dort einsortiert.
   Einbauort: styles.css, Adminbereich — Regel 1 (Ansichts-Umschaltung)
   und Regel 2 (Topbar), direkt bei .adm-logout.

   Danach den Cache-Buster in admin.html hochzählen (styles.css?v=56 → 57).

   Zugehörige Änderung: die Anmeldung braucht ein E-Mail-Feld über dem
   Passwortfeld und die Topbar eine Zeile "Angemeldet als …". Die
   bestehenden .adm-field-Regeln decken das neue Eingabefeld bereits ab —
   neu ist hier nur die Topbar-Zeile.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Zu Regel 1 (Ansichts-Umschaltung)

   Die Begrüßung gehört zum angemeldeten Zustand und muss deshalb in
   dieselbe Liste wie .adm-logout. Ohne diese Zeile stünde auf dem
   Login-Bildschirm der Name der zuletzt angemeldeten Person.

   admin.js setzt zusätzlich `hidden` auf dem Element — doppelt gemoppelt
   mit Absicht: die Zeile darf auch dann nicht durchrutschen, wenn dieses
   Fragment noch nicht integriert ist.
------------------------------------------------------------------------- */
.adm-page.view-login .adm-user {
  display: none;
}

/* ---------------------------------------------------------------------------
   Zu Regel 2 (Topbar)

   Die Zeile steht zwischen Titel und Abmelden-Knopf. `flex: 0 1 auto` mit
   min-width: 0 lässt sie schrumpfen, bevor der Knopf umbricht: der
   Anzeigename ist Information, der Abmelden-Knopf ist Bedienung — und die
   darf auf einem 360px-Display nicht verloren gehen. Deshalb hier auch
   ellipsis statt Umbruch: die Topbar bleibt einzeilig.

   Farbe/Größe orientieren sich an .adm-logout, damit die Zeile als
   Beiwerk gelesen wird und nicht mit dem Seitentitel konkurriert.
------------------------------------------------------------------------- */
.adm-user {
  color: rgba(255, 255, 255, 0.62);
  flex: 0 1 auto;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* WICHTIG beim Einsortieren: in .adm-user KEIN `display` setzen. admin.js
   blendet die Zeile über das HTML-Attribut `hidden` aus, und jede
   display-Deklaration auf dem Element würde dieses Attribut aushebeln —
   die Begrüßung bliebe dann nach dem Abmelden stehen. */

/* ---------------------------------------------------------------------------
   ÄNDERUNG AN EINER BESTEHENDEN REGEL — bitte beim Merge beachten!

   .adm-topbar-title in styles.css (Regel 2) hat `flex: 1 1 auto` und
   `min-width: 0`, aber KEINE Overflow-Behandlung. Solange nur Logo, Titel
   und Abmelden-Knopf in der Leiste standen, ist das nie aufgefallen. Mit
   der Begrüßung als viertem Element schrumpft Flexbox den Titel auf 375px
   Breite auf ~58px zusammen — der Text läuft dann sichtbar aus seiner Box
   heraus und überlagert die Begrüßung (gemessen, kein theoretisches
   Problem). Diese drei Zeilen gehören deshalb in die bestehende Regel:
------------------------------------------------------------------------- */
.adm-topbar-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Auf schmalen Geräten (Handy am Empfang) wird es in der Topbar eng.
   Statt die ganze Begrüßung auszublenden, verschwindet nur das Präfix:
   übrig bleibt der Name — genau die Information, um die es geht. Aus
   "Angemeldet als Melanie" wird "Melanie", und Titel wie Abmelden-Knopf
   behalten ihren Platz. Bedienung geht vor Beiwerk.
   620px ist derselbe Breakpoint wie im restlichen Adminbereich. */
/* Auf dem Handy quetschten sich Name und Abmelden-Knopf in EINE Zeile —
   bei einer vollen E-Mail-Adresse als Anzeigename überlagerten sie sich
   (Sunny, 16.08.). Deshalb bricht die Begrüßung jetzt in eine eigene,
   zweite Zeile unter Logo/Titel/Abmelden um. Damit ist auch wieder Platz
   für das Präfix "Angemeldet als" samt vollständiger Adresse. */
@media (max-width: 619px) {
  .adm-topbar {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .adm-user {
    flex: 1 1 100%;
    order: 4;
    text-align: left;
  }

  .adm-topbar-title {
    flex-shrink: 0;
  }
}

@media (min-width: 620px) {
  .adm-user {
    font-size: 14px;
  }
}

/* ── Kursverwaltung: Desktop unten, Mobil im Menü ────────────────────────
   Wunsch 20.08.2026: Auf dem Desktop soll der Link nicht mehr im Kopf
   stehen — dort klicken Mitglieder aus Neugier drauf und landen in einem
   Login, der nichts fuer sie ist. Unten im Footer, zwischen Impressum und
   Datenschutz, liest er sich als das, was er ist: ein interner Zugang.

   Auf dem Handy bleibt er im ausgeklappten Menue. Dort ist er kein
   Blickfang (das Menue oeffnet man absichtlich), und der Footer ist am
   Ende einer langen Scrollstrecke schlechter erreichbar — das Team soll
   sich an der Theke schnell anmelden koennen.

   1080px ist derselbe Breakpoint, an dem die Navigation von der Kopfzeile
   zur Off-Canvas-Spalte wechselt. Beide Werte muessen gleich bleiben. */

/* Desktop: Chip aus dem Kopf raus, Footer-Link sichtbar. */
@media (min-width: 1081px) {
  .nav-panel a.nav-admin {
    display: none;
  }
}

/* Mobil/Tablet: Chip im Menue, Footer-Link ausblenden (sonst doppelt). */
@media (max-width: 1080px) {
  .sf-admin {
    display: none;
  }
}

/* Im Footer bewusst unauffaelliger als die Rechtslinks daneben. */
.sf-admin {
  opacity: 0.62;
}

.sf-admin:hover,
.sf-admin:focus-visible {
  opacity: 1;
}

/* ── Adminlogin: Hinweis fuer versehentliche Besucher ──────────────────── */
.adm-notice {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.4);
  border-radius: 10px;
  color: #ffd97a;
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 18px;
  padding: 12px 14px;
}

.adm-notice a {
  color: inherit;
  text-decoration: underline;
}

.adm-back {
  margin: 18px 0 0;
  text-align: center;
}

.adm-back a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  text-decoration: none;
}

.adm-back a:hover,
.adm-back a:focus-visible {
  color: #fff;
  text-decoration: underline;
}