/* --------------------------------------------------------------------------
   Hauptnavigation und gruppiertes Mega-Menü
   -------------------------------------------------------------------------- */
.nav{position:relative}
.nav-links>li{position:relative;display:flex;align-items:center;height:72px}
.nav-links>li>a{display:flex;align-items:center;height:100%}
.nav-links .menu-item-has-children>a::after{content:"";width:.42rem;height:.42rem;margin-left:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.nav-links .menu-item-has-children:hover>a::after,
.nav-links.dsmm-keyboard-mode .menu-item-has-children:focus-within>a::after{transform:translateY(1px) rotate(225deg)}

.nav-links .sub-menu{position:absolute;z-index:80;top:100%;left:-1rem;min-width:270px;margin:0;padding:.75rem;list-style:none;background:#fff;border:1px solid var(--ds-border);border-radius:0 0 12px 12px;box-shadow:0 20px 46px rgba(29,29,27,.14);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease}
.nav-links .sub-menu li{position:relative;width:100%}
.nav-links .sub-menu a{display:flex;align-items:center;width:100%;padding:.7rem .8rem;border-radius:8px;white-space:normal;line-height:1.25}
.nav-links .sub-menu a:hover,
.nav-links .sub-menu a:focus-visible,
.nav-links .sub-menu .current-menu-item>a{background:var(--ds-euka-hell);color:var(--ds-graphit)}
.nav-links li:hover>.sub-menu,
.nav-links.dsmm-keyboard-mode li:focus-within>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}

/* Ein Top-Level-Punkt mit gruppierten Enkelkindern wird automatisch zum Mega-Menü. */
.nav-links>li.has-mega-menu{position:static}
.nav-links>li.has-mega-menu>.sub-menu{left:0;right:0;top:100%;width:100%;min-width:0;padding:1.15rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;border-radius:0 0 16px 16px}
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group{padding:1.15rem;background:#f7f7f5;border:1px solid #ececea;border-radius:12px}
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>a{padding:0 0 .95rem;border-bottom:1px solid #dededb;border-radius:0;font-size:1.05rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>a::after{display:none}
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>a:hover,
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>a:focus-visible{background:transparent;color:var(--ds-graphit)}
.mega-menu-group__icon{display:grid;place-items:center;flex:0 0 2.15rem;width:2.15rem;height:2.15rem;margin-right:.7rem;border-radius:9px;background:var(--ds-graphit);color:#fff}
.mega-menu-group__icon svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mega-menu-group--drohnenscan .mega-menu-group__icon{background:var(--ds-forst)}
.mega-menu-group--drohnensaat .mega-menu-group__icon{background:var(--ds-gelb);color:var(--ds-graphit)}
.mega-menu-group__title{display:block}
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu{position:static;display:grid;grid-template-columns:1fr;gap:.2rem;min-width:0;margin:0;padding:.75rem 0 0;background:transparent;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:none}
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu a{position:relative;padding:.66rem 2rem .66rem .75rem;font-weight:600}
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu a::after{content:"→";position:absolute;right:.75rem;margin:0;border:0;width:auto;height:auto;transform:none;opacity:.45;transition:transform .15s ease,opacity .15s ease}
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu a:hover::after,
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu a:focus-visible::after{transform:translateX(3px);opacity:1}

.submenu-toggle{display:none}

@media(max-width:920px){
  .nav-links{max-height:calc(100vh - 72px);overflow-y:auto;overscroll-behavior:contain}
  body.admin-bar .nav-links{max-height:calc(100vh - 118px)}
  .nav-links>li{display:block;width:100%;height:auto;border-bottom:1px solid #eeeeeb}
  .nav-links>li:last-child{border-bottom:0}
  .nav-links>li>a{height:auto;min-height:48px;padding:.82rem 3rem .82rem 0;font-size:1rem}
  .nav-links .menu-item-has-children>a::after{display:none}
  .submenu-toggle{position:absolute;top:.38rem;right:0;display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:8px;background:#f2f2ef;color:var(--ds-graphit);cursor:pointer}
  .submenu-toggle::before{content:"";width:.48rem;height:.48rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
  .submenu-toggle[aria-expanded="true"]::before{transform:translateY(2px) rotate(225deg)}
  .nav-links .sub-menu,
  .nav-links li:hover>.sub-menu,
  .nav-links li:focus-within>.sub-menu{position:static;display:none!important;width:100%;min-width:0;margin:0 0 .65rem;padding:.3rem 0 .3rem .85rem;background:transparent;border:0;border-left:2px solid var(--ds-eukalyptus);border-radius:0;box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none}
  .nav-links .submenu-open>.sub-menu{display:block!important}
  .nav-links .sub-menu a{padding:.68rem .75rem}
  .nav-links>li.has-mega-menu>.sub-menu,
  .nav-links>li.has-mega-menu:hover>.sub-menu,
  .nav-links.dsmm-keyboard-mode>li.has-mega-menu:focus-within>.sub-menu{display:none!important;grid-template-columns:1fr;gap:.75rem;padding:.65rem 0 .3rem;border-left:0}
  .nav-links>li.has-mega-menu.submenu-open>.sub-menu{display:grid!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group{padding:.9rem;background:#f7f7f5;border:1px solid #e8e8e5;border-radius:10px}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>a{min-height:0;padding:0 0 .7rem;font-size:.95rem}
  .mega-menu-group__icon{flex-basis:1.9rem;width:1.9rem;height:1.9rem;border-radius:7px}
  .mega-menu-group__icon svg{width:1.05rem;height:1.05rem}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group:hover>.sub-menu,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group:focus-within>.sub-menu{display:block!important;margin:0;padding:.55rem 0 0;border:0}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.submenu-toggle{display:none}
}

/* --------------------------------------------------------------------------
   Vierte Menüebene
   Ebene 3 kann als Untergruppe dienen; Ebene 4 enthält die Detailleistungen.
   -------------------------------------------------------------------------- */
@media(min-width:921px){
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children{
    margin:.2rem 0 .7rem;
    padding:.72rem .75rem .65rem;
    background:#fff;
    border:1px solid #e5e5e2;
    border-radius:10px;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>a{
    padding:0 1.4rem .55rem 0;
    border-bottom:1px solid #e7e7e4;
    border-radius:0;
    font-size:.9rem;
    font-weight:800;
    letter-spacing:.055em;
    line-height:1.25;
    text-transform:uppercase;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>a::after{
    content:"";
    right:.15rem;
    top:.15rem;
    width:.38rem;
    height:.38rem;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    opacity:.55;
    transform:rotate(45deg);
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>a:hover,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>a:focus-visible{
    background:transparent;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>a:hover::after,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>a:focus-visible::after{
    transform:translateY(2px) rotate(45deg);
    opacity:1;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.sub-menu,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children:hover>.sub-menu,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children:focus-within>.sub-menu{
    position:static;
    display:grid;
    grid-template-columns:1fr;
    gap:.05rem;
    width:100%;
    min-width:0;
    margin:.45rem 0 0;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.sub-menu a{
    padding:.52rem 1.6rem .52rem .65rem;
    font-size:.9rem;
    font-weight:500;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.sub-menu a::before{
    content:"";
    flex:0 0 .34rem;
    width:.34rem;
    height:.34rem;
    margin-right:.55rem;
    border-radius:50%;
    background:var(--ds-eukalyptus);
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.sub-menu a::after{
    content:"→";
    right:.55rem;
    top:auto;
    width:auto;
    height:auto;
    border:0;
    opacity:.35;
    transform:none;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.sub-menu a:hover::after,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.sub-menu a:focus-visible::after{
    transform:translateX(3px);
    opacity:1;
  }
}

@media(max-width:920px){
  /* Ebene 3 mit Unterpunkten bleibt im mobilen Menü einklappbar. */
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children{
    position:relative;
    margin:.2rem 0;
    padding:.05rem 0;
    border-top:1px solid #e6e6e3;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children:first-child{
    border-top:0;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>a{
    padding:.72rem 2.8rem .72rem .6rem;
    font-size:.92rem;
    font-weight:800;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.submenu-toggle{
    top:.28rem;
    right:.15rem;
    display:grid;
    width:2.25rem;
    height:2.25rem;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.sub-menu,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children:hover>.sub-menu,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children:focus-within>.sub-menu{
    display:none!important;
    margin:0 0 .35rem .45rem;
    padding:.15rem 0 .15rem .55rem;
    border-left:2px solid var(--ds-eukalyptus);
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children.submenu-open>.sub-menu{
    display:block!important;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.sub-menu a{
    padding:.58rem .65rem;
    font-size:.9rem;
    font-weight:500;
  }
}

/* --------------------------------------------------------------------------
   Eigene rechteckige Logos für Gruppen der zweiten Ebene
   -------------------------------------------------------------------------- */
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group--has-logo>a{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.45rem;
}
.mega-menu-group__logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  min-height:48px;
}
.mega-menu-group__logo-image{
  display:block;
  width:auto;
  height:auto;
  max-width:min(190px,100%);
  max-height:48px;
  object-fit:contain;
  object-position:left center;
}
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group--has-logo>a .mega-menu-group__title{
  font-size:.78rem;
  letter-spacing:.09em;
  color:var(--ds-grey,#676766);
}

@media(max-width:920px){
  .mega-menu-group__logo{min-height:40px}
  .mega-menu-group__logo-image{
    max-width:min(165px,100%);
    max-height:40px;
  }
}

/* Der sichtbare Titel kann pro Gruppenlogo ausgeblendet werden, bleibt aber
   als zugänglicher Text für Screenreader und Tastaturnutzer erhalten. */
.mega-menu-group__title--visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* --------------------------------------------------------------------------
   Version 1.4: kompaktere Hover-Fläche und Medien auf der dritten Ebene
   -------------------------------------------------------------------------- */
@media(min-width:921px){
  /* Der Auslöser ist nicht mehr über die volle Headerhöhe aktiv. Eine schmale
     unsichtbare Brücke hält das Menü beim Weg ins Dropdown dennoch offen. */
  .nav-links>li.has-mega-menu{
    position:relative;
    align-self:center;
    height:44px;
  }
  .nav-links>li.has-mega-menu::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    right:0;
    height:14px;
  }
  .nav-links>li.has-mega-menu>a{
    height:44px;
  }

  /* Breites, viewport-sicheres Mega-Menü. JavaScript richtet die Box mittig
     im sichtbaren Browserfenster aus, auch wenn der Auslöser weiter rechts
     oder links in der Navigation steht. Ohne JavaScript bleibt die bisherige
     zentrierte Fallback-Position erhalten. */
  .nav-links>li.has-mega-menu>.sub-menu{
    top:calc(100% + 14px);
    left:50%;
    right:auto;
    width:min(1180px,calc(100vw - 32px));
    max-width:1180px;
    padding:.9rem;
    gap:.9rem;
    transform:translate(-50%,8px);
  }
  .nav-links>li.has-mega-menu.dsmm-mega-positioned>.sub-menu{
    transform:translateY(8px);
  }
  .nav-links>li.has-mega-menu:hover>.sub-menu,
  .nav-links.dsmm-keyboard-mode>li.has-mega-menu:focus-within>.sub-menu{
    transform:translate(-50%,0);
  }
  .nav-links>li.has-mega-menu.dsmm-mega-positioned:hover>.sub-menu,
  .nav-links.dsmm-keyboard-mode>li.has-mega-menu.dsmm-mega-positioned:focus-within>.sub-menu{
    transform:translateY(0);
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group{
    padding:.9rem;
  }
}

/* Kleine Logos oder Icons auf Ebene 3. Rechteckige Dateien werden vollständig
   innerhalb einer kompakten Fläche dargestellt und niemals beschnitten. */
.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>.mega-menu-topic--has-logo>a{
  display:flex;
  align-items:center;
  gap:.58rem;
}
.mega-menu-topic__logo{
  display:flex;
  flex:0 0 48px;
  align-items:center;
  justify-content:flex-start;
  width:48px;
  height:30px;
}
.mega-menu-topic__logo-image{
  display:block;
  width:auto;
  height:auto;
  max-width:48px;
  max-height:30px;
  object-fit:contain;
  object-position:left center;
}
.mega-menu-topic__title{
  display:block;
  min-width:0;
}

/* Allgemeine barrierefreie Ausblendung für Titel auf Ebene 2 und 3. */
.dsmm-visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media(max-width:920px){
  .mega-menu-topic__logo{
    flex-basis:42px;
    width:42px;
    height:27px;
  }
  .mega-menu-topic__logo-image{
    max-width:42px;
    max-height:27px;
  }
}


/* --------------------------------------------------------------------------
   Version 1.5.1: Maus- und Tastaturfokus sauber trennen
   -------------------------------------------------------------------------- */
@media(min-width:921px){
  /* Ein per Mausklick fokussierter Hauptpunkt darf nicht dauerhaft offen
     bleiben, sobald der Mauszeiger zu einem anderen Menüpunkt wandert.
     focus-within öffnet Untermenüs deshalb nur im expliziten Tastaturmodus. */
  .nav-links:not(.dsmm-keyboard-mode) li:focus-within:not(:hover)>.sub-menu{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  .nav-links:not(.dsmm-keyboard-mode) .menu-item-has-children:focus-within:not(:hover)>a::after{
    transform:translateY(-2px) rotate(45deg);
  }
}

/* --------------------------------------------------------------------------
   Version 1.5: breiteres Dropdown und flachere Inhaltsverteilung
   -------------------------------------------------------------------------- */
@media(min-width:1180px){
  /* Auf Standard-Desktopbreiten werden Themenblöcke innerhalb jeder
     Hauptspalte zweispaltig verteilt. Das reduziert die Gesamthöhe deutlich. */
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    column-gap:.7rem;
    row-gap:.25rem;
  }

  /* Direkte Themenlinks und Karten sollen ihre jeweilige Rasterzelle füllen. */
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li{
    min-width:0;
  }
}

/* --------------------------------------------------------------------------
   Version 1.5.2: getrennte Hover-Flächen für breite und kompakte Dropdowns
   -------------------------------------------------------------------------- */
@media(min-width:921px){
  /* Nur das Hauptmenü "Dienstleistungen" nutzt die breite, zentrierte Fläche. */
  .nav-links>li.has-mega-menu--wide>.sub-menu{
    width:min(1180px,calc(100vw - 32px));
    max-width:1180px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* Andere gruppierte Menüs bleiben lokal unter ihrem eigenen Auslöser. So
     reicht ihre aktive Hover-Fläche nicht mehr bis unter "Dienstleistungen". */
  .nav-links>li.has-mega-menu--compact>.sub-menu{
    left:0;
    right:auto;
    width:min(680px,calc(100vw - 32px));
    max-width:680px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    transform:translateY(8px);
  }
  .nav-links>li.has-mega-menu--compact:hover>.sub-menu,
  .nav-links.dsmm-keyboard-mode>li.has-mega-menu--compact:focus-within>.sub-menu{
    transform:translateY(0);
  }
  .nav-links>li.has-mega-menu--compact.dsmm-mega-positioned>.sub-menu{
    transform:translateY(8px);
  }
  .nav-links>li.has-mega-menu--compact.dsmm-mega-positioned:hover>.sub-menu,
  .nav-links.dsmm-keyboard-mode>li.has-mega-menu--compact.dsmm-mega-positioned:focus-within>.sub-menu{
    transform:translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Version 1.6.1: Top-Level-Dropdowns ausschließlich über den direkten Link
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  /* Die alte Pseudo-Brücke war Teil der Hover-Fläche des gesamten li. */
  .nav-links > li.has-mega-menu::after {
    display: none !important;
    content: none !important;
    pointer-events: none !important;
  }

  /* Nur der sichtbare Text/Pfeil des Hauptlinks ist der Auslöser. */
  .nav-links > li.has-mega-menu > a {
    align-self: center;
    width: auto;
    height: auto !important;
    min-height: 0;
    padding: .3rem .05rem !important;
  }

  /* li:hover darf ein Top-Level-Dropdown niemals selbst öffnen. */
  .nav-links > li.menu-item-has-children:hover > .sub-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Öffnen nur über die von JavaScript am direkten Link gesetzte Klasse
     oder im expliziten Tastaturmodus. */
  .nav-links > li.menu-item-has-children.dsmm-hover-open > .sub-menu,
  .nav-links.dsmm-keyboard-mode > li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .nav-links > li.menu-item-has-children:hover > a::after {
    transform: translateY(-2px) rotate(45deg) !important;
  }

  .nav-links > li.menu-item-has-children.dsmm-hover-open > a::after,
  .nav-links.dsmm-keyboard-mode > li.menu-item-has-children:focus-within > a::after {
    transform: translateY(1px) rotate(225deg) !important;
  }

  .nav-links > li.menu-item-has-children.dsmm-hover-open > .sub-menu {
    transform: translateY(0) !important;
  }

  .nav-links > li.has-mega-menu.dsmm-hover-open > .sub-menu {
    transform: translate(-50%, 0) !important;
  }

  .nav-links > li.has-mega-menu.dsmm-mega-positioned.dsmm-hover-open > .sub-menu,
  .nav-links > li.has-mega-menu--compact.dsmm-hover-open > .sub-menu,
  .nav-links > li.has-mega-menu--compact.dsmm-mega-positioned.dsmm-hover-open > .sub-menu {
    transform: translateY(0) !important;
  }
}

/* --------------------------------------------------------------------------
   Version 1.7.0: minimale, exakt begrenzte Desktop-Hitbox
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  /* Der umgebende Menüpunkt darf keinerlei unsichtbare Mausfläche bilden.
     Nur der direkte sichtbare Link und – im geöffneten Zustand – das
     zugehörige Dropdown empfangen Pointer-Ereignisse. */
  .nav-links > li.menu-item-has-children {
    height: 72px !important;
    align-self: auto !important;
    pointer-events: none !important;
  }

  .nav-links > li.menu-item-has-children::before,
  .nav-links > li.menu-item-has-children::after {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }

  /* Exakte Hitbox um Text und Pfeil. Kein flex-grow, keine volle Headerhöhe,
     keine unsichtbaren seitlichen Abstände. */
  .nav-links > li.menu-item-has-children > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: max-content !important;
    max-width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .22rem .08rem !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
  }

  /* Geschlossene Untermenüs sind niemals Teil der Trefferfläche. */
  .nav-links > li.menu-item-has-children > .sub-menu {
    pointer-events: none !important;
  }

  /* Nur die von JavaScript nach bestätigter Hover-Absicht gesetzte Klasse
     aktiviert die Dropdown-Fläche. */
  .nav-links > li.menu-item-has-children.dsmm-hover-open > .sub-menu,
  .nav-links.dsmm-keyboard-mode > li.menu-item-has-children:focus-within > .sub-menu {
    pointer-events: auto !important;
  }
}


/* --------------------------------------------------------------------------
   Version 1.7.1: sichtbares Dropdown bei weiterhin minimaler Link-Hitbox
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  /* Der Hauptpunkt bleibt ein normaler Layout- und Positionscontainer. Nur der
     direkte Link besitzt den Öffnungs-Listener; daher vergrößert der li die
     Auslösefläche nicht. pointer-events:none am Elternknoten wurde entfernt,
     weil es in einzelnen Browsern auch das sichtbare Dropdown blockierte. */
  .nav-links > li.menu-item-has-children {
    pointer-events: auto !important;
    height: 72px !important;
  }

  .nav-links > li.menu-item-has-children > a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    width: max-content !important;
    max-width: max-content !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: .22rem .08rem !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
  }

  /* Keine unsichtbare Brücke und kein Abstand zwischen Header und Dropdown. */
  .nav-links > li.has-mega-menu::before,
  .nav-links > li.has-mega-menu::after {
    content: none !important;
    display: none !important;
    pointer-events: none !important;
  }

  .nav-links > li.menu-item-has-children > .sub-menu {
    top: 100% !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Sichtbarkeit ausschließlich über die JS-Klasse oder Tastaturnavigation. */
  .nav-links > li.menu-item-has-children.dsmm-hover-open > .sub-menu,
  .nav-links.dsmm-keyboard-mode > li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Normale Dropdowns. */
  .nav-links > li.menu-item-has-children.dsmm-hover-open:not(.has-mega-menu) > .sub-menu,
  .nav-links.dsmm-keyboard-mode > li.menu-item-has-children:not(.has-mega-menu):focus-within > .sub-menu {
    transform: translateY(0) !important;
  }

  /* Breite Mega-Menüs ohne JS-Positionierung. */
  .nav-links > li.has-mega-menu--wide.dsmm-hover-open:not(.dsmm-mega-positioned) > .sub-menu,
  .nav-links.dsmm-keyboard-mode > li.has-mega-menu--wide:not(.dsmm-mega-positioned):focus-within > .sub-menu {
    transform: translate(-50%, 0) !important;
  }

  /* Von JS positionierte sowie kompakte Mega-Menüs. */
  .nav-links > li.has-mega-menu.dsmm-mega-positioned.dsmm-hover-open > .sub-menu,
  .nav-links > li.has-mega-menu--compact.dsmm-hover-open > .sub-menu,
  .nav-links.dsmm-keyboard-mode > li.has-mega-menu.dsmm-mega-positioned:focus-within > .sub-menu,
  .nav-links.dsmm-keyboard-mode > li.has-mega-menu--compact:focus-within > .sub-menu {
    transform: translateY(0) !important;
  }
}


/* --------------------------------------------------------------------------
   Version 1.8.0: geschlossene Menüs vollständig aus dem Trefferbereich nehmen
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  /* opacity:0 allein reicht nicht, weil verschachtelte Untermenüs eigene
     pointer-events:auto-Regeln besitzen. display:none und [hidden] entfernen
     den gesamten Dropdown-Baum zuverlässig aus Layout und Hit-Testing. */
  .nav-links > li.menu-item-has-children > .sub-menu,
  .nav-links > li.menu-item-has-children > .sub-menu[hidden] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Normale Top-Level-Dropdowns werden nur mit der expliziten JS-Klasse oder
     im Tastaturmodus wieder eingeblendet. */
  .nav-links > li.menu-item-has-children.dsmm-hover-open > .sub-menu:not([hidden]),
  .nav-links.dsmm-keyboard-mode > li.menu-item-has-children:focus-within > .sub-menu:not([hidden]) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Mega-Menüs benötigen ihr Grid-Layout. */
  .nav-links > li.has-mega-menu.dsmm-hover-open > .sub-menu:not([hidden]),
  .nav-links.dsmm-keyboard-mode > li.has-mega-menu:focus-within > .sub-menu:not([hidden]) {
    display: grid !important;
  }
}

/* --------------------------------------------------------------------------
   Version 1.9.0: dynamische Höhe und kompakter Spaltenfluss
   -------------------------------------------------------------------------- */
@media (min-width: 921px) {
  /* Das breite Menü nutzt den verfügbaren Bildschirm, wächst aber niemals
     unter den sichtbaren Viewport hinaus. Die Variable wird beim Öffnen per
     JavaScript anhand der tatsächlichen Headerposition gesetzt. */
  .nav-links > li.has-mega-menu--wide > .sub-menu {
    width: min(1480px, calc(100vw - 24px));
    max-width: 1480px;
    max-height: var(--dsmm-available-height, calc(100dvh - 88px));
    overflow: hidden;
    align-items: stretch;
  }

  /* Jede Marken-/Logogruppe erhält einen eigenen Inhalts-Scrollbereich.
     Dadurch bleiben Logo und Gruppenüberschrift sichtbar und nur die lange
     Leistungsliste scrollt. */
  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    max-height: calc(var(--dsmm-available-height, calc(100dvh - 88px)) - 1.8rem);
    overflow: hidden;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > a {
    flex: 0 0 auto;
  }

  /* CSS-Spalten vermeiden die hohen leeren Rasterzeilen, die bei
     unterschiedlich langen Themenkarten entstehen. */
  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu {
    display: block !important;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    columns: 2 190px;
    column-gap: .65rem;
    padding: .75rem .3rem .1rem 0;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu > li {
    display: inline-block;
    width: 100%;
    min-width: 0;
    margin: 0 0 .45rem;
    vertical-align: top;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu::-webkit-scrollbar {
    width: 8px;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu::-webkit-scrollbar-track {
    background: transparent;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu::-webkit-scrollbar-thumb {
    background: #c9c9c4;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu {
    scrollbar-width: thin;
    scrollbar-color: #c9c9c4 transparent;
  }

  /* Ein dezenter Rand zeigt nur dann an, dass in der Gruppe gescrollt werden
     kann, wenn JavaScript tatsächlich Überlauf feststellt. */
  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group.dsmm-group-scrollable > .sub-menu {
    padding-right: .55rem;
  }
}

@media (min-width: 1500px) {
  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu {
    columns: 3 180px;
  }
}

/* Bei niedrigen Browserfenstern werden Abstände zusätzlich verdichtet. */
@media (min-width: 921px) and (max-height: 820px) {
  .nav-links > li.has-mega-menu--wide > .sub-menu {
    padding: .65rem;
    gap: .65rem;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group {
    padding: .7rem;
    max-height: calc(var(--dsmm-available-height, calc(100dvh - 80px)) - 1.3rem);
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > a {
    padding-bottom: .65rem;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu {
    padding-top: .55rem;
    column-gap: .5rem;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu > li.menu-item-has-children {
    margin-bottom: .4rem;
    padding: .58rem .62rem .52rem;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu > li.menu-item-has-children > a {
    font-size: .84rem;
  }

  .nav-links > li.has-mega-menu--wide > .sub-menu > .mega-menu-group > .sub-menu > li.menu-item-has-children > .sub-menu a {
    padding-top: .42rem;
    padding-bottom: .42rem;
    font-size: .84rem;
  }
}


/* --------------------------------------------------------------------------
   Version 2.0.0: mobile Navigation / Mega-Menü sauber als Akkordeon
   -------------------------------------------------------------------------- */
@media (max-width: 920px){
  .nav-links{position:fixed!important;top:68px;left:12px;right:12px;width:auto!important;max-height:calc(100dvh - 82px)!important;padding:.65rem 1rem 1.1rem!important;background:#fff!important;border:1px solid var(--ds-border,#E8E8E6)!important;border-top:0!important;border-radius:0 0 18px 18px!important;box-shadow:0 18px 42px rgba(29,29,27,.16)!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:10001!important}
  body.admin-bar .nav-links{top:114px!important;max-height:calc(100dvh - 128px)!important}
  .nav-links>li{display:block!important;width:100%!important;height:auto!important;border-bottom:1px solid #ECECEA!important}
  .nav-links>li>a{display:flex!important;align-items:center!important;width:calc(100% - 52px)!important;max-width:none!important;height:auto!important;min-height:50px!important;padding:.86rem 0!important;white-space:normal!important;line-height:1.25!important;font-size:1rem!important}
  .submenu-toggle{top:.38rem!important;right:0!important;width:42px!important;height:42px!important;border-radius:10px!important;background:#F1F1EE!important}
  .nav-links .sub-menu,.nav-links li:hover>.sub-menu,.nav-links li:focus-within>.sub-menu{position:static!important;width:100%!important;min-width:0!important;max-width:none!important;max-height:none!important;margin:0 0 .65rem!important;padding:.25rem 0 .35rem .85rem!important;background:transparent!important;border:0!important;border-left:2px solid var(--ds-eukalyptus,#78B9A8)!important;border-radius:0!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;transition:none!important;overflow:visible!important}
  .nav-links .sub-menu{display:none!important}
  .nav-links .submenu-open>.sub-menu{display:block!important}
  .nav-links .sub-menu a{padding:.68rem .65rem!important;border-radius:8px!important;font-size:.94rem!important;line-height:1.3!important}
  .nav-links>li.has-mega-menu>.sub-menu,.nav-links>li.has-mega-menu:hover>.sub-menu,.nav-links.dsmm-keyboard-mode>li.has-mega-menu:focus-within>.sub-menu{display:none!important;grid-template-columns:1fr!important;gap:.75rem!important;margin:0 0 .7rem!important;padding:.45rem 0 .05rem!important;border-left:0!important}
  .nav-links>li.has-mega-menu.submenu-open>.sub-menu{display:grid!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group{display:block!important;margin:0!important;padding:.85rem!important;background:#F7F7F5!important;border:1px solid #E8E8E5!important;border-radius:12px!important;max-height:none!important;overflow:visible!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>a{display:flex!important;align-items:center!important;gap:.55rem!important;width:100%!important;padding:0 0 .65rem!important;border-bottom:1px solid #DEDEDB!important;font-size:.93rem!important;line-height:1.25!important}
  .mega-menu-group--has-logo>a{flex-direction:column!important;align-items:flex-start!important;gap:.38rem!important}
  .mega-menu-group__logo{min-height:34px!important}
  .mega-menu-group__logo-image{max-width:min(150px,100%)!important;max-height:34px!important}
  .mega-menu-group__icon{flex-basis:1.75rem!important;width:1.75rem!important;height:1.75rem!important;border-radius:7px!important;margin-right:.45rem!important}
  .mega-menu-group__icon svg{width:1rem!important;height:1rem!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu,.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group:hover>.sub-menu,.nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group:focus-within>.sub-menu{display:block!important;margin:0!important;padding:.55rem 0 0!important;border:0!important;columns:auto!important;max-height:none!important;overflow:visible!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li{display:block!important;width:100%!important;margin:0 0 .25rem!important;break-inside:auto!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu a{padding:.62rem .65rem!important;font-size:.92rem!important}
  .mega-menu-topic__logo{flex-basis:38px!important;width:38px!important;height:25px!important}
  .mega-menu-topic__logo-image{max-width:38px!important;max-height:25px!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children{margin:.25rem 0 .55rem!important;padding:.6rem!important;background:#fff!important;border:1px solid #E7E7E4!important;border-radius:10px!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>a{padding:0 2.6rem .55rem 0!important;border-bottom:1px solid #E7E7E4!important;font-size:.82rem!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.045em!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.submenu-toggle{display:grid!important;top:.45rem!important;right:.45rem!important;width:36px!important;height:36px!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.sub-menu{display:none!important;margin:.35rem 0 0!important;padding:.2rem 0 .05rem .55rem!important;border-left:2px solid var(--ds-eukalyptus,#78B9A8)!important}
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children.submenu-open>.sub-menu{display:block!important}
}

@media (max-width: 660px){
  .nav-links{top:64px!important;left:10px!important;right:10px!important;max-height:calc(100dvh - 74px)!important;padding:.55rem .9rem 1rem!important;border-radius:0 0 16px 16px!important}
  body.admin-bar .nav-links{top:110px!important;max-height:calc(100dvh - 120px)!important}
  .nav-links>li>a{font-size:.98rem!important;min-height:48px!important}
  .nav-links .sub-menu a{font-size:.92rem!important}
}


/* v2.0.1: Mega-Menü auf mobilen Geräten deaktivieren/ausblenden. */
@media (max-width:920px){
  .nav-links>li.has-mega-menu>.submenu-toggle{display:none!important}
  .nav-links>li.has-mega-menu>a{width:100%!important;padding-right:0!important}
  .nav-links>li.has-mega-menu>.sub-menu,
  .nav-links>li.has-mega-menu.submenu-open>.sub-menu,
  .nav-links>li.has-mega-menu:hover>.sub-menu,
  .nav-links.dsmm-keyboard-mode>li.has-mega-menu:focus-within>.sub-menu{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
}


/* --------------------------------------------------------------------------
   Version 2.0.2: Mobile ohne Pfeile; Desktop-Logos/Platzhalter angleichen
   -------------------------------------------------------------------------- */
@media (max-width: 920px){
  .nav-links .submenu-toggle,
  .nav-links>li.has-mega-menu>.submenu-toggle,
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>.sub-menu>li.menu-item-has-children>.submenu-toggle{
    display:none!important;
  }
  .nav-links>li>a,
  .nav-links>li.menu-item-has-children>a{
    width:100%!important;
    max-width:none!important;
    padding-right:0!important;
  }
  .nav-links .sub-menu,
  .nav-links .submenu-open>.sub-menu,
  .nav-links>li.has-mega-menu>.sub-menu,
  .nav-links>li.has-mega-menu.submenu-open>.sub-menu,
  .nav-links li:hover>.sub-menu,
  .nav-links li:focus-within>.sub-menu{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }
}

@media (min-width: 921px){
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group>a{
    min-height:58px;
    align-items:flex-start;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group--has-logo>a{
    justify-content:center;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group:not(.mega-menu-group--has-logo)>a{
    display:flex;
    align-items:center;
    min-height:58px;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group--has-topic-logos>.sub-menu>.mega-menu-topic:not(.mega-menu-topic--has-logo)>a{
    padding-left:calc(.75rem + 48px + .58rem)!important;
  }
  .nav-links>li.has-mega-menu>.sub-menu>.mega-menu-group--has-topic-logos>.sub-menu>.mega-menu-topic--has-logo>a{
    min-height:42px;
  }
}


/* --------------------------------------------------------------------------
   Version 2.0.3: Desktop-Mega-Menü luftiger und sauberer ausrichten
   -------------------------------------------------------------------------- */
@media (min-width: 921px){
  /* Kompakte Mega-Menüs bekommen real mehr Breite. Die tatsächliche Position
     wird weiterhin per JS im sichtbaren Viewport gehalten. */
  .nav-links > li.has-mega-menu--compact > .sub-menu{
    width:min(920px, calc(100vw - 32px)) !important;
    max-width:none !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:1rem !important;
    padding:1rem !important;
    align-items:stretch !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group{
    min-width:0 !important;
    padding:1.05rem !important;
    overflow:visible !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group > a{
    min-height:54px !important;
    padding-bottom:.85rem !important;
    align-items:center !important;
  }

  /* Innerhalb der kompakten Menüs keine Spalten-/Scroll-Logik verwenden.
     Dadurch werden Unterpunkte nicht mehr in zu kleine Kästen gepresst. */
  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group > .sub-menu{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.55rem !important;
    columns:auto !important;
    column-gap:normal !important;
    overflow:visible !important;
    max-height:none !important;
    padding:.85rem 0 0 !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group > .sub-menu > li{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    break-inside:auto !important;
    margin:0 !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group > .sub-menu > li.menu-item-has-children{
    padding:.78rem .82rem .7rem !important;
    border-radius:12px !important;
    overflow:visible !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group > .sub-menu > li.menu-item-has-children > a{
    display:flex !important;
    align-items:center !important;
    min-height:42px !important;
    gap:.68rem !important;
    padding:0 1.55rem .68rem 0 !important;
    line-height:1.22 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group > .sub-menu > li.menu-item-has-children > a::after{
    display:none !important;
    content:none !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group > .sub-menu > li.menu-item-has-children > .sub-menu{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.08rem !important;
    margin:.55rem 0 0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:visible !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group > .sub-menu > li.menu-item-has-children > .sub-menu a{
    min-height:0 !important;
    padding:.54rem 1.4rem .54rem .58rem !important;
    font-size:.9rem !important;
    line-height:1.28 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  /* Logos auf Ebene 3 erhalten in kompakten Menüs etwas mehr Luft. */
  .nav-links > li.has-mega-menu--compact .mega-menu-topic__logo{
    flex:0 0 72px !important;
    width:72px !important;
    height:42px !important;
    align-self:flex-start !important;
    justify-content:flex-start !important;
  }

  .nav-links > li.has-mega-menu--compact .mega-menu-topic__logo-image{
    max-width:72px !important;
    max-height:42px !important;
  }

  .nav-links > li.has-mega-menu--compact .mega-menu-topic__title{
    min-width:0 !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group--has-topic-logos > .sub-menu > .mega-menu-topic:not(.mega-menu-topic--has-logo) > a{
    padding-left:.58rem !important;
  }
}

@media (min-width: 921px) and (max-width: 1120px){
  .nav-links > li.has-mega-menu--compact > .sub-menu{
    grid-template-columns:1fr !important;
    width:min(560px, calc(100vw - 32px)) !important;
  }
}


/* --------------------------------------------------------------------------
   Version 2.0.4: Eigene Icons mit sichtbarer Überschrift wie Standardkarten
   -------------------------------------------------------------------------- */
@media (min-width: 921px){
  /* Wenn bei einer Gruppe ein eigenes Icon/Logo hinterlegt ist UND der
     Menütitel sichtbar bleibt, wird der Kopf wie beim Standard-Icon
     dargestellt: Icon links, Überschrift rechts, gleiche Schriftgröße. */
  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--logo-with-title > a{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.72rem !important;
    min-height:58px !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--logo-with-title .mega-menu-group__logo{
    flex:0 0 2.15rem !important;
    width:2.15rem !important;
    height:2.15rem !important;
    min-height:2.15rem !important;
    display:grid !important;
    place-items:center !important;
    justify-content:center !important;
    align-items:center !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--logo-with-title .mega-menu-group__logo-image{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:2.15rem !important;
    max-height:2.15rem !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--logo-with-title > a .mega-menu-group__title{
    display:block !important;
    font-size:1.05rem !important;
    line-height:1.12 !important;
    font-weight:900 !important;
    letter-spacing:.03em !important;
    color:var(--ds-graphit,#1D1D1B) !important;
    text-transform:uppercase !important;
  }

  /* Bei kompakten Menüs dieselbe Logik, aber minimal kompakter. */
  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group--logo-with-title > a{
    min-height:54px !important;
  }
}

@media (max-width: 920px){
  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--logo-with-title > a{
    flex-direction:row !important;
    align-items:center !important;
  }
}


/* --------------------------------------------------------------------------
   Version 2.0.5: Gruppenkopf mit eigenem Bild exakt wie Standard-Icon
   -------------------------------------------------------------------------- */
@media (min-width: 921px){
  /* Breite Regel ohne Abhängigkeit von der Zusatzklasse --logo-with-title.
     Manche Installationen hatten nur --has-logo im Markup; dadurch griff 2.0.4
     nicht zuverlässig. Alles mit eigenem Bild UND sichtbarem Titel wird nun wie
     ein Standard-Icon-Kopf behandelt: Icon links, Titel rechts, gleiche Größe. */
  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--has-logo:not(.mega-menu-group--logo-only) > a{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.72rem !important;
    min-height:58px !important;
    padding:0 0 .95rem !important;
    text-align:left !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group--has-logo:not(.mega-menu-group--logo-only) > a{
    min-height:54px !important;
    padding-bottom:.85rem !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--has-logo:not(.mega-menu-group--logo-only) > a .mega-menu-group__logo{
    display:grid !important;
    place-items:center !important;
    flex:0 0 2.15rem !important;
    width:2.15rem !important;
    min-width:2.15rem !important;
    height:2.15rem !important;
    min-height:2.15rem !important;
    max-width:2.15rem !important;
    margin:0 !important;
    align-self:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--has-logo:not(.mega-menu-group--logo-only) > a .mega-menu-group__logo-image{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:2.15rem !important;
    max-height:2.15rem !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--has-logo:not(.mega-menu-group--logo-only) > a .mega-menu-group__title:not(.mega-menu-group__title--visually-hidden):not(.dsmm-visually-hidden){
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    font-size:1.05rem !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    letter-spacing:.03em !important;
    text-transform:uppercase !important;
    color:var(--ds-graphit,#1D1D1B) !important;
    text-align:left !important;
  }

  /* Falls die Bilder auf Ebene 3 statt Ebene 2 hinterlegt sind, dürfen sie die
     Überschrift ebenfalls nicht verkleinern oder zentrieren. */
  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group > .sub-menu > .mega-menu-topic--has-logo > a{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group > .sub-menu > .mega-menu-topic--has-logo > a .mega-menu-topic__title:not(.dsmm-visually-hidden){
    display:block !important;
    min-width:0 !important;
    font-size:.9rem !important;
    line-height:1.22 !important;
    font-weight:800 !important;
    letter-spacing:.055em !important;
    text-transform:uppercase !important;
    color:var(--ds-graphit,#1D1D1B) !important;
    text-align:left !important;
  }
}


/* --------------------------------------------------------------------------
   Version 2.0.6: eigene Gruppenbilder endgültig als Standard-Icons behandeln
   -------------------------------------------------------------------------- */
@media (min-width: 921px){
  /* Sichtbare Bild-Icons auf Ebene 2 verwenden ab 2.0.6 dieselbe Struktur wie
     Standard-Icons: .mega-menu-group__icon + .mega-menu-group__title. Dadurch
     können ältere --has-logo-Regeln die Überschrift nicht mehr verkleinern. */
  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--image-icon > a{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.7rem !important;
    min-height:58px !important;
    padding:0 0 .95rem !important;
    border-bottom:1px solid #dededb !important;
    border-radius:0 !important;
    text-align:left !important;
    font-size:1.05rem !important;
    font-weight:900 !important;
    letter-spacing:.03em !important;
    text-transform:uppercase !important;
  }

  .nav-links > li.has-mega-menu--compact > .sub-menu > .mega-menu-group--image-icon > a{
    min-height:54px !important;
    padding-bottom:.85rem !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--image-icon > a .mega-menu-group__icon,
  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--image-icon > a .mega-menu-group__icon--image{
    display:grid !important;
    place-items:center !important;
    flex:0 0 2.15rem !important;
    width:2.15rem !important;
    min-width:2.15rem !important;
    height:2.15rem !important;
    min-height:2.15rem !important;
    max-width:2.15rem !important;
    margin:0 !important;
    border-radius:9px !important;
    background:var(--ds-graphit,#1D1D1B) !important;
    color:#fff !important;
    overflow:hidden !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--image-icon > a .mega-menu-group__icon img,
  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--image-icon > a .mega-menu-group__logo-image{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--image-icon > a .mega-menu-group__title{
    display:block !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    font-size:1.05rem !important;
    line-height:1.12 !important;
    font-weight:900 !important;
    letter-spacing:.03em !important;
    text-transform:uppercase !important;
    color:var(--ds-graphit,#1D1D1B) !important;
    text-align:left !important;
  }
}

@media (max-width: 920px){
  .nav-links > li.has-mega-menu > .sub-menu > .mega-menu-group--image-icon > a{
    flex-direction:row !important;
    align-items:center !important;
  }
}