/* ==========================================================================
   Mega-Dropdown Navigation
   Desktop dropdowns + Mobile dropdown support

   Header-Navigation ist above-the-fold, muss vor First Paint gestyled sein
   (sonst kollabiert die Nav-Liste optisch).
   ========================================================================== */

/* ── Nav items with dropdown ────────────────────────────────────────────── */

.nav-list > li {
  position: static;
}

/* Hover-Zone unter dem Nav-Item — reicht von der Unterkante des Items bis
   zum Dropdown. 2rem reicht für normale Maus-Bewegungen; 4rem (vorher) war
   so groß dass das ::before-Bridge des aktiven Dropdowns benachbarte Nav-
   Punkte überlagerte und sie schwer klickbar machte. */
.nav-list > li.has-dropdown {
  padding-bottom: 2rem;
  margin-bottom: -2rem;
}

.header-main {
  position: relative;
}

.nav-list > li.has-dropdown > a::after {
  display: none;
}

/* ── Mega-Dropdown ──────────────────────────────────────────────────────── */

.mega-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: var(--content-width);
  max-width: 90vw;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 2px 13px rgba(0, 0, 0, 0.1);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  transform: translateX(-50%) translateY(0.5rem);
  z-index: 1000;
}

/* Unsichtbare Brücke zwischen Nav-Item und Dropdown — vertical only.
   Vorher: full-width (left:0; right:0) — überdeckte horizontal alle
   benachbarten Nav-Items, sodass „Kontakt" beim Hover über „Service"
   nicht klickbar war. Jetzt: 16rem zentriert über dem Dropdown-Top
   (= Breite eines durchschnittlichen Nav-Items + Toleranz). */
.mega-dropdown::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 16rem;
  height: 2rem;
}

/* Mit CTA: Grid-Layout */
.mega-dropdown--with-cta {
  display: grid;
}

/* Eigentümer/Käufer-Mieter: Gruppen + CTA als gleichbreite Spalten, Anzahl
   automatisch (grid-auto-flow column). Funktioniert für 2 ODER 3 Gruppen + CTA
   ohne Umbruch/Überlappen — kein festes 3-Spalten-Grid mehr. */
.mega-dropdown--with-cta:has(.mega-dropdown__groups) {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.mega-dropdown--with-cta .mega-dropdown__content:has(.mega-dropdown__groups) {
  display: contents;
}

.mega-dropdown--with-cta .mega-dropdown__groups {
  display: contents;
}

/* Gap zwischen den Gruppen = Außen-Padding (4.375rem), nicht doppelt.
   Innenseitiges H-Padding halbieren → Inter-Gruppe = 2.1875+2.1875 = 4.375rem.
   Erste Gruppe behält volles Außen-Padding links, letzte rechts (zur CTA). */
.mega-dropdown--with-cta:has(.mega-dropdown__groups) .mega-dropdown__group {
  padding-left: 2.1875rem;
  padding-right: 2.1875rem;
}
.mega-dropdown--with-cta:has(.mega-dropdown__groups) .mega-dropdown__group:first-child {
  padding-left: 4.375rem;
}
.mega-dropdown--with-cta:has(.mega-dropdown__groups) .mega-dropdown__group:last-child {
  padding-right: 4.375rem;
}

/* 3 Gruppen + Teaserbox: Teaser = 33,33 %, die 3 Gruppen teilen sich den Rest
   (66,67 %, je 22,22 %). Nur bei 3 Gruppen — 2-Gruppen-Dropdown bleibt gleichverteilt. */
.mega-dropdown--with-cta:has(.mega-dropdown__group:nth-of-type(3)) {
  grid-auto-flow: row;
  grid-template-columns: 2fr 2fr 2fr 3fr;
}

/* Kaufen/Unternehmen/Service/Kontakt: 2fr links + 1fr CTA rechts */
.mega-dropdown--with-cta:not(:has(.mega-dropdown__groups)) {
  grid-template-columns: 2fr 1fr;
}

/* Content-Bereich: Padding + 2-Spalten-Liste */
.mega-dropdown--with-cta .mega-dropdown__content:not(:has(.mega-dropdown__groups)) {
  padding: 3.75rem 4.375rem;
}

/* 2-Spalten-Layout für flache Listen (Kaufen, Unternehmen, Service, Kontakt) */
.mega-dropdown__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
}

/* Dropdowns ohne CTA (einfache Liste) */
.mega-dropdown:not(.mega-dropdown--with-cta) {
  padding: 3.75rem 4.375rem;
}

.nav-list > li.has-dropdown:hover > .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* JS-controlled open state (replaces pure :hover for reliability) */
.nav-list > li.has-dropdown.is-dropdown-open > .mega-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ── Dropdown Content ─────────────────────────────────────────────────── */

.mega-dropdown__content {
  flex: 1;
  min-width: 0;
}

.mega-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-dropdown__list > li {
  border-bottom: 1px solid #eee;
  padding: 0.6rem 0;
}

.mega-dropdown__list > li:last-child {
  border-bottom: 1px solid #eee;
}

.mega-dropdown__list a {
  display: block;
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.7;
  color: #454645 !important;
  text-transform: none;
  letter-spacing: 0.384px;
  padding: 0;
  transition: color 0.15s;
}

.mega-dropdown__list a:hover {
  color: var(--color-primary, #b8a98e) !important;
}

/* ── Grouped Layout (Eigentümer) ──────────────────────────────────────── */

.mega-dropdown__groups {
  display: flex;
  gap: 2rem;
}

.mega-dropdown__group {
  flex: 1;
  min-width: 0;
  padding: 3.75rem 4.375rem;
}

/* Mega-Dropdown Group-Heading — designed-Variante (1.3rem im Nav-Kontext).
   Typo aus base.css (font-family/weight 400/color text-dark/transform none). */
.mega-dropdown__group-heading {
  margin: 0;
  padding-bottom: 1rem;
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.mega-dropdown__group-heading a {
  color: inherit;
  text-decoration: none;
}

.mega-dropdown__group-heading a:hover {
  color: var(--color-primary) !important;
}

/* ── CTA-Box im Dropdown ──────────────────────────────────────────────── */

.mega-dropdown__cta {
  position: relative;
  box-shadow: -2px 0 13px rgba(0, 0, 0, 0.1);
  padding: 3.75rem 4.375rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.mega-dropdown__cta-img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10.3125rem;
  height: auto;
  pointer-events: none;
}

.mega-dropdown__cta-heading {
  font-family: var(--font-body);
  font-size: 1.22rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-primary-dark);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

.mega-dropdown__cta p {
  font-size: 1rem;
  line-height: 1.71;
  color: #666;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

/* .site-header--subpage .nav-list a (0,2,1) und .is-scrolled .nav-list a (0,2,1)
   überschreiben .btn (0,1,0) → hier mit (0,3,1) gegenhalten */
.mega-dropdown a.btn {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.71em;
  color: var(--btn-color);
  background: var(--btn-bg);
  border: 1px solid var(--color-primary);
  padding: 0.9375rem 1.875rem 0.9375rem 2.375rem;
}

.mega-dropdown a.btn:hover {
  color: var(--btn-color-hover);
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
}

.mega-dropdown__cta-btn {
  align-self: flex-start;
  text-decoration: none;
  white-space: nowrap;
  z-index: 1;
  margin-top: 0 !important;
}

/* ── Flat list ohne CTA ─────────────────────────────────────────────── */

.mega-dropdown:not(.mega-dropdown--with-cta) {
  min-width: 14rem;
}

/* ── Mobile Navigation – Dropdown support ───────────────────────────────── */

.mobile-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mobile-nav-item > a {
  flex: 1;
}

.mobile-nav-toggle {
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.75rem;
  line-height: 1;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.mobile-nav-toggle:hover {
  background: none;
  color: var(--color-primary);
}

.mobile-nav-sub {
  list-style: none;
  padding: 0 0 0.75rem 0.75rem;
  margin: 0;
  display: none;
}

.mobile-nav-sub.is-open {
  display: block;
}

.mobile-nav-sub li {
  border: none;
}

.mobile-nav-sub a {
  font-size: 1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
  padding: 0.75rem 0;
  display: block;
  color: var(--color-text);
}

.mobile-nav-sub a:hover {
  opacity: 1;
  color: var(--color-primary);
}

.mobile-nav-group-heading > a {
  font-size: 1.0625rem !important;
  font-weight: 600;
  color: var(--color-primary, #b8a98e) !important;
  opacity: 1 !important;
  padding: 0.875rem 0 0.375rem;
}

.mobile-nav-group-heading:first-child > a {
  padding-top: 0.25rem;
}

/* ══ Schmale Variante — das „normale" Dropdown ═══════════════════════════
   Einspaltige Liste in einem schmalen Kasten, der links an seinem Navipunkt
   klebt, statt mittig über der ganzen Inhaltsbreite zu liegen.
   renderNavList() vergibt die Klasse automatisch, wenn ein Navipunkt weder
   Gruppen noch eine CTA-Box hat. */
.mega-dropdown--narrow {
  width: max-content;
  min-width: 13rem;
  max-width: 22rem;
  left: 0;
}
/* NIEMALS seitwaerts bewegen. Die Basisregeln des Mega-Menues setzen
   translateX(-50%) — sowohl im Ruhezustand als auch bei :hover UND bei
   .is-dropdown-open (vom JS gesetzt). Fuer das schmale Dropdown wird jede
   Transform-Bewegung abgeschaltet; es blendet nur ein und aus. */
.mega-dropdown--narrow,
.nav-list > li.has-dropdown:hover > .mega-dropdown--narrow,
.nav-list > li.has-dropdown.is-dropdown-open > .mega-dropdown--narrow {
  transform: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.mega-dropdown--narrow::before {
  left: 0;
  transform: none;
  width: 100%;
}
.mega-dropdown:not(.mega-dropdown--with-cta).mega-dropdown--narrow {
  padding: 0.5rem 1.5rem;
}
.mega-dropdown--narrow .mega-dropdown__list > li {
  padding: 0.55rem 0;
}
.mega-dropdown--narrow .mega-dropdown__list > li:last-child {
  border-bottom: 0;
}