/* INFORM Weilburg — Design-System-Polish + statisches Menü.
   Prinzipien: Original-Kern (Schwarz #141414, Türkis #50fff8, Pill-CTAs,
   Uppercase-Nav) bleibt; Radius-System vereinheitlicht (Karten 14px,
   Dropdowns 10px, nur CTAs bleiben Pills); Skalierung auf Laptop-Breiten
   per zoom auf den 75%-Look gebracht, den das 1900px-Design braucht.
   Menü: Roll-up statisch (rollUp:false im HTML), Stufen hier per Media Query. */

:root {
  --if-accent: #50fff8;
  --if-ink: #e7e7e7;
  --if-panel: #141414;
  --if-line: rgba(255, 255, 255, 0.07);
  --if-r-card: 14px;
  --if-r-drop: 10px;
}

/* ============================================================
   0) Globale Skalierung: Export ist auf ~1900px ausgelegt,
   auf Laptops wirkt alles ~33% zu groß ("erst bei 75% richtig").
   zoom skaliert Layout + Typo konsistent, vw-frei gehalten.
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1899px) {
  body { zoom: 0.8; }
}

/* Sections ohne eigenes Padding kleben am Displayrand (z. B. "Preise").
   Elementor-eigene Paddings haben höhere Spezifität und gewinnen weiter. */
@media (min-width: 768px) {
  .e-parent { padding-inline: clamp(24px, 3%, 48px); }
}
@media (max-width: 767px) {
  .e-parent { padding-inline: 16px; }
}

/* ============================================================
   1) Statischer Roll-up: Stufen der Menüleiste.
   902 Startseite · 1943 10kg · 905 Trainingsangebot · 1807 Preisliste.
   ============================================================ */
@media (min-width: 768px) {
  .jet-mega-menu--layout-horizontal .jet-mega-menu-list > .jet-mega-menu-item--top-level { display: none; }
  .jet-mega-menu--layout-horizontal .jet-mega-menu-list > .jet-mega-menu-item-902,
  .jet-mega-menu--layout-horizontal .jet-mega-menu-list > .jet-mega-menu-item-1943,
  .jet-mega-menu--layout-horizontal .jet-mega-menu-list > .jet-mega-menu-item--roll-up { display: list-item; }
}
@media (min-width: 1025px) {
  .jet-mega-menu--layout-horizontal .jet-mega-menu-list > .jet-mega-menu-item-905 { display: list-item; }
}
@media (min-width: 1360px) {
  .jet-mega-menu--layout-horizontal .jet-mega-menu-list > .jet-mega-menu-item-1807 { display: list-item; }
}
@media (max-width: 767px) {
  .jet-mega-menu-item--roll-up { display: none; }
}

/* ============================================================
   2) Dropdown-Familie in Original-DNA:
   #141414 + 1px Türkis-Rahmen + Uppercase — Radius auf 10px gestrafft.
   Gilt für normale Dropdowns UND das "Mehr"-Panel.
   ============================================================ */
.jet-mega-menu .jet-mega-menu-sub-menu__list {
  border-radius: var(--if-r-drop) !important;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* Normale Dropdowns: CSS-Hover-Fallback + weicher Fade (kein Doppelrahmen —
   der Türkis-Rahmen kommt vom Original-ul) */
.jet-mega-menu--layout-horizontal .jet-mega-menu-item--top-level:not(.jet-mega-menu-item--roll-up) > .jet-mega-menu-sub-menu {
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.jet-mega-menu--layout-horizontal .jet-mega-menu-item--top-level:not(.jet-mega-menu-item--roll-up):hover > .jet-mega-menu-sub-menu,
.jet-mega-menu--layout-horizontal .jet-mega-menu-item--top-level:not(.jet-mega-menu-item--roll-up):focus-within > .jet-mega-menu-sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* ---------- "Mehr"-Panel ---------- */
.jet-mega-menu-item--roll-up { position: relative; }

.jet-mega-menu-item--roll-up .jet-mega-menu-item__label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.jet-mega-menu-item--roll-up .jet-mega-menu-item__label::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.jet-mega-menu-item--roll-up:hover .jet-mega-menu-item__label::after,
.jet-mega-menu-item--roll-up:focus-within .jet-mega-menu-item__label::after {
  transform: rotate(225deg) translateY(-2px);
}

.jet-mega-menu .jet-mega-menu-item--roll-up > .jet-mega-menu-sub-menu {
  position: absolute;
  top: 100%;
  right: 0 !important;
  left: auto !important;
  z-index: 999;
  padding-top: 14px;
  background: transparent;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.jet-mega-menu-item--roll-up:hover > .jet-mega-menu-sub-menu,
.jet-mega-menu-item--roll-up:focus-within > .jet-mega-menu-sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.mf-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 22px 36px;
  width: min(820px, calc(100vw - 48px));
  margin: 0;
  padding: 24px 28px;
  list-style: none;
  background: var(--if-panel);
  border: 1px solid var(--if-accent);
  border-radius: var(--if-r-drop);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
@media (max-width: 1359px) {
  .mf-panel {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    width: min(540px, calc(100vw - 48px));
  }
}
.mf-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mf-eyebrow {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(80, 255, 248, 0.25);
  color: var(--if-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mf-panel a {
  display: block;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  color: var(--if-ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.mf-panel a:hover {
  color: var(--if-accent);
  background: rgba(80, 255, 248, 0.07);
}
.mf-panel a.mf-cta {
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--if-accent);
  color: #141414;
  font-weight: 700;
  text-align: center;
}
.mf-panel a.mf-cta:hover {
  background: var(--if-accent);
  color: #141414;
  filter: brightness(1.08);
}

/* ---------- Nav-Polish: Underline-Slide, aktiver Punkt ---------- */
.jet-mega-menu--layout-horizontal .jet-mega-menu-item--top-level > .jet-mega-menu-item__inner .jet-mega-menu-item__label { position: relative; }
.jet-mega-menu--layout-horizontal .jet-mega-menu-item--top-level > .jet-mega-menu-item__inner .jet-mega-menu-item__label::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--if-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.jet-mega-menu--layout-horizontal .jet-mega-menu-item--top-level:hover > .jet-mega-menu-item__inner .jet-mega-menu-item__label::before,
.jet-mega-menu--layout-horizontal .jet-mega-current-menu-item.jet-mega-menu-item--top-level > .jet-mega-menu-item__inner .jet-mega-menu-item__label::before {
  transform: scaleX(1);
}
.jet-mega-menu--layout-horizontal .jet-mega-menu-item--roll-up > .jet-mega-menu-item__inner .jet-mega-menu-item__label::before { display: none; }
.jet-mega-menu-item__link { transition: color 0.2s ease; }
.jet-mega-menu-item--top-level:hover > .jet-mega-menu-item__inner .jet-mega-menu-item__link--top-level { color: var(--if-accent); }

/* ============================================================
   3) Hero-Overlay: statt flacher Abdunklung ein Verlauf —
   links Lesbarkeit für die Headline, rechts bleibt das Studio sichtbar.
   ============================================================ */
[data-id="c9d3058"] .elementor-background-slideshow::after,
[data-id="a183a07"] .elementor-background-slideshow::after,
[data-id="66221f9"] .elementor-background-slideshow::after {
  background: linear-gradient(100deg, rgba(8, 8, 8, 0.78) 22%, rgba(8, 8, 8, 0.38) 62%, rgba(8, 8, 8, 0.52)) !important;
}

/* ============================================================
   4) "Du hast Fragen"-Karte (alle Seiten, strukturell erkannt):
   helle Karte mit Formular — die leere graue Hälfte bekommt
   Studio-Foto + Verlauf und trägt die Headline in Weiß/Türkis.
   ============================================================ */
.e-con:has(> .e-con > .elementor-widget-form) {
  border-radius: var(--if-r-card);
  overflow: hidden;
}
.e-con:has(> .e-con > .elementor-widget-form) > .e-con:not(:has(.elementor-widget-form)) {
  background:
    linear-gradient(70deg, rgba(8, 8, 8, 0.82) 8%, rgba(8, 8, 8, 0.55) 55%, rgba(8, 8, 8, 0.38)),
    url("/assets/inform-weilburg.de/wp-content/uploads/2024/11/InForm-11-scaled.jpg") center / cover no-repeat !important;
}
.e-con:has(> .e-con > .elementor-widget-form) > .e-con:not(:has(.elementor-widget-form)) h2 {
  color: #ffffff;
  font-size: 46px !important;
  line-height: 1.15;
}

/* ============================================================
   5) Weiße Content-Box der Unterseiten-Templates (15 Seiten):
   massiv + 91px-H2 → auf Karten-Maß gebracht.
   ============================================================ */
[data-id="5dd5154"] {
  padding: 64px 48px !important;
  border-radius: 0 0 var(--if-r-card) var(--if-r-card) !important;
}
[data-id="d564e08"] h2 {
  font-size: 44px !important;
  line-height: 1.2;
}
[data-id="5dd5154"] .elementor-widget-text-editor {
  max-width: 72ch;
  margin-inline: auto;
}

/* Preisliste: "Vertragsstruktur"-Headline sprengte ihre Box */
[data-id="217ec41"] h2 {
  font-size: 62px !important;
  line-height: 1.1;
}

/* Startseite: Preiskarten aufs Radius-System gebracht */
[data-id="6fbbf1d"],
[data-id="5b93ead"],
[data-id="c5438ac"],
[data-id="ea98f89"] {
  border-radius: var(--if-r-card) var(--if-r-card) 0 0 !important;
}

/* Startseite: Intro-Absatz lief ~180 Zeichen breit */
[data-id="0a07388"] { max-width: 75ch !important; }

/* Startseite, Angebots-Sections: H2-Box saß 6px weiter links als der
   Text darunter (Font-Sidebearing + Widget-Breite) — optisch angleichen */
[data-id="c8ba6b4"] .elementor-widget-heading,
[data-id="16f2a22"] .elementor-widget-heading,
[data-id="25ad4f7"] .elementor-widget-heading,
[data-id="9e4d0e5"] .elementor-widget-heading {
  margin-left: 6px;
}

/* ============================================================
   6) Mobile: zentrierter Text bekommt zentrierte UI-Elemente
   ============================================================ */
@media (max-width: 767px) {
  .bdt-ep-button-wrapper {
    display: flex;
    justify-content: center;
  }
  .elementor-widget-bdt-advanced-button,
  .elementor-button-wrapper {
    text-align: center;
  }
  /* Button-Widgets sind flex-Kinder ihrer Spalte: ohne align-self bleiben
     sie am Spaltenanfang haengen, auch wenn der Text zentriert ist */
  .e-con > .elementor-widget-bdt-advanced-button,
  .e-con > .elementor-widget-button {
    align-self: center;
  }
}

/* ============================================================
   7) Globaler Polish (dezent, brandkonform)
   ============================================================ */
::selection {
  background: rgba(80, 255, 248, 0.35);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--if-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
a { transition: color 0.18s ease; }

.bdt-ep-button,
.elementor-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.bdt-ep-button:hover,
.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(80, 255, 248, 0.25);
}

.e-gallery-item { transition: filter 0.25s ease; }
.e-gallery-item:hover { filter: brightness(1.12); }

html { scrollbar-color: #333 #0a0a0a; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 6px; border: 2px solid #0a0a0a; }
::-webkit-scrollbar-thumb:hover { background: #444; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}

/* ============================================================
   9) Mobile: lange URLs (Datenschutz) und Tabellen (Blog) sind
   breiter als der Viewport und werden sonst rechts abgeschnitten
   (body hat overflow-x:hidden). Wörter umbrechen, Tabellen scrollen.
   ============================================================ */
@media (max-width: 767px) {
  .elementor-widget-container p,
  .elementor-widget-container li { overflow-wrap: anywhere; }
  .elementor-widget-container table { display: block; max-width: 100%; overflow-x: auto; }
}