/* ============================================================
   DEMO / HALLE 9 - Fitnessstudio

   FARBE   Fast schwarz mit Limettengruen. Laut, aber nur an
           einer Stelle: Wenn alles schreit, hoert man nichts.
   SCHRIFT Oswald. Schmal, kraeftig, aus der Plakattradition -
           haelt grosse Grade aus und bleibt auf dem Telefon
           lesbar.
   AUFBAU  Preise stehen im ERSTEN Bildschirm, nicht hinter
           einer Anfrage. "Preise auf Anfrage" ist in dieser
           Branche der haeufigste Grund, zum naechsten Studio
           zu klicken.
   ============================================================ */

:root {
  --grund:      #0E0F10;
  --grund-2:    #17191B;
  --text:       #F2F4F1;
  --text-2:     #949A96;
  --akzent:     #C6F73E;
  --akzent-2:   #D8FF62;
  --auf-akzent: #0E0F10;
  --linie:      #272A2C;

  --tit: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --txt: "Inter", system-ui, sans-serif;
  --r: 0px;
  --tit-spacing: 0.005em;
  --tit-transform: uppercase;
  --maxw: 76rem;

  --fuss-grund: #000000;
  --fuss-text:  #F2F4F1;
  --kopf-linie: 1px solid #272A2C;
}

h1, h2, h3 { font-weight: 600; }
.gross { font-size: clamp(2rem, 5.5vw, 3.6rem); }

/* --- Hero: Preise sofort sichtbar --------------------------- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero h1 { font-size: clamp(2.8rem, 9vw, 6rem); line-height: 0.98; margin-bottom: 1rem; }
.hero h1 em { font-style: normal; color: var(--akzent); }
.hero__lead { font-size: 1.15rem; color: var(--text-2); max-width: 32rem; margin-bottom: 1.85rem; }

/* Die Preistafel: drei Spalten, harte Kanten, eine markiert. */
.tarife { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 48rem) { .tarife { grid-template-columns: repeat(3, 1fr); } }
.tarif { background: var(--grund); padding: clamp(1.3rem, 3vw, 1.9rem); display: flex; flex-direction: column; }
.tarif--wahl { background: var(--grund-2); position: relative; }
.tarif--wahl::before {
  content: "Meistgewählt";
  position: absolute; top: 0; right: 0;
  background: var(--akzent); color: var(--auf-akzent);
  font-family: var(--txt); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.25rem 0.65rem;
}
.tarif h3 { font-size: 1.4rem; margin-bottom: 0.35rem; }
.tarif__preis {
  font-family: var(--tit); font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1; color: var(--akzent); margin: 0.5rem 0 0.2rem;
  font-variant-numeric: tabular-nums;
}
.tarif__einheit { font-size: 0.8125rem; color: var(--text-2); margin-bottom: 1rem; }
.tarif ul { list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: 0.9375rem; }
.tarif li { padding: 0.3rem 0; border-bottom: 1px solid var(--linie); color: var(--text-2); }
.tarif li:last-child { border-bottom: 0; }
.tarif .knopf { margin-top: auto; }

/* --- Kursplan ----------------------------------------------- */
.kurse { overflow-x: auto; }
.kurse table { min-width: 38rem; }
.kurse .tabelle td:last-child, .kurse .tabelle th:last-child { text-align: left; }
.kurse .kurs { color: var(--text); font-weight: 500; }
.kurse .praev { color: var(--akzent); font-size: 0.8125rem; }

/* --- Zahlenband --------------------------------------------- */
.band { display: grid; gap: 1px; background: var(--linie); border-block: 1px solid var(--linie); }
@media (min-width: 40rem) { .band { grid-template-columns: repeat(4, 1fr); } }
.band div { background: var(--grund); padding: 1.25rem; text-align: center; }
.band b { display: block; font-family: var(--tit); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; color: var(--akzent); }
.band span { display: block; font-size: 0.8125rem; color: var(--text-2); margin-top: 0.35rem; }