/* =========================
   COMPONENTS – Navigation
   (Desktop Mega-Menü + Mobile Overlay + Accordion)
   ========================= */

/* === GRUNDLEGENDE RESETS & DEFAULTS ==================================== */

/* Globale Breite für das Mega-Menü – etwas breiter als der normale Content */
:root {
  --mega-max-width: 1900px;
}

/* Header immer oben */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 0; /* Kein Abstand nach unten, damit Breadcrumb direkt andockt */
}

/* Header/Nav Links: neutral, keine visited-Farbe */
.site-header a,
.main-nav a,
nav a {
  color: inherit;
}

.site-header a:visited,
.main-nav a:visited,
nav a:visited {
  color: inherit;
}

/* === TOP-LEVEL NAVIGATION (BASIS) ====================================== */

/* Desktop: horizontale Top-Navi */
.main-nav {
  display: block;
}

.nav-level-1 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-dark);
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}

/* Top-Level-Links: Marineblau, Hover: Rot */
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link {
  color: var(--color-dark);
}

.site-header .main-nav .nav-level-1 > .nav-item > .nav-link:hover,
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link:focus-visible {
  color: var(--color-accent);
}

/* Aktive/offene Zustände: entfernt - alle Top-Level-Links haben gleiche Farbe im Normalzustand */
/* Die Akzentfarbe kommt nur über Hover/Focus oder wenn Mega-Menü geöffnet ist */

.nav-link:hover {
  color: var(--color-primary);
}

/* Niemals Underline auf ganzen Links erzwingen */
.nav-link,
.nav-link:hover,
.nav-link:focus-visible {
  text-decoration: none !important;
}

/* Label: Basis ohne Box-Shadow */
.nav-link .nav-label {
  text-decoration: none !important;
  box-shadow: none;
}

/* === CHEVRON (PFEIL) =================================================== */

/* Chevron: explizit ohne Deko, stabil um die Mitte rotierend */
.site-header .main-nav .nav-level-1 .nav-chevron {
  text-decoration: none !important;
  box-shadow: none !important;
  pointer-events: none;
  display: inline-block;
  transition: transform 0.18s ease-out;
  transform-origin: 50% 50%;
  line-height: 1;          /* Glyph sauber im eigenen Kasten ausrichten */
  font-size: 0.8rem;       /* etwas kleiner, damit der Rotations-Effekt ruhiger wirkt */
}

/* Desktop: wenn Mega offen ist -> Chevron hochdrehen */
@media (min-width: 940px) {
  .site-header .main-nav .nav-level-1 .nav-item--has-mega.is-open .nav-chevron,
  .site-header .main-nav .nav-level-1 .nav-item--has-mega:hover .nav-chevron,
  html.is-mega-open .site-header .main-nav .nav-level-1 .nav-item--has-mega .nav-link .nav-chevron {
    transform: rotate(180deg);
  }
}

/* === BURGER & MOBILE TOGGLES =========================================== */

/* Burger standardmäßig aus (Desktop) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: .25rem;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #0b2a4a;
  margin: 4px 0;
  border-radius: 2px;
}

/* Toggle & Mobile-Accordion standardmäßig AUS (Desktop) */
.nav-subtoggle,
.mega-menu-mobile {
  display: none;
}

/* === DESKTOP MEGA-MENÜ ================================================= */

.mega-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-height);
  bottom: 0;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
  z-index: 1500;
  max-height: calc(100vh - var(--header-height) - 16px);
  overflow-y: auto;
  overflow-x: hidden; /* zur Sicherheit gegen etwaige Rundungsfehler */

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.mega-menu::-webkit-scrollbar {
  width: 8px;
}

.mega-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
}

/* Sichtbarkeit via Klasse auf <li> (Desktop) */
/* WICHTIG: Keine :hover-Regeln mehr - nur noch Klassen-basiert */
/* DEBUG-HINWEIS (temporär): Desktop >= 940px öffnet Mega via .is-open-desktop */
/* DEBUG-HINWEIS (temporär): Mobile <= 939px versteckt Mega per display:none */
@media (min-width: 940px) {
  /* Mega-Menü sichtbar, wenn li.nav-item--has-mega die Klasse .is-open-desktop hat */
  .nav-item--has-mega.is-open-desktop .mega-menu,
  html.is-mega-open .nav-item--has-mega .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Mega-Menü-Hover global unterdrücken, wenn html.mega-hover-suppressed gesetzt ist */
  /* Verhindert automatisches Wiederöffnen nach Klick auf "LEISTUNGEN" */
  html.mega-hover-suppressed .nav-item--has-mega:hover .mega-menu,
  html.mega-hover-suppressed .nav-item--has-mega.is-open-desktop .mega-menu,
  html.mega-hover-suppressed html.is-mega-open .nav-item--has-mega .mega-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
  }
}

/* Innenbereich des Mega-Menüs */
.mega-inner {
  /* Mega-Menü soll fast volle Fensterbreite nutzen, mit etwas Rand */
  width: 100%;
  /* links + rechts je 50px Abstand zum Viewport */
  max-width: min(var(--mega-max-width), 100vw - 100px);
  margin-inline: auto;
  padding: 1.75rem 50px 2.25rem;
}

/* === MEGA-MENÜ GRID (DESKTOP) ========================================== */

.mega-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  column-gap: 1.6rem;
  row-gap: 1.4rem;
}

@media (max-width: 1440px) {
  .mega-columns {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    column-gap: 1.4rem;
  }
}

@media (max-width: 1200px) {
  .mega-columns {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    column-gap: 1.3rem;
  }
}

@media (max-width: 939px) {
  .mega-columns {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    column-gap: 1.4rem;
  }
}

/* Spalten: dezente "cardig"-Optik */
.mega-column {
  padding: 0.4rem 0.75rem 1.25rem;
  border-radius: 0.75rem;
  transition: background-color 0.16s ease,
              box-shadow 0.16s ease,
              transform 0.16s ease;
}

@media (min-width: 940px) {
  .mega-column:hover {
    background: rgba(10, 46, 90, 0.02);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
  }
}

/* === MEGA-MENÜ SPALTENÜBERSCHRIFTEN ===================================== */

.mega-heading {
  display: flex;
  align-items: flex-start;   /* NICHT center */
  gap: 0.55rem;
  margin: 0 0 0.65rem;
  font-family: var(--font-heading);
  color: var(--color-dark);
}

.mega-heading-link {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease;
}

.mega-heading-link:hover {
  color: var(--color-accent);
}

.mega-heading-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
  margin-top: 0.10rem;       /* kleines Feintuning, Icon optisch nach oben */
  color: var(--color-primary);
}

.mega-heading-icon i {
  display: inline-block;
}

.mega-heading-text {
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* WICHTIG: Umbrüche an Leerzeichen und &shy; erlauben */
  white-space: normal;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

/* Überschriften, die gezielt umbrechen dürfen (z.B. mit <br>) */
.mega-heading-text--wrap {
  white-space: normal;
}

/* Hilfsklasse, falls wir später weitere Spezial-Fälle haben */
.mega-heading-text--twoline {
  display: inline-block;
}

/* === MEGA-MENÜ UNTERPUNKTE ============================================== */

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

.mega-list li {
  margin: 0.06rem 0; /* vorher ~0.15rem, jetzt kompakter */
}

/* Mega-Menü Unterpunkte – moderne "Chip"-Optik */
.mega-list a {
  display: inline-flex;
  align-items: flex-start;   /* an 1. Zeile orientieren */
  gap: 0.45rem;
  padding-block: 0.10rem;      /* vorher höheres Padding */
  padding-inline: 0.25rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.35;           /* etwas enger, aber noch gut lesbar */
  text-decoration: none;
  color: var(--color-text);
  /* Zeilenumbruch NUR an Leerzeichen */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  transition:
    background-color 0.16s ease-out,
    color 0.16s ease-out,
    transform 0.16s ease-out;
}

/* Akzent-Punkt links */
.mega-list a::before {
  content: "";
  flex: 0 0 4px;                        /* fester Punkt, nicht mitskalieren */
  width: 4px;
  height: 4px;
  border-radius: 999px;
  margin-top: 0.55em;                   /* optische Mitte der 1. Zeile */
  background: rgba(10, 46, 90, 0.35);   /* dezentes Blau-Grau (Standard) */
}

/* Hover-/Focus-States: dezente Hervorhebung */
.mega-list a:hover,
.mega-list a:focus-visible {
  background: rgba(10, 46, 90, 0.04);
  text-decoration: underline;
}

/* Hover / Focus / aktiver Zustand: Bullet wird dunkelblau */
.mega-list a:hover::before,
.mega-list a:focus-visible::before,
.mega-list a.is-active::before {
  background: var(--color-accent); /* dunkles Blau */
}

/* === MOBILE OVERLAY + ACCORDION ========================================= */

@media (max-width: 939px) {
  /* Burger ein */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Desktop Mega aus */
  .mega-menu {
    display: none !important;
  }

  /* Mobile Overlay */
  .main-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height);
    bottom: 0;
    overflow-y: auto;
    background: #fff;
    z-index: 2500;
    /* Oberer Abstand komplett weg, damit die erste Nav-Zeile direkt am Header sitzt */
    padding-block: 0 1rem;   /* oben 0, unten wie bisher */
    padding-inline: 1.25rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
  }

  .main-nav.is-open {
    display: block;
  }

  .nav-level-1 {
    display: block;
    gap: 0;
  }

  .nav-item {
    /* Border wird von .nav-row übernommen */
  }

  .nav-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  /* Link ist NUR so breit wie sein Text => klickt man links auf "Leistungen" => Navigation */
  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .9rem 0;
  }

  /* Toggle nimmt den REST der Zeile ein (leere Fläche + rechts) => toggelt Accordion */
  .nav-subtoggle {
    display: inline-flex;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    width: 100%;
    height: 44px;
    padding: 0 .25rem 0 1rem;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .nav-subtoggle-label {
    font-size: .85rem;
    opacity: .8;
  }

  .nav-subtoggle-icon {
    font-size: .9rem;
    opacity: .8;
    display: inline-block;
    transition: transform .18s ease;
  }

  .nav-subtoggle[aria-expanded="true"] .nav-subtoggle-icon {
    transform: rotate(180deg);
  }

  /* Mobile: Chevron dreht auch beim Accordion */
  .site-header .main-nav .nav-level-1 .nav-item.is-open .nav-link .nav-chevron {
    transform: rotate(180deg);
  }

  /* Panel sichtbar steuerbar, aber Layout stabil */
  .mega-menu-mobile {
    display: block;
    padding: .25rem 0 1rem;
  }

  .mega-menu-mobile[hidden] {
    display: none;
  }

  .mega-menu-mobile .mega-heading {
    margin-top: 1rem;
  }

  /* Mobile: Wenn ein Mega-Item geöffnet ist, bleibt die Zeile (Leistungen) oben kleben */
  .nav-item--has-mega.is-open .nav-row {
    position: sticky;
    top: 0;              /* direkt oben im Overlay, ohne Lücke */
    z-index: 20;
    background: #ffffff;
    padding-block: 0.75rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    margin-top: 0;       /* falls vorher >0 war, bitte auf 0 setzen */
  }

  /* Sicherstellen, dass der Inhalt darunter nicht am Rand klebt */
  .nav-item--has-mega.is-open .mega-menu-mobile {
    margin-top: 0.25rem;
  }
}

/* Desktop: Mobile Toggle verstecken */
@media (min-width: 940px) {
  .nav-subtoggle {
    display: none !important;
  }

  .mega-menu-mobile {
    display: none !important;
  }
}

/* === FINAL OVERRIDES (müssen am Ende stehen für maximale Spezifität) === */

/* TOP-LEVEL MAIN NAV TYPOGRAPHY (DESKTOP & MOBILE) */
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link {
  text-transform: uppercase;
  letter-spacing: 0.045em;
  font-weight: 700;
}

/* Label erbt die Formatierung immer */
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link .nav-label {
  text-transform: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
}

/* Desktop: etwas kleinere Schrift für die Hauptnavigation */
@media (min-width: 940px) {
  .site-header .main-nav .nav-level-1 > .nav-item > .nav-link {
    font-size: 0.85rem;
    line-height: 1.1;
  }

  /* ÜBER UNS: niemals umbrechen (4. Menüpunkt) */
  .site-header .main-nav .nav-level-1 > .nav-item:nth-child(4) > .nav-link,
  .site-header .main-nav .nav-level-1 > .nav-item:nth-child(4) > .nav-link .nav-label {
    white-space: nowrap;
  }
}

/* FINAL OVERRIDE: Top-Level "LEISTUNGEN" wie alle anderen Hauptpunkte */
.site-header .main-nav .nav-level-1 > .nav-item.nav-item--has-mega > .nav-row > .nav-link.nav-link--has-mega,
.site-header .main-nav .nav-level-1 > .nav-item.nav-item--has-mega > .nav-row > .nav-link.nav-link--has-mega .nav-label {
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

@media (min-width: 940px) {
  /* LEISTUNGEN: gleiche Fontgröße wie alle Top-Level-Links */
  .site-header .main-nav .nav-level-1 > .nav-item.nav-item--has-mega > .nav-row > .nav-link.nav-link--has-mega {
    font-size: 0.85rem;
    line-height: 1.1;
  }
}

/* TOP-LEVEL-NAVIGATION: Standard kein Box-Shadow */
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link .nav-label {
  box-shadow: none !important;
}

/* Hover: Farbe ändern, aber kein Box-Shadow */
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link:hover .nav-label,
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link:focus-visible .nav-label {
  box-shadow: none !important;
}

/* Aktive/offene Zustände: nur Farbwechsel, KEINE Unterstreichung */
/* Aktive Zustände entfernt - nur Mega-Menü geöffnet behält Akzentfarbe */
html.is-mega-open .site-header .main-nav .nav-level-1 > .nav-item--has-mega > .nav-row > .nav-link .nav-label {
  color: var(--color-accent);
  text-decoration: none;
  box-shadow: none !important;
}

/* Cleanup 2025-01-XX: Veraltete Duplikate entfernt (Zeilen 44-57), Abschnitte logisch strukturiert,
   Kommentare verbessert, Final Overrides am Ende gruppiert. Verhalten unverändert. */

/* === Landingpage/Startseiten-Finishing-Anpassungen (2025-12-xx) === */

/* TOP-LEVEL-NAVIGATION: kein Unterstreichungs-Box-Shadow bei Hover/Focus */
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link .nav-label,
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link:hover .nav-label,
.site-header .main-nav .nav-level-1 > .nav-item > .nav-link:focus-visible .nav-label {
  box-shadow: none !important;
}