/*
Theme Name: FITIN
Theme URI: https://fitin.ch
Description: FITIN Block-Theme — Brutalist Swiss × Logbook-Editorial. Child-Theme von Twenty Twenty-Five. Training. Therapie. Hier.
Author: FITIN GmbH
Version: 2.8.2
Template: twentytwentyfive
Text Domain: fitin
*/

/* ═══════════════════════════════════════════════════════════════
   FITIN v6 — Brutalist Swiss × Logbook-Editorial
   Foundation: Tokens, Type, Buttons, Header/Footer, Marquee,
   Section-Frames, Mobile-Bar, Reveal-Animations.

   v2.1.0 ergänzt am Ende der Datei:
     • Announcement-Bar (Header-Topline mit Sale)
     • Newsletter-Footer + Newsletter-Drawer
     • Social-Strip (Instagram + Facebook)
     • Side-Pillar (Desktop-Sticky-CTAs)
     • Sale-Tag + Hero-Sale-Bar (Easy24-Aktion)
     • Trust-Block (Google-Reviews-Slot)
     • Community-Grid (Instagram-Tile-Grid)
   ═══════════════════════════════════════════════════════════════ */

/* JetBrains Mono wird lokal über theme.json (assets/fonts/JetBrainsMono*.woff2) geladen. */

/* ─────────── TOKENS ─────────── */
:root {
  --paper:        #f6f5f1;
  --paper-elev:   #ffffff;
  --paper-soft:   #eeede8;
  --paper-deep:   #e4e3dd;

  --ink:          #3e3e3e;
  --ink-soft:     #3e3e3e;
  --ink-mute:     #5d5d5d;
  --ink-low:      #8a8a85;

  --line:         #d4d0c5;
  --line-strong:  #b9b5a8;

  --star:         #f0a020;
  /* Aktion/Sale → Physio-Gelb/Gold. */
  --action:       var(--physio);

  --easy:         #6c894f;
  --easy-deep:    #566e3f;
  --easy-tint:    #e7ece0;

  --premium:      #00AEEF;
  --premium-deep: #008cc4;
  --premium-tint: #d6eef9;

  --physio:       #F6C443;
  --physio-deep:  #d6a420;
  --physio-tint:  #fdf2cc;

  --accent:       var(--ink);

  /* Gibson via Adobe Typekit (Kit wzl6foc). 7 Gewichte:
     Heavy 900 / Heavy Italic 900 · Bold 700 · SemiBold 600 ·
     Medium 500 · Regular 400 · Italic 400. */
  --font-sans:    'canada-type-gibson', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'canada-type-gibson', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif:   'canada-type-gibson', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'canada-type-gibson', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 2px;
  --r-md: 4px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --section-y:    clamp(80px, 8vw, 132px);
}

/* Page-Akzent pro Body-Klasse */
.page-home, .page-standorte, .page-firmen, .page-ueber, .page-probetraining, .page-kontakt { --accent: var(--ink); }
.page-mitgliedschaft { --accent: var(--premium); }
.page-physio        { --accent: var(--physio); }

/* ─────────── RESET & BASE ─────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
* { box-sizing: border-box; }
/* Browser-Default für <strong> ist 700 — mit Gibson Bold würde das in
   Body-Text zu schwer wirken. 600 (SemiBold) trägt Emphase elegant. */
strong, b { font-weight: 600; }

/* ─────────── LAYOUT ─────────── */
.fitin-shell {
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 64px;
  padding-right: 64px;
}
@media (max-width: 980px) { .fitin-shell { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 600px) { .fitin-shell { padding-left: 22px; padding-right: 22px; } }

.fitin-section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  position: relative;
}

/* ─────────── TYPE ───────────
   H1/H2 = Canada Type Gibson Bold 700 (Display via Typekit).
   H3/H4 = Gibson Regular 400. Body bleibt DM Sans (siehe --font-sans). */
.fitin-h1, .fitin-h2, .fitin-h3, .fitin-h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
}
.fitin-h1 {
  font-size: clamp(56px, 11vw, 168px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.fitin-h2 {
  font-size: clamp(40px, 6vw, 100px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.044em;
  text-transform: uppercase;
}
.fitin-h3 {
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.026em;
}
.fitin-h4 {
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.fitin-h1 em, .fitin-h2 em, .fitin-h3 em {
  font-style: normal;
  color: var(--accent);
}

.fitin-lead {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.4vw, 24px);
  line-height: 1.45;
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0;
  max-width: 50ch;
}

.fitin-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
  /* Gibson hat eingebaute Tabular-Lining-Numbers — bringt das "mono"-Feel
     für Index-Labels (01 / 05), Pricing-Zahlen und Tel-Nummern zurück,
     ohne dass eine echte Monospace-Familie nötig ist. */
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.fitin-mono--ink { color: var(--ink); }
.fitin-mono--paper { color: var(--paper); }
.fitin-mono--low { color: var(--ink-low); }
.fitin-mono--accent { color: var(--accent); }

/* Editorial Index: --- 01 / 04  ---  */
.fitin-idx {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.fitin-idx__bar {
  width: 56px;
  height: 2px;
  background: var(--ink);
  flex-shrink: 0;
}
.fitin-idx--paper .fitin-idx__bar { background: var(--paper); }
.fitin-idx--accent .fitin-idx__bar { background: var(--accent); }
.fitin-idx--premium .fitin-idx__bar { background: var(--premium); }
.fitin-idx--physio .fitin-idx__bar { background: var(--physio); }


/* ─────────── BUTTONS ─────────── */
.fitin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 30px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: background 240ms var(--ease), color 240ms, border-color 240ms, transform 240ms;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  text-decoration: none;
}
.fitin-btn--ink         { background: var(--ink); color: var(--paper); }
.fitin-btn--ink:hover   { background: var(--ink-soft); transform: translateY(-2px); }
.fitin-btn--paper       { background: var(--paper); color: var(--ink); }
.fitin-btn--paper:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.fitin-btn--ghost       { background: transparent; color: var(--ink); border-color: var(--ink); }
.fitin-btn--ghost:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.fitin-btn--ghost-paper       { background: transparent; color: var(--paper); border-color: var(--paper); }
.fitin-btn--ghost-paper:hover { background: var(--paper); color: var(--ink); transform: translateY(-2px); }
.fitin-btn--premium       { background: var(--premium); color: var(--paper); }
.fitin-btn--premium:hover { background: var(--premium-deep); transform: translateY(-2px); }
.fitin-btn--easy       { background: var(--easy); color: var(--ink); }
.fitin-btn--easy:hover { background: var(--easy-deep); color: var(--paper); transform: translateY(-2px); }
.fitin-btn--physio       { background: var(--physio); color: var(--ink); }
.fitin-btn--physio:hover { background: var(--physio-deep); color: var(--ink); transform: translateY(-2px); }
.fitin-btn--lg { padding: 24px 36px; font-size: 14px; }
.fitin-btn--sm { padding: 14px 22px; font-size: 12px; }

.fitin-btn .arr {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  transition: transform 320ms var(--ease);
}
.fitin-btn:hover .arr { transform: translateX(6px); }

/* ─────────── HEADER (über schwarzen Hero) ─────────── */
.fitin-site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  padding: 28px 0;
  /* Permanent cream-Header (paper-Background) auf allen Seiten,
     auch über dunklem Hero — saubere Trennung Header ↔ Content. */
  background: rgba(246, 245, 241, 0.96);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px -12px rgba(10, 10, 11, 0.16);
  transition: padding 280ms var(--ease), box-shadow 280ms var(--ease);
  margin: 0 !important;
}
/* Beim Scrollen kompakter — gleiche Optik, nur weniger Höhe. */
.fitin-site-header.is-scrolled {
  padding: 16px 0;
  box-shadow: 0 12px 34px -14px rgba(10, 10, 11, 0.22);
}
.fitin-site-header::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--premium);
  transform: scaleX(0); transform-origin: left;
  animation: fitin-header-line 1100ms var(--ease) 200ms forwards;
}
@keyframes fitin-header-line { to { transform: scaleX(1); } }

.fitin-site-header__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
@media (max-width: 980px) { .fitin-site-header__inner { padding: 0 32px; } }
@media (max-width: 600px) { .fitin-site-header__inner { padding: 0 22px; } }

.fitin-site-header__brand {
  display: flex;
  flex-direction: column;
  line-height: 0.95;
  gap: 4px;
}


.fitin-site-header__nav {
  display: flex;
  gap: 44px;
  align-items: center;
}
.fitin-site-header__nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  position: relative;
  padding: 8px 0;
  text-decoration: none;
  transition: color 240ms var(--ease),
              letter-spacing 320ms var(--ease),
              transform 240ms var(--ease);
}
.fitin-site-header__nav a:hover {
  color: var(--ink);
  letter-spacing: 0.06em;
  transform: translateY(-1px);
}

/* Underline animiert von der Mitte (scaleX), Premium-Akzent. */
.fitin-site-header__nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 24px;
  height: 2px;
  background: var(--premium);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 320ms var(--ease), width 320ms var(--ease);
}
.fitin-site-header__nav a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

/* Active-Page-Indicator: dauerhaft sichtbarer Premium-Underline + animierter
   Dot oben drüber + Bold + dunkle Schrift. */
body.page-standorte      .fitin-site-header__nav a[href="/standorte/"],
body.page-physio         .fitin-site-header__nav a[href="/physiotherapie/"],
body.page-mitgliedschaft .fitin-site-header__nav a[href="/mitgliedschaft/"],
body.page-firmen         .fitin-site-header__nav a[href="/firmenfitness/"],
body.page-ueber          .fitin-site-header__nav a[href="/ueber-uns/"],
body.page-screens        .fitin-site-header__nav a[href="/screens/"] {
  color: var(--ink);
  font-weight: 600;
}

body.page-standorte      .fitin-site-header__nav a[href="/standorte/"]::after,
body.page-physio         .fitin-site-header__nav a[href="/physiotherapie/"]::after,
body.page-mitgliedschaft .fitin-site-header__nav a[href="/mitgliedschaft/"]::after,
body.page-firmen         .fitin-site-header__nav a[href="/firmenfitness/"]::after,
body.page-ueber          .fitin-site-header__nav a[href="/ueber-uns/"]::after,
body.page-screens        .fitin-site-header__nav a[href="/screens/"]::after {
  transform: translateX(-50%) scaleX(1);
  width: 32px;
}

body.page-standorte      .fitin-site-header__nav a[href="/standorte/"]::before,
body.page-physio         .fitin-site-header__nav a[href="/physiotherapie/"]::before,
body.page-mitgliedschaft .fitin-site-header__nav a[href="/mitgliedschaft/"]::before,
body.page-firmen         .fitin-site-header__nav a[href="/firmenfitness/"]::before,
body.page-ueber          .fitin-site-header__nav a[href="/ueber-uns/"]::before,
body.page-screens        .fitin-site-header__nav a[href="/screens/"]::before {
  content: "";
  position: absolute;
  top: -6px; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--premium);
  transform: translateX(-50%);
  animation: fitinNavDot 1.6s var(--ease) infinite alternate;
}
@keyframes fitinNavDot {
  from { opacity: 0.55; transform: translateX(-50%) scale(1); }
  to   { opacity: 1;    transform: translateX(-50%) scale(1.35); }
}

.fitin-site-header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.fitin-site-header__tel {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  transition: color 200ms;
}
.fitin-site-header__tel:hover { color: var(--premium); }

/* Social-Icons im Header — dezent, nicht aufdringlich. */
.fitin-site-header__social { display: flex; align-items: center; gap: 12px; margin-right: 2px; }
.fitin-site-header__social a {
  display: inline-flex;
  color: var(--ink-low);
  transition: color 220ms var(--ease), transform 220ms var(--ease);
}
.fitin-site-header__social a:hover { color: var(--premium); transform: translateY(-1px); }
@media (max-width: 600px) { .fitin-site-header__social { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   MOBILE-MENÜ — Hamburger + Vollbild-Overlay (v2.4.0)
   ═══════════════════════════════════════════════════════════════ */
.fitin-burger { display: none; }
@media (max-width: 980px) {
  .fitin-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px; height: 42px;
    margin-left: 2px;
    padding: 0;
    background: none; border: none; cursor: pointer;
  }
  .fitin-burger span {
    display: block; width: 24px; height: 2px;
    background: var(--ink); border-radius: 2px;
  }
}

.fitin-mobile {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 360ms var(--ease), visibility 360ms var(--ease);
}
.fitin-mobile.is-open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.fitin-mobile__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fitin-mobile__brand {
  font-family: var(--font-display); font-weight: 700; font-size: 24px;
  letter-spacing: -.04em; color: var(--paper); text-decoration: none;
}
.fitin-mobile__close {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: none; color: var(--paper); cursor: pointer;
}
.fitin-mobile__nav {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: clamp(18px, 4vh, 44px) 28px;
  gap: 2px;
}
.fitin-mobile__nav > a {
  font-family: var(--font-display);
  font-size: clamp(30px, 9vw, 44px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.12;
  color: var(--paper); text-decoration: none;
  padding: 6px 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease), color 200ms var(--ease);
}
.fitin-mobile__sub {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 10px 0 18px;
  opacity: 0; transform: translateY(14px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.fitin-mobile.is-open .fitin-mobile__nav > a,
.fitin-mobile.is-open .fitin-mobile__sub {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--d, 0) * 55ms + 120ms);
}
.fitin-mobile__nav > a:hover, .fitin-mobile__nav > a:active { color: var(--premium); }
.fitin-mobile__sub a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(246, 245, 241, 0.82); text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
  padding: 9px 15px;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.fitin-mobile__sub a:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.06); }
.fitin-mobile__dot { width: 8px; height: 8px; border-radius: 50%; }
.fitin-mobile__dot--premium { background: var(--premium); }
.fitin-mobile__dot--easy { background: var(--easy); }
.fitin-mobile__foot {
  padding: 22px 28px calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-direction: column; gap: 18px;
}
.fitin-mobile__foot .fitin-btn { width: 100%; justify-content: center; }
.fitin-mobile__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fitin-mobile__meta > a { font-family: var(--font-mono); font-size: 14px; color: var(--paper); text-decoration: none; letter-spacing: .02em; }
.fitin-mobile__social { display: flex; gap: 18px; }
.fitin-mobile__social a { color: rgba(246, 245, 241, 0.7); display: inline-flex; transition: color 200ms var(--ease); }
.fitin-mobile__social a:hover { color: var(--premium); }

/* Aktive Seite im Mobile-Menü hervorheben. */
body.page-standorte      .fitin-mobile__nav a[href="/standorte/"],
body.page-physio         .fitin-mobile__nav a[href="/physiotherapie/"],
body.page-mitgliedschaft .fitin-mobile__nav a[href="/mitgliedschaft/"],
body.page-firmen         .fitin-mobile__nav a[href="/firmenfitness/"],
body.page-screens        .fitin-mobile__nav a[href="/screens/"],
body.page-ueber          .fitin-mobile__nav a[href="/ueber-uns/"],
body.page-premium        .fitin-mobile__sub a[href="/premium/"],
body.page-easy           .fitin-mobile__sub a[href="/easy/"] { color: var(--premium); }

@media (prefers-reduced-motion: reduce) {
  .fitin-mobile, .fitin-mobile__nav > a, .fitin-mobile__sub { transition: none; }
  .fitin-mobile.is-open .fitin-mobile__nav > a, .fitin-mobile.is-open .fitin-mobile__sub { transition-delay: 0s; }
}

/* ═══════════════════════════════════════════════════════════════
   ECHTES FITIN-LOGO (SVG) — Header / Footer / Mobile  [v2.4.0]
   ═══════════════════════════════════════════════════════════════ */
.fitin-site-header__logo-img {
  display: block;
  height: 40px;
  width: auto;
  transition: height 280ms var(--ease);
}
.fitin-site-header.is-scrolled .fitin-site-header__logo-img { height: 33px; }
@media (max-width: 600px) { .fitin-site-header__logo-img { height: 32px; } }

.fitin-footer__brand-img { display: block; height: 46px; width: auto; }
@media (max-width: 600px) { .fitin-footer__brand-img { height: 40px; } }

.fitin-mobile__brand img { display: block; height: 26px; width: auto; }

.fitin-site-header__btn {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 240ms, color 240ms;
}
.fitin-site-header__btn:hover { background: var(--premium); color: var(--paper); }

@media (max-width: 980px) {
  .fitin-site-header__nav, .fitin-site-header__tel, .fitin-site-header__btn { display: none; }
}
/* Tablet-Zwischenbreite (981–1080px): Desktop-Nav bleibt, aber Telefon-Text
   und Social-Icons ausblenden, damit der Header nicht überläuft. */
@media (min-width: 981px) and (max-width: 1080px) {
  .fitin-site-header__tel, .fitin-site-header__social { display: none; }
}

/* ─────────── MARQUEE ─────────── */
.fitin-marquee {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
}
.fitin-marquee--ink {
  background: var(--ink);
  border-top-color: rgba(255, 255, 255, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.fitin-marquee__track {
  display: flex;
  gap: 56px;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: fitin-marquee 32s linear infinite;
}
.fitin-marquee:hover .fitin-marquee__track { animation-play-state: paused; }
@keyframes fitin-marquee { to { transform: translateX(-50%); } }

.fitin-marquee__item {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 56px);
  letter-spacing: -0.04em;
  color: var(--ink);
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  line-height: 0.85;
}
.fitin-marquee--ink .fitin-marquee__item { color: var(--paper); }
.fitin-marquee__item .n { color: var(--premium); }
.fitin-marquee__sep {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-low);
  letter-spacing: 0.1em;
}
.fitin-marquee--ink .fitin-marquee__sep { color: rgba(246, 245, 241, 0.4); }

/* Grüne Variante (FITIN Easy-Grün) — Text in Ink für Kontrast, blaues N bleibt Brand-Hook. */
.fitin-marquee--easy {
  background: var(--easy);
  border-top-color: rgba(10, 10, 11, 0.14);
  border-bottom-color: rgba(10, 10, 11, 0.14);
}
.fitin-marquee--easy .fitin-marquee__item { color: var(--ink); }
.fitin-marquee--easy .fitin-marquee__sep { color: rgba(10, 10, 11, 0.4); }

/* Gelbe Variante (Physio-Gelb) — Text in Ink für Kontrast, blaues N bleibt Brand-Hook. */
.fitin-marquee--physio {
  background: var(--physio);
  border-top-color: rgba(10, 10, 11, 0.14);
  border-bottom-color: rgba(10, 10, 11, 0.14);
}
.fitin-marquee--physio .fitin-marquee__item { color: var(--ink); }
.fitin-marquee--physio .fitin-marquee__sep { color: rgba(10, 10, 11, 0.4); }

/* Marquee-Band sitzt bündig am Hero — den von WordPress auf .wp-site-blocks-Kinder
   gesetzten margin-block-start (1.5rem) an diesem Übergang entfernen. */
.fitin-hero + .fitin-marquee { margin-top: 0; }

/* ─────────── HERO (Generic) ─────────── */
.fitin-hero {
  background: var(--ink);
  color: var(--paper);
  padding: 180px 0 80px;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
@media (max-width: 980px) { .fitin-hero { padding: 130px 0 80px; min-height: 0; } }
@media (max-width: 600px) { .fitin-hero { padding: 104px 0 44px; } }

/* Hero-Hintergrundbild — direkt unter dem Header sichtbar, mit dunklem
   Gradient-Overlay damit der weisse Text lesbar bleibt. */
.fitin-hero__bgimage {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
.fitin-hero__bgimage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Oben dunkler (Header-Klarheit), Mitte etwas heller (Studio sichtbar),
     unten dunkler (für CTAs/Sale-Tag-Lesbarkeit).
     Der Mittelwert liegt bei 0.46 statt 0.40: das Video hat deutlich hellere
     Frames als das frühere Standbild, bei 0.40 fiel der Fliesstext auf 4.2:1
     und damit unter die 4.5:1 der WCAG-AA-Vorgabe. 0.46 ist der kleinste Wert,
     der beide Textzonen über die Schwelle bringt. */
  background: linear-gradient(180deg,
    rgba(10, 10, 11, 0.62) 0%,
    rgba(10, 10, 11, 0.46) 45%,
    rgba(10, 10, 11, 0.74) 100%);
}

/* Hero-Hintergrundvideo — liegt zwischen Standbild und Gradient-Overlay, damit
   der Text gleich lesbar bleibt wie zuvor. Das Standbild darunter bleibt
   Fallback: solange das Video nicht läuft, ändert sich optisch nichts. */
.fitin-hero__bgvideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.fitin-hero__bgvideo.is-playing { opacity: 1; }

.fitin-hero__shell { position: relative; z-index: 2; }

.fitin-hero__bgwm {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(280px, 38vw, 580px);
  letter-spacing: -0.06em;
  color: rgba(255, 255, 255, 0.025);
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}


.fitin-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 80px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  gap: 24px;
  flex-wrap: wrap;
}
@media (max-width: 600px) { .fitin-hero__top { margin-bottom: 26px; padding-bottom: 14px; } }

.fitin-hero__top .fitin-mono { color: rgba(246, 245, 241, 0.6); }
.fitin-hero__top .fitin-mono strong { color: var(--paper); font-weight: 600; }
.fitin-hero__top-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fitin-hero__h1 {
  color: var(--paper);
  font-size: clamp(46px, 8vw, 116px);
  margin: 0 0 64px 0;
}
.fitin-hero__h1 em { color: var(--premium); }
@media (max-width: 600px) { .fitin-hero__h1 { margin-bottom: 56px; } }

.fitin-hero__lower {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: end;
}
@media (max-width: 980px) { .fitin-hero__lower { grid-template-columns: 1fr; gap: 56px; } }

.fitin-hero__copy { max-width: 42ch; }
.fitin-hero__copy .fitin-lead { color: var(--paper); margin-bottom: 32px; }
.fitin-hero__copy .fitin-lead strong { font-weight: 600; color: var(--paper); }

.fitin-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.fitin-hero__ctas .fitin-btn { flex: 1 1 0; }

.fitin-hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
}
.fitin-hero__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.85);
}
.fitin-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 11, 0.35));
  pointer-events: none;
}
/* ─────────── HERO als 16:9-Band (ab Desktop) ───────────
   Das Hintergrundvideo ist 16:9. Im hohen Hero (Inhalt trieb es auf 1539px bei
   1440px Breite) wurde es seitlich um fast die Hälfte beschnitten. Damit der
   Inhalt in die flachere Box passt, stehen Titel und Copy hier nebeneinander
   statt untereinander; die separate Hochformat-Bildkarte entfällt, weil das
   Video diese Rolle übernommen hat. Unterhalb des Breakpoints bleibt das
   bisherige gestapelte Layout samt Bildkarte unverändert. */
@media (min-width: 1200px) {
  .fitin-hero {
    /* width MUSS explizit stehen. Mit width:auto leitet der Browser bei aktiver
       max-height die BREITE aus dem Seitenverhältnis ab (900px hoch → 1600px
       breit) — das Hero wird dann schmaler als die Seite und rechts klafft eine
       Lücke. Mit definiter Breite bestimmt aspect-ratio nur noch die Höhe. */
    width: 100%;
    aspect-ratio: 16 / 9;
    /* Untergrenze für den Inhalt (gemessen: 637–671px je nach Breite, plus
       Reserve für grössere Schriftgrade). Bewusst ein fester Wert: fit-content
       löst bei gesetztem aspect-ratio zur Ratio-Höhe auf statt zur Inhaltshöhe
       und würde damit die max-height unten aushebeln.
       Wirksam nur bis 1244px Breite — darüber ist die 16:9-Höhe ohnehin grösser. */
    min-height: 700px;
    /* In flachen Fenstern wären 16:9 höher als der Bildschirm — dann lieber
       flacher als eine Startseite, die unten aus dem Bild läuft. */
    max-height: 100vh;
    padding: 116px 0 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .fitin-hero__shell {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "top   top"
      "title copy"
      "sale  copy";
    column-gap: 72px;
    align-content: center;
  }
  .fitin-hero__top   { grid-area: top; margin-bottom: 40px; }
  .fitin-hero__h1    { grid-area: title; margin-bottom: 24px; font-size: clamp(46px, 5.6vw, 92px); }
  .fitin-hero__sale  { grid-area: sale; align-self: start; }
  .fitin-hero__lower { grid-area: copy; grid-template-columns: 1fr; gap: 0; align-items: center; }

  /* Bildkarte weicht dem Video. Nur ausgeblendet, nicht entfernt — eine Zeile
     zurück und sie ist wieder da. */
  .fitin-hero__visual { display: none; }

  .fitin-hero__copy { max-width: 46ch; }
}

.fitin-hero__visual-meta {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 2;
  gap: 8px;
  flex-wrap: wrap;
}
.fitin-hero__visual-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  padding: 8px 12px;
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(6px);
  border-radius: 2px;
}
.fitin-hero__visual-tag--premium { background: var(--premium); color: var(--ink); }

/* Hero light variant — for non-home pages */
.fitin-hero--paper {
  background: var(--paper);
  color: var(--ink);
  min-height: 0;
  padding: 220px 0 100px;
}
.fitin-hero--paper .fitin-hero__bgwm { color: rgba(10, 10, 11, 0.03); }
.fitin-hero--paper .fitin-hero__top { border-bottom-color: var(--line); }
.fitin-hero--paper .fitin-hero__top .fitin-mono { color: var(--ink-mute); }
.fitin-hero--paper .fitin-hero__top .fitin-mono strong { color: var(--ink); }
.fitin-hero--paper .fitin-hero__h1 { color: var(--ink); }
.fitin-hero--paper .fitin-hero__h1 em { color: var(--accent); }
.fitin-hero--paper .fitin-hero__copy .fitin-lead { color: var(--ink-soft); }
.fitin-hero--paper .fitin-hero__copy .fitin-lead strong { color: var(--ink); }

/* Page-Akzent-Variants */
.page-physio .fitin-hero--paper { background: var(--physio-tint); }
.page-physio .fitin-hero--paper .fitin-hero__bgwm { color: rgba(214, 164, 32, 0.08); }
.page-mitgliedschaft .fitin-hero--paper .fitin-hero__h1 em { color: var(--premium-deep); }
.page-physio .fitin-hero--paper .fitin-hero__h1 em { color: var(--physio-deep); }


/* ─────────── SECTION HEAD (eyebrow + h2 + lead) ─────────── */
.fitin-section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 64px 96px;
  align-items: end;
  margin-bottom: 96px;
}
@media (max-width: 980px) {
  .fitin-section-head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 64px; }
}
.fitin-section-head h2 { max-width: 14ch; }

/* Section dark variant */
.fitin-section--ink {
  background: var(--ink);
  color: var(--paper);
}
.fitin-section--ink .fitin-h2 { color: var(--paper); }
.fitin-section--ink .fitin-lead { color: rgba(246, 245, 241, 0.78); }
.fitin-section--ink .fitin-mono--low { color: rgba(246, 245, 241, 0.6); }

/* Editorial-Calm Varianten — drei Cream-Töne statt harter Ink-Wechsel. */
.fitin-section--paper-soft { background: var(--paper-soft); }
.fitin-section--paper-deep { background: var(--paper-deep); }

/* ─────────── CARDS / GRIDS (Three Ways pattern, reused) ─────────── */
.fitin-cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .fitin-cards-3 { grid-template-columns: 1fr; gap: 24px; } }

.fitin-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  transition: transform 400ms var(--ease);
}
.fitin-card:hover { transform: translateY(-6px); }
.fitin-card--easy    { background: var(--easy-tint); }
.fitin-card--premium { background: var(--premium-tint); }
.fitin-card--physio  { background: var(--physio-tint); }

.fitin-card__strip { height: 8px; width: 100%; }
.fitin-card--easy    .fitin-card__strip { background: var(--easy); }
.fitin-card--premium .fitin-card__strip { background: var(--premium); }
.fitin-card--physio  .fitin-card__strip { background: var(--physio); }

.fitin-card__img {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  position: relative;
}
.fitin-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1) saturate(0.9);
  transition: transform 700ms var(--ease);
}
.fitin-card:hover .fitin-card__img img { transform: scale(1.05); }

.fitin-card__body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fitin-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.fitin-card--easy    .fitin-card__num { color: var(--easy-deep); }
.fitin-card--premium .fitin-card__num { color: var(--premium-deep); }
.fitin-card--physio  .fitin-card__num { color: var(--physio-deep); }

.fitin-card__title {
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.034em;
  color: var(--ink);
  margin: 0 0 20px 0;
  text-transform: uppercase;
}

.fitin-card__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px 0;
  flex: 1;
}

.fitin-card__list {
  list-style: none;
  margin: 0 0 32px 0;
  padding: 22px 0 0 0;
  border-top: 1px solid rgba(10, 10, 11, 0.12);
}
.fitin-card__list li {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 9px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fitin-card__list li::before { content: "→"; font-weight: 600; }

.fitin-card__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1.5px solid currentColor;
  align-self: flex-start;
  transition: gap 280ms var(--ease);
  text-decoration: none;
}
.fitin-card--easy    .fitin-card__cta { color: var(--easy-deep); }
.fitin-card--premium .fitin-card__cta { color: var(--premium-deep); }
.fitin-card--physio  .fitin-card__cta { color: var(--physio-deep); }
.fitin-card:hover .fitin-card__cta { gap: 16px; }

/* ─────────── STUDIO CARDS (in dark sections) ─────────── */
.fitin-studio {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 360ms var(--ease), transform 360ms var(--ease);
}
.fitin-studio:hover { border-color: var(--premium); transform: translateY(-3px); }
.fitin-studio--flagship { border-color: rgba(0, 174, 239, 0.4); }

.fitin-studio__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
}
.fitin-studio__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.85);
  transition: transform 700ms var(--ease);
}
.fitin-studio:hover .fitin-studio__img img { transform: scale(1.04); }

.fitin-studio__index {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 10, 11, 0.55);
  backdrop-filter: blur(6px);
  padding: 7px 10px;
  border-radius: 2px;
  z-index: 1;
}
.fitin-studio__flag {
  position: absolute;
  top: 16px; right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--premium);
  padding: 7px 11px;
  border-radius: 2px;
  z-index: 1;
}

.fitin-studio__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fitin-studio__name {
  font-size: clamp(32px, 3vw, 56px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--paper);
  margin: 0 0 16px 0;
  text-transform: uppercase;
}
.fitin-studio__addr {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(246, 245, 241, 0.65);
  margin: 0 0 20px 0;
  letter-spacing: 0.04em;
}
.fitin-studio__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}
.fitin-studio__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(246, 245, 241, 0.85);
}
.fitin-studio__badge--premium { background: var(--premium); color: var(--ink); }
.fitin-studio__badge--easy    { background: var(--easy); color: var(--ink); }
.fitin-studio__badge--physio  { background: var(--physio); color: var(--ink); }

.fitin-studio__meta {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(246, 245, 241, 0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fitin-studio__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fitin-studio__action {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  border: 1px solid rgba(246, 245, 241, 0.24);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  text-decoration: none;
  transition: background 200ms var(--ease), color 200ms, border-color 200ms;
}
.fitin-studio__action:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.fitin-studio__action--primary { border-color: rgba(246,245,241,0.55); color: var(--paper); }
.fitin-studio__action--primary:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.fitin-studio__action--physio { border-color: var(--physio); color: var(--physio); }
.fitin-studio__action--physio:hover { background: var(--physio); color: var(--ink); border-color: var(--physio); }

/* ─────────── EDITORIAL SPLIT (image + copy) ─────────── */
.fitin-editorial {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: stretch;
}
@media (max-width: 980px) { .fitin-editorial { grid-template-columns: 1fr; gap: 56px; } }
/* Grid-Kinder dürfen unter ihre Content-Breite schrumpfen (sonst 6px Overflow @360). */
.fitin-editorial > * { min-width: 0; }

.fitin-editorial__visual {
  position: relative;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-soft);
}
.fitin-editorial__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.9);
}
.fitin-editorial__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 28px;
  background: linear-gradient(180deg, transparent, rgba(10, 10, 11, 0.7));
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
.fitin-editorial__caption-name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
}
.fitin-editorial__caption-role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.75);
}

.fitin-editorial__copy { display: flex; flex-direction: column; }
.fitin-editorial__copy .fitin-lead { margin-bottom: 36px; }


/* ─────────── PHYSIO BLOCK (real gold field) ─────────── */
.fitin-physio-block {
  /* Neutraler Sektion-Hintergrund (paper-soft) — einheitlich mit allen
     Standard-Seiten. Starke Brand-Farben bleiben den Physio-/Premium-/Easy-
     Seiten vorbehalten. */
  background: var(--paper-soft);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.fitin-physio-block::after {
  content: "PHYSIO";
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(180px, 28vw, 420px);
  letter-spacing: -0.05em;
  color: rgba(10, 10, 11, 0.06);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}
.fitin-physio-block__shell { position: relative; z-index: 1; }
.fitin-physio-block .fitin-h2 em { color: var(--ink); }
.fitin-physio-block .fitin-lead { color: var(--ink); }
.fitin-physio-block__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin: 36px 0;
  padding-top: 32px;
  border-top: 2px solid var(--ink);
}
.fitin-physio-block__detail-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(10, 10, 11, 0.65);
  display: block;
  margin-bottom: 6px;
}
.fitin-physio-block__detail-val {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}


/* ─────────── FAQ ─────────── */
.fitin-faq { max-width: 880px; margin: 0 auto; }
.fitin-faq__item {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.fitin-faq__item:first-child { border-top: 1px solid var(--line); }
.fitin-faq__q {
  font-family: var(--font-sans);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.014em;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin: 0;
  line-height: 1.3;
}
.fitin-faq__q::-webkit-details-marker { display: none; }
.fitin-faq__q::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink-mute);
  transition: transform 240ms var(--ease);
  flex-shrink: 0;
  line-height: 1;
}
.fitin-faq__item[open] .fitin-faq__q::after { content: "\2013"; }
.fitin-faq__a {
  margin-top: 16px;
  color: var(--ink-mute);
  font-size: 16px;
  line-height: 1.65;
  max-width: 70ch;
}
.fitin-faq__a p:not(:last-child) { margin-bottom: 12px; }

/* ─────────── FORM ─────────── */
.fitin-form { max-width: 720px; margin: 0 auto; }
.fitin-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 600px) { .fitin-form__row { grid-template-columns: 1fr; } }
.fitin-form__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.fitin-form__field label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.fitin-form__field input,
.fitin-form__field select,
.fitin-form__field textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  width: 100%;
  transition: border-color 240ms;
}
.fitin-form__field input:focus,
.fitin-form__field select:focus,
.fitin-form__field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.fitin-form__field textarea { resize: vertical; min-height: 140px; }

.fitin-form__radios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 600px) { .fitin-form__radios { grid-template-columns: 1fr; } }
.fitin-form__radio {
  position: relative;
  cursor: pointer;
}
.fitin-form__radio input { position: absolute; opacity: 0; }
.fitin-form__radio span {
  display: block;
  padding: 18px 16px;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper-elev);
  transition: border-color 240ms, background 240ms;
}
.fitin-form__radio input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.fitin-form__radio:hover span { border-color: var(--ink); }

/* ─────────── FINAL CTA (Cream, signed) ─────────── */
.fitin-final-cta {
  background: var(--paper);
  padding: var(--section-y) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fitin-final-cta::after {
  content: "FITIN";
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(280px, 40vw, 580px);
  letter-spacing: -0.06em;
  color: rgba(10, 10, 11, 0.025);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.fitin-final-cta__shell { position: relative; z-index: 1; }

.fitin-final-cta__idx {
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}
.fitin-final-cta__idx-bar { width: 56px; height: 2px; background: var(--ink); }

.fitin-final-cta h2 {
  margin: 0 auto 32px;
  max-width: 16ch;
}
.fitin-final-cta h2 em { color: var(--accent); font-style: normal; }
.page-mitgliedschaft .fitin-final-cta h2 em { color: var(--premium); }
.page-physio .fitin-final-cta h2 em { color: var(--physio-deep); }

.fitin-final-cta p {
  max-width: 52ch;
  margin: 0 auto 56px;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-mute);
}
.fitin-final-cta__ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.fitin-final-cta__sig {
  margin-top: 96px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.fitin-final-cta__sig strong { color: var(--ink); font-weight: 600; }

/* ─────────── FOOTER ─────────── */
.fitin-footer {
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0 40px;
  position: relative;
  overflow: hidden;
}
.fitin-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 980px) { .fitin-footer__top { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (max-width: 600px) { .fitin-footer__top { grid-template-columns: 1fr; gap: 40px; } }

.fitin-footer__brand {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 120px);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--paper);
  line-height: 0.85;
  margin: 0 0 16px 0;
  display: inline-block;
}
.fitin-footer__brand .n { color: var(--premium); }
.fitin-footer__brand .reg {
  font-size: 0.3em;
  font-weight: 600;
  margin-left: 0.04em;
  vertical-align: top;
  position: relative;
  top: 0.1em;
  color: rgba(246, 245, 241, 0.55);
}
.fitin-footer__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.7);
  max-width: 32ch;
  line-height: 1.55;
  margin: 12px 0 0 0;
}
.fitin-footer__col h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.45);
  margin: 0 0 24px 0;
}
.fitin-footer__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0; padding: 0;
}
.fitin-footer__col a {
  font-size: 15px;
  color: rgba(246, 245, 241, 0.9);
  font-weight: 500;
  transition: color 200ms;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.fitin-footer__col a:hover { color: var(--premium); }
.fitin-footer__bottom {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(246, 245, 241, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.fitin-footer__legal {
  display: flex; gap: 24px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.fitin-footer__legal a { color: rgba(246, 245, 241, 0.5); text-decoration: none; }
.fitin-footer__legal a:hover { color: var(--premium); }

/* ── FITIN sticky action bar — Editorial Glass / Segmented Rail ─────────
   Mobile-first. Dark translucent glass over paper; accents only as dots,
   a hairline and a small price chip. Visible state keys off
   .fitin-stickybar.is-show (toggled by the external scroll handler). */

.fitin-stickybar{
  position:fixed; bottom:0; left:0; right:0; z-index:80;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(62,62,62,.86);
  border-top:1px solid rgba(212,208,197,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 -6px 22px rgba(0,0,0,.16);
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform 420ms var(--ease), opacity 320ms var(--ease);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fitin-stickybar{ background:rgba(62,62,62,.97); }
}
.fitin-stickybar.is-show{ transform:translateY(0); opacity:1; pointer-events:auto; }

/* one tidy unit: a 2px-cornered container divided only by hairlines */
.fitin-stickybar__shell{
  max-width:1180px; margin:0 auto;
  border:1px solid rgba(246,245,241,.14);
  border-radius:var(--r-sm);
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "lead   lead"
    "physio tel";
}

/* shared ghost item */
.fitin-stickybar__item{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:11px 10px;
  font-family:var(--font-sans); font-size:13px; font-weight:600;
  letter-spacing:-.01em; line-height:1;
  text-decoration:none; background:transparent; color:var(--paper-soft);
  border:0; cursor:pointer; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background 180ms var(--ease), color 180ms var(--ease);
}
.fitin-stickybar__item:hover,
.fitin-stickybar__item:focus-visible{ background:rgba(246,245,241,.06); color:var(--paper-elev); }
.fitin-stickybar__item:focus-visible{ outline:none; box-shadow:inset 0 0 0 1px rgba(246,245,241,.55); }
.fitin-stickybar__ico{ flex:none; opacity:.92; }

/* the ONE emphasis — Probetraining as a quiet paper ghost-fill (not a slab) */
.fitin-stickybar__item--lead{
  grid-area:lead;
  color:var(--paper-elev); font-weight:700;
  background:rgba(246,245,241,.10);
  box-shadow:inset 0 0 0 1px rgba(246,245,241,.16);
}
.fitin-stickybar__item--lead:hover,
.fitin-stickybar__item--lead:focus-visible{
  background:rgba(246,245,241,.15);
  box-shadow:inset 0 0 0 1px rgba(246,245,241,.28);
}
.fitin-stickybar__arr{ font-size:14px; line-height:1; opacity:.55; transition:transform 200ms var(--ease); }
.fitin-stickybar__item--lead:hover .fitin-stickybar__arr{ transform:translateX(2px); opacity:.85; }

/* utility row */
.fitin-stickybar__physio{
  grid-area:physio; position:relative; display:flex;
  border-top:1px solid rgba(246,245,241,.12);
}
.fitin-stickybar__item--physio{ width:100%; padding-right:26px; }
.fitin-stickybar__item--tel{
  grid-area:tel;
  border-top:1px solid rgba(246,245,241,.12);
  border-left:1px solid rgba(246,245,241,.12);
}

/* brand accents — dots only */
.fitin-stickybar__dot{ width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; }
.fitin-stickybar__dot--physio{ background:var(--physio); }

/* label swap + caret */
.fitin-stickybar__lbl--short{ display:none; }
.fitin-stickybar__caret{
  position:absolute; top:50%; right:9px; transform:translateY(-50%);
  opacity:.5; transition:transform 200ms var(--ease), opacity 200ms var(--ease);
}
.fitin-stickybar__item--physio[aria-expanded="true"]{ background:rgba(246,245,241,.06); color:var(--paper-elev); }
.fitin-stickybar__item--physio[aria-expanded="true"] .fitin-stickybar__caret{ transform:translateY(-50%) rotate(180deg); opacity:.9; }


/* ── upward glass popover / sheet ─────────────────────────────────── */
.fitin-stickybar__pop{
  position:absolute; bottom:calc(100% + 10px); left:0;
  width:min(280px, calc(100vw - 24px));
  background:rgba(62,62,62,.94);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(212,208,197,.18);
  border-radius:var(--r-md);
  box-shadow:0 12px 34px rgba(0,0,0,.30);
  padding:6px; z-index:2;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity 180ms var(--ease), transform 220ms var(--ease);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .fitin-stickybar__pop{ background:rgba(54,54,54,.99); }
}
.fitin-stickybar__pop[hidden]{ display:none; }
.fitin-stickybar__pop.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.fitin-stickybar__pop::after{
  content:""; position:absolute; top:100%; left:22px;
  border:7px solid transparent; border-top-color:rgba(62,62,62,.94);
}
.fitin-stickybar__pop-head{
  margin:4px 8px 8px; padding:0 0 8px;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-low);
  border-bottom:1px solid rgba(212,208,197,.14);
}
.fitin-stickybar__pop-item{
  display:flex; align-items:center; gap:10px;
  padding:13px 10px; min-height:48px; border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--paper-soft); text-decoration:none;
  transition:background 150ms var(--ease), color 150ms var(--ease);
}
.fitin-stickybar__pop-item:hover,
.fitin-stickybar__pop-item:focus-visible{ background:rgba(246,245,241,.07); color:var(--paper-elev); outline:none; }
.fitin-stickybar__pop-item:focus-visible{ box-shadow:inset 0 0 0 1px rgba(246,196,67,.55); }
.fitin-stickybar__pop-name{ flex:1 1 auto; }
.fitin-stickybar__ext{ opacity:.5; flex:none; }

/* ── pulse keyframes (desktop CTAs) ────────────────────────────────── */
@keyframes sb-pulse-blue{ 0%,100%{ box-shadow:0 0 0 0 rgba(0,174,239,0); } 50%{ box-shadow:0 0 8px 0 rgba(0,174,239,.30); } }
@keyframes sb-pulse-gold{ 0%,100%{ box-shadow:0 0 0 0 rgba(246,196,67,0); } 50%{ box-shadow:0 0 8px 0 rgba(246,196,67,.34); } }

/* ── MOBILE (<720px): Sticky-Bar komplett ausblenden — nur Desktop ──── */
@media (max-width:719px){ .fitin-stickybar{ display:none !important; } }

/* ── narrow phones (≤480px): collapse the ticker, swap to short labels ─ */
@media (max-width:480px){
  .fitin-stickybar__lbl--full{ display:none; }
  .fitin-stickybar__lbl--short{ display:inline; }
}

/* ── tablet / desktop (≥720px): hug-content segmented rail in one row ── */
@media (min-width:720px){
  .fitin-stickybar{ padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .fitin-stickybar__shell{
    width:min(580px, calc(100vw - 32px)); max-width:none; margin:0 auto;
    display:flex; align-items:stretch;
    grid-template-columns:none;
  }
  .fitin-stickybar__item--lead,
  .fitin-stickybar__physio,
  .fitin-stickybar__item--tel{ flex:1 1 0; }
  .fitin-stickybar__item{ min-height:46px; padding:12px 22px; font-size:13.5px; }
  .fitin-stickybar__item--lead{ padding:12px 22px; }
  .fitin-stickybar__physio{ border-top:0; }
  .fitin-stickybar__item--physio{ padding-right:38px; }
  .fitin-stickybar__caret{ right:16px; }
  .fitin-stickybar__item--tel{ border-top:0; border-left:1px solid rgba(246,245,241,.12); }
  .fitin-stickybar__lbl--full{ display:inline; }
  .fitin-stickybar__lbl--short{ display:none; }
  .fitin-stickybar__pop{ left:auto; right:0; }
  .fitin-stickybar__pop::after{ left:auto; right:22px; }
}

/* ── DESKTOP (>=720px): kraeftige, gebrandete CTAs + Aktion wie oben ── */
@media (min-width:720px){
  .fitin-stickybar__item--lead{
    background:var(--premium); color:var(--paper);
    box-shadow:none; animation:sb-pulse-blue 2.6s ease-in-out infinite;
  }
  .fitin-stickybar__item--lead:hover,
  .fitin-stickybar__item--lead:focus-visible{ background:var(--premium-deep); }
  .fitin-stickybar__item--lead .fitin-stickybar__arr{ opacity:.9; }

  .fitin-stickybar__item--physio{
    background:var(--physio); color:var(--ink);
    animation:sb-pulse-gold 2.6s ease-in-out infinite;
  }
  .fitin-stickybar__item--physio:hover,
  .fitin-stickybar__item--physio[aria-expanded="true"]{ background:var(--physio-deep); }
  .fitin-stickybar__item--physio .fitin-stickybar__dot--physio{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .fitin-stickybar,
  .fitin-stickybar__pop,
  .fitin-stickybar__caret,
  .fitin-stickybar__item,
  .fitin-stickybar__arr{ transition:none; }
  .fitin-stickybar__item--lead,
  .fitin-stickybar__item--physio{ animation:none; }
}

/* ─────────── REVEAL ANIMATION ─────────── */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.fade-up.in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 100ms; }
.d2 { transition-delay: 200ms; }
.d3 { transition-delay: 300ms; }
.d4 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-up.in { transition: none; opacity: 1; transform: none; }
  .fitin-marquee__track { animation: none; }
}

/* ─────────── HELPERS ─────────── */
.fitin-hide-mobile { display: inline-flex; }
.fitin-hide-desktop { display: none; }
@media (max-width: 720px) {
  .fitin-hide-mobile { display: none; }
  .fitin-hide-desktop { display: inline-flex; }
}

/* WP overrides */
.wp-site-blocks { padding: 0 !important; }
.wp-block-group { box-sizing: border-box; }
/* Hinweis: padding-top wird von body.has-announcement gesetzt (siehe unten). */


/* ═══════════════════════════════════════════════════════════════
   v2.1.0 — Announcement / Newsletter / Social / Drawer /
   Side-Pillar / Sale / Trust / Community
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── A11y Utility ─────────── */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────── Announcement Bar (Top of Header) ─────────── */
/* Höhe der Announcement-Bar — wird gleichzeitig für Header-Top-Offset
   und Body-Padding-Top genutzt, wenn die Bar sichtbar ist (body.has-announcement). */
:root { --announce-h: 44px; }

.fitin-announcement-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  /* Exakte Höhe = Header-Offset → kein heller Spalt, kein Durchscheinen beim Scrollen. */
  height: var(--announce-h);
  display: flex;
  align-items: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.fitin-announcement-bar.is-show { max-height: var(--announce-h); }
.fitin-announcement-bar.is-dismissed { display: none; }

/* Header rutscht unter die Bar, wenn diese sichtbar ist. */
body.has-announcement .fitin-site-header { top: var(--announce-h); }
/* Content (alle Pages) wird um die Bar-Höhe nach unten geschoben, damit
   nichts unter der opaquen schwarzen Bar verschwindet. */
body.has-announcement > .wp-site-blocks { padding-top: var(--announce-h) !important; }

.fitin-announcement-bar__inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  /* Nur vertikal — seitliche Polsterung kommt von .fitin-shell (sonst klebt's am Rand). */
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: nowrap;
}

.fitin-announcement-bar__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--action);
  animation: fitinDotPulse 1.6s ease-in-out infinite;
}
@keyframes fitinDotPulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

.fitin-announcement-bar__text {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.fitin-announcement-bar__text .fitin-mono { color: var(--action); font-weight: 600; }

.fitin-announcement-bar__msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fitin-announcement-bar__msg s { color: var(--ink-low); margin-right: 4px; }

.fitin-announcement-bar__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  background: var(--action);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid var(--action);
  border-radius: 2px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.fitin-announcement-bar__cta:hover {
  background: transparent;
  color: var(--action);
  border-color: var(--action);
}
.fitin-announcement-bar__cta .arr { transition: transform 0.2s var(--ease); }
.fitin-announcement-bar__cta:hover .arr { transform: translateX(2px); }

.fitin-announcement-bar__close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--ink-low);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.2s var(--ease);
}
.fitin-announcement-bar__close:hover { color: var(--paper); }

@media (max-width: 720px) {
  /* Mehr Höhe → Punkt + voller Text + Sichern-Button passen sauber (2 Zeilen), nichts abgeschnitten. */
  :root { --announce-h: 60px; }
  .fitin-announcement-bar__inner { gap: 10px; }
  .fitin-announcement-bar__msg { white-space: normal; line-height: 1.3; }
  /* Platz für den Button: das Wort „Aktion" entfällt — der pulsierende Punkt signalisiert es. */
  .fitin-announcement-bar__text .fitin-mono { display: none; }
  .fitin-announcement-bar__cta { padding: 5px 11px; font-size: 12px; }
}

/* ─────────── Stay Close (Newsletter + Social — konsolidiert) ─────────── */
.fitin-footer-stayclose {
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0;
}
.fitin-footer-stayclose__shell {
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.fitin-footer-stayclose__head { display: flex; flex-direction: column; gap: 16px; }
.fitin-footer-stayclose__title {
  font-family: var(--font-sans);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: -.034em;
  line-height: .96;
  margin: 0;
  color: var(--paper);
}
.fitin-footer-stayclose__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--easy);
}
.fitin-footer-stayclose__lead {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(246,245,241,.7);
  max-width: 56ch;
  margin: 0 auto;
}
.fitin-footer-stayclose__field {
  display: flex;
  gap: 0;
  max-width: 520px;
  margin: 0 auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color 240ms;
}
.fitin-footer-stayclose__field:focus-within { border-color: var(--easy); }
.fitin-footer-stayclose__field input {
  flex: 1;
  padding: 18px 22px;
  background: transparent;
  border: none;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 15px;
}
.fitin-footer-stayclose__field input::placeholder { color: rgba(246,245,241,.4); }
.fitin-footer-stayclose__field input:focus { outline: none; }
.fitin-footer-stayclose__submit {
  background: var(--paper);
  color: var(--ink);
  border: none;
  padding: 0 28px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.012em;
  cursor: pointer;
  transition: background 200ms;
}
.fitin-footer-stayclose__submit:hover { background: var(--easy); }
.fitin-footer-stayclose__hint {
  font-size: 12px;
  color: rgba(246,245,241,.4);
  max-width: 520px;
  margin: 12px auto 0;
}
.fitin-footer-stayclose__hint a { color: rgba(246,245,241,.7); text-decoration: underline; }
.fitin-footer-stayclose__divider {
  width: 32px; height: 1px;
  background: rgba(255,255,255,.2);
  margin: 8px auto;
}
.fitin-footer-stayclose__social {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.fitin-footer-stayclose__social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.fitin-footer-stayclose__social-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  color: var(--paper);
  text-decoration: none;
  transition: background 200ms, border-color 200ms;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
}
.fitin-footer-stayclose__social-links a:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--easy);
}
.fitin-footer-stayclose__social-links em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(246,245,241,.5);
  font-weight: 500;
}
@media (max-width: 600px) {
  .fitin-footer-stayclose { padding: 64px 0; }
  .fitin-footer-stayclose__field { flex-direction: column; background: transparent; border: none; }
  .fitin-footer-stayclose__field input {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--r-sm);
  }
  .fitin-footer-stayclose__submit {
    width: 100%; padding: 16px;
    border-radius: var(--r-sm);
    margin-top: 8px;
  }
  .fitin-footer-stayclose__social-links a em { display: none; }
}

/* ─────────── Newsletter (3-State Container) ─────────── */
.fitin-newsletter {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 95;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
}
.fitin-newsletter[data-state="show"] .fitin-newsletter__drawer {
  display: flex; pointer-events: auto;
  animation: drawerIn 480ms cubic-bezier(.2,.7,.3,1);
}
.fitin-newsletter[data-state="show"] .fitin-newsletter__pill { display: none; }
.fitin-newsletter[data-state="mini"] .fitin-newsletter__drawer { display: none; }
.fitin-newsletter[data-state="mini"] .fitin-newsletter__pill {
  display: inline-flex; pointer-events: auto;
  animation: pillIn 320ms cubic-bezier(.2,.7,.3,1);
}
.fitin-newsletter[data-state="hidden"] { display: none; }

@keyframes drawerIn {
  from { transform: translateX(112%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes pillIn {
  from { transform: translateX(108%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.fitin-newsletter__drawer {
  display: none;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  margin-right: 16px;
  max-height: calc(100vh - 32px);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  box-shadow: 0 32px 64px -12px rgba(0,0,0,.32), 0 12px 32px -8px rgba(0,0,0,.18);
  overflow: hidden auto;
  position: relative;
}
.fitin-newsletter__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--paper);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms;
  z-index: 2;
}
.fitin-newsletter__close:hover { background: rgba(255,255,255,.16); }
.fitin-newsletter__visual {
  background: linear-gradient(135deg, rgba(152,201,60,.14), rgba(0,174,239,.06));
  padding: 32px 28px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fitin-newsletter__visual-mark {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--paper);
}
.fitin-newsletter__visual-mark .n { color: var(--premium); }
.fitin-newsletter__body {
  padding: 24px 28px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.fitin-newsletter__title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1.02;
  margin: 0;
  color: var(--paper);
}
.fitin-newsletter__title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--easy);
}
.fitin-newsletter__benefits {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.fitin-newsletter__benefits li {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 13px; color: rgba(246,245,241,.78);
  line-height: 1.5;
}
.fitin-newsletter__benefits li span {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: .12em;
  color: var(--easy);
}
.fitin-newsletter__form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px;
}
.fitin-newsletter__form input {
  padding: 14px 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--font-sans); font-size: 14px;
  transition: border-color 200ms;
}
.fitin-newsletter__form input::placeholder { color: rgba(246,245,241,.4); }
.fitin-newsletter__form input:focus { outline: none; border-color: var(--easy); background: rgba(255,255,255,.1); }
.fitin-newsletter__submit {
  background: var(--paper); color: var(--ink);
  border: none;
  padding: 14px 20px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600;
  letter-spacing: -.012em;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 200ms;
}
.fitin-newsletter__submit:hover { background: var(--easy); }
.fitin-newsletter__pass {
  background: transparent; border: none;
  color: rgba(246,245,241,.4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0; margin-top: 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.18);
}
.fitin-newsletter__pass:hover { color: rgba(246,245,241,.8); }

/* MINI-PILL */
/* Mini-Zustand: vertikaler Tab am rechten Rand (kollidiert nicht mit Sticky-Bars). */
.fitin-newsletter__pill {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 8px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid rgba(255,255,255,.15);
  border-right: none;
  border-radius: 12px 0 0 12px;
  cursor: pointer;
  box-shadow: -8px 0 24px -10px rgba(0,0,0,.32);
  transition: transform 200ms, background 200ms, border-color 200ms;
}
.fitin-newsletter__pill:hover {
  transform: translateX(-3px);
  background: var(--ink-soft);
  border-color: var(--easy);
}
.fitin-newsletter__pill svg { color: var(--easy); }
/* Label vertikal stellen */
.fitin-newsletter__pill > span:not(.fitin-newsletter__pill-close) {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fitin-newsletter__pill-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  color: rgba(246,245,241,.6);
  font-size: 14px; line-height: 1;
  margin-left: 4px;
  cursor: pointer;
  transition: background 180ms;
}
.fitin-newsletter__pill-close:hover { background: rgba(255,255,255,.18); color: var(--paper); }

@media (max-width: 600px) {
  /* Tab + Drawer bleiben rechts mittig — frei von Sticky-Bar/Bookbar unten. */
  .fitin-newsletter__drawer { width: min(340px, calc(100vw - 22px)); margin-right: 10px; }
  .fitin-newsletter__pill { padding: 13px 6px; gap: 7px; }
}

/* ─────────── Sale Tag (Reusable Pill) ─────────── */
.fitin-sale-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--action);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.fitin-sale-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.fitin-sale-tag--ink {
  background: var(--ink);
  color: var(--action);
}
.fitin-sale-tag--ink::before { background: var(--action); }

/* ─────────── Hero Sale Bar (Below H1) ─────────── */
.fitin-hero__sale {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0;
  padding: 10px 18px;
  background: var(--action);
  color: var(--ink);
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  max-width: fit-content;
}
.fitin-hero__sale-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--action);
  border-radius: 2px;
}
.fitin-hero__sale-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
  animation: fitinDotPulse 1.6s ease-in-out infinite;
}
.fitin-hero__sale-text s {
  color: var(--ink-soft);
  opacity: 0.55;
  margin-right: 4px;
}

@media (max-width: 600px) {
  .fitin-hero__sale {
    font-size: 13px;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .fitin-hero__sale-label { font-size: 9px; }
}

/* ─────────── Trust Block (Google Reviews Slot) ─────────── */
.fitin-trust {
  /* Paper-Soft als sanfter Auslauf vor dem schwarzen CTA-Final.
     Cluster mit Community (paper) + Apps (paper) davor. */
  background: var(--paper-soft);
  padding: var(--section-y) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fitin-trust__shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 64px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 980px) {
  .fitin-trust__shell {
    grid-template-columns: 1fr;
    padding: 0 32px;
    gap: 40px;
  }
}
@media (max-width: 600px) {
  .fitin-trust__shell { padding: 0 22px; }
}

.fitin-trust__rating {
  text-align: left;
}
.fitin-trust__stars {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
}
.fitin-trust__stars svg {
  width: 22px;
  height: 22px;
  fill: var(--star);
}

.fitin-trust__score {
  font-family: var(--font-sans);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.fitin-trust__score-out {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-low);
}

.fitin-trust__count {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-top: 12px;
  display: block;
}

.fitin-trust__google-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease);
}
.fitin-trust__google-link:hover { border-color: var(--ink); }

.fitin-trust__quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) {
  .fitin-trust__quotes { grid-template-columns: 1fr; gap: 14px; }
}

.fitin-trust__quote {
  /* Auf paper-soft Section: weiß als Card-Bg, damit Cards leuchten. */
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 22px;
}
.fitin-trust__quote-stars {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 12px;
}
.fitin-trust__quote-stars svg { width: 14px; height: 14px; fill: var(--star); }

.fitin-trust__quote-text {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 16px;
  font-style: italic;
}

.fitin-trust__quote-author {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-low);
}


.fitin-community__tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-soft);
}
.fitin-community__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.fitin-community__tile:hover img { transform: scale(1.06); }

.fitin-community__tile::after {
  content: "↗";
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  font-size: 14px;
  font-family: var(--font-sans);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.fitin-community__tile:hover::after { opacity: 1; transform: translateY(0); }



/* ═══════════════════════════════════════════════════════════════
   COMPARE TABLE (Easy/Premium Landing) — v2.2.0
   ═══════════════════════════════════════════════════════════════ */


/* ─────────── Compare Table ─────────── */
.fitin-compare {
  margin-top: 96px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
.fitin-compare h3 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--premium);
}
.fitin-compare__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.fitin-compare__table th,
.fitin-compare__table td {
  padding: 16px 24px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.fitin-compare__table th { background: var(--paper-soft); }
.fitin-compare__table th:nth-child(2),
.fitin-compare__table th:nth-child(3),
.fitin-compare__table td:nth-child(2),
.fitin-compare__table td:nth-child(3) {
  text-align: center;
  width: 130px;
  font-family: var(--font-mono);
  font-weight: 500;
}
.fitin-compare__table tbody tr:last-child th,
.fitin-compare__table tbody tr:last-child td { border-bottom: none; }
.fitin-compare__table tbody tr:nth-child(odd) td { background: rgba(0,0,0,.012); }
.fitin-compare__table td:nth-child(2) { color: var(--premium-deep); }
.fitin-compare__table td:nth-child(3) { color: var(--easy-deep); }
.fitin-compare__table td:nth-child(2):only-of-type,
.fitin-compare__table td:nth-child(3):only-of-type { color: inherit; }

@media (max-width: 720px) {
  .fitin-compare__table th,
  .fitin-compare__table td { padding: 12px 14px; font-size: 13px; }
  .fitin-compare__table th:nth-child(2),
  .fitin-compare__table th:nth-child(3),
  .fitin-compare__table td:nth-child(2),
  .fitin-compare__table td:nth-child(3) { width: 70px; }
}



/* ═══════════════════════════════════════════════════════════════
   v2.2.0 — Landing Pages (/premium/, /easy/)
   ═══════════════════════════════════════════════════════════════ */


/* ─────────── Landing Hero ─────────── */
.fitin-landing-hero {
  padding: 140px 0 96px;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.fitin-landing-hero__shell {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 980px) {
  .fitin-landing-hero__shell { grid-template-columns: 1fr; gap: 32px; }
  .fitin-landing-hero { padding: 100px 0 64px; }
}
.fitin-landing-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fitin-landing-hero__sale {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--easy);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
}
.fitin-landing-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fitin-landing-hero__trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.fitin-landing-hero__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* ─────────── Benefits ─────────── */
.fitin-landing-benefits { padding: var(--section-y) 0; }
.fitin-landing-benefits h2 { margin-bottom: 56px; }
.fitin-landing-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .fitin-landing-benefits__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fitin-landing-benefits__grid { grid-template-columns: 1fr; } }
.fitin-landing-benefit {
  background: var(--paper-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fitin-landing-benefit h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.014em;
  color: var(--ink);
}
.fitin-landing-benefit p {
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.6;
  margin: 0;
}

/* ─────────── Included ─────────── */
.fitin-landing-included {
  padding: var(--section-y) 0;
  background: var(--paper-soft);
}
.fitin-landing-included__head { margin-bottom: 56px; }
.fitin-landing-included__head .fitin-mono { display: block; margin-bottom: 12px; }
.fitin-landing-included__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
@media (max-width: 980px) { .fitin-landing-included__grid { grid-template-columns: 1fr; gap: 24px; } }
.fitin-landing-included__grid ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fitin-landing-included__grid li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.fitin-landing-included__grid li:last-child { border-bottom: none; }
.fitin-landing-included__grid li strong {
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

/* ─────────── Pricing ─────────── */
.fitin-landing-pricing { padding: var(--section-y) 0; }
.fitin-landing-pricing__head {
  text-align: center;
  margin-bottom: 56px;
}
.fitin-landing-pricing__head .fitin-mono,
.fitin-landing-pricing__head h2,
.fitin-landing-pricing__head p { display: block; }
.fitin-landing-pricing__head .fitin-lead {
  margin: 16px auto 0;
  max-width: 56ch;
}
.fitin-landing-pricing__tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 980px) { .fitin-landing-pricing__tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fitin-landing-pricing__tiers { grid-template-columns: 1fr; } }
/* 3-Tarif-Variante (Easy: 3/6/12) — eigene Breakpoints statt Inline-Style,
   damit das Grid auf Mobile sauber umbricht (Inline-Style schlug Media Queries). */
.fitin-landing-pricing__tiers--3 { grid-template-columns: repeat(3, 1fr); max-width: 680px; }
@media (max-width: 760px) { .fitin-landing-pricing__tiers--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .fitin-landing-pricing__tiers--3 { grid-template-columns: 1fr; } }
.fitin-landing-pricing__tier {
  background: var(--paper-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  position: relative;
}
.fitin-landing-pricing__tier strong {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.024em;
  color: var(--ink);
}
.fitin-landing-pricing__tier em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.fitin-landing-pricing__tier--featured {
  border-color: var(--premium);
  border-width: 2px;
  padding: 27px 21px;
}
.fitin-landing-pricing__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--premium);
  color: var(--ink);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
}
.fitin-landing-pricing__note {
  text-align: center;
  margin-top: 32px;
  font-size: 14px;
  color: var(--ink-mute);
}
.fitin-landing-pricing__note a {
  color: var(--ink);
  text-decoration: underline;
  font-weight: 500;
}

/* ─────────── Compare (auf Landing-Page = dunkel) ─────────── */
.fitin-landing-compare {
  padding: var(--section-y) 0;
  background: var(--ink);
  color: var(--paper);
}
.fitin-landing-compare h2 { color: var(--paper); }
.fitin-landing-compare h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}
.fitin-landing-compare .fitin-lead { color: rgba(246,245,241,.7); }
.fitin-landing-compare .fitin-compare__table {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--paper);
}
.fitin-landing-compare .fitin-compare__table th,
.fitin-landing-compare .fitin-compare__table td {
  border-bottom-color: rgba(255,255,255,.08);
  color: rgba(246,245,241,.85);
}
.fitin-landing-compare .fitin-compare__table th { background: rgba(255,255,255,.05); color: var(--paper); }
.fitin-landing-compare .fitin-compare__table tbody tr:nth-child(odd) td { background: rgba(255,255,255,.02); }
.fitin-landing-compare .fitin-compare__table th.is-featured span { font-weight: 700; }

/* ─────────── Trust (auf Landing-Page = paper-soft Background) ─────────── */
.fitin-landing-trust {
  padding: var(--section-y) 0;
  background: var(--paper-soft);
}

/* ─────────── FAQ ─────────── */
.fitin-landing-faq {
  padding: var(--section-y) 0;
  background: var(--paper);
}
.fitin-landing-faq h2 { margin-bottom: 56px; }
.fitin-landing-faq h2 em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--premium);
}
.fitin-faq {
  max-width: 720px;
  margin: 0 auto;
}
.fitin-faq__item {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.fitin-faq__item summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.014em;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.fitin-faq__item summary::-webkit-details-marker { display: none; }
.fitin-faq__item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-mute);
  transition: transform 240ms;
  flex-shrink: 0;
}
.fitin-faq__item[open] summary::after { content: "−"; }
.fitin-faq__item p {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
}
.fitin-faq__item p a { color: var(--ink); text-decoration: underline; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   ABO-DETAILSEITEN — durchgehendes Brand-Theming (v2.3.0)
   Easy = Grün · Premium = Blau. Additive Ebene, scoped über Body-Klassen
   (.fitin-easy-landing / .fitin-premium-landing). Beeinflusst keine andere Seite.
   ═══════════════════════════════════════════════════════════════ */
.fitin-easy-landing    { --brand: var(--easy);    --brand-deep: var(--easy-deep);    --brand-tint: var(--easy-tint);    --brand-on: var(--ink); }
.fitin-premium-landing { --brand: var(--premium); --brand-deep: var(--premium-deep); --brand-tint: var(--premium-tint); --brand-on: var(--paper); }

/* Hero — KNALLIGE Brand-Vollfläche mit hellem Text. */
.fitin-premium-landing .fitin-landing-hero { background: linear-gradient(140deg, var(--premium) 0%, var(--premium-deep) 100%); }
.fitin-easy-landing    .fitin-landing-hero { background: linear-gradient(140deg, var(--easy)  0%, var(--easy-deep)  100%); }
.fitin-landing .fitin-landing-hero { border-bottom: none; padding: 128px 0 72px; color: var(--paper); }
.fitin-landing .fitin-landing-hero__copy .fitin-mono { color: rgba(255,255,255,.82) !important; }
.fitin-landing .fitin-landing-hero .fitin-h1 { color: var(--paper); font-size: clamp(40px, 5.4vw, 74px); line-height: .92; }
.fitin-landing .fitin-landing-hero .fitin-h1 em { color: rgba(255,255,255,.66) !important; }
.fitin-landing .fitin-landing-hero .fitin-lead { color: rgba(255,255,255,.92); }
.fitin-landing .fitin-landing-hero__trust { color: rgba(255,255,255,.85); border-top-color: rgba(255,255,255,.28); }
/* Hero-Buttons auf Brand-Fläche → heller Kontrast. */
.fitin-landing .fitin-landing-hero .fitin-btn--premium,
.fitin-landing .fitin-landing-hero .fitin-btn--easy { background: var(--paper); color: var(--ink); }
.fitin-landing .fitin-landing-hero .fitin-btn--premium:hover,
.fitin-landing .fitin-landing-hero .fitin-btn--easy:hover { background: var(--ink); color: var(--paper); }
.fitin-landing .fitin-landing-hero .fitin-btn--ghost { border-color: rgba(255,255,255,.6); color: var(--paper); }
.fitin-landing .fitin-landing-hero .fitin-btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* Easy-Sale-Pill auf grüner Fläche → Aktions-Gold (markiert). */
.fitin-easy-landing .fitin-landing-hero__sale { background: var(--action); color: var(--ink); }
/* Hero-Bild dezent absetzen. */
.fitin-landing .fitin-landing-hero__visual img { box-shadow: 0 24px 60px -24px rgba(10,10,11,.5); }

/* Kompakter — deutlich weniger Höhe pro Sektion (weniger Scrollen). */
.fitin-landing .fitin-landing-benefits,
.fitin-landing .fitin-landing-included,
.fitin-landing .fitin-landing-pricing,
.fitin-landing .fitin-landing-trust,
.fitin-landing .fitin-landing-faq { padding-top: clamp(48px, 5.5vw, 76px); padding-bottom: clamp(48px, 5.5vw, 76px); }
.fitin-landing .fitin-landing-benefits h2 { margin-bottom: 40px; }
.fitin-landing .fitin-landing-included__head,
.fitin-landing .fitin-landing-faq h2 { margin-bottom: 40px; }
/* Mehr Brand-Präsenz: Inklusiv-Sektion in Brand-Tint statt neutralem Soft. */
.fitin-premium-landing .fitin-landing-included { background: var(--premium-tint); }
.fitin-easy-landing    .fitin-landing-included { background: var(--easy-tint); }

/* Section-Eyebrows + kursive Akzente generell auf Brand. */
.fitin-landing .fitin-landing-included__head .fitin-mono,
.fitin-landing .fitin-landing-pricing__head .fitin-mono { color: var(--brand-deep) !important; }
.fitin-landing .fitin-landing-benefits h2 em,
.fitin-landing .fitin-landing-included h2 em,
.fitin-landing .fitin-landing-pricing h2 em { color: var(--brand) !important; }

/* Benefits — hochwertige Karten: Brand-Akzentleiste, grosse Brand-Nummer, Hover-Lift. */
.fitin-landing .fitin-landing-benefit {
  position: relative;
  overflow: hidden;
  gap: 8px;
  padding: 34px 30px 30px;
  transition: border-color 300ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.fitin-landing .fitin-landing-benefit::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand);
}
.fitin-landing .fitin-landing-benefit:hover {
  border-color: var(--brand);
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -26px rgba(10, 10, 11, .32);
}
.fitin-landing .fitin-landing-benefit__ico {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  margin-bottom: 16px;
}
.fitin-landing .fitin-landing-benefit__ico svg { width: 24px; height: 24px; }
.fitin-landing .fitin-landing-benefit .fitin-mono {
  position: absolute;
  top: 26px; right: 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brand-deep);
  opacity: .5;
}
.fitin-landing .fitin-landing-benefit h3 { font-size: 19px; letter-spacing: -.016em; }

/* Included — Brand-Häkchen vor jedem Item. */
.fitin-landing .fitin-landing-included__grid li { position: relative; padding-left: 28px; }
.fitin-landing .fitin-landing-included__grid li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--brand-deep);
  font-weight: 700;
}

/* Pricing — Brand für Featured, Badge, Preis-Zahl, Tier-Hover, Ghost-Button-Hover. */
.fitin-landing .fitin-landing-pricing__tier { transition: border-color 240ms var(--ease), transform 240ms var(--ease); }
.fitin-landing .fitin-landing-pricing__tier:hover { border-color: var(--brand); transform: translateY(-3px); }
.fitin-landing .fitin-landing-pricing__tier--featured { border-color: var(--brand); }
.fitin-landing .fitin-landing-pricing__tier strong { color: var(--brand-deep); }
.fitin-landing .fitin-landing-pricing__badge { background: var(--brand); color: var(--brand-on); }
.fitin-landing .fitin-landing-pricing__tier .fitin-btn--ghost:hover {
  background: var(--brand); border-color: var(--brand); color: var(--brand-on);
}

/* Compare (dunkel) — Brand für Featured-Spalte + em. */
.fitin-landing .fitin-landing-compare h2 em { color: var(--brand); }
.fitin-landing .fitin-landing-compare .fitin-compare__table th.is-featured {
  border-bottom: 2px solid var(--brand);
}
.fitin-landing .fitin-landing-compare .fitin-compare__table td:nth-child(2) {
  color: var(--paper); font-weight: 600;
}

/* FAQ — Brand für em + offenen Eintrag. */
.fitin-landing .fitin-landing-faq h2 em { color: var(--brand); }
.fitin-landing .fitin-faq__item[open] summary { color: var(--brand-deep); }

/* ── Erweiterte Preise (Schüler/Senioren · Familie) ── */
.fitin-landing-prices-extra {
  max-width: 880px;
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) { .fitin-landing-prices-extra { grid-template-columns: 1fr; } }
.fitin-landing-prices-extra__card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 24px 26px;
  background: var(--paper-elev);
}
.fitin-landing-prices-extra__card h4 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.fitin-landing-prices-extra__card h4 .fitin-mono {
  font-family: var(--font-mono);
  color: var(--brand-deep);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fitin-landing-prices-extra__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.fitin-landing-prices-extra__row:last-child { border-bottom: none; }
.fitin-landing-prices-extra__row span:last-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.fitin-landing-prices-extra__row.is-na span:last-child { color: var(--ink-low); font-weight: 400; }
.fitin-landing-prices-extra__row s { color: var(--ink-low); margin-right: 4px; }

/* ── Final CTA-Band (Brand-Vollfläche) ── */
.fitin-landing-cta {
  background: var(--brand);
  color: var(--brand-on);
  padding: clamp(56px, 7vw, 96px) 0;
  text-align: center;
}
.fitin-premium-landing .fitin-landing-cta { color: var(--paper); }
.fitin-landing-cta__shell { max-width: 760px; margin: 0 auto; }
.fitin-landing-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .82;
  display: block;
  margin-bottom: 18px;
}
.fitin-landing-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .96;
  color: inherit;
  margin: 0 0 20px;
}
.fitin-landing-cta h2 em { font-style: normal; opacity: .8; }
.fitin-landing-cta p {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  opacity: .92;
  margin: 0 auto 32px;
  max-width: 56ch;
}
.fitin-landing-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.fitin-landing-cta__fine {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  opacity: .72;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER-NAV — Mitgliedschaft-Dropdown (Premium / Easy)  [v2.3.0]
   Nur Desktop (Nav ist <=980px ohnehin ausgeblendet).
   ═══════════════════════════════════════════════════════════════ */
.fitin-nav-has-sub { position: relative; display: inline-flex; align-items: center; }
.fitin-nav-caret {
  display: inline-block;
  margin-left: 5px;
  font-size: 15px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform 240ms var(--ease), color 240ms var(--ease);
  color: var(--ink-low);
}
.fitin-nav-has-sub:hover .fitin-nav-caret,
.fitin-nav-has-sub:focus-within .fitin-nav-caret { color: var(--premium); }

.fitin-nav-sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: var(--paper-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px -16px rgba(10, 10, 11, .28);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  z-index: 200;
}
.fitin-nav-sub::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.fitin-nav-has-sub:hover .fitin-nav-sub,
.fitin-nav-has-sub:focus-within .fitin-nav-sub {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.fitin-site-header__nav .fitin-nav-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-soft);
  transform: none;
}
.fitin-site-header__nav .fitin-nav-sub a::after { display: none; }
.fitin-site-header__nav .fitin-nav-sub a:hover { background: var(--paper-soft); color: var(--ink); transform: none; letter-spacing: .06em; }
.fitin-site-header__nav .fitin-nav-sub a[href="/premium/"]:hover { color: var(--premium-deep); }
.fitin-site-header__nav .fitin-nav-sub a[href="/easy/"]:hover { color: var(--easy-deep); }
.fitin-nav-sub__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fitin-nav-sub__dot--premium { background: var(--premium); }
.fitin-nav-sub__dot--easy { background: var(--easy); }

/* Parent „Mitgliedschaft" auch auf /premium/ & /easy/ als aktiv markieren. */
body.page-premium .fitin-site-header__nav .fitin-nav-has-sub > a[href="/mitgliedschaft/"],
body.page-easy    .fitin-site-header__nav .fitin-nav-has-sub > a[href="/mitgliedschaft/"] {
  color: var(--ink);
  font-weight: 600;
}
body.page-premium .fitin-site-header__nav .fitin-nav-has-sub > a[href="/mitgliedschaft/"]::after,
body.page-easy    .fitin-site-header__nav .fitin-nav-has-sub > a[href="/mitgliedschaft/"]::after {
  transform: translateX(-50%) scaleX(1);
  width: 32px;
}

/* ═══════════════════════════════════════════════════════════════
   MITGLIEDSCHAFT-ÜBERSICHT — kompakter, klareres Branding  [v2.3.0]
   ═══════════════════════════════════════════════════════════════ */
/* Kompakter Hero — kleinere Headline, weniger Höhe. */
.page-mitgliedschaft .fitin-hero--paper { padding: 148px 0 56px; }
.page-mitgliedschaft .fitin-hero__h1 { margin-bottom: 40px; }
.page-mitgliedschaft .fitin-hero__top { margin-bottom: 44px; }
.page-mitgliedschaft .fitin-hero__lower { gap: 56px; align-items: center; }
.page-mitgliedschaft .fitin-hero__visual { aspect-ratio: 16 / 12; }

/* Kompaktere Sektionen + kleinere, konsistente Section-Titel. */
.page-mitgliedschaft .fitin-section { padding-top: clamp(52px, 6vw, 84px); padding-bottom: clamp(52px, 6vw, 84px); }
/* H2 nutzt die einheitliche Typo-Skala (.fitin-h2) — kein Page-Override mehr. */
.page-mitgliedschaft .fitin-section-head { margin-bottom: 38px; }

/* ── Zwei-Wege-Karten: deutlich stärkeres Brand-Differenzieren ── */
.page-mitgliedschaft .fitin-card { border: 2px solid transparent; }
.page-mitgliedschaft .fitin-card--premium { border-color: var(--premium); }
.page-mitgliedschaft .fitin-card--easy { border-color: var(--easy); }
.page-mitgliedschaft .fitin-card__num {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.page-mitgliedschaft .fitin-card--premium .fitin-card__num { background: var(--premium); color: var(--paper); }
.page-mitgliedschaft .fitin-card--easy    .fitin-card__num { background: var(--easy);    color: var(--ink); }
.page-mitgliedschaft .fitin-card--premium .fitin-card__title { color: var(--premium-deep); }
.page-mitgliedschaft .fitin-card--easy    .fitin-card__title { color: var(--easy-deep); }
.page-mitgliedschaft .fitin-card--premium .fitin-card__list li::before { color: var(--premium-deep); }
.page-mitgliedschaft .fitin-card--easy    .fitin-card__list li::before { color: var(--easy-deep); }
/* CTA als kräftiger Brand-Button statt Unterstrich-Link. */
.page-mitgliedschaft .fitin-card__cta {
  border-bottom: none;
  align-self: flex-start;
  padding: 15px 26px;
  border-radius: var(--r-sm);
  margin-top: 4px;
}
.page-mitgliedschaft .fitin-card--premium .fitin-card__cta { background: var(--premium); color: var(--paper); }
.page-mitgliedschaft .fitin-card--premium .fitin-card__cta:hover { background: var(--premium-deep); }
.page-mitgliedschaft .fitin-card--easy    .fitin-card__cta { background: var(--easy); color: var(--ink); }
.page-mitgliedschaft .fitin-card--easy    .fitin-card__cta:hover { background: var(--easy-deep); color: var(--paper); }


/* Top-Level-Sektionen bündig aneinander. Entfernt den WP-Default-Spalt
   (:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }), der zwischen
   farbigen Sektionen — v.a. CTA-Band → Footer — als heller Streifen sichtbar war. */
.wp-site-blocks > * { margin-block-start: 0; }

/* ── Vergleich (Übersicht) — modernes Grid mit Häkchen-Badges statt Tabelle ── */
.fitin-vs {
  --vscol: 96px;                       /* Breite der Premium-/Easy-Spalten */
  --vs-prem: rgba(0, 174, 239, .16);   /* durchgehende Blau-Spalte (Premium) */
  --vs-easy: rgba(108, 137, 79, .18);  /* durchgehende Grün-Spalte (Easy) */
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-elev);
}
/* Durchgehende Farbspalten als Hintergrund — füllen jede Zelle komplett (kein „Chip"-Spalt). */
.fitin-vs__head,
.fitin-vs__row {
  display: grid;
  grid-template-columns: 1fr var(--vscol) var(--vscol);
  align-items: center;
  background-image:
    linear-gradient(var(--vs-prem), var(--vs-prem)),
    linear-gradient(var(--vs-easy), var(--vs-easy));
  background-repeat: no-repeat;
  background-size: var(--vscol) 100%, var(--vscol) 100%;
  background-position: right var(--vscol) top, right top;
}
@media (max-width: 560px) { .fitin-vs { --vscol: 64px; } }
.fitin-vs__head { background-color: var(--paper-soft); border-bottom: 1px solid var(--line); }
.fitin-vs__col { text-align: center; padding: 18px 6px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.fitin-vs__col strong { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.fitin-vs__col em { font-family: var(--font-mono); font-style: normal; font-size: 10px; letter-spacing: .04em; color: var(--ink-mute); }
.fitin-vs__col--premium strong { color: var(--premium-deep); }
.fitin-vs__col--easy strong { color: var(--easy-deep); }
/* Gruppen-Divider. */
.fitin-vs__group {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 18px;
}
.fitin-vs__group--prem { background: var(--premium-deep); }
/* Zeilen + Häkchen-Badges. */
.fitin-vs__row { border-top: 1px solid var(--line); }
.fitin-vs__row > span { padding: 14px 18px; font-size: 14px; color: var(--ink); }
.fitin-vs__row > span em { font-style: normal; color: var(--ink-low); }
.fitin-vs__yes, .fitin-vs__no { width: 27px; height: 27px; border-radius: 50%; display: inline-grid; place-items: center; margin: 0 auto; }
/* Weisser Chip + kräftiger schwarzer Haken → maximaler Kontrast auf der Farbspalte. */
.fitin-vs__yes { background: var(--paper-elev); box-shadow: 0 1px 3px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.05); }
.fitin-vs__yes::before { content: "✓"; color: #131313; font-size: 15px; font-weight: 800; line-height: 1; }
.fitin-vs__no::before { content: "–"; color: var(--ink-mute); font-size: 15px; font-weight: 700; }
/* Preis-Zeile. */
.fitin-vs__row--price { border-top: 2px solid var(--line-strong); }
.fitin-vs__row--price > strong { display: flex; align-items: center; justify-content: center; padding: 16px 2px; font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
.fitin-vs__row--price > span { font-weight: 600; }

/* ── FITIN Screens — kompakter Teaser (Startseite + Firmenfitness) ── */
.fitin-screens-teaser { padding: clamp(36px, 4vw, 56px) 0; }
.fitin-screens-teaser__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 36px;
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  padding: clamp(26px, 3.5vw, 40px) clamp(26px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.fitin-screens-teaser__band::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--premium);
}
.fitin-screens-teaser__text { max-width: 60ch; }
.fitin-screens-teaser__text h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.02;
  color: var(--paper);
  margin: 8px 0;
}
.fitin-screens-teaser__text p { font-size: 14px; line-height: 1.55; color: rgba(246, 245, 241, .78); margin: 0; }
.fitin-screens-teaser .fitin-btn { flex-shrink: 0; }
@media (max-width: 700px) { .fitin-screens-teaser__band { flex-direction: column; align-items: flex-start; } }

/* ── Firmenfitness — kompakterer Hero + Kontaktblock (Telefon/E-Mail statt Formular) ── */
.page-firmen .fitin-hero--paper { padding: 148px 0 56px; }
.page-firmen .fitin-hero__h1 { margin-bottom: 40px; }
.page-firmen .fitin-hero__top { margin-bottom: 44px; }
.page-firmen .fitin-hero__lower { gap: 56px; align-items: center; }
.page-firmen .fitin-hero__visual { aspect-ratio: 16 / 12; }
.page-firmen .fitin-section { padding-top: clamp(52px, 6vw, 84px); padding-bottom: clamp(52px, 6vw, 84px); }
/* H2 nutzt die einheitliche Typo-Skala (.fitin-h2) — kein Page-Override mehr. */
.page-firmen .fitin-section-head { margin-bottom: 38px; }

.fitin-firmen-contact {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  align-items: stretch;
  background: var(--paper-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 820px) { .fitin-firmen-contact { grid-template-columns: 1fr; } }
.fitin-firmen-contact__visual img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.fitin-firmen-contact__body { padding: clamp(30px, 3.5vw, 52px); display: flex; flex-direction: column; }
.fitin-firmen-contact__body p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 16px 0 0; max-width: 48ch; }
.fitin-firmen-contact__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ═════════════════════════════════════════════════════════════
   LEGAL — Impressum · Datenschutz · AGB · Hausordnung
   Inhalte 1:1 von fitin.ch übernommen (verifiziert 2026-05).
   ═════════════════════════════════════════════════════════════ */
.fitin-legal {
  background: var(--paper);
  padding: 152px 0 clamp(72px, 8vw, 120px);
}
.fitin-legal__shell { max-width: 860px; }
.fitin-legal__head {
  padding-bottom: 36px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.fitin-legal__title {
  font-family: var(--font-display, var(--font-mono));
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.0;
  color: var(--ink);
  margin: 16px 0 0;
}
.fitin-legal__updated {
  display: block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.fitin-legal__body { max-width: 70ch; }
.fitin-legal__body > section + section { margin-top: 44px; }
.fitin-legal__body h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.25;
}
.fitin-legal__body h2 .fitin-legal__num {
  font-family: var(--font-mono);
  font-size: .72em;
  font-weight: 600;
  color: var(--easy);
  margin-right: 12px;
  letter-spacing: .04em;
}
.fitin-legal__body h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 22px 0 8px;
}
.fitin-legal__body p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.fitin-legal__body ul,
.fitin-legal__body ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.fitin-legal__body li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.fitin-legal__body a { color: var(--premium); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; word-break: break-word; }
.fitin-legal__body a:hover { color: var(--ink); }
.fitin-legal__body strong { color: var(--ink); font-weight: 600; }
.fitin-legal__body .fitin-legal__addr {
  font-style: normal;
  line-height: 1.7;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 14px;
}
/* Hervorgehobener Kontakt-/Register-Block */
.fitin-legal__card {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 30px;
  margin: 0 0 14px;
}
.fitin-legal__card p:last-child { margin-bottom: 0; }
.fitin-legal__reg {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1.9;
  margin: 0;
}
.fitin-legal__note {
  font-size: 13px;
  color: var(--ink-mute);
  font-style: italic;
  margin-top: 8px;
}
/* Reminder-Box (Hausordnung) */
.fitin-legal__reminder {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-md);
  padding: 32px 34px;
  margin-top: 44px;
}
.fitin-legal__reminder h2 { color: var(--paper); }
.fitin-legal__reminder p { color: rgba(246, 245, 241, .82); }
/* Querverweise zu den anderen Legal-Seiten */
.fitin-legal__more {
  margin-top: clamp(56px, 7vw, 88px);
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}
.fitin-legal__more > span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-right: 6px;
}
.fitin-legal__more a {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: background 220ms, color 220ms, border-color 220ms;
}
.fitin-legal__more a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fitin-legal__more a[aria-current="page"] { background: var(--paper-soft); color: var(--ink-mute); pointer-events: none; }
@media (max-width: 600px) {
  .fitin-legal { padding-top: 124px; }
  .fitin-legal__body p, .fitin-legal__body li { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SAFETY-NETS (v2.6.0)
   Lange deutsche Komposita (z.B. „Verdauungsbeschwerden", „Physiotherapie")
   und URLs müssen umbrechen können — sonst zwingen sie Grid-/Flex-Tracks
   breiter als den Viewport (horizontaler Overflow auf schmalen Screens).
   `anywhere` (nicht `break-word`) verkleinert auch die Min-Content-Breite.
   ═══════════════════════════════════════════════════════════════ */
.fitin-h1, .fitin-h2, .fitin-h3, .fitin-h4,
.fitin-lead, .fitin-anwendungen li, .fitin-focus__title,
.fitin-team-card__name, .fitin-physio-loc__name,
.fitin-wer-wir-sind__copy p { overflow-wrap: anywhere; }
/* Grid-Spalten dürfen unter ihre Content-Breite schrumpfen. */
.fitin-wer-wir-sind__copy, .fitin-wer-wir-sind__facts { min-width: 0; }


/* ═══════════════════════════════════════════════════════════════
   MOBILE-FEINSCHLIFF (v2.6.3)
   Kompaktere Startseite & Sektionen, grösserer Hero-Titel, schlankeres
   Lauf-Band. Greift nur ≤600px — Desktop bleibt unverändert.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Sektionen kompakter — Seiten waren auf Mobile zu lang. */
  :root { --section-y: clamp(48px, 11vw, 80px); }

  /* Hero-Titel der Startseite wuchtiger (Wörter brechen einzeln um;
     Desktop-Grösse bleibt via Basis-Skala einheitlich bei 102px). */
  .page-home .fitin-hero__h1 { font-size: clamp(50px, 13.5vw, 80px); line-height: 0.92; }

  /* Aktion-Box kompakter und darf auf zwei Zeilen umbrechen. */
  .fitin-hero__sale { flex-wrap: wrap; max-width: 100%; gap: 6px 10px; padding: 9px 13px; font-size: 13px; margin-top: 16px; }
  .fitin-hero__sale-text { white-space: normal; line-height: 1.4; }

  /* Lauf-Band: weniger Höhe, lebendigeres Tempo. */
  .fitin-marquee { padding: 11px 0; }
  .fitin-marquee__item { font-size: 23px; }
  .fitin-marquee__track { gap: 34px; animation-duration: 20s; }
}

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER-FORMULAR-FELDER (Plugin „FITIN Kontakte")
   Selects an die bestehenden Inputs angleichen + Footer-Feldraster.
   ═══════════════════════════════════════════════════════════════ */
.fitin-newsletter__form select,
.fitin-nlform__grid input,
.fitin-nlform__grid select {
  width: 100%;
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 14px;
}
.fitin-newsletter__form select option,
.fitin-nlform__grid select option { color: #1d2327; }
.fitin-newsletter__form select:focus,
.fitin-nlform__grid input:focus,
.fitin-nlform__grid select:focus { outline: none; border-color: var(--easy); background: rgba(255, 255, 255, 0.1); }
.fitin-nlform__grid input::placeholder { color: rgba(246, 245, 241, 0.45); }
.fitin-nlform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 560px) { .fitin-nlform__grid { grid-template-columns: 1fr; } }
.fitin-nl-success { color: var(--easy); font-weight: 600; font-size: 15px; line-height: 1.5; margin: 6px 0; }