/* ============================================================
   FCH — Light Mode Overrides
   Heller Default, Dark Mode bleibt per Toggle erhalten
   ============================================================ */

:root {
  --hero-stage-height: calc(100svh - var(--header-height));
  --hero-overlay-directional: linear-gradient(
    to right,
    rgba(10, 10, 10, 0.72) 0%,
    rgba(10, 10, 10, 0.56) 36%,
    rgba(10, 10, 10, 0.28) 64%,
    rgba(10, 10, 10, 0.08) 82%,
    rgba(10, 10, 10, 0) 100%
  );
}

/* Shared subpage hero stage: full width and same height as the homepage hero */
.hero-section {
  width: 100%;
  min-height: var(--hero-stage-height) !important;
  height: var(--hero-stage-height) !important;
  max-height: var(--hero-stage-height) !important;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
}

.hero-section .hero-media-wrapper {
  position: relative !important;
  top: 0 !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  min-height: var(--hero-stage-height) !important;
  height: var(--hero-stage-height) !important;
  max-height: var(--hero-stage-height) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.hero-section .hero-media {
  width: 100% !important;
  min-height: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
  display: block;
  object-fit: cover;
}

.hero-section .hero-media::after,
.hero-section .hero-media-wrapper::before,
.hero-section .hero-media-wrapper::after {
  border-radius: 0 !important;
}

:root[data-theme="light"] .section-dark,
:root[data-theme="light"] .section-grey,
:root[data-theme="light"] .section-mid {
  background: transparent;
}

:root[data-theme="light"] .hero-overlay {
  display: block !important;
  background: var(--hero-overlay-directional) !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .hero-section .hero-media::after,
:root[data-theme="light"] .hero-section .hero-media-wrapper::before,
:root[data-theme="light"] .hero-section .hero-media-wrapper::after {
  content: "" !important;
  background: var(--hero-overlay-directional) !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .hero-content,
:root[data-theme="light"] .hero-content-slide {
  color: var(--bg-2) !important;
}

:root[data-theme="light"] .hero-title,
:root[data-theme="light"] .hero-content .hero-title,
:root[data-theme="light"] .hero-content-slide .hero-title {
  color: var(--bg-2) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .hero-subtitle,
:root[data-theme="light"] .hero-content .hero-subtitle,
:root[data-theme="light"] .hero-content-slide .hero-subtitle {
  color: var(--bg-2) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .hero-btn.secondary,
:root[data-theme="light"] .finalcta-btn.secondary {
  background: rgba(255, 255, 255, 0.62);
  border-color: var(--line-2);
  color: var(--ink-1);
}

:root[data-theme="light"] .nav-desktop a,
:root[data-theme="light"] .nav-desktop a:hover,
:root[data-theme="light"] .nav-mobile a,
:root[data-theme="light"] .mobile-main-link,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .theme-toggle:hover,
:root[data-theme="light"] .theme-toggle-label,
:root[data-theme="light"] .header-cta,
:root[data-theme="light"] .header-cta:hover,
:root[data-theme="light"] .header-cta-mobile {
  color: var(--ink-1) !important;
  -webkit-text-fill-color: var(--ink-1);
  opacity: 1 !important;
}

:root[data-theme="light"] .header-cta,
:root[data-theme="light"] .header-cta-mobile,
:root[data-theme="light"] .theme-toggle-label {
  font-weight: 650 !important;
}

:root[data-theme="light"] .egym-e {
  color: #ff7a00 !important;
  -webkit-text-fill-color: #ff7a00;
}

:root[data-theme="light"] .hero-btn.secondary:hover,
:root[data-theme="light"] .finalcta-btn.secondary:hover {
  background: var(--ink-1);
  color: #ffffff;
}

:root[data-theme="light"] .hero-social-btn,
:root[data-theme="light"] .hero-occupancy,
:root[data-theme="light"] .hero-easter-hours,
:root[data-theme="light"] .hero-quicklinks,
:root[data-theme="light"] .review-card,
:root[data-theme="light"] .finalcta-card,
:root[data-theme="light"] .egym-popup,
:root[data-theme="light"] .health-popup,
:root[data-theme="light"] .booking-shell,
:root[data-theme="light"] .booking-panel,
:root[data-theme="light"] .booking-process-card,
:root[data-theme="light"] .booking-month-switch,
:root[data-theme="light"] .booking-field input,
:root[data-theme="light"] .booking-field select,
:root[data-theme="light"] .booking-field textarea,
:root[data-theme="light"] .kontakt-card,
:root[data-theme="light"] .bl-infocard,
:root[data-theme="light"] .offers-arrow,
:root[data-theme="light"] .kurse-arrow,
:root[data-theme="light"] .tag {
  background: var(--surface-glass) !important;
  border-color: var(--line-1) !important;
  box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .partner-card,
:root[data-theme="light"] .offer-card,
:root[data-theme="light"] .whyus-card,
:root[data-theme="light"] .whyus-bubble,
:root[data-theme="light"] .nav-dropdown,
:root[data-theme="light"] .nav-dropdown-item,
:root[data-theme="light"] .training-card,
:root[data-theme="light"] .egym-media-card,
:root[data-theme="light"] .egym-text-card,
:root[data-theme="light"] .health-split-media,
:root[data-theme="light"] .health-split-content,
:root[data-theme="light"] .kurse-intro-note,
:root[data-theme="light"] .kurse-day-item,
:root[data-theme="light"] .kurse-card,
:root[data-theme="light"] .kurse-week-day,
:root[data-theme="light"] .kurse-week-item,
:root[data-theme="light"] .health-intro-card,
:root[data-theme="light"] .health-intro-card.is-active,
:root[data-theme="light"] .appearance-card,
:root[data-theme="light"] .service-media,
:root[data-theme="light"] .fs-plan-card,
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .wb-card {
  background: var(--surface-muted) !important;
  border-color: var(--line-1) !important;
  box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .hero-social-btn:hover,
:root[data-theme="light"] .partner-card:hover,
:root[data-theme="light"] .offer-card:hover,
:root[data-theme="light"] .whyus-card:hover,
:root[data-theme="light"] .review-card:hover,
:root[data-theme="light"] .training-card:hover,
:root[data-theme="light"] .bl-infocard:hover,
:root[data-theme="light"] .kontakt-card:hover {
  background: var(--surface-glass-strong) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--shadow-md);
}

/* Content cards in light mode: same tone as bg-2, borderless, only separated by shadow */
:root[data-theme="light"] .feature-card,
:root[data-theme="light"] .partner-card,
:root[data-theme="light"] .offer-card,
:root[data-theme="light"] .whyus-card,
:root[data-theme="light"] .review-card,
:root[data-theme="light"] .finalcta-card,
:root[data-theme="light"] .training-card,
:root[data-theme="light"] .egym-media-card,
:root[data-theme="light"] .egym-text-card,
:root[data-theme="light"] .health-split-media,
:root[data-theme="light"] .health-split-content,
:root[data-theme="light"] .kurse-intro-note,
:root[data-theme="light"] .kurse-day-item,
:root[data-theme="light"] .kurse-card,
:root[data-theme="light"] .kurse-week-day,
:root[data-theme="light"] .kurse-week-item,
:root[data-theme="light"] .health-intro-card,
:root[data-theme="light"] .health-intro-card.is-active,
:root[data-theme="light"] .appearance-card,
:root[data-theme="light"] .fs-plan-card,
:root[data-theme="light"] .wb-card,
:root[data-theme="light"] .kontakt-card,
:root[data-theme="light"] .bl-infocard,
:root[data-theme="light"] .booking-shell,
:root[data-theme="light"] .booking-panel,
:root[data-theme="light"] .booking-process-card {
  background: var(--bg-2) !important;
  border: none !important;
  box-shadow: 0 18px 38px rgba(31, 30, 24, 0.08) !important;
}

:root[data-theme="light"] .feature-card:hover,
:root[data-theme="light"] .partner-card:hover,
:root[data-theme="light"] .offer-card:hover,
:root[data-theme="light"] .whyus-card:hover,
:root[data-theme="light"] .review-card:hover,
:root[data-theme="light"] .training-card:hover,
:root[data-theme="light"] .kurse-card:hover,
:root[data-theme="light"] .kontakt-card:hover,
:root[data-theme="light"] .bl-infocard:hover,
:root[data-theme="light"] .booking-shell:hover,
:root[data-theme="light"] .booking-panel:hover,
:root[data-theme="light"] .booking-process-card:hover {
  background: var(--bg-2) !important;
  box-shadow: 0 24px 52px rgba(31, 30, 24, 0.12) !important;
}

:root[data-theme="light"] .hero-quicklinks,
:root[data-theme="light"] .hero-quicklinks .ql-item,
:root[data-theme="light"] .hero-quicklinks .ql-item:hover,
:root[data-theme="light"] .hero-quicklinks .ql-item-primary,
:root[data-theme="light"] .hero-quicklinks .ql-label,
:root[data-theme="light"] .easter-date,
:root[data-theme="light"] .occ-label,
:root[data-theme="light"] .occ-status,
:root[data-theme="light"] .easter-label,
:root[data-theme="light"] .easter-time {
  color: inherit;
}

:root[data-theme="light"] .hero-quicklinks,
:root[data-theme="light"] .easter-date,
:root[data-theme="light"] .booking-title,
:root[data-theme="light"] .booking-shell-head h2,
:root[data-theme="light"] .booking-panel-head h3,
:root[data-theme="light"] .booking-month-btn,
:root[data-theme="light"] .booking-month-label,
:root[data-theme="light"] .booking-calendar-weekday-name,
:root[data-theme="light"] .booking-calendar-slot,
:root[data-theme="light"] .booking-field input,
:root[data-theme="light"] .booking-field select,
:root[data-theme="light"] .booking-field textarea,
:root[data-theme="light"] .booking-process-title,
:root[data-theme="light"] .booking-process-card h3,
:root[data-theme="light"] .egym-popup-list li,
:root[data-theme="light"] .health-list li {
  color: var(--ink-1) !important;
}

:root[data-theme="light"] .hero-social-btn img {
  opacity: 0.78;
}

:root[data-theme="light"] .occ-label,
:root[data-theme="light"] .ql-label {
  color: var(--ink-1) !important;
}

:root[data-theme="light"] .occ-bar,
:root[data-theme="light"] .fch-faq__icon,
:root[data-theme="light"] .usp-line,
:root[data-theme="light"] .usp-step-dot,
:root[data-theme="light"] .kurse-arrow {
  background: rgba(35, 35, 31, 0.12) !important;
}

:root[data-theme="light"] .occ-fill {
  background: #a7bc4d !important;
}

:root[data-theme="light"] .fch-faq__item,
:root[data-theme="light"] .kurse-week-day-head,
:root[data-theme="light"] .service-media {
  border-color: var(--line-1) !important;
}

:root[data-theme="light"] .ql-item {
  color: var(--ink-2) !important;
}

:root[data-theme="light"] .ql-item:hover {
  background: rgba(35, 35, 31, 0.06) !important;
  opacity: 1;
}

:root[data-theme="light"] .partner-card img {
  filter: grayscale(1) brightness(0.2) contrast(1.05);
  opacity: 0.92;
}

:root[data-theme="light"] .whyus-bubbles::before {
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(35, 35, 31, 0.06) 0px,
      rgba(35, 35, 31, 0.06) 1px,
      transparent 1px,
      transparent 70px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(35, 35, 31, 0.06) 0px,
      rgba(35, 35, 31, 0.06) 1px,
      transparent 1px,
      transparent 70px
    );
}

:root[data-theme="light"] .whyus-card.highlight,
:root[data-theme="light"] .training-card.highlight,
:root[data-theme="light"] .tag:hover,
:root[data-theme="light"] .tag.active {
  box-shadow: var(--shadow-md);
}

:root[data-theme="light"] .usp-step-number {
  color: rgba(35, 35, 31, 0.24) !important;
}

:root[data-theme="light"] .booking-subtitle,
:root[data-theme="light"] .booking-shell-note,
:root[data-theme="light"] .booking-form-intro,
:root[data-theme="light"] .booking-legend,
:root[data-theme="light"] .booking-calendar-weekday-date,
:root[data-theme="light"] .booking-calendar-time,
:root[data-theme="light"] .booking-selected-slot-value,
:root[data-theme="light"] .booking-field label,
:root[data-theme="light"] .booking-check,
:root[data-theme="light"] .booking-status,
:root[data-theme="light"] .booking-disclaimer,
:root[data-theme="light"] .booking-process-subtitle {
  color: var(--ink-2) !important;
}

:root[data-theme="light"] .booking-calendar-wrap {
  background: var(--bg-2) !important;
  border-color: var(--line-1) !important;
}

:root[data-theme="light"] .booking-panel,
:root[data-theme="light"] .booking-panel:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .booking-check {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .booking-calendar-corner,
:root[data-theme="light"] .booking-calendar-weekday,
:root[data-theme="light"] .booking-calendar-time,
:root[data-theme="light"] .booking-calendar-slot {
  border-color: var(--line-1) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .booking-calendar-corner,
:root[data-theme="light"] .booking-calendar-weekday,
:root[data-theme="light"] .booking-calendar-time {
  background: rgba(35, 35, 31, 0.04) !important;
}

:root[data-theme="light"] .booking-calendar-time.is-half-hour {
  color: var(--ink-3) !important;
}

:root[data-theme="light"] .booking-calendar-slot {
  background: transparent !important;
}

:root[data-theme="light"] .booking-field input::placeholder,
:root[data-theme="light"] .booking-field textarea::placeholder {
  color: var(--ink-3) !important;
}

:root[data-theme="light"] .booking-field input:focus,
:root[data-theme="light"] .booking-field select:focus,
:root[data-theme="light"] .booking-field textarea:focus {
  background: #ffffff !important;
}

:root[data-theme="light"] .booking-calendar-slot.is-available {
  color: var(--ink-1) !important;
  background: rgba(184, 204, 100, 0.14) !important;
  border-color: rgba(184, 204, 100, 0.28) !important;
}

:root[data-theme="light"] .booking-calendar-slot.is-available:hover {
  background: rgba(184, 204, 100, 0.2) !important;
  border-color: rgba(184, 204, 100, 0.34) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .booking-calendar-slot.is-selected {
  color: var(--ink-1) !important;
  background: rgba(184, 204, 100, 0.36) !important;
  border-color: rgba(184, 204, 100, 0.52) !important;
  box-shadow: inset 0 0 0 2px rgba(120, 145, 42, 0.28) !important;
}

:root[data-theme="light"] .booking-status.is-error {
  color: #b94a48 !important;
}

:root[data-theme="light"] .booking-status.is-success {
  color: #567b1d !important;
}

:root[data-theme="light"] .offers-arrow,
:root[data-theme="light"] .kurse-arrow {
  color: var(--ink-1) !important;
}

:root[data-theme="light"] .offers-arrow:hover,
:root[data-theme="light"] .kurse-arrow:hover {
  background: var(--surface-glass-strong) !important;
}

:root[data-theme="light"] .offers-second-cta {
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink-1) !important;
  border-color: var(--line-2) !important;
}

:root[data-theme="light"] .offers-second-cta:hover {
  background: var(--ink-1) !important;
  color: #ffffff !important;
}

:root[data-theme="light"] .booking-stage-overlay {
  background:
    linear-gradient(
      100deg,
      rgba(8, 10, 13, 0.9) 12%,
      rgba(10, 14, 18, 0.72) 48%,
      rgba(10, 14, 18, 0.84) 100%
    ),
    radial-gradient(circle at 74% 18%, rgba(184, 204, 100, 0.18) 0%, rgba(184, 204, 100, 0) 32%) !important;
}

:root[data-theme="light"] .booking-process,
:root[data-theme="light"] .booking-page + #site-footer .footer-hero,
:root[data-theme="light"] .booking-page + #site-footer .fch-footer::before {
  background: var(--bg-2) !important;
}

:root[data-theme="light"] .booking-page + #site-footer .footer-glass {
  background: var(--surface-glass) !important;
  border-color: var(--line-1) !important;
}

:root[data-theme="light"] .egym-popup-overlay,
:root[data-theme="light"] .health-popup-overlay {
  background: var(--popup-overlay) !important;
}

:root[data-theme="light"] .egym-popup-close,
:root[data-theme="light"] .health-popup-close {
  background: rgba(35, 35, 31, 0.08) !important;
  color: var(--ink-1);
}

:root[data-theme="light"] .egym-popup-close:hover,
:root[data-theme="light"] .health-popup-close:hover {
  background: rgba(35, 35, 31, 0.14) !important;
}

:root[data-theme="light"] .bl-label,
:root[data-theme="light"] .bl-title,
:root[data-theme="light"] .bl-more-title {
  color: var(--ink-1) !important;
}

:root[data-theme="light"] .bl-text,
:root[data-theme="light"] .bl-more-text {
  color: var(--ink-2) !important;
}

:root[data-theme="light"] .bl-divider {
  background: var(--line-2) !important;
}

:root[data-theme="light"] .bl-hr {
  border-top-color: var(--line-1) !important;
}

:root[data-theme="light"] .bl-more-toggle:hover {
  color: var(--ink-1) !important;
}

:root[data-theme="light"] .service-media {
  border-bottom-color: var(--line-1) !important;
}