/* =============================================================================
   fo-ghl.css — Fahrschule Okan
   GHL-aware Schicht. GHL wickelt jedes Element in .c-section>.inner,
   .c-row>.inner, .c-column>.vertical.inner. Diese Datei existiert NUR damit
   der Rebuild in GoHighLevel ohne Layout-Bruch läuft.
   Auf der Standalone-Seite gibt es kein .inner -> alles hier ist inert
   (siehe :has(> .inner)-Guards). Alles mit !important, weil GHL Custom-CSS
   nachinjiziert und gleiche Spezifität nicht zuverlässig gewinnt.
   Breakpoint 991px (GHL Tablet/Mobile-Schwelle), GHL-Row-Max 1480px im Kopf.
   ============================================================================= */

/* ======================= Container im GHL-Kontext erzwingen ======================= */
.c-section .fo-container {
  width: 100% !important;
  max-width: var(--fo-container) !important;
  margin-inline: auto !important;
}

/* ======================= Grids auf GHLs .inner legen ======================= */
/* :has(> .inner) = nur im GHL-Kontext aktiv. Custom-HTML (c-custom-code) behält
   sein eigenes Grid unverändert, weil dort kein .inner existiert. */
.fo-hero__grid:has(> .inner),
.fo-editorial__grid:has(> .inner),
.fo-about-teaser__grid:has(> .inner),
.fo-contact__grid:has(> .inner),
.fo-footer__grid:has(> .inner) { display: block !important; width: 100% !important; }

.fo-hero__grid > .inner,
.fo-editorial__grid > .inner,
.fo-about-teaser__grid > .inner,
.fo-contact__grid > .inner,
.fo-footer__grid > .inner { width: 100% !important; }

.fo-hero__grid > .inner {
  display: grid !important; grid-template-columns: 1.05fr 0.95fr !important;
  gap: var(--fo-gap-lg) !important; align-items: center !important;
}
.fo-editorial__grid > .inner {
  display: grid !important; grid-template-columns: 0.55fr 1.45fr !important;
  gap: var(--fo-gap-lg) !important; align-items: start !important;
}
.fo-about-teaser__grid > .inner {
  display: grid !important; grid-template-columns: 0.85fr 1.15fr !important;
  gap: var(--fo-gap-lg) !important; align-items: center !important;
}
.fo-contact__grid > .inner {
  display: grid !important; grid-template-columns: 1.1fr 0.9fr !important;
  gap: var(--fo-gap-lg) !important; align-items: start !important;
}
.fo-footer__grid > .inner {
  display: grid !important; grid-template-columns: 1.2fr 0.8fr 0.8fr !important;
  gap: var(--fo-gap-lg) !important;
}
/* GHL-Spalten: %-Breiten neutralisieren, Track füllt */
.fo-hero__grid > .inner > .c-column,
.fo-editorial__grid > .inner > .c-column,
.fo-about-teaser__grid > .inner > .c-column,
.fo-contact__grid > .inner > .c-column,
.fo-footer__grid > .inner > .c-column { width: 100% !important; }

@media (max-width: 991px) {
  .fo-hero__grid > .inner { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .fo-editorial__grid > .inner { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
  .fo-about-teaser__grid > .inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .fo-contact__grid > .inner { grid-template-columns: 1fr !important; }
  .fo-footer__grid > .inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
}

/* ======================= Listen-Reihen (S03) ======================= */
.fo-row:has(> .inner) { display: block !important; }
.fo-row > .inner {
  display: grid !important; grid-template-columns: 0.32fr 0.68fr !important;
  gap: var(--fo-gap-md) !important;
}
.fo-row > .inner > .c-column { width: 100% !important; }
@media (max-width: 760px) {
  .fo-row > .inner { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
}

/* ======================= VKU-Panel (S08) ======================= */
.fo-vku__panel:has(> .inner) { display: block !important; }
.fo-vku__panel > .inner {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
}
.fo-vku__panel > .inner > .c-column { width: 100% !important; }
@media (max-width: 860px) {
  .fo-vku__panel > .inner { grid-template-columns: 1fr !important; }
}

/* ======================= Timeline-Row (S06) ======================= */
.fo-timeline__row:has(> .inner) { display: block !important; }
.fo-timeline__row > .inner {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--fo-gap-md) !important;
}
.fo-timeline__row > .inner > .c-column { width: 100% !important; }
@media (max-width: 860px) {
  .fo-timeline__row > .inner { grid-template-columns: 1fr !important; gap: 1.75rem !important; }
}

/* ======================= Formular-Row (2-spaltig) ======================= */
.fo-form__row:has(> .inner) { display: block !important; }
.fo-form__row > .inner {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1rem !important;
}
.fo-form__row > .inner > .c-column { width: 100% !important; }
@media (max-width: 560px) {
  .fo-form__row > .inner { grid-template-columns: 1fr !important; }
}

/* ======================= .inner-Durchgriff (Flex-Layouts brauchen `contents`) ======================= */
.fo-hero__ctas > .inner,
.fo-header .fo-container > .inner,
.fo-schaffhausen__row > .inner { display: contents !important; }

/* ======================= Vollband-Section: clip-path braucht volle Section-Breite ======================= */
.c-section.fo-pricing > .inner { padding: 0 !important; }