/* Gemeinsamer Inhaltsrahmen. 1400 px bezeichnet den nutzbaren Inhalt,
   ohne abgezogene Innenabstände. Karten behalten ihre eigenen Innenabstände. */
:root {
  --fch-content-max: 1400px;
  --fch-page-gutter: clamp(16px, 4vw, 48px);
  --fch-content-frame: min(var(--fch-content-max), calc(100% - 2 * var(--fch-page-gutter)));
}

body :is(
  .container:not(.header-inner):not(.hero-content),
  .section-wrapper,
  .offers-intro, .offers-gallery, .offers-footer,
  .whyus-revamp,
  .training-overview-wrapper, .egym-section-headline, .egym-wrapper,
  .kurse-intro, .kurse-dayplan, .kurse-gallery, .kurse-weekplan,
  .usp-intro, .usp-timeline,
  .health-section-headline, .health-split, .fch-faq__wrap,
  .appearance-wrap,
  .image-text-wrapper, .features-simple-inner, .testimonial-inner,
  .fs-plans-inner, .fs-gallery-head, .fs-gallery-grid, .wb-wrap
) {
  width: var(--fch-content-frame) !important;
  max-width: var(--fch-content-max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  min-width: 0;
}

/* Diese Elemente liegen bereits innerhalb eines gemeinsamen Rahmens. */
body :is(.kurse-day-flex, .usp-steps) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}
body :is(
  .health-section-headline > .health-section-eyebrow,
  .health-section-headline > .health-section-title,
  .health-section-headline > .health-section-sub,
  .fch-benefits__head,
  .kurse-day-eyebrow, .kurse-day-title
) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* CTA-Bild und Textkarte behalten denselben Bezug zueinander. */
body .finalcta-frame {
  width: var(--fch-content-frame) !important;
  max-width: var(--fch-content-max) !important;
  margin-inline: auto !important;
}

/* Rechtstext: gemeinsamer äußerer Rahmen, Navigation und Text darin. */
.legal-wrap > .hero { padding-inline: 0 !important; }

/* Auf mobilen Geräten bleibt der Wochenplan im Rahmen horizontal wischbar. */
@media (max-width: 700px) {
  body .kurse-section > .kurse-weekplan {
    width: var(--fch-content-frame) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }
}

/* Hero-Texte folgen der äußeren Inhaltskante, Hintergründe bleiben vollflächig. */
body .hero-content {
  left: max(var(--fch-page-gutter), calc((100% - var(--fch-content-max)) / 2)) !important;
  max-width: var(--fch-content-frame) !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

body .footer-hero {
  width: var(--fch-content-frame);
  max-width: var(--fch-content-max);
  margin-inline: auto;
  padding-inline: 0;
}
body .footer-glass {
  width: var(--fch-content-frame);
  max-width: var(--fch-content-max);
  margin-inline: auto;
}

body .legal-wrap > .hero {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
.legal-layout > .legal-content { width: 100% !important; min-width: 0; }

/* Starre innere Maße dürfen den flexiblen Seitenrahmen nicht aufdrücken. */
.image-text-wrapper > *, .features-simple-grid > * { min-width: 0; }
.its-divider { max-width: 100%; }
@media (max-width: 700px) {
  .image-text-wrapper { grid-template-columns: minmax(0, 1fr); }
  .features-simple-grid { grid-template-columns: minmax(0, 1fr); }
  .partner-categories > * { flex: 1; min-width: 0; overflow-wrap: anywhere; }
}

/* Keine zweite prozentuale Einrückung innerhalb des Kurs-/Prozessrahmens. */
body :is(.kurse-weekplan, .usp-intro) > :is(
  .kurse-week-eyebrow, .kurse-weekplan-title, .kurse-week-range,
  .usp-eyebrow, .usp-title, .usp-sub, .usp-footnote
) {
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* Lesebreiten bleiben innerhalb des gemeinsamen äußeren Rahmens erhalten. */
body .health-section-headline > .health-section-title { max-width: min(900px, 100%) !important; }
body .health-section-headline > .health-section-sub { max-width: min(820px, 100%) !important; }

/* Durchgehende Scrollfläche, erste und letzte Karte am gemeinsamen Inhaltsrahmen. */
body #gesundheitsangebote .offers-gallery,
body #kurseGallery {
  --gallery-edge: max(var(--fch-page-gutter), calc((100vw - var(--fch-content-max)) / 2));
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: var(--gallery-edge) !important;
  scroll-padding-inline: var(--gallery-edge);
}
body #gesundheitsangebote .offer-card,
body .kurse-gallery .kurse-card { scroll-snap-align: start; }

/* Mobiler Wochenplan: durchgehende Scrollfläche mit eingerücktem Anfang/Ende.
   Der Schatten liegt innerhalb der großzügig gepolsterten Scrollfläche. */
@media (max-width: 700px) {
  body .kurse-weekplan .kurse-week-grid {
    box-sizing: border-box;
    width: calc(100% + 2 * var(--fch-page-gutter)) !important;
    max-width: none;
    margin-inline: calc(-1 * var(--fch-page-gutter));
    padding: 20px var(--fch-page-gutter) 64px;
    scroll-padding-inline: var(--fch-page-gutter);
  }
  body .kurse-weekplan.has-day-tabs .kurse-week-day {
    flex-basis: calc(100% - 44px);
  }
  body .kurse-weekplan .kurse-week-footnote { margin-top: 0; }
}

/* Der mobile Startseitenhero nutzt die Inhaltskante statt horizontaler Zentrierung. */
@media (max-width: 480px) {
  body .hero > .hero-content {
    width: var(--fch-content-frame);
    transform: translateY(-50%);
  }
}

/* Gemeinsame Typografie für Hero-Titel und einleitende Beschreibungstexte.
   Kompakte Card-Beschreibungen behalten ihre eigene, kleinere Textrolle. */
:root {
  --fch-hero-title-size: var(--fs-h1);
  --fch-intro-text-size: var(--fs-lead);
  --fch-intro-line-height: 1.6;
}
:root body :is(.hero, .hero-section, .whyfch-hero, .booking-hero, .membership-hero)
  :is(.hero-title, .whyfch-title, .booking-title, .membership-hero-title) {
  font-size: var(--fch-hero-title-size) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}
:root body :is(.hero, .hero-section, .whyfch-hero, .booking-hero)
  :is(.hero-subtitle, .whyfch-lead, .booking-subtitle),
:root body :is(
  .lead, .offers-sub, .services-intro, .whyus-sub,
  .training-overview-sub, .egym-section-sub, .kurse-sub, .training-success-lead,
  .health-section-sub, .bodylounge-sub, .fs-plan-lead, .fs-gallery-sub, .wb-intro,
  .booking-process-subtitle, .membership-section-subtitle
),
:root body .whyfch-section-head > p:not(.whyfch-section-kicker),
:root body .whyfch-proof-copy > p {
  font-size: var(--fch-intro-text-size) !important;
  font-weight: 400 !important;
  line-height: var(--fch-intro-line-height) !important;
}

/* Einheitliche CTA-Schrift in Hero, Inhaltskarten und Abschlussbereichen. */
:root { --fch-cta-font-size: 18px; }
@media (max-width: 768px) {
  :root { --fch-cta-font-size: 15px; }
}
:root body :is(
  .hero-btn, .whyfch-btn, .finalcta-btn, .health-btn, .egym-btn,
  .booking-submit, .membership-cta, .membership-btn
) {
  font-size: var(--fch-cta-font-size) !important;
  font-weight: 500 !important;
}

/* Startseiten-Slider: Lesebreite innerhalb des Inhaltsrahmens erhalten. */
body .hero > .hero-content {
  max-width: min(780px, var(--fch-content-frame)) !important;
}
@media (min-width: 700px) and (max-width: 1280px) {
  body .hero > .hero-content {
    width: calc(100% - 340px);
    max-width: 520px !important;
  }
}
@media (max-width: 699px) {
  body .hero > .hero-content { width: var(--fch-content-frame); }
}