/* ============================================================
   NORTHLAND GYM — Fassung „Hell"
   Minimalistisch · klar · Deluxe
   Palette aus den Studiofotos gemessen: Eiche, Nussbaum, Warmgrau.
   Grün bleibt Markenfarbe, tritt aber nur noch an Bedienelementen auf.
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/font/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/font/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Grundwerte ---------- */
:root {
  --papier: #faf8f5;
  --papier-tief: #f2eee7;
  --papier-warm: #ece5da;
  --tinte: #1c1a17;
  --tinte-weich: #4a453d;
  /* War #8a8378 und erreichte auf keinem der drei Papiertoene 4.5:1
     (3.54 / 3.24 / 3.00), stand aber 19-mal als Textfarbe. Gleicher
     Farbton, nur dunkler: jetzt 5.44 / 4.98 / 4.61. */
  --grau: #6b655d;
  --linie: #ddd6cb;
  --linie-fein: #e8e2d8;

  --eiche: #e2b57d;
  --nuss: #62513a;
  --gruen: #00754c;
  --gruen-tief: #005538;
  --gold: #b8943f;

  --serif: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --rand: clamp(20px, 5vw, 80px);
  --luft: clamp(88px, 11vw, 168px);
  --breite: 1320px;
  /* Innenmass der Abschnitte: Es ist die Kante, an der ALLES fluchtet.
     .section rechnet sein Padding in --breite hinein, freistehende
     Baender wie Hero und CTA muessen darum hierauf gesetzt werden. */
  --innen: calc(var(--breite) - 2 * var(--rand));

  --weich: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; display: block; }
img { height: auto; }

/* [hidden] muss jede display-Regel schlagen — sonst zeigt z. B. die
   Erfolgsmeldung des Formulars (display:flex) dauerhaft „Danke dir!". */
[hidden] { display: none !important; }

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

::selection { background: var(--eiche); color: var(--tinte); }

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

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.12;
  color: var(--tinte);
}

.kicker {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kicker::after {
  content: '';
  flex: 0 0 44px;
  height: 1px;
  background: var(--linie);
}

.section-title {
  font-size: clamp(23px, 2.3vw, 33px);
  font-weight: 200;
  line-height: 1.46;
  letter-spacing: 0.14em;
  max-width: 22em;
}
.section-title em {
  font-style: normal;
  font-weight: 200;
}

.lead {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.6;
  color: var(--tinte-weich);
  font-weight: 300;
  max-width: 34em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Raster ---------- */
.section {
  padding: var(--luft) var(--rand);
  max-width: var(--breite);
  margin: 0 auto;
}
.section-head { margin-bottom: clamp(40px, 5vw, 72px); }

.band {
  background: var(--papier-tief);
}
.band-warm {
  background: var(--papier-warm);
}

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: none;
  padding: 13px 42px;
  border: 1px solid var(--tinte);
  background: transparent;
  color: var(--tinte);
  cursor: pointer;
  transition: background 0.4s var(--weich), color 0.4s var(--weich),
              border-color 0.4s var(--weich);
}
.btn:hover {
  background: var(--tinte);
  color: var(--papier);
}
/* Die Referenz fuellt Knoepfe nicht mit der Markenfarbe, sondern umrandet sie.
   Gruen bleibt dem Status und den Links vorbehalten. */
.btn-primary {
  background: transparent;
  border-color: var(--tinte);
  color: var(--tinte);
}
.btn-primary:hover {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}
/* Genau ein gefuellter Knopf je Zusammenhang — der echte Abschluss. */
.btn-fest {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}
.btn-fest:hover {
  background: transparent;
  color: var(--tinte);
  border-color: var(--tinte);
}
.btn-light {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--tinte);
}
.btn-light:hover { background: transparent; color: var(--papier); border-color: var(--papier); }
.btn-lg { padding: 15px 48px; font-size: 15px; }
.btn-block { width: 100%; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--rand);
  background: rgba(250, 248, 245, 0);
  border-bottom: 1px solid transparent;
  transition: background 0.45s var(--weich), border-color 0.45s var(--weich),
              padding 0.45s var(--weich);
}
.nav.is-stuck {
  background: rgba(250, 248, 245, 0.94);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--linie-fein);
  padding-top: 14px;
  padding-bottom: 14px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.nav-logo-mark {
  width: 34px;
  height: 32px;
  fill: var(--tinte);
  transition: fill 0.45s var(--weich);
}
.nav-logo-text {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tinte);
  transition: color 0.45s var(--weich);
}
.nav-logo-text em {
  font-style: normal;
  font-weight: 300;
  color: var(--gruen);
}

.nav-links {
  display: flex;
  gap: clamp(18px, 2.4vw, 38px);
  margin-left: auto;
}
.nav-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  padding: 6px 0;
  position: relative;
  transition: color 0.3s var(--weich);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--gruen);
  transition: right 0.45s var(--weich);
}
.nav-links a:hover { color: var(--tinte); }
.nav-links a:hover::after { right: 0; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}
.nav-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--tinte-weich);
  white-space: nowrap;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gruen);
  flex: 0 0 auto;
}
.status-dot.is-closed { background: #b4553d; }

.btn-nav { padding: 13px 24px; font-size: 11px; }

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--linie);
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.nav-burger span {
  position: absolute;
  left: 11px; right: 11px;
  height: 1px;
  background: var(--tinte);
  transition: transform 0.4s var(--weich), opacity 0.3s;
}
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 22px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* Hero-Zustand: Navigation steht auf dem dunklen Bild */
.nav.is-over-hero:not(.is-stuck) .nav-logo-mark { fill: #fff; }
.nav.is-over-hero:not(.is-stuck) .nav-logo-text,
.nav.is-over-hero:not(.is-stuck) .nav-links a,
.nav.is-over-hero:not(.is-stuck) .nav-status { color: rgba(255, 255, 255, 0.92); }
.nav.is-over-hero:not(.is-stuck) .nav-logo-text em { color: #fff; }
.nav.is-over-hero:not(.is-stuck) .nav-burger { border-color: rgba(255,255,255,0.5); }
.nav.is-over-hero:not(.is-stuck) .nav-burger span { background: #fff; }
/* Ueber dem Foto muss der Knopf hell sein, sonst verschwindet er im Bild. */
.nav.is-over-hero:not(.is-stuck) .btn-nav {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}
.nav.is-over-hero:not(.is-stuck) .btn-nav:hover {
  background: #fff;
  color: var(--tinte);
  border-color: #fff;
}

/* Mobiles Menü */
.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--papier);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px var(--rand) 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--weich), visibility 0.45s;
}
.mobilemenu.is-open { opacity: 1; visibility: visible; }
.mobilemenu-links { display: flex; flex-direction: column; gap: 4px; }
.mobilemenu-links a {
  font-family: var(--serif);
  font-size: clamp(26px, 7vw, 40px);
  font-weight: 300;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie-fein);
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.mobilemenu-links a span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--grau);
}
.mobilemenu-foot { margin-top: 40px; }
.mobilemenu-foot p {
  margin-top: 18px;
  font-size: 13px;
  color: var(--grau);
  letter-spacing: 0.04em;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 140px var(--rand) 0;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}
/* Der Hero zeigt den Empfangstresen aus heller Eiche. Weiße Schrift läge dort
   bei rund 1,5:1 — deshalb zwei Verläufe: einer nach unten für den Fuß, einer
   von links für den Textblock. Gemessen mit pruefungen/kontrast-messen.py. */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(16,13,10,0.86) 0%, rgba(16,13,10,0.66) 34%, rgba(16,13,10,0.16) 66%, rgba(16,13,10,0.04) 100%),
    linear-gradient(180deg, rgba(16,13,10,0.60) 0%, rgba(16,13,10,0.20) 26%, rgba(16,13,10,0.44) 64%, rgba(16,13,10,0.82) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--innen);
  width: 100%;
  margin: 0 auto;
  padding-bottom: clamp(56px, 8vh, 104px);
  color: #fff;
}
.hero-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 26px;
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(42px, 7.4vw, 104px);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero-title strong {
  display: block;
  font-weight: 200;
}
.hero-claim {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  max-width: 30em;
  margin: 0 0 38px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-cta .btn {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
  background: transparent;
}
.hero-cta .btn:hover {
  background: #fff;
  color: var(--tinte);
  border-color: #fff;
}
.hero-cta .btn-fest {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--tinte);
}
.hero-cta .btn-fest:hover {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

.hero-foot {
  position: relative;
  z-index: 2;
  max-width: var(--breite);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
}
.hero-foot .status-dot { box-shadow: 0 0 0 3px rgba(255,255,255,0.16); }
.hero-chip { display: flex; align-items: center; gap: 9px; }
.hero-chip svg { width: 15px; height: 15px; stroke-width: 1.6; opacity: 0.8; }

/* ============================================================
   PHILOSOPHIE
   ============================================================ */
.philo-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.philo-text p + p { margin-top: 1.1em; }
.philo-side {
  border-left: 1px solid var(--linie);
  padding-left: clamp(20px, 3vw, 40px);
}
.philo-side h3 {
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.philo-punkt {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linie-fein);
}
.philo-punkt:last-child { border-bottom: 0; }
.philo-punkt svg {
  width: 19px; height: 19px;
  stroke: var(--gruen);
  stroke-width: 1.5;
  fill: none;
  flex: 0 0 auto;
  margin-top: 3px;
}
.philo-punkt strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 3px;
}
.philo-punkt span {
  font-size: 13.5px;
  color: var(--tinte-weich);
  line-height: 1.55;
}

/* Zahlen */
.zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(64px, 8vw, 112px);
  /* Die Zahlen sind alle gleich hoch, die Beschriftungen nicht:
     „Kompetente Fachkraefte" bricht schmal auf zwei Zeilen um. Mit
     `end` schob das die Zahl darueber um 19 px nach oben, und die
     Reihe fluchtete nicht mehr. Oben ausrichten. */
  align-items: start;
}
.zahl {
  background: transparent;
  border-top: 1px solid var(--tinte);
  padding: 22px 0 0;
}
.zahl b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(52px, 8.4vw, 118px);
  font-weight: 200;
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.zahl b i {
  font-style: normal;
  font-size: 0.28em;
  color: var(--grau);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.zahl span {
  display: block;
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
}

/* ============================================================
   STUDIO — versetzte Bild-Text-Paare, Bild traegt, Text erklaert
   ============================================================ */
.studio-strecke {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(48px, 7vw, 110px) clamp(32px, 5vw, 72px);
  align-items: start;
}
/* Jede zweite Spalte laeuft tiefer — daraus entsteht der Rhythmus,
   den ein starres Raster nicht hat. */
.studio-stueck.ist-versetzt { margin-top: clamp(40px, 7vw, 120px); }

.stueck-bild {
  margin: 0 0 26px;
  overflow: hidden;
  background: var(--papier-tief);
}
/* <picture> reicht die Hoehe nicht an das <img> weiter — ohne das hier
   fuellt das Foto seinen Kasten nicht. */
.stueck-bild picture { display: block; }
.stueck-bild img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--weich);
}
.studio-stueck:hover .stueck-bild img { transform: scale(1.03); }

.studio-stueck h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinte);
  margin: 0 0 18px;
}
.studio-stueck p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--tinte-weich);
  max-width: 46ch;
  margin: 0;
}
.studio-stueck p strong {
  font-weight: 500;
  color: var(--tinte);
}
.stueck-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--gruen);
  border-bottom: 1px solid var(--gruen);
  padding-bottom: 3px;
}
.stueck-link:hover { color: var(--gruen-tief); border-color: var(--gruen-tief); }

.studio-team {
  max-width: var(--breite);
  margin: clamp(72px, 9vw, 140px) auto 0;
  padding: 0 var(--rand);
}
.studio-team picture { display: block; }
.studio-team img { display: block; width: 100%; height: auto; }
.studio-team figcaption {
  margin-top: 16px;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
}

/* ============================================================
   KURSE
   ============================================================ */
.kurse-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.kurse-tabs button {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 24px 24px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--grau);
  cursor: pointer;
  transition: color 0.3s var(--weich), border-color 0.3s var(--weich);
  position: relative;
}
.kurse-tabs button:hover { color: var(--tinte); }
.kurse-tabs button.is-active {
  color: var(--tinte);
  border-bottom-color: var(--gruen);
}
/* „heute" gehoert unter den Tagesnamen, nicht darueber: oben rechts
   schob es die Beschriftung optisch aus der Zeile, weil nur ein Knopf
   den Zusatz traegt. Die untere Polsterung ist deshalb bei ALLEN
   Knoepfen groesser — sonst sitzt die Grundlinie schief. */
.kurse-tabs button.is-today::after {
  content: 'heute';
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  text-align: center;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--nuss);
  text-transform: uppercase;
}

.kurs-zeile {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: clamp(14px, 2.4vw, 32px);
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--linie-fein);
}
.kurs-zeit {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.kurs-name {
  font-size: 16.5px;
  font-weight: 500;
}
.kurs-name small {
  display: block;
  font-size: 13.5px;
  font-weight: 300;
  color: var(--tinte-weich);
  margin-top: 2px;
}
.kurs-marke {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 13px;
  border: 1px solid var(--linie);
  color: var(--tinte-weich);
  white-space: nowrap;
}
.marke-kraft { border-color: var(--nuss); color: var(--nuss); }
.marke-ruhe  { border-color: var(--gruen); color: var(--gruen); }
.marke-cardio{ border-color: var(--nuss); color: var(--nuss); }
.kurs-leer {
  padding: 34px 4px;
  color: var(--grau);
  font-weight: 300;
  border-bottom: 1px solid var(--linie-fein);
}
.kurse-notiz {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--grau);
  font-weight: 300;
}

/* ============================================================
   WIRKUNG — Fliesstext statt Aufzaehlung
   ============================================================ */
.wirkung-grid {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 var(--rand);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 6vw, 90px);
}
.wirkung-text { border-top: 1px solid var(--linie); padding-top: 30px; }
.wirkung-text h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.wirkung-text p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--tinte-weich);
  max-width: 48ch;
  margin: 0 0 18px;
}
.wirkung-text p:last-child { margin-bottom: 0; }
.wirkung-text p strong { font-weight: 500; color: var(--tinte); }

/* ============================================================
   PREISE
   ============================================================ */
.preis-schalter {
  display: inline-flex;
  border: 1px solid var(--linie);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.preis-schalter button {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: none;
  padding: 13px 30px;
  border: 0;
  background: transparent;
  color: var(--grau);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.35s var(--weich), color 0.35s var(--weich);
}
.preis-schalter button.is-active {
  background: var(--tinte);
  color: var(--papier);
}
.preis-schalter button span {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--nuss);
}
.preis-schalter button.is-active span { color: var(--eiche); }

.preis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.preis-karte {
  background: transparent;
  border-top: 1px solid var(--linie);
  padding: 30px 0 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.preis-karte-betont { border-top-color: var(--tinte); }
.preis-marke {
  position: absolute;
  top: -1px; left: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 0 8px;
  color: var(--nuss);
  border-top: 1px solid var(--nuss);
  transform: translateY(-100%);
  margin-bottom: 8px;
}
.preis-karte h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.7;
  /* Zwei Zeilen Platz, auch wenn der Name nur eine braucht — sonst
     sitzen die Preise der drei Karten auf verschiedenen Hoehen. */
  min-height: calc(2 * 1.7em);
  margin-bottom: 22px;
}
.preis-sub {
  font-size: 13.5px;
  color: var(--grau);
  font-weight: 300;
  margin-bottom: 26px;
}
.preis-wert {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--linie);
}
.preis-euro {
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
}
.preis-einheit {
  font-size: 13px;
  color: var(--grau);
  font-weight: 300;
}

/* ---- Aktionspreis: alter Wert durchgestrichen daneben ---- */
.preis-alt {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 300;
  line-height: 1;
  color: var(--grau);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.preis-alt[hidden] { display: none; }
/* Der Hinweis gehoert oberhalb der Trennlinie zum Preis, nicht darunter
   zum Beschreibungstext. Deshalb wandert die Linie mit. */
.preis-wert:has(+ .preis-aktion) {
  padding-bottom: 8px;
  margin-bottom: 0;
  border-bottom: 0;
}
/* Auch leer haelt die Zeile ihre Hoehe — sonst sitzen die Trennlinien
   der Karten auf verschiedenen Hoehen. */
.preis-aktion:empty::before { content: '\00a0'; }
.preis-aktion {
  margin: 0 0 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--linie);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nuss);
  font-weight: 500;
}
.preis-leistungen {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  flex: 1;
}
.preis-leistungen li {
  font-size: 14.5px;
  font-weight: 300;
  color: var(--tinte-weich);
  padding: 8px 0 8px 22px;
  position: relative;
}
.preis-leistungen li::before {
  content: '';
  position: absolute;
  left: 0; top: 15px;
  width: 9px; height: 1px;
  background: var(--eiche);
}
.preis-notiz {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--grau);
  font-weight: 300;
}

/* ============================================================
   CTA-BAND
   ============================================================ */
.ctaband {
  position: relative;
  padding: clamp(80px, 9vw, 140px) var(--rand);
  text-align: center;
  overflow: hidden;
  background: var(--nuss);
  color: #fff;
}
.ctaband-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ctaband-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Oles Kettlebell-Aufnahme ist von sich aus dunkel — sie darf deutlich
     sichtbar sein, anders als das helle Saunaholz vorher (dort musste die
     Deckkraft auf 0.20, sonst verschwand der Text). */
  opacity: 0.62;
  object-position: 62% center;
}
.ctaband-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,22,15,0.12) 0%, rgba(28,22,15,0.32) 100%);
}
.ctaband-inner {
  position: relative;
  z-index: 2;
  max-width: var(--innen);
  margin: 0 auto;
}
/* Seit das Foto deutlich sichtbar ist, trifft der Text auch auf helle
   Stellen der Kettlebell — der Zusatzhinweis kam dort nur noch auf
   2,4:1. Statt das ganze Bild wieder abzudunkeln, liegt der Schleier
   allein hinter dem Textblock; aussen bleibt die Aufnahme hell. */
.ctaband-inner::before {
  content: '';
  position: absolute;
  /* Grosszuegig ueber den Block hinaus: der Zusatzhinweis steht ganz
     unten, dort war der erste, engere Verlauf schon ausgelaufen. */
  inset: -30% -26%;
  z-index: -1;
  /* closest-side, nicht die Voreinstellung farthest-corner: sonst ist
     der Verlauf an der Ober- und Unterkante des Kastens noch nicht bei
     null und man sieht eine gerade Kante quer durchs Bild. */
  background: radial-gradient(ellipse closest-side at center,
    rgba(18, 13, 9, 0.82) 0%,
    rgba(18, 13, 9, 0.74) 46%,
    rgba(18, 13, 9, 0.40) 72%,
    rgba(18, 13, 9, 0) 100%);
  pointer-events: none;
}
.ctaband h2 {
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 200;
  color: #fff;
  margin-bottom: 32px;
  letter-spacing: 0.01em;
}
.ctaband h2 strong { font-weight: 500; }
.ctaband p {
  margin-top: 24px;
  font-size: 13.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: 0.04em;
}

/* ============================================================
   KONTAKT
   ============================================================ */
.kontakt-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.zeiten-karte {
  border: 1px solid var(--linie);
  padding: clamp(26px, 3vw, 36px);
}
.zeiten-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gruen);
  font-weight: 600;
  margin-bottom: 24px;
}
.zeiten-live.is-closed { color: #b4553d; }
.zeiten-karte h3 {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
  margin: 26px 0 12px;
}
.zeiten-karte h3:first-of-type { margin-top: 0; }
.zeiten-karte table { width: 100%; border-collapse: collapse; }
.zeiten-karte td {
  padding: 9px 0;
  font-size: 14.5px;
  font-weight: 300;
  border-bottom: 1px solid var(--linie-fein);
}
.zeiten-karte tr:last-child td { border-bottom: 0; }
.zeiten-karte td:last-child { text-align: right; font-weight: 400; }

.kontakt-karten { margin-top: 20px; display: flex; flex-direction: column; }
.kontakt-karte {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--linie-fein);
  transition: padding-left 0.35s var(--weich);
}
.kontakt-karte:hover { padding-left: 10px; }
.kontakt-karte svg {
  width: 19px; height: 19px;
  stroke: var(--nuss);
  stroke-width: 1.5;
  fill: none;
  flex: 0 0 auto;
}
.kontakt-karte strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.kontakt-karte span {
  font-size: 13px;
  color: var(--grau);
  font-weight: 300;
}

/* Formular */
.kontakt-form h3 {
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 400;
  margin-bottom: 28px;
}
.form-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-feld { display: flex; flex-direction: column; gap: 8px; }
.form-feld label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau);
}
.form-feld label span { text-transform: none; letter-spacing: 0.02em; font-weight: 400; }
.form-feld input,
.form-feld textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--tinte);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linie);
  padding: 12px 0;
  transition: border-color 0.35s var(--weich);
}
.form-feld input::placeholder,
.form-feld textarea::placeholder { color: #b6afa4; }
.form-feld input:focus,
.form-feld textarea:focus {
  outline: none;
  border-bottom-color: var(--gruen);
}
.form-feld textarea { resize: vertical; min-height: 96px; }
.form-feld input[aria-invalid="true"],
.form-feld textarea[aria-invalid="true"] { border-bottom-color: #b4553d; }

.segmentiert { display: flex; border: 1px solid var(--linie); }
.segmentiert button {
  flex: 1;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 12px 8px;
  border: 0;
  background: transparent;
  color: var(--grau);
  cursor: pointer;
  transition: background 0.3s var(--weich), color 0.3s var(--weich);
}
.segmentiert button.is-active { background: var(--tinte); color: var(--papier); }

.form-notiz {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--grau);
  font-weight: 300;
}
.form-notiz a { text-decoration: underline; text-underline-offset: 3px; }
.form-erfolg {
  margin-top: 22px;
  padding: 22px 24px;
  background: var(--papier-tief);
  border-left: 2px solid var(--gruen);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-erfolg svg { width: 22px; height: 22px; stroke: var(--gruen); stroke-width: 1.6; fill: none; }
.form-erfolg strong { font-size: 15.5px; font-weight: 600; }
.form-erfolg span { font-size: 14px; color: var(--tinte-weich); font-weight: 300; }
.form-fehler {
  margin-top: 14px;
  font-size: 13.5px;
  color: #a9482f;
  font-weight: 400;
}

/* ============================================================
   FUSSZEILE
   ============================================================ */
.footer {
  background: var(--tinte);
  color: rgba(255, 255, 255, 0.82);
  padding: clamp(56px, 7vw, 90px) var(--rand) 0;
}
.footer-main {
  max-width: var(--breite);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(44px, 5vw, 68px);
}
.footer-logo {
  width: 46px; height: 43px;
  fill: #fff;
  margin-bottom: 20px;
}
.footer-claim {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.5;
}
.footer-claim span {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
}
.footer-col h4 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.footer-col address,
.footer-col nav {
  font-style: normal;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 2;
}
.footer-col nav { display: flex; flex-direction: column; }
.footer-col a { transition: color 0.3s var(--weich); }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: 12px; margin-bottom: 22px; }
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.35s var(--weich), background 0.35s var(--weich);
}
.footer-social a:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.footer-social svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.footer-col .btn {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.footer-col .btn:hover { background: #fff; color: var(--tinte); border-color: #fff; }

.footer-legal {
  max-width: var(--breite);
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 24px 0 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12.5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.52);
}
.footer-legal nav { display: flex; gap: 22px; }
.footer-legal a:hover { color: #fff; }

/* Die Fusszeile ist fuer den dunklen Seitenfuss der Startseite gebaut —
   weisse Schrift. Auf Impressum und Datenschutz steht sie auf hellem
   Papier und war mit 1.03:1 praktisch unsichtbar. */
.footer-legal.footer-hell {
  border-top-color: var(--linie);
  color: var(--grau);
}
.footer-legal.footer-hell a { color: var(--grau); }
.footer-legal.footer-hell a:hover { color: var(--tinte); }

/* ============================================================
   BEWEGUNG — sparsam
   ============================================================ */
.auf {
  opacity: 0;
  transform: translateY(22px);
}
.auf.ist-da {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--weich), transform 0.9s var(--weich);
}
@media (prefers-reduced-motion: reduce) {
  .auf { opacity: 1; transform: none; }
}

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width: 1080px) {
  .philo-grid { grid-template-columns: 1fr; }
  .philo-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); padding-top: 28px; }
  .kontakt-grid { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .nav-status { display: none; }
  .btn-nav { display: none; }

  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .angebot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preis-grid { grid-template-columns: 1fr; }
  .vorteil-grid { grid-template-columns: 1fr; }
  .dreiwort-inner { grid-template-columns: 1fr; gap: 0; }
  .dreiwort-item { padding: 22px 0; border-top: 1px solid var(--gold); }
  .dreiwort-item + .dreiwort-item { border-top-color: var(--linie-fein); }

  .sb-gross, .sb-hoch, .sb-halb, .sb-drittel, .sb-breit { grid-column: span 12; }
  .sb-hoch { aspect-ratio: 4 / 3; }
  .sb-breit { aspect-ratio: 16 / 9; }
  .sb-drittel { aspect-ratio: 4 / 3; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero-foot { font-size: 11px; }
  .hero-foot .hero-chip-loc { display: none; }
  .form-reihe { grid-template-columns: 1fr; }
  .angebot-grid { grid-template-columns: 1fr; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: 1fr; }
  .kurs-zeile { grid-template-columns: 66px 1fr; row-gap: 10px; }
  .kurs-marke { grid-column: 2; justify-self: start; }
  .btn { width: 100%; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .preis-schalter { width: 100%; }
  .preis-schalter button { flex: 1; justify-content: center; }
}

/* ============================================================
   BRÜCKE FÜR DIE UNTERSEITEN
   Anmeldung, Impressum und Datenschutz sind gegen die alten
   Variablennamen der dunklen Fassung gebaut. Statt drei Seiten
   umzuschreiben, zeigen die alten Namen hier auf die helle Palette.
   ============================================================ */
:root {
  --bg: var(--papier);
  --text: var(--tinte);
  --muted: var(--tinte-weich);
  --muted-2: var(--grau);
  --line: var(--linie);
  --panel: var(--papier-tief);
  --panel-2: var(--papier-warm);
  --green: var(--gruen);
  --aurora: var(--gruen);          /* war Neongrün — jetzt die Markenfarbe */
  --danger: #b4553d;
  --font-display: var(--serif);
  --gutter: var(--rand);
  --radius: 0px;                   /* die helle Fassung ist durchgehend kantig */
  --radius-lg: 0px;
  --ease-out: var(--weich);
  --ease-inout: var(--weich);
}

/* Die Anmeldung hat einen Leuchtschleier geerbt, der zur hellen Fassung
   nicht passt. Er bleibt im Markup, wird hier aber stillgelegt. */
.wizard-aurora { display: none; }

/* Alte Knopfvariante der dunklen Fassung */
.btn-ghost {
  background: transparent;
  border-color: var(--tinte);
  color: var(--tinte);
}
.btn-ghost:hover { background: var(--tinte); color: var(--papier); }

/* Die Unterseiten setzen is-scrolled, die Startseite is-stuck. */
.nav.is-scrolled {
  background: rgba(250, 248, 245, 0.94);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--linie-fein);
}

/* Rechtstexte */
.legal-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 132px var(--rand) clamp(64px, 8vw, 110px);
}
.legal-wrap h1 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 300;
  margin-bottom: 34px;
}
.legal-wrap h2 {
  font-size: clamp(19px, 2.2vw, 24px);
  font-weight: 500;
  margin: 44px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--linie-fein);
}
.legal-wrap h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  margin: 26px 0 8px;
}
.legal-wrap p,
.legal-wrap li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--tinte-weich);
  font-weight: 300;
}
.legal-wrap ul { padding-left: 20px; }
.legal-wrap li { margin-bottom: 6px; }
.legal-wrap strong { color: var(--tinte); font-weight: 600; }

/* ---- Rechtsseiten aus Oles Original-PDFs (AGB, Hausordnung, Widerruf) ---- */
/* Vorspann ueber dem ersten Paragraphen: einordnen, nicht mitlesen lassen. */
.legal-vorwort {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--tinte);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--linie-fein);
}
/* h2 traegt selbst eine Oberlinie. Direkt hinter dem Vorwort stuenden
   sonst zwei Striche mit einer Luecke dazwischen. */
.legal-vorwort + h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 34px;
}
/* Die Hausordnung ist eine reine Aufzaehlung. Punkte statt Spiegelstriche,
   und mehr Luft — 30 Eintraege am Stueck liest sonst niemand. */
.legal-liste { list-style: none; padding-left: 0; }
.legal-liste li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
}
.legal-liste li::before {
  content: '';
  position: absolute;
  left: 2px; top: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gruen);
}
/* Anschrift in der Widerrufsbelehrung: Pflichtangabe, muss auffallen. */
.legal-anschrift {
  margin: 18px 0;
  padding: 20px 24px;
  background: var(--papier-tief);
  border-left: 2px solid var(--gruen);
  line-height: 1.9;
}
/* Das amtliche Muster-Widerrufsformular zum Abschreiben oder Ausdrucken. */
.legal-formular {
  margin-top: 18px;
  padding: 26px 28px;
  border: 1px solid var(--linie);
  background: var(--papier-tief);
}
.legal-formular p { margin-bottom: 14px; }
.legal-hinweis { font-size: 14.5px; font-style: italic; }
.legal-fussnote { font-size: 13px; margin-top: 4px; }
.legal-stand {
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid var(--linie-fein);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grau);
}

@media (max-width: 700px) {
  .legal-anschrift { padding: 16px 18px; }
  .legal-formular  { padding: 20px 18px; }
}
/* Die Datenschutzerklärung enthält lange Anbieter-URLs. Ohne Umbruch an
   beliebiger Stelle ragen sie auf 390 px aus dem Satzspiegel. */
.legal-wrap a {
  color: var(--gruen);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal-back {
  display: inline-block;
  margin-bottom: 30px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grau);
  transition: color 0.3s var(--weich);
}
.legal-back:hover { color: var(--gruen); }

/* Offener Punkt: die alte Adresse service@northland-gym.de bounct (Nachweis
   vom Kunden am 14.08.). Bis die neue Adresse feststeht, ist die Stelle
   auffällig markiert — sie darf nicht unbemerkt live gehen.
   Suchbar über [data-offen]. */
.platzhalter-mail strong {
  background: #ffe9c9;
  border-bottom: 2px solid var(--gold);
  padding: 1px 6px;
  font-weight: 600;
  color: #6b4f12;
}

/* ============================================================
   MOBIL: waagerechtes Scrollen unterbinden
   Gemessen mit pruefungen/mobil-pruefen.py bei 390 px.
   overflow-x nur am body reicht nicht — die fixed Navigationsleiste
   orientiert sich am Layout-Viewport und blies ihn auf 505 px auf.
   ============================================================ */
html { overflow-x: clip; }
.nav { max-width: 100vw; }

/* Der Sprunglink lag mit left:-9999px im Dokumentfluss. clip-path hält ihn
   für Screenreader erreichbar, ohne die Seite zu verbreitern. */
.sprunglink {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sprunglink:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  margin: 0;
  clip-path: none;
  z-index: 999;
  background: var(--papier);
}

/* Unter 380 px reicht die Breite nicht mehr für zwei Kennzahlen nebeneinander —
   „Kompetente Fachkräfte" mit Sperrung sprengt die Spalte. */
@media (max-width: 380px) {
  .zahlen { grid-template-columns: minmax(0, 1fr); }
  .zahl { padding: 22px 18px; }
}

/* Auf hochformatigen Viewports skaliert das 16:10-Foto auf die Höhe und wird
   nur noch seitlich beschnitten — die Y-Komponente von object-position hat
   dort keinerlei Wirkung. Verschoben wird deshalb auf der X-Achse, damit
   Kamin, Logo und Lamellenwand im Bild bleiben: die Motive, die „Deluxe"
   tragen. */
@media (max-width: 700px) {
  /* Das Handy bekommt ein eigenes, bereits horizontal fokussiertes
     Hochformat (fokus_x 0.46 in bilder-bauen.py). Es hier ein zweites
     Mal zu verschieben schob das grelle Logo neben die Ueberschrift. */
  .hero-media img { object-position: center center; }
}


/* ============================================================
   NACHTRAG — Bausteine der ueberarbeiteten Fassung
   ============================================================ */

/* Der leise Hinweis unter dem Hero — die Referenz setzt hier einen Satz,
   kein Symbol. */
.hero-weiter {
  position: relative;
  z-index: 2;
  align-self: center;
  margin: 0 auto;
  padding: 22px 0 4px;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.82);
}
.hero-weiter::after {
  content: '';
  display: block;
  width: 1px;
  height: 26px;
  margin: 14px auto 0;
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0));
}
.hero-weiter:hover { color: #fff; }

/* Was in jedem Tarif steckt — steht einmal, nicht dreimal. */
.preis-basis {
  max-width: 62ch;
  margin-bottom: clamp(34px, 4.5vw, 58px);
}
.preis-basis-titel {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gruen);
  margin: 0 0 14px;
}
.preis-basis-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--tinte-weich);
  margin: 0;
}
.preis-unterschied {
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--tinte-weich);
  margin: 0 0 28px;
  flex: 1;
}

@media (max-width: 900px) {
  .studio-strecke { grid-template-columns: 1fr; gap: clamp(44px, 9vw, 72px); }
  .studio-stueck.ist-versetzt { margin-top: 0; }
  .wirkung-grid { grid-template-columns: 1fr; }
  .preis-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   WUCHT — Groessenkontrast und Bewegung
   Die Seite war der Hotel-Referenz zu treu geraten: leise, aber
   kraftlos. Ein Studio braucht Sprung und Bewegung. Die Energie
   kommt ueber Groesse und Tempo, nicht ueber Farbe — Ole wollte
   ausdruecklich weg vom dunklen Look.
   ============================================================ */

/* Randabfallende Vollbilder brechen den Lesefluss. Der Ausbruch aus
   dem zentrierten Container geht ueber die halbe Viewportbreite. */
.studio-voll {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(56px, 7vw, 104px);
  margin-bottom: clamp(56px, 7vw, 104px);
  overflow: hidden;
  background: var(--papier-warm);
}
.studio-voll picture { display: block; }
.studio-voll img {
  display: block;
  width: 100%;
  height: clamp(320px, 62vh, 660px);
  object-fit: cover;
  /* Langsamer Zoom beim Hereinscrollen — traegt die Bewegung, ohne
     dass eine Bibliothek noetig waere. */
  transform: scale(1.12);
  transition: transform 2.4s var(--weich);
}
.studio-voll.ist-da img { transform: scale(1); }
.studio-voll figcaption {
  position: absolute;
  left: var(--rand);
  bottom: clamp(26px, 4vw, 48px);
  right: var(--rand);
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
}
.studio-voll::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,11,0) 40%, rgba(20,16,11,0.62) 100%);
}
.studio-voll figcaption { z-index: 2; }
.voll-kicker {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, 0.9);
}
.voll-satz {
  display: block;
  font-family: var(--serif);
  font-size: clamp(22px, 3.4vw, 46px);
  font-weight: 200;
  line-height: 1.16;
  letter-spacing: 0.01em;
  max-width: 20em;
}

/* Dreispaltige Reihe fuer die kleineren Raeume */
.studio-strecke-drei { grid-template-columns: repeat(3, 1fr); }
.studio-strecke-drei .studio-stueck p { font-size: 15px; max-width: 40ch; }

/* Die Zahlen zaehlen hoch, wenn sie ins Bild kommen. */
.zahl b { transition: none; }
.zahl span { color: var(--tinte-weich); }

/* Bildzoom auch bei den Spaltenbildern — dieselbe Bewegung, kleiner. */
.stueck-bild img {
  transform: scale(1.06);
  transition: transform 1.8s var(--weich);
}
.studio-stueck.ist-da .stueck-bild img { transform: scale(1); }
.studio-stueck:hover .stueck-bild img { transform: scale(1.04); }

/* Das CTA-Band ist der dunkle Gegenpol. Erst ein Gegenpol macht das
   Papier ringsum ruhig statt blass. */
.ctaband { padding: clamp(120px, 15vw, 230px) var(--rand); }
/* Achtung: Diese Regel steht NACH der oberen und gewinnt. Wer die
   Deckkraft weiter oben ändert, ändert nichts. */
.ctaband-media img { opacity: 0.78; }
.ctaband h2 {
  font-size: clamp(38px, 6.6vw, 92px) !important;
  line-height: 1.06;
  letter-spacing: 0.01em;
}

@media (max-width: 900px) {
  .studio-strecke-drei { grid-template-columns: 1fr; }
  .studio-voll img { height: clamp(260px, 46vh, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-voll img,
  .stueck-bild img { transform: none !important; transition: none !important; }
}


/* Ein <picture> ohne eigene Hoehe reicht `height:100%` nicht an das <img>
   weiter — das Bild behaelt dann sein Seitenverhaeltnis und laesst den
   Kasten darunter frei. Auf breiten Schirmen faellt das nicht auf, weil das
   Bild ueber die Breite genug Hoehe bekommt; auf dem Handy klafft eine
   Luecke von mehreren hundert Pixeln (Hero 600 px, CTA-Band 210 px).
   Gilt fuer jeden formatgebenden Medien-Container. */
.hero-media,
.ctaband-media { display: block; }
.hero-media picture,
.ctaband-media picture {
  display: block;
  width: 100%;
  height: 100%;
}


/* ============================================================
   FLUCHT — eine einzige linke Kante
   Gemessen bei 1440 px gab es vier: 0 (randabfallend, gewollt),
   72 (Hero, CTA-Band), 132 (alle Abschnitte) und 172 (das Zitat,
   das den blockquote-Standardrand des Browsers geerbt hatte).
   ============================================================ */
.studio-zitat {
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding: 0;
  max-width: 34em;
}


/* Die Fotos kommen in verschiedenen Formaten aus der Kamera (4:3, 3:2,
   Hochformat). Nebeneinander gestellt ergibt das unterschiedlich hohe
   Kaesten — gemessen 222 / 197 / 222 px — und die Ueberschriften darunter
   fluchten nicht mehr. Das Raster gibt das Format vor, nicht die Datei. */
.studio-strecke .stueck-bild {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.studio-strecke .stueck-bild picture {
  display: block;
  width: 100%;
  height: 100%;
}
.studio-strecke .stueck-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Die Beschriftung unter den Zahlen bekommt zwei Zeilen Platz, damit ein
   Umbruch die Reihe nicht auseinanderzieht. */
.zahl span { min-height: 2.6em; }


/* ============================================================
   BENTO — die Studiofotos
   Vorher: Bild ueber Text, in Spalten, achtmal hintereinander.
   Auf dem Handy wurde daraus eine 8.184 px lange gleichfoermige
   Kette. Jetzt tragen die Fotos selbst, in gemischten Groessen,
   mit dem Titel im Bild statt darunter.
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.1vw, 16px);
  margin-top: clamp(40px, 5vw, 72px);
}
.kachel {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--papier-warm);
  min-height: 0;
}
.kachel picture { display: block; width: 100%; height: 100%; }
.kachel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--weich);
}
.kachel:hover img { transform: scale(1.05); }

/* Formate im Raster */
.k-gross { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.k-klein { grid-column: span 1; aspect-ratio: 1 / 1; }
.k-breit { grid-column: span 2; aspect-ratio: 2 / 1; }
/* 16:6 war so flach, dass vom Teamfoto nur ein Streifen blieb —
   die hintere Reihe war oben abgeschnitten. 2:1 zeigt alle. */
.k-voll  { grid-column: span 4; aspect-ratio: 2 / 1; }

/* Beschriftung liegt im Bild, nicht darunter */
.kachel figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(16px, 2vw, 30px);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kachel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,14,10,0) 42%, rgba(18,14,10,0.74) 100%);
}
.kachel-titel {
  font-family: var(--sans);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(0,0,0,0.6);
}
.kachel-satz {
  font-family: var(--serif);
  font-size: clamp(15px, 1.5vw, 23px);
  font-weight: 200;
  line-height: 1.28;
  letter-spacing: 0.01em;
  max-width: 22em;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.k-klein .kachel-satz { display: none; }

/* Der Link lag als eigenes Overlay ueber der Kachel und stiess dort
   mit Titel und Satz zusammen — auf kleinen Kacheln klebte „Kursplan"
   direkt am Wort „Kurse". Jetzt ist die ganze Kachel klickbar, und der
   Hinweis steht als eigene Zeile unter der Beschriftung. */
.kachel-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  font-size: 0;
}
/* Der Pfeil sitzt in der Ecke, nicht im Textfluss — sonst schiebt er
   den Titel nach oben und die Beschriftungen benachbarter Kacheln
   fluchten nicht mehr. */
.kachel:has(.kachel-link)::before {
  content: '→';
  position: absolute;
  right: clamp(16px, 2vw, 30px);
  bottom: clamp(16px, 2vw, 30px);
  z-index: 4;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
  transition: transform .4s var(--weich);
  pointer-events: none;
}
.kachel:has(.kachel-link):hover::before { transform: translateX(5px); }
/* Platz freihalten, damit lange Saetze nicht unter den Pfeil laufen. */
.kachel:has(.kachel-link) .kachel-satz { padding-right: 2.4em; }

.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Die Fakten, die im Bento keinen Platz haben, stehen darunter. */
.studio-fakten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 72px);
}
.studio-fakten p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--tinte-weich);
  margin: 0;
  max-width: 46ch;
}
.studio-fakten strong { font-weight: 500; color: var(--tinte); }

@media (max-width: 700px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .k-gross { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .k-klein { grid-column: span 1; aspect-ratio: 1 / 1; }
  .k-breit { grid-column: span 2; aspect-ratio: 3 / 2; }
  .k-voll  { grid-column: span 2; aspect-ratio: 4 / 3; }
  .studio-fakten { grid-template-columns: 1fr; }
}


/* ============================================================
   KURSPLAN AUF DEM HANDY
   `flex-wrap: wrap` liess die fuenf Tage in drei Zeilen (2+2+1)
   umbrechen — ohne Raster, mit ungleichen Abstaenden, und das
   „heute"-Zeichen ueberlappte die Zeile darueber. Stattdessen
   eine waagerecht ziehbare Leiste, wie im Anmelde-Wizard.
   ============================================================ */
@media (max-width: 700px) {
  .kurse-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Bis an den Bildschirmrand ziehen, damit erkennbar ist,
       dass es seitlich weitergeht. */
    margin-left: calc(-1 * var(--rand));
    margin-right: calc(-1 * var(--rand));
    padding-left: var(--rand);
    padding-right: var(--rand);
  }
  .kurse-tabs::-webkit-scrollbar { display: none; }
  .kurse-tabs button {
    flex: 0 0 auto;
    padding: 14px 16px 16px;
    font-size: 12.5px;
    letter-spacing: 0.1em;
  }
  /* „heute" stand oben rechts im Knopf und stiess an die Zeile
     darueber. Unter den Tagesnamen, wo Platz ist. */
  .kurse-tabs button.is-today::after {
    position: static;
    display: block;
    margin-top: 3px;
    font-size: 9px;
    text-align: center;
  }
  .kurse-tabs button.is-today { padding-top: 10px; }
}


/* ============================================================
   PREISE AUF DEM HANDY
   Der Laufzeitschalter brach mitten im Wort um („24 / Monate"),
   und die Marke „Meistgewaehlt" klebte am Knopf der Karte
   darueber, weil sie per translateY ueber die Kartenkante ragt.
   ============================================================ */
@media (max-width: 700px) {
  .preis-schalter { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .preis-schalter button {
    flex-direction: column;
    gap: 3px;
    padding: 12px 10px;
    white-space: nowrap;
    font-size: 12.5px;
    letter-spacing: 0.08em;
  }
  .preis-schalter button span { font-size: 10.5px; }

  /* Luft fuer die Marke, die ueber die obere Kante ragt. */
  .preis-grid { gap: 52px; }
  .preis-karte-betont { margin-top: 8px; }
}


/* Das „ca." vor der Trainingsflaeche ist kein Teil der Zahl — es steht
   kleiner und leiser darueber, damit die Ziffer ihre Wucht behaelt. */
/* Das „ca." sitzt ueber der Ziffer, nimmt aber keinen Platz im Fluss ein —
   sonst rutscht die 600 gegenueber den anderen drei Zahlen nach unten und
   die Reihe fluchtet nicht mehr. */
.zahl b { position: relative; }
.zahl b em {
  position: absolute;
  bottom: 100%;
  left: 0;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.15em;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 0.5em;
  white-space: nowrap;
}

/* Oles Markenbild ist eine Abendaufnahme mit hellem Himmel links.
   Der Verlauf muss dort kraeftiger sein, damit die Schrift traegt —
   Ole: „drueber so dunkler fade". */
.hero-shade {
  background:
    linear-gradient(100deg, rgba(14, 11, 8, 0.90) 0%, rgba(14, 11, 8, 0.74) 38%,
                    rgba(14, 11, 8, 0.34) 70%, rgba(14, 11, 8, 0.20) 100%),
    linear-gradient(180deg, rgba(14, 11, 8, 0.34) 0%, rgba(14, 11, 8, 0) 34%);
}


/* Oles Geraetepark-Text (31.08.) sind vier Absaetze — zweispaltig gesetzt
   laufen sie sonst ungleich lang aus. Spaltensatz haelt sie zusammen. */
@media (min-width: 901px) {
  .studio-fakten {
    display: block;
    column-count: 2;
    column-gap: clamp(32px, 5vw, 72px);
  }
  .studio-fakten p {
    break-inside: avoid;
    margin-bottom: 20px;
    max-width: none;
  }
}


/* ============================================================
   POP-UP — im Dashboard ein- und ausschaltbar
   ============================================================ */
.popup {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rand);
  background: rgba(18, 14, 10, 0.62);
  opacity: 0;
  transition: opacity 0.4s var(--weich);
}
.popup.ist-da { opacity: 1; }
.popup-fenster {
  position: relative;
  background: var(--papier);
  border: 1px solid var(--linie);
  padding: clamp(30px, 5vw, 56px);
  max-width: 46ch;
  width: 100%;
  transform: translateY(14px);
  transition: transform 0.5s var(--weich);
}
.popup.ist-da .popup-fenster { transform: none; }
.popup-fenster h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 200;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin: 0 0 14px;
}
.popup-fenster p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--tinte-weich);
  margin: 0 0 26px;
  /* Der Text wird escaped ausgegeben — Absaetze gaebe es sonst nicht.
     pre-line macht Zeilenumbrueche im Pflegefeld sichtbar, ohne dass
     dafuer HTML durchgelassen werden muss. */
  white-space: pre-line;
}
.popup-zu {
  position: absolute;
  top: 12px; right: 14px;
  width: 40px; height: 40px;
  border: 0;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--grau);
  cursor: pointer;
}
.popup-zu:hover { color: var(--tinte); }
@media (prefers-reduced-motion: reduce) {
  .popup, .popup-fenster { transition: none; }
}