/* ============================================================
   GLOBAL PAGE LAYOUT HELPERS (RON-compatible)
   ============================================================ */

.page-section {
  padding-top: var(--s-8);
  padding-bottom: var(--s-8);
}

.page-section-sm {
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}

.page-section-lg {
  padding-top: var(--s-9);
  padding-bottom: var(--s-9);
}

/* Max width wrappers */
.wrapper {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
  overflow: visible;
}

/* Wide wrapper (Hero, Big grids, etc.) */
.wrapper-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

@media (max-width: 600px) {

  .wrapper,
  .wrapper-wide {
    padding-inline: 24px;
    /* Consistent mobile padding inside grid lines */
  }
}


/* ============================================================
   MOBILE OVERFLOW-X FIXES
   ============================================================ */

@media (max-width: 600px) {

  html,
  body {
    overflow-x: hidden !important;
  }
}

@media (max-width: 1100px) {

  html,
  body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
  }
}


/* ============================================================
   MINIMAL HERO SCAFFOLD
   ============================================================ */

.hero {
  position: relative;
  width: 100vw;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  z-index: 0;
}

/* HERO BACKGROUND IMAGE */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/main/Ron.png') no-repeat right center / cover;
  z-index: 0;
}

/* LEFT → RIGHT DARK OVERLAY */
/* HERO OVERLAY (Top→Bottom & Left→Right fade, bg-1 color world) */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Top → Bottom fade */
    linear-gradient(to bottom,
      rgba(11, 11, 12, 0.0) 0%,
      rgba(11, 11, 12, 0.25) 55%,
      rgba(11, 11, 12, 0.6) 85%,
      rgba(11, 11, 12, 0.85) 100%),
    /* Left → Right fade */
    linear-gradient(to right,
      rgba(11, 11, 12, 0.95) 0%,
      rgba(11, 11, 12, 0.7) 45%,
      rgba(11, 11, 12, 0.4) 60%,
      rgba(11, 11, 12, 0.05) 80%);
  z-index: 1;
}

.hero-inner {
  width: 100%;
  max-width: var(--container);
}

/* LEFT */
.hero-content {
  z-index: 2;
}

/* Bottom fade overlay */
/* HERO BOTTOM FADE (bg-1 color world) */
.hero .hero-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(to bottom,
      rgba(11, 11, 12, 0.0) 0%,
      rgba(11, 11, 12, 0.99) 100%);
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   HERO SECTION — RON
   ============================================================ */

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
}

/* LEFT */
.hero-content {
  z-index: 2;
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}

.hero-title {
  margin-bottom: var(--s-5);
  max-width: 1000px !important;
  font-weight: 700;
  /* Increased weight for better outline effect */
}

.text-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--ink-1);
}

.hero-text {
  max-width: 620px;
  margin-bottom: var(--s-6);
  font-size: var(--fs-lead);
}

.hero-actions {
  display: flex;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}

/* HERO DIVIDER */
.hero-divider {
  width: 100%;
  max-width: 420px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(255, 255, 255, 0) 100%);
  margin-bottom: var(--s-6);
  margin-top: -1rem;
  /* Adjust for the hidden actions margin if needed, or just standard spacing */
  box-shadow: 0 0 12px var(--brand);
  opacity: 0.8;
  border-radius: 2px;
}

/* GLOBAL SECTION DIVIDER (Title <-> Subtext) */
.section-divider {
  width: 100%;
  max-width: 120px;
  /* Shorter than hero for section headers? User said "die linie ... die wir für den hero bereich erstellt haben". Hero matches 420px. Let's stick to hero style but maybe check if 420px is too long for subheaders? Let's use the same max-width first. */
  max-width: 420px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(255, 255, 255, 0) 100%);
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 12px var(--brand);
  opacity: 0.8;
  border-radius: 2px;
}

/* FACTS */
.hero-facts {
  display: flex;
  gap: var(--s-6);
}

.hero-fact {
  display: flex;
  flex-direction: column;
}

.hero-fact strong {
  font-size: 1.4rem;
  color: var(--ink-1);
}

.hero-fact span {
  font-size: .85rem;
  color: var(--ink-3);
}


/* RESPONSIVE */
@media (max-width: 1000px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: left;
    /* Left align for mobile hero */
  }

  .hero-content {
    margin-bottom: var(--s-6);
  }

  .hero-text,
  .hero-title,
  .hero-subtext,
  .hero-actions {
    margin-inline: 0;
    /* Reset margins */
  }

  .hero-facts {
    justify-content: flex-start;
    /* Left align facts */
  }

  .hero-visual {
    order: -1;
    margin-bottom: var(--s-6);
  }

  .hero-image {
    width: 100%;
    max-width: 500px;
    /* Limit image size on mobile */
    margin-inline: auto;
    /* Image can remain centered or left? User said text blocks. Images usually look better centered or full width. Let's keep image centered for now or ask? User said "intro und textblöcke". I'll keep image centered as it's not a text block. */
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: auto;
    padding-top: 120px;
    /* Space for header */
  }

  .hero-title {
    font-size: 2.5rem;
    /* Specific override if clamp is still too big */
  }
}



/* ============================================================
   PROFILE / VORSTELLUNG
============================================================ */

.profile {
  position: relative;
  margin-top: 150px;
}

/* GRID */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

/* IMAGE */
.profile-image {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
}

.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* subtiler Overlay-Fade */
.profile-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(11, 11, 12, 0.0) 0%,
      rgba(11, 11, 12, 0.25) 55%,
      rgba(11, 11, 12, 0.6) 100%);
}

/* CONTENT */
.profile-content {
  max-width: 640px;
}

.profile-eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}

.profile-title {
  margin-bottom: var(--s-5);
}

.profile-text {
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: var(--s-6);
  max-width: 560px;
}

/* FACTS */
.profile-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

.profile-fact {
  display: flex;
  flex-direction: column;
}

.profile-fact strong {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1.1;
}

.profile-fact span {
  font-size: .85rem;
  color: var(--ink-3);
}

/* RESPONSIVE */
/* RESPONSIVE */
@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .profile-image {
    max-height: 400px;
    /* Limit height */
  }

  .profile-content {
    margin-inline: 0;
    /* Align left */
  }
}

@media (max-width: 600px) {
  .profile-image {
    max-height: 300px;
  }

  .profile-facts {
    gap: var(--s-4);
  }
}








/* ============================================================
   OFFERS — HORIZONTAL TRAINING PLANS
   ============================================================ */

.offers {
  padding: clamp(5rem, 8vw, 8rem) 0;
  margin-top: 150px;
}

.offers-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.offers-title {
  margin-bottom: .8rem;
}

.offers-subtext {
  color: var(--ink-2);
  max-width: 560px;
}

/* Slider Wrapper */
.offers-slider-wrap {
  position: relative;

  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);

  overflow: hidden;

  /* Padding adjustments for mobile */
  padding-inline: 0;
}



/* Slider */
.offers-slider {
  display: flex;
  gap: 2rem;

  padding-inline: 0;

  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;

  /* Ensure snap points align with the visual margin */
  scroll-padding-inline: calc(max(0px, (100vw - var(--container)) / 2) + clamp(1rem, 5vw, 3rem));
}

/* Use pseudo-elements for robust scroll padding */
/* Robust alignment using margins on first and last cards */
.offers-slider> :first-child {
  margin-left: calc(max(0px, (100vw - var(--container)) / 2) + clamp(1rem, 5vw, 3rem));
}

.offers-slider> :last-child {
  margin-right: calc(max(0px, (100vw - var(--container)) / 2) + clamp(1rem, 5vw, 3rem));
}

.offers-slider {
  scrollbar-width: none;
}

.offers-slider::-webkit-scrollbar {
  display: none;
}

.offers-slider:active {
  cursor: grabbing;
}

@media (max-width: 600px) {
  .offers-slider {
    gap: 1rem;
    scroll-padding-inline: 24px;
  }

  /* Override global calc margins */
  .offers-slider> :first-child {
    margin-left: 24px;
  }

  .offers-slider> :last-child {
    margin-right: 24px;
  }
}

/* Hide scrollbar */
.offers-slider::-webkit-scrollbar {
  display: none;
}

.offers-slider {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================================
   OFFER CARD — Pricing Style
   ============================================================ */

/* Offer Cards - New Design */
.offer-card {
  flex: 0 0 350px;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 0.5rem;
  /* Minimal padding around image */
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, border-color .3s ease;
  scroll-snap-align: start;
}

.offer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Image Area */
.offer-image-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  /* Fixed height for image area */
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
  background: #000;
}

.offer-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.offer-card:hover .offer-image-wrap img {
  transform: scale(1.05);
  /* Subtle zoom */
}

/* Overlay & Badge */
.offer-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  z-index: 1;
}

.offer-badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: .3rem .7rem;
  background: color-mix(in srgb, var(--brand), transparent 10%);
  /* Brand color glassy */
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-radius: 6px;
  z-index: 2;
  backdrop-filter: blur(4px);
}

/* Text on Image */
.offer-image-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  z-index: 2;
}

.offer-title {
  font-size: 1.35rem;
  /* Slightly smaller to fit */
  margin-bottom: .2rem;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.offer-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
}

/* Body Content */
.offer-body {
  padding: 0 0.8rem 0.8rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.offer-price {
  margin-bottom: 0.8rem;
}

.offer-price strong {
  font-size: 2rem;
  font-weight: 600;
}

.offer-price span {
  font-size: .9rem;
  color: var(--ink-2);
  margin-left: .2rem;
}

/* Description */
.offer-desc {
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 1.4rem;
}

/* Includes */
.offer-includes span {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2);
}

.offer-includes ul {
  margin: .6rem 0 1.6rem;
  padding: 0;
  list-style: none;
}

.offer-includes li {
  font-size: .9rem;
  color: var(--ink-1);
  opacity: .9;
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: .4rem;
}

.offer-includes li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--brand);
}

/* Button */
.offer-btn {
  margin-top: auto;
  text-align: center;
  padding: .85rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink-1);
  text-decoration: none;
  font-weight: 500;
  transition: background .2s ease, transform .2s ease;
}

.offer-btn:hover {
  background: rgba(255, 255, 255, 0.22);

}

/* Arrows */
.offers-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink-1);
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 5;
  transition: background .2s ease, transform .2s ease;
}

.offers-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-50%) scale(1.05);
}

.offers-arrow.left {
  left: clamp(0.8rem, 2vw, 1.4rem);
}

.offers-arrow.right {
  right: clamp(0.8rem, 2vw, 1.4rem);
}

/* Mobile */
@media (max-width: 700px) {
  .offers-arrow {
    display: none;
  }
}


/* ============================================================
   OFFER OVERLAY
============================================================ */

.offer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.offer-overlay.active {
  display: block;
}

/* Backdrop */
.offer-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

/* Box */
.offer-overlay-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 860px;
  width: calc(100% - 2rem);
  height: 80vh;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Close */
.offer-overlay-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--ink-1);
  cursor: pointer;
  z-index: 2;
}

/* Content */
.offer-overlay-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Scroll handled by inner child */
}

.overlay-scroll-content {
  flex: 1;
  overflow-y: auto;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  padding-bottom: 1rem;
}

/* Sticky Footer */
.overlay-sticky-footer {
  flex-shrink: 0;
  padding: 1.2rem clamp(1.8rem, 3vw, 2.6rem);
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

/* Typography inside overlay */
.offer-overlay h3 {
  font-size: 1.6rem;
  margin-bottom: .4rem;
  color: var(--brand);
}

.offer-overlay .overlay-sub {
  color: var(--ink-2);
  margin-bottom: 1.6rem;
}

.offer-overlay .overlay-section {
  margin-bottom: 2rem;
}

.offer-overlay .overlay-section h4 {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-2);
  margin-bottom: .6rem;
}

.offer-overlay .overlay-section p,
.offer-overlay .overlay-section li {
  color: var(--ink-1);
  opacity: .9;
  line-height: 1.6;
}

/* CTA */
.overlay-buy {
  margin-top: 0;
  /* Reset */
  padding: 1rem 1.2rem;
  border-radius: 12px;
  background: var(--brand);
  color: #000;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  /* Full width looks better with footnote */
}

.overlay-buy:hover {
  filter: brightness(1.1);
}

.overlay-stripe-hint {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--ink-2);
  opacity: 0.6;
  text-align: center;
}

/* Fix List Indentation */
.offer-overlay .overlay-section ul {
  padding-left: 1.2rem;
  margin: 0;
}

/* Mobile */
@media (max-width: 700px) {
  .offer-overlay-box {
    height: 88vh;
    width: calc(100% - 1.2rem);
  }
}





/* ============================================================
   MOMENTUM SECTION — IMAGE + STEPS
   ============================================================ */

.momentum {
  position: relative;
  width: 100vw;
  min-height: 80vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-top: 150px;
  /* NEU */
  justify-content: flex-start;
}

/* BACKGROUND IMAGE */
.momentum-bg {
  position: absolute;
  inset: 0;
  background: url('/assets/images/main/Ron.png') no-repeat right center / cover;
  z-index: 0;
}

/* OVERLAY */
.momentum::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Top → Bottom fade */
    linear-gradient(to bottom,
      rgba(11, 11, 12, 0.95) 0%,
      rgba(11, 11, 12, 0.55) 50%,
      rgba(11, 11, 12, 0.0) 100%),
    /* Left → Right fade */
    linear-gradient(to right,
      rgba(11, 11, 12, 0.99) 0%,
      rgba(11, 11, 12, 0.75) 35%,
      rgba(11, 11, 12, 0.45) 55%,
      rgba(11, 11, 12, 0.15) 75%,
      rgba(11, 11, 12, 0.0) 100%);
  z-index: 1;
}

/* CONTENT WRAP */
.momentum-inner {
  position: relative;
  z-index: 2;

  /* NEU: gleiche Logik wie andere Sektionen */
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 3rem);

  /* WICHTIG */
  text-align: left;
}

/* HEAD */
.momentum-head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.momentum-title {
  margin-bottom: 1rem;
}

.momentum-sub {
  color: var(--ink-2);
  max-width: 560px;
}

/* STEPS */
.momentum-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

/* SINGLE STEP */
.momentum-step {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}

/* NUMBER */
.step-number {
  font-size: clamp(4.8rem, 8vw, 7.2rem);
  font-weight: 600;
  line-height: 0.9;
  flex-shrink: 0;
  width: 5.5rem;
  text-align: center;

  /* Gradient-Zahl wie im Screenshot */
  background: linear-gradient(to bottom,
      var(--brand) 0%,
      color-mix(in srgb, var(--brand), transparent 15%) 40%,
      color-mix(in srgb, var(--brand), transparent 55%) 70%,
      color-mix(in srgb, var(--brand), transparent 85%) 100%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* TEXT */
.step-content h3 {
  margin-bottom: .3rem;
}

.step-content p {
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 520px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .momentum {
    min-height: 70vh;
  }

  .momentum-inner {
    max-width: 100%;
  }

  .step-number {
    font-size: 2.6rem;
  }
}

@media (max-width: 600px) {
  .momentum {
    min-height: auto;
    padding-top: var(--s-8);
  }

  .momentum-step {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    align-items: center;
  }

  .step-number {
    margin-bottom: 0.5rem;
  }
}

/* ============================================================
   COACHING — OFFER STYLE (NO IMAGES)
============================================================ */

.coaching-head {
  max-width: 720px;
  margin-bottom: clamp(3rem, 6vw, 4rem);
  margin-top: 150px;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--s-4);
}


.coaching-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
}

/* Größere Cards als normale Offers */
/* Größere Cards als normale Offers */
.coaching-offer {
  flex: unset;
  /* Remove flex-basis from offer-card */
  width: 100%;
  min-height: 100%;
  padding: 0.5rem;
  /* Inherit padding from offer-card, explicit just in case */
}

/* Adjust image height for wider coaching cards */
.coaching-offer .offer-image-wrap {
  height: 270px;
}

.coaching-offer .offer-desc {
  max-width: 520px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .coaching-offer-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-inline: auto;
  }

  .coaching-offer .offer-image-wrap {
    height: 220px;
    /* Smaller image on mobile */
  }
}





/* ============================================================
   ABOUT — IMAGE CARD SECTION
   ============================================================ */

.about-cards {
  padding: clamp(5rem, 8vw, 8rem) 0;
  margin-top: 150px;
}

.about-cards-head {
  max-width: 720px;
  margin-bottom: clamp(3rem, 6vw, 4rem);
}

.about-cards-title {
  margin-bottom: 1rem;
}

.about-cards-subtext {
  color: var(--ink-2);
  max-width: 560px;
}

/* ============================================================
   GRID — asymmetrisches Layout
   3 Spalten, Karten spannen unterschiedlich
   ============================================================ */

.about-cards-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  column-gap: clamp(0.6rem, 1vw, 1.2rem);
  row-gap: clamp(0.6rem, 1vw, 1.2rem);
}

/* Kartenpositionierung */
.about-card:nth-child(1) {
  grid-column: 1 / span 2;
  /* Reihe 1: links breit */
}

.about-card:nth-child(2) {
  grid-column: 3 / span 1;
  /* Reihe 1: rechts schmal */
}

.about-card:nth-child(3) {
  grid-column: 1 / span 1;
  /* Reihe 2: links schmal */
}

.about-card:nth-child(4) {
  grid-column: 2 / span 2;
  /* Reihe 2: rechts breit */
}

/* ============================================================
   CARD
   ============================================================ */

.about-card {
  position: relative;
  min-height: 320px;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
}

/* BACKGROUND IMAGE */
.about-card-bg {
  position: absolute;
  inset: 0;
  background: url('/assets/images/main/Ron.png') no-repeat center / cover;
  z-index: 0;
  transition: transform .6s ease;
}

/* IMAGE OVERLAYS */
/* DEFAULT OVERLAY (fallback) */
.about-card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(11, 11, 12, 0.0) 35%,
      rgba(11, 11, 12, 0.6) 100%);
}

/* WIDE CARDS — LEFT → RIGHT OVERLAY */
.about-card:nth-child(1) .about-card-bg::after,
.about-card:nth-child(4) .about-card-bg::after {
  background:
    linear-gradient(to right,
      rgba(11, 11, 12, 0.99) 0%,
      rgba(11, 11, 12, 0.65) 55%,
      rgba(11, 11, 12, 0.25) 70%,
      rgba(11, 11, 12, 0.05) 100%),
    radial-gradient(ellipse at center,
      rgba(11, 11, 12, 0.0) 40%,
      rgba(11, 11, 12, 0.6) 100%);
}

/* NARROW CARDS — TOP → BOTTOM OVERLAY */
.about-card:nth-child(2) .about-card-bg::after,
.about-card:nth-child(3) .about-card-bg::after {
  background:
    linear-gradient(to bottom,
      rgba(11, 11, 12, 0.1) 0%,
      rgba(11, 11, 12, 0.55) 55%,
      rgba(11, 11, 12, 0.9) 100%),
    radial-gradient(ellipse at center,
      rgba(11, 11, 12, 0.0) 45%,
      rgba(11, 11, 12, 0.65) 100%);
}

/* CONTENT */
.about-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.about-card-content h3 {
  margin-bottom: .4rem;
}

.about-card-content p {
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.55;
  max-width: 90%;
}

/* HOVER (sehr subtil) */
.about-card:hover .about-card-bg {
  transform: scale(1.03);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .about-cards-grid {
    grid-template-columns: 1fr;
  }

  .about-card {
    grid-column: auto !important;
    min-height: 280px;
  }
}

@media (max-width: 600px) {
  .about-cards-grid {
    gap: var(--s-4);
  }

  .about-card {
    min-height: 240px;
    /* Reduce height on small screens */
  }
}





/* ============================================================
   FCH — FAQ Section (Dark, Clean, Apple-Style)
============================================================ */

.fch-faq {
  padding: clamp(4rem, 6vw, 7rem) 0;
  background: transparent;
  margin-top: 150px;
}

.fch-faq__wrap {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-left: clamp(3.1rem, 11vw, 15rem);
  padding-right: clamp(3.1rem, 11vw, 15rem);
}


/* Eyebrow */
.fch-faq__eyebrow {
  color: var(--brand);
  font-size: clamp(.9rem, 1vw, 1rem);
  letter-spacing: .12em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}

.fch-faq__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

/* Title */
.fch-faq__title {
  font-size: var(--fs-h1);
  color: var(--ink-1);
  font-weight: 600;
  line-height: 1.15;
  margin: 1rem 0 2.2rem;
  max-width: 760px;
  padding-bottom: 0;
  /* Removed padding */
  border-bottom: none;
  /* Removed gray border */
}

/* List */
.fch-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fch-faq__item {
  position: relative;
  padding-left: 24px;
  margin-bottom: 1rem;
}

.fch-faq__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* Question Button */
.fch-faq__question {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: clamp(16px, 2vw, 22px) 0;
  font-size: var(--fs-body);
  color: var(--ink-1);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform .22s ease, color .22s ease;
}

.fch-faq__question:hover {
  transform: translateX(6px);
  color: var(--brand);
}

/* Icon - Arrow instead of + */
.fch-faq__icon {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  position: relative;
  transition: background .2s ease, transform .3s ease;
}

/* Hide the old cross pseudo-elements */
.fch-faq__icon::before {
  display: none;
}

/* Arrow (Cheveron Down) */
.fch-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-1);
  border-bottom: 2px solid var(--ink-1);
  /* Centered and rotated 45deg to point down */
  transform: translate(-50%, -65%) rotate(45deg);
  transition: border-color .2s ease;
}

/* Rotation on expand */
.fch-faq__question[aria-expanded="true"] .fch-faq__icon {
  background: color-mix(in srgb, var(--brand), transparent 82%);
  transform: rotate(180deg);
}

/* Answer */
.fch-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height .28s ease;
}

.fch-faq__answer p {
  margin: 0 0 1rem;
  color: var(--ink-2);
  opacity: .85;
  line-height: 1.6;
  max-width: 720px;
}

/* Footnote */
.fch-faq__footnote {
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--ink-2);
  opacity: .85;
  font-size: .95rem;
  line-height: 1.6;
  max-width: 700px;
  margin-bottom: 200px !important;
}

@media (min-width: 600px) and (max-width: 1200px) {
  .fch-faq__wrap {
    width: 92% !important;
    max-width: 92% !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 600px) {
  .fch-faq__wrap {
    width: 94% !important;
    max-width: 94% !important;
    margin-inline: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}



/* ============================================================
   NAV DROPDOWN — IMAGE PREVIEW + BUTTON CARDS
   ============================================================ */

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 2.4rem clamp(3.1rem, 11vw, 15rem);
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  z-index: 999;
}

.nav-dropdown.hidden {
  display: none;
}

.nav-dropdown-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.nav-dropdown-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}

.nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.nav-dropdown-item-title {
  font-size: 1.05rem;
  color: var(--ink-1);
  font-weight: 500;
  margin-bottom: .2rem;
}

.nav-dropdown-item-sub {
  font-size: .85rem;
  color: var(--ink-2);
  opacity: .8;
}

.nav-dropdown-arrow {
  font-size: 1.4rem;
  color: var(--ink-2);
  opacity: .7;
}

.nav-dropdown-right {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

.nav-dropdown-preview {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-dropdown-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
}

.nav-dropdown-preview img.active {
  opacity: 1;
}