/* ============================================================
   Four Elements — Relaunch
   Richtung: soft-premium editorial. Warm getönte Neutrals,
   Markenpink als seltener Akzent, Playfair Display + DM Sans.
   ============================================================ */

:root {
  /* Farbwelt: Taupe und Dunkelbraun auf warmem Creme, kein Rosa.
     Variablennamen historisch, die Werte tragen die neue Palette. */
  --paper:      #F7F2EB;
  --paper-deep: #EFE7DB;
  --rose-tint:  #E9E0D1;
  --ink:        #2E251C;
  --ink-soft:   #6B5D4C;
  --ink-faint:  #746551;
  --line:       #DFD3C2;
  --pink:       #5C4632;
  --pink-deep:  #4A3728;
  --titel-akzent: #9A6A3C;
  --pink-soft:  #D8CBB8;
  --apricot:    #D9C8B0;
  --noir:       #221A12;
  --noir-2:     #31261A;
  --red-glow:   #C98850;
  --paper-on-noir: #F1E9DC;

  /* Motion */
  --ease-out-strong:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-ios:           cubic-bezier(0.32, 0.72, 0, 1);

  --container: 1180px;
  --radius: 20px;
}

/* ---------- Reset & Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  transition: transform 280ms var(--ease-in-out-strong);
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

h1, h2, h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
}
h1 { font-size: clamp(2.7rem, 7vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.3rem; font-weight: 600; }
h1 em, h2 em { font-style: normal; color: var(--titel-akzent, var(--pink-deep)); }

p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.section { padding-block: clamp(72px, 11vw, 150px); }
.section-tight { padding-block: clamp(48px, 7vw, 96px); }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pink-deep);
  margin-bottom: 1.1em;
}

.section-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Grain über allem — handgemachtes Finish statt flacher Fläche */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Seitenwechsel: sanfter Cross-Document-Übergang */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 3000;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 999px;
}
.skip-link:focus { left: 12px; }

:focus-visible {
  outline: 2px solid var(--pink-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--pink-soft); color: var(--ink); }

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--paper);
  font: 600 0.95rem/1 "DM Sans", sans-serif;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  hyphens: none;
  -webkit-hyphens: none;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 160ms var(--ease-out-strong);
}
.button:active { transform: scale(0.97); }
.button span { transition: transform 200ms var(--ease-out-strong); }
.button-pink { background: var(--pink-deep); color: #FFF7FA; }
.button-light { background: var(--paper); color: var(--ink); }
.button-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
.button-small { padding: 11px 20px; font-size: 0.88rem; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--pink-deep); color: #FFF7FA; }
  .button-pink:hover { background: var(--ink); color: var(--paper); }
  .button-light:hover { background: var(--rose-tint); color: var(--ink); }
  .button-outline:hover { border-color: var(--pink-deep); color: var(--pink-deep); background: transparent; }
  .button:hover span { transform: translate(2px, -2px); }
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--pink-soft);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease;
}
.text-link span { transition: transform 200ms var(--ease-out-strong); display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { color: var(--pink-deep); border-color: var(--pink-deep); }
  .text-link:hover span { transform: translate(2px, 2px); }
}

/* ---------- Header ---------- */
/* Header: liegt fest ganz oben, Inhalt scrollt sichtbar dahinter durch */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--paper);
  /* Zweiter Schatten dichtet den Overscroll-Bereich ueber der Seite ab */
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent),
              0 -100vh 0 0 var(--paper);
}

.header-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 16px clamp(20px, 4vw, 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand { display: inline-flex; }
.brand img { height: 26px; width: auto; }
.nav-right {
  display: flex;
  gap: 24px;
  align-items: center;
}
.nav-right-links { display: flex; gap: 24px; }
.nav-right-links a {
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 160ms ease;
}
.nav-right-links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .nav-right-links a:hover { color: var(--pink-deep); }
}
.menu-button {
  display: none;
  width: 44px; height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.menu-button span {
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 240ms var(--ease-in-out-strong), opacity 160ms ease;
}
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.site-header.versteckt { transform: translateY(-110%); }
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* ---------- Menue: Burger oben rechts, Panel klappt darunter auf ---------- */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: color-mix(in srgb, var(--noir) 38%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.menu-scrim.sichtbar { opacity: 1; pointer-events: auto; }

.menu-panel {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 990;
  max-height: 94svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: calc(70px + env(safe-area-inset-top, 0px));
  background: var(--paper);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--noir) 20%, transparent);
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform 340ms var(--ease-in-out-strong), visibility 0s linear 340ms;
}
.menu-panel.open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 380ms var(--ease-in-out-strong), visibility 0s;
}
.panel-inhalt {
  padding: 10px clamp(20px, 5vw, 40px) 26px;
  display: grid;
  gap: 16px;
  max-width: var(--container);
  margin-inline: auto;
}
.sheet-nav { display: grid; }
.sheet-nav a {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
}
.sheet-nav a:first-child { border-top: 0; }
.menu-panel.open .sheet-nav a,
.menu-panel.open .sheet-cta,
.menu-panel.open .sheet-fuss {
  opacity: 1;
  transform: none;
  transition: opacity 300ms ease, transform 340ms var(--ease-in-out-strong);
  transition-delay: calc(90ms + var(--i, 7) * 35ms);
}
.sheet-wort { font-size: 1.3rem; font-weight: 600; }
.sheet-zusatz { font-size: 0.88rem; color: var(--ink-soft); }
.sheet-nav a[aria-current="page"] { color: var(--pink-deep); }
.sheet-nav a[aria-current="page"] .sheet-wort { font-weight: 700; }
.sheet-nav a[aria-current="page"] .sheet-wort::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--pink-deep);
  vertical-align: 0.12em;
}
.sheet-nav a[aria-current="page"] .sheet-zusatz { color: var(--pink-deep); }
@media (hover: hover) and (pointer: fine) {
  .sheet-nav a:hover { color: var(--pink-deep); }
}

.sheet-cta { width: 100%; justify-content: center; opacity: 0; transform: translateY(8px); }
.sheet-fuss {
  display: grid;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-faint);
  opacity: 0;
  transform: translateY(8px);
}
.sheet-insta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 500;
}
.sheet-rechtliches { display: flex; gap: 18px; }
.sheet-rechtliches a { color: var(--ink-faint); text-decoration: none; padding-block: 6px; }
@media (prefers-reduced-motion: reduce) {
  .sheet-nav a, .sheet-cta, .sheet-fuss { opacity: 1; transform: none; }
}

/* Instagram neben dem Burger, nur auf Touch-Breiten */
.header-insta { display: none; }
@media (max-width: 960px) {
  .header-insta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    color: var(--ink);
  }
}
@media (min-width: 961px) {
  .menu-panel, .menu-scrim { display: none; }
}

body.menu-open { overflow: hidden; }

@media (max-width: 960px) {
  .nav-right-links, .header-cta { display: none; }
  .menu-button { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: 120px;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.orb-one {
  width: 46vw; height: 46vw;
  min-width: 380px; min-height: 380px;
  right: -10vw; top: -12vw;
  background: radial-gradient(circle at 40% 40%, var(--pink-soft), transparent 68%);
}
.orb-two {
  width: 34vw; height: 34vw;
  min-width: 300px; min-height: 300px;
  left: -8vw; bottom: -6vw;
  background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--apricot) 70%, transparent), transparent 70%);
}
.hero-content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  padding-bottom: clamp(48px, 7vw, 90px);
}
.hero-lead {
  max-width: 33em;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  margin-top: 1.4em;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-top: 2.2em;
}
.opening-badge {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 168px; height: 168px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: color-mix(in srgb, #FFFFFF 55%, transparent);
  backdrop-filter: blur(6px);
  text-align: center;
  padding: 18px;
}
.opening-badge span {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink-deep);
  font-weight: 600;
}
.opening-badge strong {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 1.28rem;
  line-height: 1.12;
}
.opening-badge small { color: var(--ink-faint); font-size: 0.78rem; }
.hero-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 26px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
@media (max-width: 760px) {
  .hero-content { grid-template-columns: 1fr; }
  .opening-badge { display: none; }
}

/* ---------- Ticker ---------- */
.ticker {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: 16px;
  background: var(--paper-deep);
}
.ticker-track {
  display: flex;
  gap: 34px;
  align-items: center;
  width: max-content;
  animation: ticker 60s linear infinite;
  font-family: "DM Sans", sans-serif;
  font-size: 1.25rem;
  white-space: nowrap;
}
.ticker-track i { color: var(--pink); font-style: normal; font-size: 0.9rem; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* ---------- Intro ---------- */
.intro-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.large-copy {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.intro-note {
  border-left: 2px solid var(--pink);
  padding-left: 24px;
  margin-top: 14px;
  color: var(--ink-soft);
}
.note-icon {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--rose-tint);
  color: var(--pink-deep);
  font: 700 0.85rem "DM Sans", sans-serif;
  margin-bottom: 14px;
}
@media (max-width: 960px) {
  .intro-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Class-Explorer (Startseite) ---------- */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head > p { color: var(--ink-soft); max-width: 30em; margin: 0; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; } }

.class-list { border-top: 1px solid var(--line); }
.class-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1.5fr) 56px;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  padding-block: 26px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.class-number {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-faint);
}
.class-title h3 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; }
.class-title p {
  margin: 4px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-deep);
  font-weight: 600;
}
.class-description { color: var(--ink-soft); margin: 0; }
.circle-button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  justify-self: end;
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 160ms var(--ease-out-strong),
              rotate 240ms var(--ease-in-out-strong);
}
.circle-button:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .circle-button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}
.class-row.open .circle-button { rotate: 45deg; background: var(--pink-deep); border-color: var(--pink-deep); color: #FFF7FA; }

.class-details {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 320ms var(--ease-in-out-strong), opacity 240ms ease,
              margin-top 320ms var(--ease-in-out-strong);
}
.class-row.open .class-details { max-height: 120px; opacity: 1; margin-top: 6px; }
.class-details span {
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, #FFFFFF 50%, transparent);
}
@media (max-width: 760px) {
  .class-row { grid-template-columns: minmax(0, 1fr) 46px; }
  .class-number { display: none; }
  .class-description { grid-column: 1 / 2; }
  .circle-button { grid-row: 1; grid-column: 2; }
  .class-details { grid-column: 1 / -1; }
}

/* ---------- Red Light Signature ---------- */
.redlight {
  position: relative;
  background:
    radial-gradient(60% 80% at 75% 20%, color-mix(in srgb, var(--red-glow) 26%, transparent), transparent 70%),
    radial-gradient(50% 70% at 15% 85%, color-mix(in srgb, var(--pink-deep) 20%, transparent), transparent 72%),
    linear-gradient(160deg, var(--noir-2), var(--noir));
  color: var(--paper-on-noir);
  overflow: hidden;
}
.redlight h2 { color: #FBEFF3; }
.redlight h2 em { color: var(--red-glow); }
.redlight p { color: color-mix(in srgb, var(--paper-on-noir) 82%, transparent); max-width: 34em; }
.redlight-content {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.redlight-foto {
  grid-column: 3;
  grid-row: 1 / span 3;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  align-self: stretch;
}
.redlight-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.redlight-kicker {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-glow);
}
.redlight-meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.redlight-meta span {
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--paper-on-noir) 26%, transparent);
}
.redlight .button-light { margin-top: 10px; }
/* Ohne Foto faellt die dritte Spalte weg, sonst steht der Text an einer
   leeren Flaeche. */
.redlight-content.ohne-foto { grid-template-columns: 180px minmax(0, 1fr); }
@media (max-width: 860px) {
  .redlight-content.ohne-foto { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .redlight-content { grid-template-columns: 180px minmax(0, 1fr); }
  .redlight-foto { grid-column: 1 / -1; grid-row: auto; max-height: 320px; }
}
@media (max-width: 860px) {
  .redlight-content { grid-template-columns: 1fr; gap: 20px; }
  .redlight-meta { grid-column: 1; }
  .redlight-foto { max-height: 240px; }
}

/* ---------- Details ---------- */
.details-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.detail-cards { display: grid; gap: 0; border-top: 1px solid var(--line); }
.detail-card {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 8px 24px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}
.detail-card span {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  color: var(--pink-deep);
}
.detail-card h3 { grid-column: 2; margin: 0 0 6px; }
.detail-card p { grid-column: 2; margin: 0; color: var(--ink-soft); }
@media (max-width: 860px) {
  .details-grid { grid-template-columns: 1fr; }
}

/* ---------- Schedule ---------- */
.schedule { background: var(--paper-deep); }
.schedule-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.schedule-tabs button {
  min-width: 52px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font: 600 0.9rem "DM Sans", sans-serif;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.schedule-tabs button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
@media (hover: hover) and (pointer: fine) {
  .schedule-tabs button:not(.active):hover { border-color: var(--ink-faint); color: var(--ink); }
}
.schedule-panel {
  border-top: 1px solid var(--line);
}
.schedule-item {
  display: grid;
  /* Etikett bis 154 px ("RED LIGHT PILATES"), Knopf bis 126 px ("Ausgebucht"). */
  grid-template-columns: 80px minmax(0, 1fr) 160px 130px;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}
.schedule-item time { font-weight: 600; font-variant-numeric: tabular-nums; }
.schedule-item strong { display: block; font-weight: 600; }
.schedule-item small { color: var(--ink-soft); }
/* Ohne min-width waechst die mittlere Spalte ueber ihre Bahn hinaus und die
   Metazeile schiebt sich unter den Buchen-Knopf. */
.schedule-item > div { min-width: 0; }
.schedule-item b {
  justify-self: start;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-deep);
  background: var(--rose-tint);
  padding: 6px 12px;
  border-radius: 999px;
}
.schedule-item .button { justify-self: end; }
.schedule-empty { padding-block: 40px; color: var(--ink-soft); border-bottom: 1px solid var(--line); margin: 0; }
.schedule-note {
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--ink-faint);
}
@media (max-width: 700px) {
  .schedule-item { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .schedule-item b { display: none; }
}

/* Eversports-Container: bekommt Inhalt per JS, sobald die Widget-ID gesetzt ist */
.eversports-embed { min-height: 200px; }
.eversports-embed[hidden] { display: none; }
/* Messzustand: Widget rendert unsichtbar, die Vorschau bleibt so lange stehen */
.eversports-embed.is-pruefend { min-height: 0; height: 0; overflow: hidden; }

/* ---------- Location ---------- */
.location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.location-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  cursor: pointer;
  background:
    radial-gradient(70% 60% at 30% 30%, color-mix(in srgb, var(--pink-soft) 45%, transparent), transparent 70%),
    linear-gradient(150deg, var(--paper-deep), var(--rose-tint));
  border: 1px solid var(--line);
}
.map-lines, .map-water { position: absolute; inset: 0; }
.map-lines {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotate(-4deg) scale(1.15);
}
.map-water {
  background: radial-gradient(50% 40% at 78% 74%, color-mix(in srgb, #9EC4D8 55%, transparent), transparent 72%);
}
.map-pin {
  position: absolute;
  left: 42%; top: 38%;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--ink) 55%, transparent);
}
.map-pin img { width: 34px; height: 34px; }
.map-pin::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  animation: pulse 2.6s var(--ease-out-strong) infinite;
}
@keyframes pulse {
  from { transform: scale(0.85); opacity: 1; }
  to   { transform: scale(1.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .map-pin::after { animation: none; opacity: 0.5; } }
.map-label {
  position: absolute;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: color-mix(in srgb, #FFFFFF 70%, transparent);
  padding: 5px 10px;
  border-radius: 999px;
}
.label-one { left: 12%; top: 16%; }
.label-two { right: 10%; bottom: 20%; }
.label-three { left: 18%; bottom: 12%; }
.location-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.location-meta > div { min-width: 0; }
.location-meta strong { hyphens: none; }
/* Auf schmalen Displays untereinander, sonst wird "Spaetsommer" getrennt */
@media (max-width: 560px) {
  .location-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
.location-meta small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.location-meta strong { font-weight: 600; }
@media (max-width: 860px) {
  .location-grid { grid-template-columns: 1fr; }
}

/* Echte Karte: Graustufen-Basis, Einfärbung folgt der Farbwelt */
.karte-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.55) saturate(0.5) brightness(1.04) contrast(0.96);
  transition: transform 400ms var(--ease-out-strong);
}
@media (hover: hover) and (pointer: fine) {
  .karte:hover .karte-bild { transform: scale(1.03); }
}
.karte .map-pin {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.karte-hinweis {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---------- FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
/* Steht nur ein Block darin, nutzt er die volle Breite */
.faq-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.accordion { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item > button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border: none;
  background: transparent;
  font: 600 1.08rem/1.4 "DM Sans", sans-serif;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq-item > button span {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-weight: 400;
  font-size: 1.15rem;
  transition: rotate 240ms var(--ease-in-out-strong), background-color 180ms ease,
              color 180ms ease, border-color 180ms ease;
}
.faq-item > button[aria-expanded="true"] span {
  rotate: 45deg;
  background: var(--pink-deep);
  border-color: var(--pink-deep);
  color: #FFF7FA;
}
.faq-answer {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 320ms var(--ease-in-out-strong), opacity 220ms ease, visibility 0s linear 320ms;
}
.faq-item.open .faq-answer {
  max-height: 520px;
  opacity: 1;
  visibility: visible;
  transition: max-height 360ms var(--ease-in-out-strong), opacity 260ms ease, visibility 0s;
}
.faq-answer p { color: var(--ink-soft); padding-bottom: 22px; max-width: 42em; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ---------- Opening List / Signup ---------- */
.signup {
  position: relative;
  background: linear-gradient(150deg, var(--rose-tint), var(--paper-deep));
  overflow: hidden;
}
.signup-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.shape-a {
  width: 380px; height: 380px;
  right: -80px; top: -120px;
  background: radial-gradient(circle, color-mix(in srgb, var(--pink-soft) 80%, transparent), transparent 70%);
}
.shape-b {
  width: 300px; height: 300px;
  left: -60px; bottom: -100px;
  background: radial-gradient(circle, color-mix(in srgb, var(--apricot) 70%, transparent), transparent 70%);
}
.signup-inner {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.signup-mark img { width: 64px; height: 64px; }
.signup-copy p:last-child { color: var(--ink-soft); max-width: 30em; }

/* Was die ersten 50 Founding Members bekommen. Bewusst als Liste mit
   fetter erster Halbzeile: der Vorteil steht vorne, die Bedingung dahinter. */
.founding-liste {
  list-style: none;
  margin: 22px 0 18px;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 34em;
}
.founding-liste li {
  position: relative;
  padding-left: 30px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.founding-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 14px;
  height: 2px;
  background: var(--pink-deep);
}
.founding-liste strong { display: block; color: var(--ink); font-weight: 600; }
.signup-copy .founding-fuss {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .founding-liste { gap: 12px; margin: 18px 0 16px; }
  .founding-liste li { font-size: 0.95rem; padding-left: 26px; }
}
.signup-form { display: grid; gap: 16px; }
.signup-form label { display: grid; gap: 7px; }
.signup-form label > span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.signup-form input[type="text"],
.signup-form input[type="email"],
.signup-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 20px center, right 15px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, #FFFFFF 75%, transparent);
  font: 500 1rem "DM Sans", sans-serif;
  color: var(--ink);
  transition: border-color 160ms ease, background-color 160ms ease;
}
.signup-form input:focus, .signup-form select:focus {
  border-color: var(--pink-deep);
  background: #FFFFFF;
}
.signup-form .consent > span, .consent > span {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.consent a { text-decoration: underline; text-underline-offset: 3px; }
.consent {
  display: flex !important;
  grid-template-columns: none;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px !important;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.consent input { margin-top: 4px; accent-color: var(--pink-deep); }
.consent a {
  hyphens: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  color: var(--pink-deep);
}
.hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-message { min-height: 1.4em; font-weight: 500; margin: 0; }
.form-message.ok { color: #2E7D4F; }
.form-message.error { color: #B3383D; }
@media (max-width: 960px) {
  .signup-inner { grid-template-columns: 1fr; gap: 24px; }
  .signup-mark img { width: 48px; height: 48px; }
}

/* ---------- Footer (kompakt) ---------- */
/* Der grosse Schatten fuellt den Overscroll-Bereich unter der Seite,
   damit beim Gummiband-Scrollen kein heller Hintergrund aufblitzt. */
.site-footer {
  background: var(--noir);
  color: var(--paper-on-noir);
  padding: clamp(40px, 6vw, 64px) 0 26px;
  box-shadow: 0 60vh 0 60vh var(--noir);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding-bottom: 30px;
}
.footer-logo { height: 48px; width: auto; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
}
.footer-nav a {
  color: var(--paper-on-noir);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding-block: 4px;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover { color: var(--red-glow); }
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--paper-on-noir) 14%, transparent);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--paper-on-noir) 65%, transparent);
}
.footer-bottom a {
  color: inherit;
  text-decoration: none;
  margin-right: 18px;
  transition: color 160ms ease;
}
.footer-bottom a:last-child { margin-right: 0; }
@media (hover: hover) and (pointer: fine) {
  .footer-bottom a:hover { color: var(--paper-on-noir); }
}
@media (max-width: 640px) {
  /* Mobil: Footer nur Logo plus Rechtszeile, keine Link-Wiederholung */
  .footer-nav { display: none; }
  .footer-inner { padding-bottom: 22px; }
}

/* ---------- Unterseiten ---------- */
.page-hero {
  padding-top: clamp(140px, 18vw, 200px);
  padding-bottom: clamp(40px, 6vw, 72px);
}
.page-hero .eyebrow { margin-bottom: 0.8em; }
.page-hero p { color: var(--ink-soft); max-width: 36em; font-size: 1.12rem; }

.prose { padding-bottom: clamp(72px, 10vw, 130px); }
/* Der Block bleibt im normalen Raster, nur die Zeilenlaenge wird begrenzt */
.prose > * { max-width: 46em; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.6em; }
.prose a { color: var(--pink-deep); }
/* Mailadressen und Links im Rechtstext nicht mitten im Wort trennen */
.prose a { hyphens: none; overflow-wrap: anywhere; }
.todo-gap {
  display: inline-block;
  background: var(--rose-tint);
  border: 1px dashed var(--pink);
  border-radius: 6px;
  padding: 1px 8px;
  color: var(--pink-deep);
  font-weight: 600;
  font-style: normal;
}

/* Class-Explorer auf classes.html: Tabs mit State */
.explorer {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.explorer-nav { display: grid; border-top: 1px solid var(--line); }
.explorer-nav button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 20px 8px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--ink-soft);
  transition: color 140ms ease, background-color 140ms ease;
}
.explorer-nav .x-num {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  color: var(--ink-faint);
}
.explorer-nav .x-name {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: inherit;
}
.explorer-nav .x-arrow {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 180ms ease, transform 220ms var(--ease-out-strong);
  color: var(--pink-deep);
}
.explorer-nav button.active { color: var(--pink-deep); }
.explorer-nav button.active .x-num { color: var(--pink-deep); }
.explorer-nav button.active .x-arrow { opacity: 1; transform: translateX(0); }
@media (hover: hover) and (pointer: fine) {
  .explorer-nav button:not(.active):hover { color: var(--ink); }
}
.explorer-stage { display: grid; }
.explorer-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 240ms ease, transform 280ms var(--ease-out-strong),
              visibility 0s linear 240ms;
}
.explorer-panel.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 60ms, 60ms, 0s;
}
.explorer-visual {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 26px;
  position: relative;
  overflow: hidden;
}
.explorer-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.explorer-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.1;
  pointer-events: none;
}
.explorer-visual .visual-words {
  position: relative;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: rgba(255, 251, 252, 0.92);
}
.v-yoga   { background: linear-gradient(150deg, #B7A78F, #7A6A54); }
.v-mat    { background: linear-gradient(150deg, #A99680, #6B5A46); }
.v-red    { background: linear-gradient(150deg, #8A5F3A, #3E2C1C); }
.v-barre  { background: linear-gradient(150deg, #C0B29C, #857459); }
.explorer-panel h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.explorer-panel .class-details { max-height: none; opacity: 1; overflow: visible; margin: 18px 0 26px; }
.explorer-panel p { color: var(--ink-soft); max-width: 38em; }
@media (max-width: 860px) {
  .explorer { grid-template-columns: 1fr; }
}

/* ---------- Hero mit abgedunkeltem Hintergrundbild ---------- */
.hero-backdrop {
  position: relative;
  min-height: 84svh;
  display: flex;
  align-items: flex-end;
  padding: 150px 0 clamp(48px, 7vw, 84px);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95) brightness(0.96);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--noir) 48%, transparent) 0%,
    color-mix(in srgb, var(--noir) 62%, transparent) 55%,
    color-mix(in srgb, var(--noir) 86%, transparent) 100%);
}
.hero-inhalt {
  position: relative;
  z-index: 2;
  color: var(--paper-on-noir);
  max-width: 720px;
  margin-inline: 0;
  padding-inline: clamp(20px, 4vw, 40px);
  margin-left: max(calc((100vw - var(--container)) / 2), 0px);
}
.hero-inhalt .eyebrow { color: color-mix(in srgb, var(--paper-on-noir) 80%, transparent); }
.hero-inhalt h1 { color: #FFFFFF; }
.hero-inhalt h1 em { color: var(--hero-akzent, #D8A265); }
.hero-inhalt .hero-lead { color: color-mix(in srgb, #FFFFFF 88%, transparent); }
.hero-inhalt .hero-facts { color: color-mix(in srgb, var(--paper-on-noir) 68%, transparent); }
.button-ghost {
  background: transparent;
  border-color: color-mix(in srgb, #FFFFFF 45%, transparent);
  color: #FFFFFF;
}
@media (hover: hover) and (pointer: fine) {
  .button-ghost:hover { background: color-mix(in srgb, #FFFFFF 14%, transparent); border-color: #FFFFFF; color: #FFFFFF; }
}
@media (max-width: 860px) {
  .hero-backdrop { min-height: 88svh; padding-top: 120px; }
}

/* ---------- Kompakter Hero mit Foto (Altbestand, ungenutzt) ---------- */
.hero-compact {
  position: relative;
  overflow: hidden;
  padding-top: clamp(110px, 14vh, 150px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.hero-compact .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.hero-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 66svh;
  border: 1px solid var(--line);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 251, 250, 0.9);
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 999px;
}
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 2em;
  font-size: 0.85rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
@media (max-width: 860px) {
  .hero-compact { padding-top: 86px; padding-bottom: 40px; }
  .hero-compact .hero-grid { grid-template-columns: 1fr; gap: 0; }
  /* Mobil: Foto zuerst, die Textkarte schiebt sich darueber */
  .hero-photo {
    order: -1;
    aspect-ratio: 4 / 3;
    max-height: 46svh;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .hero-copy {
    position: relative;
    z-index: 2;
    margin-top: -58px;
    margin-inline: 14px;
    background: var(--paper);
    border-radius: var(--radius);
    padding: 26px 20px 4px;
    box-shadow: 0 -18px 40px -30px color-mix(in srgb, var(--ink) 55%, transparent);
  }
  .hero-photo figcaption { display: none; }
}

/* ---------- Nächste Classes (Startseite) ---------- */
.next-classes .schedule-item { grid-template-columns: 96px 80px minmax(0, 1fr) 160px 130px; }
.next-classes .schedule-item .day {
  /* Sonst trennt der Browser den Wochentag zu MITT-WOCH */
  hyphens: none;
  -webkit-hyphens: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.section-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 26px;
}
/* Stehen dort nur Knoepfe, gehoeren sie zusammen */
.section-foot:not(:has(p)) { justify-content: flex-start; }
.section-foot p { margin: 0; font-size: 0.9rem; color: var(--ink-faint); max-width: 34em; }
@media (max-width: 700px) {
  .next-classes .schedule-item { grid-template-columns: 62px minmax(0, 1fr) auto; }
  .next-classes .schedule-item .day .tag-lang { display: none; }
  .next-classes .schedule-item .day .tag-kurz { display: inline; }
  .next-classes .schedule-item .day {
    grid-row: 1;
    grid-column: 1;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
  .next-classes .schedule-item time { grid-row: 2; grid-column: 1; }
  .next-classes .schedule-item > div { grid-row: 1 / span 2; grid-column: 2; }
  .next-classes .schedule-item .button { grid-row: 1 / span 2; grid-column: 3; }
  .next-classes .schedule-item b { display: none; }
}

/* ---------- Format-Leiste (Startseite kompakt) ---------- */
.format-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.format-strip a {
  position: relative;
  display: block;
  padding: 26px 18px 26px 0;
  text-decoration: none;
  color: inherit;
  border-right: 1px solid var(--line);
  padding-left: 18px;
  transition: background-color 160ms ease;
}
.format-strip a:first-child { padding-left: 0; }
.format-strip a:last-child { border-right: none; }
.format-strip h3 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 500; }
.format-strip p {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink-deep);
  font-weight: 600;
}
.format-strip .intensity { margin-top: 12px; }
/* Versalien mit Sperrung nie trennen, sonst steht dort RES-TORE. */
.format-strip h3, .format-strip p { hyphens: none; -webkit-hyphens: none; }
@media (hover: hover) and (pointer: fine) {
  .format-strip a:hover { background: color-mix(in srgb, var(--rose-tint) 50%, transparent); }
}
@media (max-width: 760px) {
  .format-strip { grid-template-columns: 1fr 1fr; }
  .format-strip a { border-right: none; border-bottom: 1px solid var(--line); padding-left: 0; }
  .format-strip a:nth-last-child(-n+2) { border-bottom: none; }
}

/* ---------- Foto-Karten (Studio-Seite) ---------- */
.photo-card {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 0;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) {
  .studio-duo { grid-template-columns: 1fr; gap: 0; }
  /* Mobil: Notiz-Karte ueberlappt das Foto */
  .studio-duo .intro-note, .studio-duo .location-copy {
    position: relative;
    z-index: 2;
    margin-top: -46px;
    margin-inline: 6px;
    background: var(--paper);
    border-radius: var(--radius);
    padding: 22px 14px 8px;
    box-shadow: 0 -16px 36px -28px color-mix(in srgb, var(--ink) 55%, transparent);
  }
  .studio-duo .intro-note { border-left: none; }
  .studio-duo .location-copy { order: 2; }
  .studio-duo .photo-card { order: 1; }
}

/* ---------- Bild-Duo auf der Startseite ---------- */
.bild-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
}
.bild-duo .photo-card { margin: 0; height: 100%; }
.bild-duo .photo-card:first-child { aspect-ratio: 16 / 10; }
.bild-duo .photo-card img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  /* Mobil: zweites Bild legt sich versetzt auf das erste */
  .bild-duo { display: block; }
  .bild-duo .photo-card:first-child { aspect-ratio: 4 / 3; }
  .bild-duo .photo-card:last-child {
    aspect-ratio: 4 / 3;
    width: 66%;
    margin-top: -22%;
    margin-left: auto;
    margin-right: 14px;
    position: relative;
    z-index: 2;
    border: 5px solid var(--paper);
    box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--ink) 50%, transparent);
  }
}

/* ---------- Stundenplan: Beschriftungen, Filter, Zusammenfassung ---------- */
.schedule-tabs .tag-kurz { display: none; }
@media (max-width: 900px) {
  .schedule-tabs .tag-lang { display: none; }
  .schedule-tabs .tag-kurz { display: inline; }
}
.schedule-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.schedule-filter button {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font: 500 0.85rem "DM Sans", sans-serif;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.schedule-filter button.active {
  border-color: var(--pink-deep);
  color: var(--pink-deep);
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .schedule-filter button:not(.active):hover { color: var(--ink); }
}
.day-summary {
  margin: 0 0 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- Intensität (drei Stufen, rein typografisch/geometrisch) ---------- */
.intensity {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  hyphens: none;
  -webkit-hyphens: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.intensity i {
  display: inline-flex;
  gap: 4px;
  font-style: normal;
}
.intensity i span {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}
.intensity i span.on { background: var(--pink-deep); }

/* Karte im Duo-Layout */
.karte-figur { aspect-ratio: 4 / 3; }
.karte-figur .location-map { height: 100%; }

/* ---------- Trainerteam ---------- */
.team-foto { aspect-ratio: 3 / 4; }
.team-foto img { object-position: center top; }
.team-copy p { color: var(--ink-soft); max-width: 36em; }
.team-zitat {
  font-weight: 600;
  color: var(--pink-deep) !important;
  border-left: 2px solid var(--pink-deep);
  padding-left: 16px;
  margin-top: 1.4em;
}

/* ---------- Instagram ---------- */
.insta-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.insta-text p:last-child { color: var(--ink-soft); max-width: 30em; margin: 0; }
.insta-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, #FFFFFF 55%, transparent);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, transform 160ms var(--ease-out-strong);
}
.insta-karte:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .insta-karte:hover { border-color: var(--pink-deep); }
}
.insta-karte img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--paper);
  box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--ink) 60%, transparent);
  margin-bottom: 10px;
}
.insta-name { font-weight: 700; letter-spacing: 0.04em; }
.insta-handle { color: var(--ink-faint); font-size: 0.92rem; }
.insta-karte .button { margin-top: 18px; }
@media (max-width: 760px) {
  .insta-zeile { grid-template-columns: 1fr; }
}

/* ---------- Reveals (Progressive Enhancement) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 700ms var(--ease-out-strong);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}


/* ---------- Classes live aus Eversports ---------- */
.schedule-live[hidden] { display: none; }

.week-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.week-arrow {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font: 400 1.2rem "DM Sans", sans-serif;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, opacity 140ms ease;
}
.week-arrow[disabled] { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .week-arrow:not([disabled]):hover { border-color: var(--ink-faint); color: var(--ink); }
}
.week-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Tag-Knöpfe tragen jetzt zusätzlich das Datum */
.schedule-tabs button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.schedule-tabs .tag-datum {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.schedule-tabs button.ist-heute:not(.active) { border-color: var(--pink-deep); color: var(--pink-deep); }
.schedule-tabs button.leer:not(.active) { opacity: 0.5; }
.schedule-tabs button[disabled] { opacity: 0.28; cursor: default; }

/* ---------- Preise ---------- */
.preise[hidden], .preise-platzhalter[hidden] { display: none; }
.preis-gruppe + .preis-gruppe { margin-top: clamp(40px, 6vw, 72px); }
.preis-gruppen-titel {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  margin: 0 0 22px;
}
.preis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
/* Gruppen mit zwei Karten fuellen die Breite gleichmaessig aus */
.preis-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preis-grid:has(> :only-child) { grid-template-columns: minmax(0, 360px); }
.preis-karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
}
.preis-karte h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.preis-wert {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preis-takt { font-size: 0.9rem; font-weight: 500; color: var(--ink-faint); }
.preis-merkmale {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.preis-merkmale li { padding-left: 16px; position: relative; }
.preis-merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
}
.preis-karte .button { margin-top: auto; }

.preise-platzhalter {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(26px, 4vw, 44px);
  display: grid;
  gap: 18px;
  justify-items: start;
  max-width: 620px;
}
.preise-platzhalter p { margin: 0; color: var(--ink-soft); }

.preis-hinweise {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 38px);
}
.preis-hinweise h3 { margin: 0 0 8px; font-size: 0.95rem; font-weight: 600; }
.preis-hinweise p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* Formatchip nicht umbrechen lassen */
.schedule-item b { white-space: nowrap; }
.preis-fussnote {
  margin: clamp(20px, 3vw, 30px) 0 0;
  font-size: 0.88rem;
  color: var(--ink-faint);
}
.preis-fussnote[hidden] { display: none; }

/* ---------- Classes: Leiste, Monatsansicht, Kursfilter ---------- */
.schedule-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.schedule-leiste .week-nav { margin-bottom: 0; }

.ansicht-schalter {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.ansicht-schalter button {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 0.85rem "DM Sans", sans-serif;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.ansicht-schalter button.active { background: var(--ink); color: var(--paper); }

.schedule-filterzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.schedule-filterzeile .schedule-filter { margin-bottom: 0; }

.kurs-wahl select {
  appearance: none;
  padding: 9px 38px 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font: 500 0.85rem "DM Sans", sans-serif;
  color: var(--ink);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.kurs-wahl select:focus-visible { outline: 2px solid var(--pink-deep); outline-offset: 2px; }

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

.monats-raster[hidden] { display: none; }
.schedule-tabs[hidden] { display: none; }
.monats-kopf, .monats-zellen {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.monats-kopf {
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
}
.monats-zellen { margin-bottom: 26px; }
.monats-luecke { display: block; }
.monats-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  font: 600 0.95rem "DM Sans", sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.monats-anzahl {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--pink-deep);
}
.monats-tag.leer { color: var(--ink-faint); border-color: color-mix(in srgb, var(--line) 45%, transparent); cursor: default; }
.monats-tag[disabled] { cursor: default; opacity: 0.7; }
.monats-tag.leer .monats-anzahl { color: transparent; }
.monats-tag.ist-heute:not(.active) { border-color: var(--pink-deep); }
.monats-tag.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.monats-tag.active .monats-anzahl { color: var(--paper-on-noir, var(--paper)); }
@media (hover: hover) and (pointer: fine) {
  .monats-tag:not(.active):not([disabled]):hover { border-color: var(--ink-faint); }
}
@media (max-width: 560px) {
  .monats-kopf, .monats-zellen { gap: 4px; }
  .monats-tag { min-height: 46px; border-radius: 11px; font-size: 0.85rem; padding: 6px 2px; }
}

.schedule-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.schedule-live.laedt { opacity: 0.6; transition: opacity 140ms ease; }

/* ---------- Classes-Seite: Bildband, Formatkacheln, Ablauf, Anfahrt ---------- */
.hero-zusatz { color: var(--ink-soft); max-width: 62ch; }

.foto-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 20px);
}
.foto-band .photo-card { margin: 0; }
.foto-band img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
.foto-band .photo-card:nth-child(2) img { aspect-ratio: 3 / 4; }
@media (max-width: 700px) {
  .foto-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foto-band .photo-card:nth-child(3) { display: none; }
}

.format-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.format-kachel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
  color: inherit;
  text-decoration: none;
}
.format-kachel img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  display: block;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.format-kachel h3 { margin: 6px 0 0; font-size: 1.05rem; font-weight: 600; }
.format-kachel p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }
.kachel-link {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pink-deep);
}
.kachel-link::after { content: " →"; }
@media (hover: hover) and (pointer: fine) {
  .format-kachel:hover img { transform: scale(1.03); }
}

.ablauf-schritte {
  counter-reset: schritt;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.ablauf-schritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
}
.ablauf-schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pink-deep);
}
.ablauf-schritte strong { grid-column: 2; grid-row: 1; font-weight: 600; }
.ablauf-schritte span { grid-column: 2; grid-row: 2; color: var(--ink-soft); font-size: 0.95rem; }
.ablauf-note { margin-top: 22px; font-size: 0.9rem; color: var(--ink-faint); }

.anfahrt-liste {
  margin: 8px 0 0;
  display: grid;
  gap: 16px;
}
.anfahrt-liste > div {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.anfahrt-liste dt { font-weight: 600; font-size: 0.92rem; }
.anfahrt-liste dd { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
@media (max-width: 620px) {
  .anfahrt-liste > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- Studio: Tagesrhythmus / Elemente: Auswahlhilfe ---------- */
.tagesblock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 36px);
}
.tagesblock article { display: grid; gap: 8px; align-content: start; }
.tages-zeit {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink-deep);
}
.tagesblock h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.tagesblock p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.passt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
}
.format-wisch-hinweis { display: none; margin: 10px 0 0; font-size: 0.85rem; color: var(--ink-soft); }
/* Auf dem Handy wandern die Formate in eine Wischleiste. */
@media (max-width: 700px) {
  .format-kacheln {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Muss exakt der Innenabstand von .container sein, sonst ragt die
       Wischleiste ein paar Pixel aus der Seite und das Handy wackelt
       waagerecht. */
    scroll-padding-inline: clamp(20px, 4vw, 40px);
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-inline: calc(clamp(20px, 4vw, 40px) * -1);
    padding-inline: clamp(20px, 4vw, 40px);
  }
  .format-kacheln::-webkit-scrollbar { display: none; }
  .format-kachel {
    flex: 0 0 72%;
    scroll-snap-align: start;
  }
  .format-kachel p { font-size: 0.85rem; }
  .format-kachel img { aspect-ratio: 4 / 3; border-radius: 14px; }
  .format-wisch-hinweis { display: block; }
}

/* ---------- Feinschliff fuers Handy ----------
   Groessere Flaechen zum Tippen, lesbarere Kleinschrift, ruhigere Abstaende. */
@media (max-width: 700px) {
  /* Alles, was angetippt wird, mindestens 44 Punkt hoch */
  .button-small { padding: 14px 20px; }
  .schedule-filter button { padding: 12px 16px; font-size: 0.9rem; }
  .ansicht-schalter button { padding: 13px 22px; font-size: 0.9rem; }
  .week-arrow { width: 44px; height: 44px; }
  .kurs-wahl { width: 100%; }
  .kurs-wahl select { width: 100%; padding: 13px 40px 13px 16px; font-size: 0.9rem; }
  .schedule-filterzeile { gap: 10px; }
  .consent input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 auto; margin-top: 1px; }
  .footer-nav a { padding-block: 10px; }
  .footer-bottom a { padding-block: 12px; display: inline-block; }
  .prose a, .schedule-note a, .faq-answer a, .location-copy p a { padding-block: 6px; display: inline-block; }
  .section-label, .redlight-kicker { font-size: 0.84rem; }
  .location-meta small, .tages-zeit { font-size: 0.8rem; }
  .brand { padding-block: 6px; display: inline-block; }

  /* Kleinschrift, die auf dem Handy noch lesbar sein muss */
  .eyebrow { font-size: 0.84rem; letter-spacing: 0.14em; }
  .schedule-item small { font-size: 0.88rem; }
  .schedule-note { font-size: 0.92rem; }
  .day-summary { font-size: 0.95rem; }
  .preis-merkmale { font-size: 0.95rem; }
  .anfahrt-liste dd, .ablauf-schritte span { font-size: 0.98rem; }
  .tagesblock p { font-size: 0.98rem; }
  .format-kachel p { font-size: 0.88rem; }

  /* Ruhigere Abstaende, damit die Seite nicht endlos scrollt */
  .section-tight { padding-block: clamp(38px, 9vw, 56px); }
  .section { padding-block: clamp(56px, 12vw, 88px); }
}

/* Die Woche als feste Sieben-Tage-Leiste statt umbrechender Chips */
@media (max-width: 560px) {
  .schedule-tabs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }
  .schedule-tabs button {
    min-width: 0;
    padding: 10px 2px;
    border-radius: 12px;
    gap: 1px;
  }
  .schedule-tabs .tag-datum { font-size: 0.78rem; letter-spacing: 0; }
  .schedule-tabs .tag-kurz { font-size: 0.9rem; }
}

/* ---------- Preise auf dem Handy: Liste statt Kartenstapel ---------- */
@media (max-width: 700px) {
  .preis-grid { display: block; }
  .preis-gruppen-titel {
    font-family: "DM Sans", sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 6px;
  }
  .preis-gruppe + .preis-gruppe { margin-top: 30px; }
  .preis-karte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 3px 14px;
    padding: 15px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
  }
  .preis-karte h3 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
  }
  .preis-wert { grid-column: 2; grid-row: 1; justify-self: end; font-size: 1.4rem; white-space: nowrap; }
  .preis-takt { font-size: 0.88rem; }
  .preis-merkmale {
    grid-column: 1 / -1;
    display: block;
    font-size: 0.88rem;
    color: var(--ink-soft);
  }
  .preis-merkmale li { display: inline; padding-left: 0; }
  .preis-merkmale li::before { content: none; }
  .preis-merkmale li + li::before {
    content: " · ";
    position: static;
    display: inline;
    width: auto; height: auto;
    background: none;
    border-radius: 0;
    color: var(--ink-faint);
  }
  .preis-karte .button { grid-column: 1 / -1; margin-top: 10px; justify-self: start; }
}

/* Unterseiten-Koepfe auf dem Handy straffen, damit der Inhalt frueher kommt */
@media (max-width: 700px) {
  .page-hero {
    padding-top: calc(104px + env(safe-area-inset-top, 0px));
    padding-bottom: 26px;
  }
  h1 { font-size: clamp(2.1rem, 10vw, 3rem); }
  h2 { font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .page-hero p { font-size: 1.02rem; }
  .page-hero .hero-zusatz { font-size: 0.95rem; }
}

/* Platz unter dem Fussbereich, damit die Navigationsleiste nichts verdeckt.
   Steht bewusst am Dateiende, sonst gewinnt die allgemeine Footer-Regel. */
@media (max-width: 960px) {
  .site-footer { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
}

/* Menue-Panel an flache Displays anpassen, damit alles ohne Scrollen passt */
@media (max-height: 940px) {
  .sheet-nav a { padding: 11px 0; }
  .sheet-wort { font-size: 1.18rem; }
  .panel-inhalt { gap: 13px; padding-bottom: 20px; }
}
@media (max-height: 780px) {
  .sheet-nav a { padding: 9px 0; }
  .sheet-wort { font-size: 1.08rem; }
  .sheet-zusatz { font-size: 0.82rem; }
  .panel-inhalt { gap: 10px; padding-bottom: 16px; }
  .sheet-insta { padding: 4px 0; }
}
@media (max-height: 700px) {
  .sheet-nav a { padding: 7px 0; }
  .sheet-zusatz { display: none; }
  .sheet-wort { font-size: 1.05rem; }
}

/* Kursauswahl mit sichtbarer Beschriftung */
.kurs-wahl { display: inline-flex; align-items: center; gap: 10px; }
.kurs-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .kurs-wahl { flex-wrap: wrap; }
  .kurs-label { width: 100%; }
}
/* Leerzustand mit Sprungknopf */
.schedule-empty { display: grid; gap: 14px; justify-items: start; }
.schedule-empty p { margin: 0; }

/* Metazeile der Classes: jede Angabe bleibt zusammen, das Trennzeichen
   gehoert zum jeweiligen Stueck und verschwindet mit ihm. */
.schedule-item small > span { white-space: nowrap; }
/* Das Trennzeichen gehoert zum folgenden Stueck, das Leerzeichen davor
   setzt das Skript als eigenen Textknoten. So bricht die Zeile sauber um
   und kein Punkt bleibt allein am Zeilenende stehen. */
.schedule-item small > span + span::before { content: "\00B7\00A0"; color: var(--ink-faint); }
.schedule-item small { overflow-wrap: anywhere; }
/* Vorne in der Metazeile steht, wer die Class gibt. Das Format steht am
   Rechner als Plakette rechts und auf dem Handy im Filter. */
.class-wer { font-weight: 600; color: var(--ink); }
.class-preis { font-weight: 600; color: var(--ink); }
/* Auf schmalen Displays tritt die Levelangabe zurueck: sie steht bei fast
   allen Classes auf "Alle Level" und macht die Zeile unnoetig lang. */
@media (max-width: 620px) {
  .class-level { display: none; }
  /* Kurzer Wochentag, dadurch bleibt mehr Platz fuer den Class-Namen */
  .next-classes .schedule-item { grid-template-columns: 40px minmax(0, 1fr) auto; }
}
.schedule-item .day .tag-kurz { display: none; }

/* Lang- und Kurzform in der Metazeile: auf schmalen Displays "18 frei"
   statt "18 Plätze frei", damit die Zeile nicht umbricht. */
.schedule-item small .nur-schmal { display: none; }
@media (max-width: 620px) {
  .schedule-item small .nur-breit { display: none; }
  .schedule-item small .nur-schmal { display: inline; }
}

/* Auf dem Handy alles an derselben linken Kante ausrichten */
@media (max-width: 700px) {
  .detail-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-block: 22px;
  }
  .detail-card span { grid-column: 1; margin-bottom: 2px; }
  .detail-card h3, .detail-card p { grid-column: 1; }
  .ablauf-schritte li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ablauf-schritte li::before { grid-column: 1; grid-row: 1; }
  .ablauf-schritte strong { grid-column: 1; grid-row: 2; }
  .ablauf-schritte span { grid-column: 1; grid-row: 3; }
}

/* Auf sehr schmalen Displays passt die Metazeile so meist in eine Zeile */
@media (max-width: 430px) {
  .schedule-item small { font-size: 0.84rem; }
}

/* ---------- Raum einer Class ----------
   Fire Room bei 10 Plaetzen, Air Room bei 18 (raumVon in classes-live.js).
   Name und Raum stehen in einer Kopfzeile; wird es eng, rutscht die Marke
   unter den Namen, der Name selbst wird nie gekuerzt. Die Toene sind fest
   und nicht an die Farbwelt gebunden: der Raum soll auf jeder Seite gleich
   aussehen. Text auf Toenung liegt ueber 7 zu 1. */
.class-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-bottom: 3px;
}
.schedule-item .class-kopf strong { display: inline; }
.class-raum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.class-raum::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.raum-fire { background: #FCE7DD; color: #8A2E0C; }
.raum-air { background: #E3EEF6; color: #1B4764; }

/* Im Buchungsfenster steht der Raum unter dem Titel */
.buchwahl-karte .class-raum { margin: -4px 0 14px; }

@media (max-width: 620px) {
  /* Alle Classes dauern 45 Minuten, auf dem Handy traegt die Angabe nichts
     bei und verlaengert die Metazeile; der Raum steht dafuer oben. */
  .schedule-item .class-dauer { display: none; }
  .class-kopf { gap: 3px 8px; margin-bottom: 4px; }
  .class-raum { font-size: 0.66rem; padding: 2px 8px 2px 7px; }
}

/* ---------- Oeffnungszeiten ---------- */
.zeiten-titel {
  margin: 30px 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: 0.74rem;
}
.zeiten-titel + .anfahrt-liste { margin-top: 4px; }
.intro-zeiten {
  margin-top: 12px;
  font-size: 0.95rem;
}

/* ---------- Wegwahl beim Buchen ----------
   Der Buchen-Knopf im Kalender fragt zuerst, wie jemand teilnehmen moechte:
   selbst buchen und bezahlen, oder mit Hansefit / Epassi anmelden. Zwei grosse
   Flaechen statt einer Liste, damit es auch am Telefon mit dem Daumen geht. */
.buchwahl {
  position: fixed;
  inset: 0;
  /* Ueber dem festen Seitenkopf (z-index 1000) und dem Grain-Schleier
     (2000), damit das Buchungsfenster wirklich den ganzen Bildschirm
     verdeckt und der Kopf nicht darueber stehen bleibt. Unter dem
     Sprunglink (3000), der nur beim Tastaturfokus auftaucht. */
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.buchwahl-hintergrund {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(46, 37, 28, 0.34);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.buchwahl-karte {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.75rem;
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(46, 37, 28, 0.24);
}

.buchwahl-termin {
  margin: 0 0 0.15rem;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.buchwahl-titel { margin: 0 0 1.25rem; font-size: 1.5rem; line-height: 1.2; }

.buchwahl-weg {
  display: block;
  margin-bottom: 0.75rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-deep);
  text-decoration: none;
  color: var(--ink);
}

.buchwahl-weg:hover, .buchwahl-weg:focus-visible {
  border-color: var(--pink-deep);
  background: var(--rose-tint);
}

.buchwahl-weg-titel { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.buchwahl-weg-text { display: block; font-size: 0.92rem; line-height: 1.45; color: var(--ink-soft); }

.buchwahl-zu {
  margin-top: 0.5rem;
  border: 0;
  background: none;
  padding: 0.6rem 0;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .buchwahl { padding: 0.75rem; }
  .buchwahl-karte { padding: 1.25rem; }
}

/* Wenn das Buchungsfenster offen ist, wird die Seite dahinter eingefroren.
   position:fixed statt nur overflow:hidden, weil iOS Safari sonst durch das
   Fenster hindurchscrollt und der Seitenkopf hochwandert. top setzt das
   Skript (classes-live.js) auf die aktuelle Scrollhoehe, damit die Seite
   optisch nicht springt; beim Schliessen wird zurueckgescrollt. */
body.buchwahl-offen {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Muster-Widerrufsformular in den AGB: als ausfüllbarer Vordruck abgesetzt,
   damit es sich klar vom Fließtext der Belehrung abhebt. */
.widerruf-formular {
  border: 1px solid var(--line, #E6DED9);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  background: rgba(0, 0, 0, 0.02);
  font-size: 0.95rem;
  line-height: 1.7;
}


/* ---------- Durchlaufende Schleifen ----------
   Kacheln oder Karten laufen als endlose Schleife gleichmaessig von rechts
   nach links (Konstantin, 03.09.2026: "automatisch in einem flow, wie eine
   schleife"). Genutzt fuer die Class-Kacheln auf schedule.html und die vier
   Karten "Such dir aus" auf classes.html. Das Skript haengt die Elemente
   einmal als Kopie an, misst die Breite und setzt die Klasse "fluss"; die
   Schleife ist eine CSS-Animation, die die Spur um genau eine Reihe
   verschiebt und nahtlos von vorn beginnt. Zeigefinger und Beruehrung halten
   sie an. Ohne Skript bleibt eine Wischleiste mit Einrasten. */
.format-slider { position: relative; overflow: hidden; --kachel-abstand: clamp(16px, 2.2vw, 26px); }
.format-slider .format-slider-spur {
  display: flex;
  gap: var(--kachel-abstand);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.format-slider .format-slider-spur::-webkit-scrollbar { display: none; }
.format-slider .format-slider-spur > * {
  flex: 0 0 calc((100% - 3 * var(--kachel-abstand)) / 4);
  scroll-snap-align: start;
}
.format-slider.fluss .format-slider-spur {
  width: max-content;
  overflow: visible;
  scroll-snap-type: none;
  animation: kachel-schleife var(--fluss-dauer, 42s) linear infinite;
  will-change: transform;
}
.format-slider.fluss .format-slider-spur > * {
  flex-basis: var(--kachel-breite, 280px);
  width: var(--kachel-breite, 280px);
}
/* Die Hover-Pause nur bei echtem Zeigefinger: auf dem Handy bleibt der
   Hover nach dem Tippen kleben, und die Schleife stand dann still
   (Konstantin, 03.09.2026). */
.format-slider.fluss.haelt .format-slider-spur { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .format-slider.fluss:hover .format-slider-spur { animation-play-state: paused; }
}
@keyframes kachel-schleife {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--kachel-abstand) / 2)); }
}
@media (max-width: 1100px) {
  .format-slider .format-slider-spur > * { flex-basis: calc((100% - 2 * var(--kachel-abstand)) / 3); }
}
@media (max-width: 700px) {
  .format-slider .format-slider-spur > * { flex-basis: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .format-slider.fluss .format-slider-spur { animation: none; }
}

/* Kopf der Kalenderseite: Foto 29 hinter der Ueberschrift, Magenta-Schleier
   darueber, Schrift davor (Konstantin, 03.09.2026: "zu viel vor der
   buchung"). Niedriger als der Hero der Startseite, damit der Kalender
   schnell im Blick ist. */
.hero-kompakt { min-height: 0; padding-top: 130px; padding-bottom: clamp(36px, 5vw, 60px); }
.hero-kompakt .hero-bg { object-position: center 38%; }
.hero-scrim-magenta {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pink) 46%, transparent) 0%,
    color-mix(in srgb, var(--pink) 62%, transparent) 55%,
    color-mix(in srgb, color-mix(in srgb, var(--pink) 55%, var(--noir)) 84%, transparent) 100%);
}
.hero-kompakt .hero-zusatz { font-size: 0.95em; margin-top: 0.4em; }
@media (max-width: 700px) {
  .hero-backdrop.hero-kompakt { min-height: 0; padding-top: 112px; }
}

/* ---------- Titelbild auf dem Handy ----------
   Nicht mehr bildschirmhoch (Konstantin, 03.09.2026: "nicht auf
   Originalgroesse"), die Schrift bleibt im Bild. Rund zwei Drittel der
   Bildschirmhoehe, der Ausschnitt ist auf den grossen Spiegel links der
   Bildmitte ausgerichtet, damit vom Regal rechts wenig zu sehen ist. */
@media (max-width: 700px) {
  .hero-backdrop {
    min-height: 64svh;
    padding: 118px 0 30px;
  }
  .hero-bg { object-position: 40% center; }
}

/* Studio-Seite auf dem Handy (Konstantin, 03.09.2026): der Abschnitt
   "Ein Tag in Winterhude" entfaellt, und das Foto bei "Meet Cassandra" wird
   unten etwas kuerzer (4:5 statt 3:4, Ausrichtung bleibt oben). */
@media (max-width: 700px) {
  .tagesabschnitt { display: none; }
  .team-foto { aspect-ratio: 4 / 5; }
}

/* Signature-Class-Foto (Nr. 27): Gesicht sitzt im oberen Fuenftel, deshalb
   die Ausrichtung nach oben, sonst schneidet der flache Handyausschnitt
   den Kopf ab. */
.redlight-foto img { object-position: center 18%; }

/* Studio-Seite (Konstantin, 03.09.2026: "studio cooler aufbauen"): Foto 9
   hinter der Ueberschrift, darunter ein Dreierband hochkant und ein
   durchlaufender Rundgang aus quadratischen Studiomotiven. */
.rundgang-slider .photo-card { aspect-ratio: 1 / 1; border: 0; }
.rundgang-slider .photo-card img { width: 100%; height: 100%; object-fit: cover; }

/* Kompakte Foto-Koepfe (Classes, Studio): kleinere Ueberschrift, weniger
   Hoehe, dunkler Verlauf nach unten statt flaechigem Magenta (Konstantin,
   03.09.2026 zum Studio-Kopf: "das ist nicht so schoen"). */
.hero-kompakt .hero-inhalt h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); max-width: 14ch; }
.hero-kompakt .hero-lead { max-width: 52ch; }
.hero-kompakt { padding-top: 120px; }
.hero-kompakt .hero-scrim-magenta {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pink) 22%, transparent) 0%,
    color-mix(in srgb, var(--pink) 40%, transparent) 45%,
    color-mix(in srgb, color-mix(in srgb, var(--pink) 45%, var(--noir)) 88%, transparent) 100%);
}
.hero-studio .hero-bg { object-position: center 22%; }
/* Preisseite seit 03.10.2026 mit Fotokopf (Konstantin: "auf die preisseite
   auch ein schönes studio bild"): der Raum mit Leuchten und Spiegeln. */
.hero-preise .hero-bg { object-position: center 38%; }

/* Classes- und Studio-Kopf: blasses Magenta (Konstantin, 03.09.2026: "zu
   dolles magenta, abschwaechen"). */
.hero-classes .hero-scrim-magenta,
.hero-studio .hero-scrim-magenta,
.hero-preise .hero-scrim-magenta {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pink) 12%, transparent) 0%,
    color-mix(in srgb, var(--pink) 26%, transparent) 45%,
    color-mix(in srgb, color-mix(in srgb, var(--pink) 40%, var(--noir)) 78%, transparent) 100%);
}

/* Pilates-Spruch im Kopf des Kalenders statt des Erklaertextes (Konstantin,
   03.09.2026: "schreib stattdessen einen pilatesspruch und andere hoehe").
   Sitzt oben auf Hoehe der Ueberschrift statt unten an der Grundlinie. */
.section-head > .spruch {
  align-self: start;
  margin-top: 2.4rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 24em;
}
.spruch-quelle {
  display: block;
  margin-top: 0.6rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink-deep);
}
@media (max-width: 760px) { .section-head > .spruch { margin-top: 0.4rem; } }

/* Lesbarkeit der kompakten Foto-Koepfe (Konstantin, 03.09.2026: "man sieht
   die schrift kaum noch"): kein zusaetzliches Magenta, sondern ein dunkler
   Verlauf von links hinter dem Textblock und ein weicher Schatten an der
   Schrift. */
.hero-kompakt .hero-scrim-magenta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--noir) 58%, transparent) 0%,
    color-mix(in srgb, var(--noir) 34%, transparent) 42%,
    transparent 78%);
}
.hero-kompakt .hero-inhalt h1,
.hero-kompakt .hero-inhalt .eyebrow,
.hero-kompakt .hero-lead { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 28px rgba(0, 0, 0, 0.35); }
.hero-kompakt .hero-inhalt h1 em { color: color-mix(in srgb, var(--hero-akzent, #F5B8CE) 88%, #FFFFFF); }
@media (max-width: 700px) {
  .hero-kompakt .hero-scrim-magenta::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--noir) 20%, transparent) 0%, color-mix(in srgb, var(--noir) 55%, transparent) 100%);
  }
}

/* Ausgebuchte Class im Kalender: kein Link, kein Hover, sichtbar gedaempft. */
.button.ist-ausgebucht,
.button.ist-ausgebucht:hover {
  opacity: .6;
  cursor: default;
  pointer-events: none;
  border-color: var(--line);
  color: var(--ink-soft);
  background: transparent;
}

/* Mailadresse im Fuss: auf breiten Schirmen steht sie in der Fussnavigation,
   auf dem Handy ist die ausgeblendet, dann hier in der untersten Zeile. */
.footer-bottom .footer-mail { display: none; }
.footer-bottom .footer-mail a { margin-right: 0; }
@media (max-width: 640px) {
  .footer-bottom .footer-mail { display: block; margin-top: 6px; }
  .footer-bottom .footer-mail .footer-trenner { display: none; }
}

/* Startseite: am Handy Paket statt Founding Member */
.nur-handy { display: none; }
@media (max-width: 960px) {
  .nur-gross { display: none; }
  .nur-handy { display: inline-flex; }
}

/* ---------- Preisseite: Studio, das in die Seite übergeht ----------
   Konstantin, 03.10.2026: "nicht so als foto sondern übergehend in die
   website, cooler effekt". Kein abgesetzter Fotoblock: das Bild läuft nach
   unten und zu den Seiten hin in den Seitenhintergrund aus, die Schrift
   steht dunkel im Übergang, wie auf den übrigen hellen Seitenköpfen. Beim
   Laden zoomt das Bild langsam auf seine Größe zurück, beim Scrollen bleibt
   es leicht zurück und verblasst (Parallaxe über die Scroll-Zeitleiste, wo
   der Browser sie kennt; sonst steht es still). Zoom über "scale",
   Parallaxe über "translate", damit sich die beiden nicht überschreiben. */
.hero-preise {
  min-height: clamp(560px, 86svh, 880px);
  padding-top: 0;
  padding-bottom: clamp(24px, 4vw, 48px);
  overflow: hidden;
  isolation: isolate;
}
.hero-preise .hero-bg {
  object-position: center 30%;
  filter: saturate(1.05);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 32%, rgba(0, 0, 0, 0.5) 54%, rgba(0, 0, 0, 0.12) 76%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 0%, #000 32%, rgba(0, 0, 0, 0.5) 54%, rgba(0, 0, 0, 0.12) 76%, transparent 92%);
  animation: preise-ein 2.4s var(--ease-out-strong) both;
}
@keyframes preise-ein { from { scale: 1.1; opacity: 0; } to { scale: 1; opacity: 1; } }
@supports (animation-timeline: scroll()) {
  .hero-preise .hero-bg {
    animation: preise-ein 2.4s var(--ease-out-strong) both, preise-zurueck linear both;
    animation-timeline: auto, scroll(root);
    animation-range: normal, 0 90vh;
  }
  @keyframes preise-zurueck { to { translate: 0 18%; opacity: 0.35; } }
}
/* Seitenränder weich in den Hintergrund, oben ein Hauch Rosé. */
.hero-preise .hero-scrim {
  background:
    linear-gradient(90deg, var(--paper) 0%, transparent 14%, transparent 86%, var(--paper) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 30%, transparent) 0%, transparent 30%);
}
.hero-preise .hero-scrim::after { content: none; }
.hero-preise .hero-inhalt { color: var(--ink); }
.hero-preise .hero-inhalt .eyebrow { color: var(--pink-deep); }
.hero-preise .hero-inhalt h1 { color: var(--ink); }
.hero-preise .hero-inhalt h1 em { color: var(--titel-akzent); }
.hero-preise .hero-inhalt h1,
.hero-preise .hero-inhalt .eyebrow,
.hero-preise .hero-lead {
  text-shadow: 0 0 18px var(--paper), 0 0 36px var(--paper), 0 0 2px var(--paper);
}
.hero-preise .hero-lead { color: var(--ink-soft); }
/* Die Karten wachsen aus dem Übergang, statt nach einer Lücke zu kommen. */
.hero-preise + .section-tight { padding-top: clamp(4px, 1.5vw, 20px); }
@media (prefers-reduced-motion: reduce) {
  .hero-preise .hero-bg { animation: none; }
}
@media (max-width: 700px) {
  .hero-preise.hero-kompakt { min-height: 0; padding-top: min(78vw, 380px); }
  .hero-preise .hero-bg { object-position: 40% 20%; }
}

/* ---------- Handy-Menü schlicht (Konstantin, 03.10.2026: "das burgermenü
   ist noch zu vollgepackt, einfach nur menüpunkte und intuitiver gestalten,
   foundingmember raus", "impressum usw auch raus, ist ja im footer").
   Nur noch sechs Punkte, benannt nach dem, was man dort tut. Kein Knopf,
   keine Unterzeilen, kein Fuß; Instagram steht oben im Kopf, Rechtliches
   und "Verträge hier kündigen" im Seitenfuß. Ein Pfeil rechts zeigt, dass
   die Zeile ein Link ist; die aktuelle Seite trägt den Punkt davor. */
.panel-inhalt { gap: 0; padding-bottom: 18px; }
.sheet-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 2px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.sheet-nav a:last-child { border-bottom: 0; }
.sheet-nav a::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.35;
  margin-right: 4px;
}
.sheet-nav a[aria-current="page"] { color: var(--pink-deep); }
.sheet-nav a[aria-current="page"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink-deep);
  margin-right: -2px;
  order: -1;
  flex: none;
}
.sheet-nav a[aria-current="page"] { justify-content: flex-start; }
.sheet-nav a[aria-current="page"]::after { margin-left: auto; }
@media (max-height: 700px) {
  .sheet-nav a { padding: 11px 2px; font-size: 1.18rem; }
}

/* ---------- Kopf auf dem Rechner (Konstantin, 03.10.2026: "schöneres menü
   ... den header dicker ... logo größer und ein professionelles menü").
   Höher, größeres Logo, dunkle Links mit einer Linie, die beim Überfahren
   aus der Mitte wächst und die aktuelle Seite dauerhaft markiert. Beim
   Scrollen (Klasse scrolled aus main.js) zieht sich der Kopf weich
   zusammen. Nur ab 961 Punkten; darunter gilt das Handy-Menü. */
@media (min-width: 961px) {
  html { scroll-padding-top: 110px; }
  .header-inner {
    padding-block: 26px;
    transition: padding 320ms var(--ease-out-strong);
  }
  .brand img {
    height: 42px;
    transition: height 320ms var(--ease-out-strong);
  }
  .site-header.scrolled .header-inner { padding-block: 16px; }
  .site-header.scrolled .brand img { height: 34px; }
  .site-header {
    transition: transform 320ms var(--ease-out-strong), box-shadow 320ms ease;
  }
  .site-header.scrolled {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 70%, transparent),
                0 10px 30px -18px color-mix(in srgb, var(--noir) 35%, transparent),
                0 -100vh 0 0 var(--paper);
  }
  /* Mehr Luft unter dem höheren Kopf: Fotoköpfe beginnen tiefer. */
  .hero-backdrop { padding-top: 180px; }
  .hero-kompakt { padding-top: 160px; }
  .hero-preise { padding-top: 0; }
  .nav-right-links { gap: clamp(26px, 3vw, 44px); }
  .nav-right-links a {
    position: relative;
    padding-block: 8px;
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink);
  }
  .nav-right-links a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--pink-deep);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 280ms var(--ease-out-strong);
  }
  .nav-right-links a[aria-current="page"] { color: var(--pink-deep); font-weight: 600; }
  .nav-right-links a[aria-current="page"]::after { transform: scaleX(1); }
}
@media (min-width: 961px) and (hover: hover) and (pointer: fine) {
  .nav-right-links a:hover::after { transform: scaleX(1); }
}
@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
  .header-inner, .brand img, .nav-right-links a::after { transition: none; }
}

/* ---------- Preiskarten schöner (Konstantin, 03.10.2026: "beschreibungen
   der preise und mitgliedschaften schöner darstellen"). Name und Preis groß,
   darunter als Etikett der Preis je Class, Leistungen mit Häkchen, Laufzeit
   klein als Fußzeile. Die Mitgliedschaft mit dem besten Preis je Class ist
   hervorgehoben (Rahmen, Marke, voller Knopf). */
.preis-karte { gap: 0; position: relative; transition: border-color 200ms ease, box-shadow 200ms ease; }
.preis-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; }
.preis-karte h3 { font-family: "Playfair Display", Georgia, serif; font-size: 1.25rem; font-weight: 600; }
.preis-marke {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pink-deep);
  background: color-mix(in srgb, var(--pink-deep) 10%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
}
.preis-karte .preis-wert { margin-top: 18px; font-size: clamp(2.1rem, 3.6vw, 2.6rem); }
.preis-je {
  margin: 12px 0 0;
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--pink-deep);
  background: color-mix(in srgb, var(--pink-deep) 8%, transparent);
  border-radius: 8px;
  padding: 5px 10px;
}
.preis-karte .preis-merkmale {
  width: 100%;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  gap: 10px;
  font-size: 0.94rem;
  color: var(--ink);
}
.preis-karte .preis-merkmale li { padding-left: 26px; }
.preis-karte .preis-merkmale li::before {
  top: 0.3em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pink-deep) 14%, transparent);
}
.preis-karte .preis-merkmale li::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: calc(0.3em + 3.5px);
  width: 3.5px;
  height: 6.5px;
  border-right: 1.6px solid var(--pink-deep);
  border-bottom: 1.6px solid var(--pink-deep);
  transform: rotate(45deg);
}
.preis-klein { margin: 16px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--ink-faint); }
.preis-karte .button { margin-top: 24px; width: 100%; justify-content: center; }
.preis-karte-hervor {
  border-color: color-mix(in srgb, var(--pink-deep) 55%, var(--line));
  box-shadow: 0 18px 44px -26px color-mix(in srgb, var(--pink-deep) 55%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .preis-karte:hover { border-color: color-mix(in srgb, var(--pink-deep) 35%, var(--line)); }
}

/* Handy: Liste bleibt, aber mit Etikett, Häkchen untereinander und
   Kleingedrucktem; Marke neben dem Namen. */
@media (max-width: 700px) {
  .preis-karte { gap: 0 14px; padding: 18px 0; }
  .preis-kopf { grid-column: 1; grid-row: 1; }
  .preis-karte h3 { font-family: "DM Sans", sans-serif; font-size: 1.05rem; }
  .preis-karte .preis-wert { margin-top: 0; font-size: 1.45rem; }
  .preis-je { grid-column: 1 / -1; justify-self: start; margin-top: 8px; font-size: 0.8rem; padding: 4px 9px; }
  .preis-karte .preis-merkmale {
    grid-column: 1 / -1;
    display: grid;
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
    gap: 5px;
    font-size: 0.9rem;
  }
  .preis-karte .preis-merkmale li { display: block; padding-left: 24px; }
  .preis-karte .preis-merkmale li + li::before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0.3em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pink-deep) 14%, transparent);
  }
  .preis-klein { grid-column: 1 / -1; margin-top: 8px; }
  .preis-karte .button { grid-column: 1 / -1; width: auto; justify-self: start; margin-top: 12px; }
  .preis-karte-hervor { box-shadow: none; border-color: var(--line); }
}
/* Marke als Fähnchen auf dem oberen Rand, damit die Preise aller Karten auf
   einer Linie bleiben; Knöpfe unten bündig. */
@media (min-width: 701px) {
  .preis-marke {
    position: absolute;
    top: 0;
    left: clamp(22px, 2.6vw, 30px);
    transform: translateY(-50%);
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--pink-deep) 30%, var(--line));
  }
  .preis-karte-hervor .preis-marke { background: var(--pink-deep); color: #FFF7FA; border-color: var(--pink-deep); }
  .preis-karte .preis-merkmale { margin-bottom: 24px; }
  .preis-karte .preis-klein { margin-top: -8px; margin-bottom: 24px; }
  .preis-karte .button { margin-top: auto; }
}
@media (max-width: 700px) {
  .preis-karte .preis-merkmale li::before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0.3em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pink-deep) 14%, transparent);
  }
}

/* ---------- Feinschliff Gesamtdesign (Konstantin, 03.10.2026: "passe das
   gesamtdesign der website nochmal an", Umfang: Feinschliff, einheitlich). */

/* Classes-Raster auf der Startseite: jede Reihe beginnt bündig, Reihen sind
   durch eine Linie getrennt, die letzte Spalte hat keinen Strich rechts. */
@media (min-width: 761px) {
  .format-strip a:nth-child(4n + 1) { padding-left: 0; }
  .format-strip a:nth-child(4n) { border-right: none; }
  .format-strip a:nth-child(n + 5) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .format-strip a:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .format-strip a:last-child { border-bottom: none; }
}

/* Fotoköpfe enden nicht mehr mit harter Kante, sondern laufen weich in die
   Seite aus, wie der Kopf der Preisseite. */
.hero-backdrop:not(.hero-preise)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(60px, 9vw, 120px);
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--paper) 55%, transparent) 55%, var(--paper) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero-backdrop .hero-inhalt { z-index: 2; }
/* Text und Knöpfe bleiben über dem Übergang. */
.hero-backdrop:not(.hero-preise) { padding-bottom: calc(clamp(60px, 9vw, 120px) + clamp(16px, 2.5vw, 32px)); }

/* ---------- Startseiten-Kopf (Konstantin, 03.10.2026: "titelbild komisch mit
   dem übergang in den slider, vllt auch anderes besseres bild, was nochmal
   mehr studio zeigt"). Bild: der ganze Raum mit Leuchten und allen vier
   Spiegeln (studio-hero). Statt Magenta über allem nur ein dunkler Verlauf
   links hinter dem Text, rechts bleibt der Raum hell. Das Laufband liegt als
   Glasband über dem unteren Bildrand, das Foto läuft darunter weiter;
   kein Verblassen ins Leere davor. */
.hero-start { padding-bottom: calc(66px + clamp(40px, 6vw, 72px)); }
.hero-start::after { content: none; }
.hero-start .hero-bg { object-position: center 40%; filter: saturate(1.04) brightness(1); }
.hero-start .hero-scrim {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--noir) 66%, transparent) 0%,
      color-mix(in srgb, var(--noir) 40%, transparent) 38%,
      color-mix(in srgb, var(--noir) 6%, transparent) 70%,
      transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--noir) 18%, transparent) 0%, transparent 28%);
}
.hero-start .hero-inhalt h1,
.hero-start .hero-inhalt .eyebrow,
.hero-start .hero-lead { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 30px rgba(0, 0, 0, 0.35); }
.hero-start + .ticker {
  position: relative;
  z-index: 3;
  margin-top: -66px;
  height: 66px;
  display: flex;
  align-items: center;
  padding-block: 0;
  border-block: 0;
  border-top: 1px solid color-mix(in srgb, #FFFFFF 45%, transparent);
  background: color-mix(in srgb, var(--paper) 42%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
}
@media (max-width: 760px) {
  .hero-start .hero-bg { object-position: 38% 30%; }
  .hero-start .hero-scrim {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--noir) 20%, transparent) 0%,
      color-mix(in srgb, var(--noir) 10%, transparent) 30%,
      color-mix(in srgb, var(--noir) 62%, transparent) 72%,
      color-mix(in srgb, var(--noir) 70%, transparent) 100%);
  }
}

/* Kein blinkender Schreibstrich beim Klick auf Logo oder Menü (Konstantin,
   03.10.2026: "siehts so aus als wenn man da schreiben könnte"). Chrome und
   Safari setzen beim Klick in Text eine Textmarke, sobald die Textcursor-
   Navigation an ist. Außerhalb von Eingabefeldern ist sie unsichtbar, Kopf
   und Menüs sind nicht als Text auswählbar. */
body { caret-color: transparent; }
input, textarea, select, [contenteditable="true"] { caret-color: auto; }
.site-header, .menu-panel, .footer-nav, .button {
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Classes-Seite seit 03.10.2026 mit Fotokopf (Konstantin: "classes braucht
   auch ein bild"): das Class-Panorama, der Kalender dafür den Empfang. */
.hero-classes .hero-bg[src*="studio-empfang"] { object-position: center 45%; }

/* ---------- Handy aufgeräumt (Konstantin, 03.10.2026: "auf dem handy ist
   das titelbild komisch", "sieht alles sehr unaufgeräumt aus").
   Startseitenkopf: oben bleibt der Raum frei, der Text sitzt gebündelt im
   dunklen unteren Teil, zwei gleich breite Knöpfe. Höhe bleibt bei etwa zwei
   Dritteln des Bildschirms (Ansage 03.09.2026). Köpfe der Unterseiten ohne
   den zweiten Absatz. */
@media (max-width: 700px) {
  .hero-start { padding-top: max(46svh, 300px); padding-bottom: calc(66px + 26px); min-height: 0; }
  .hero-start .hero-bg { object-position: 38% 0%; }
  .hero-start .hero-scrim {
    background: linear-gradient(180deg,
      transparent 0%,
      transparent 34%,
      color-mix(in srgb, var(--noir) 48%, transparent) 52%,
      color-mix(in srgb, var(--noir) 72%, transparent) 70%,
      color-mix(in srgb, var(--noir) 78%, transparent) 100%);
  }
  .hero-start .eyebrow { display: none; }
  .hero-start h1 { font-size: clamp(2.1rem, 9.6vw, 2.6rem); }
  .hero-start .hero-lead { margin-top: 0.8em; font-size: 1rem; }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 1.4em;
  }
  .hero-actions .button { justify-content: center; padding-inline: 12px; white-space: nowrap; }
  .hero-zusatz { display: none; }
}

@media (max-width: 700px) {
  /* "Such dir aus, wie dein Tag läuft": auf dem Handy keine laufende
     Schleife mit Text, sondern eine ruhige Liste untereinander. */
  .passt-slider.fluss .format-slider-spur,
  .passt-slider .format-slider-spur {
    display: grid;
    gap: 0;
    width: auto;
    overflow: visible;
    animation: none;
    transform: none;
  }
  .passt-slider .format-slider-spur > * { width: auto; flex-basis: auto; padding-block: 18px; border-bottom: 1px solid var(--line); }
  .passt-slider .format-slider-spur > [aria-hidden="true"] { display: none; }

  /* Classes-Raster der Startseite: eine Zeile je Class, Name und Etiketten
     links, Intensität rechts; nichts bricht mitten im Etikett um. */
  .format-strip { grid-template-columns: 1fr; }
  .format-strip a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
  .format-strip a:last-child { border-bottom: none; }
  .format-strip h3 { grid-column: 1; margin: 0; font-size: 1.15rem; }
  .format-strip p { grid-column: 1; font-size: 0.7rem; }
  .format-strip .intensity { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 0; }
  .format-strip .intensity i { font-size: 1rem; }

  /* "Diese Woche im Studio": Wochentag über der Uhrzeit, beide oben bündig
     mit dem Class-Namen. */
  .next-classes .schedule-item { align-items: start; row-gap: 2px; }
  .next-classes .schedule-item .day { align-self: end; line-height: 1.2; }
  .next-classes .schedule-item time { align-self: start; line-height: 1.2; }
  .next-classes .schedule-item .button { align-self: center; }

  /* Classes-Seite: Intensität und Knopf untereinander statt gequetscht. */
  .explorer-panel .intensity { margin-bottom: 14px; }
  .explorer-panel .button { display: inline-flex; }
  .explorer-panel .class-details { margin: 14px 0 18px; }

  /* Rotlicht: die drei Etiketten weg, der Text sagt es schon. */
  .redlight-meta { display: none; }
}
@media (max-width: 700px) {
  .passt-slider.fluss .format-slider-spur > *,
  .passt-slider .format-slider-spur > * { width: auto; flex-basis: auto; }
  .explorer-panel .intensity { flex-basis: 100%; width: 100%; display: flex; }
  .explorer-panel > .button { margin-top: 0; }
}