/* ========================================
   MEGA-MENÜ CSS
   Stadtwerke Duisburg - Custom Styling
   ======================================== */
/* TOKENS */
:root {
  --nav-space-sm: 38px;
  --nav-space-xl: 110px;
}

html {
  scroll-padding-top: 160px;
}

/* ========================================
   #mainnavigation - Scrollbarer Container
   ======================================== */
#mainnavigation {
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 0;
  top: 100px;
}

@media (max-width: 1000px) {
  #mainnavigation {
    top: 50px;
    border-top: 1px solid #bfbfbf;
    max-height: calc(100vh - 104px);
  }
}

/* ========================================
   .mega-menu-nav-container - Layout
   ======================================== */
#mainnavigation .mega-menu-nav-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2.5rem;
  background-color: #efefef !important;
  color: #494847 !important;
  padding-left: var(--nav-space-xl);
  padding-right: var(--nav-space-xl);
  padding-top: 1rem;
  padding-bottom: 2rem;
}

@media (max-width: 1380px) {
  #mainnavigation .mega-menu-nav-container {
    padding-left: var(--nav-space-sm);
    padding-right: var(--nav-space-sm);
  }
}

/* Wir passen ins hier dem kleiner gewordenem MenuButton an */
@media (max-width: 1120px) {
  #mainnavigation .mega-menu-nav-container {
    padding-right: 60px;
  }
}

@media (max-width: 960px) {
  #mainnavigation .mega-menu-nav-container {
    padding-left: 2rem;
    padding-right: 2rem;
    flex-direction: column;
  }
}

/* ========================================
   .nav-link - Allgemeine Link-Styles
   ======================================== */
#mainnavigation ul li .nav-link {
  color: #494847 !important;
  padding-left: 0 !important;
  padding-bottom: 0;
}

#mainnavigation .nav-link {
  padding-left: 0 !important;
  color: #494847;
}

#mainnavigation .dropdown-nav li span {
  font-size: 1.2rem;
}

/* ========================================
   .mega-menu-nav-primary - Energie & Unternehmen
   ======================================== */
#mainnavigation .mega-menu-nav-container > .mega-menu-nav-primary {
  flex: 1 1 25%;
  min-width: 225px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.7rem;
}

#mainnavigation .mega-menu-nav-primary > .navbar-nav-energienavi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainnavigation .mega-menu-nav-primary > .navbar-nav-unternehmensnavi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ========================================
   .navbar-nav-other - Multi-Column Navigation
   ======================================== */
#mainnavigation .mega-menu-nav-container > .navbar-nav-other {
  flex: 1 0 50%;
  min-width: 540px;
  /* Multi-Column statt Flexbox – keine feste Höhe nötig! */
  display: block !important;
  /* Überschreibt die allgemeine ul-Regel */
  column-count: 2;
  column-gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 0.7rem;
}

/* Wenn Specialbox nicht existiert -> 4 Spaltig */

#mainnavigation .mega-menu-nav-container:not(:has(.mega-menu-nav-secondary)) .navbar-nav-other {
  column-count: 3;
  flex: 75%;
}

@media (max-width: 1670px) {
  #mainnavigation .mega-menu-nav-container:not(:has(.mega-menu-nav-secondary)) .navbar-nav-other {
    column-count: 2;
  }
}

@media (max-width: 900px) {
  #mainnavigation .mega-menu-nav-container:not(:has(.mega-menu-nav-secondary)) .navbar-nav-other {
    column-count: 1;
    display: block !important;
  }
}

@media (max-width: 1120px) {
  /* Von Multi-Column zu Flexbox (untereinander) */
  #mainnavigation .mega-menu-nav-container:not(:has(.mega-menu-nav-secondary)) .navbar-nav-other {
    display: flex !important;
    flex-direction: column;
    column-count: unset;
    min-width: unset;
    flex: 1 1 auto;
  }
}

/* Nav-Items in Other: nicht umbrechen lassen */
#mainnavigation .mega-menu-nav-container > .navbar-nav-other > .nav-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  /* Safari-Fallback */
  overflow: hidden;
  /* BFC: Chrome behandelt Element als atomare Box */
  margin-bottom: 0.25rem;
}

/* Safari-only: inline-block statt overflow für column-break fix */
@supports (hanging-punctuation: first) {
  #mainnavigation .mega-menu-nav-container > .navbar-nav-other > .nav-item {
    overflow: visible;
    display: inline-block;
    width: 100%;
  }
}

@media (max-width: 1270px) {
  /* Von Multi-Column zu Flexbox (untereinander) */
  #mainnavigation .mega-menu-nav-container:has(.mega-menu-nav-secondary) .navbar-nav-other {
    display: flex !important;
    flex-direction: column;
    column-count: unset;
    min-width: unset;
    flex: 1 1 auto;
  }
}

/* ========================================
   .mega-menu-nav-secondary - Sidebar (Wir für Duisburg)
   ======================================== */
#mainnavigation .mega-menu-nav-container > .mega-menu-nav-secondary {
  flex: 1 1 17%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 2px solid white;
  height: min-content;
}

#mainnavigation .mega-menu-special-box svg {
  width: 2rem;
  height: 2rem;
}

@media (max-width: 1270px) {
  #mainnavigation .mega-menu-nav-container > .mega-menu-nav-secondary {
    flex-shrink: 0;
  }
}

/* ----------------------------------------
   .mega-menu-certificates
   ---------------------------------------- */
#mainnavigation .mega-menu-nav-secondary > .mega-menu-certificates {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.3rem;
}

/* #mainnavigation .mega-menu-nav-secondary > .mega-menu-certificates .btn {
  border-color: #494847;
  background-color: transparent;
  color: #494847 !important;
  line-height: 1.3rem !important;
  font-size: 1.3rem;
  font-weight: 500;
  border-radius: 50px;
  padding-top: 12px;
  border: 2px solid #494847;
} */

#mainnavigation .mega-menu-certificates h2 {
  font-size: 1.5rem;
  text-align: start;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.5rem;
}

#mainnavigation .mega-menu-certificates > div {
  padding: 0 !important;
}

#mainnavigation .mega-menu-certificates .image {
  max-width: 30rem;
}

@media (max-width: 960px) {
  #mainnavigation .mega-menu-certificates .frame-container {
    max-width: unset;
  }
}

/* ========================================
   .nav-item & Dropdowns
   ======================================== */
/* Nav-Item: Row mit Wrap (Dropdown bricht um) */
#mainnavigation .mega-menu-nav-container .nav-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* Link nimmt verfügbaren Platz */
#mainnavigation .mega-menu-nav-container .nav-item > .nav-link-main {
  flex: 1 1 auto;
}

/* Toggle-Button (Pfeil) bleibt neben dem Link */
#mainnavigation .mega-menu-nav-container .nav-item > .nav-link-toggle {
  flex: 0 0 auto;
}

/* Dropdowns in Energienavi & Unternehmensnavi: versteckt */
#mainnavigation .mega-menu-nav-primary .dropdown-menu,
#mainnavigation .mega-menu-nav-primary .dropdown-menu-mega {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  flex: 0 0 100%;
  background-color: transparent;
  border: none;
}

/* Nur wenn .show Klasse aktiv: anzeigen als Flex */
#mainnavigation .mega-menu-nav-primary .dropdown-menu.show,
#mainnavigation .mega-menu-nav-primary .dropdown-menu-mega.show {
  display: flex;
  margin: 0;
}

/* Dropdown in Other-Nav: immer sichtbar */
#mainnavigation .mega-menu-nav-container .navbar-nav-other .dropdown-nav-always-open {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainnavigation .mega-menu-nav-container .dropdown-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainnavigation .mega-menu-nav-container ul {
  /* display: flex;
  flex-direction: column; */
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainnavigation
  .mega-menu-nav-container
  .mega-menu-nav-primary
  .navbar-nav-unternehmensnavi
  .dropdown-menu.dropdown-menu-mega.show {
  padding-left: 0;
}

#mainnavigation .mega-menu-nav-container .nav-link-dropdown {
  font-weight: 400 !important;
}

#mainnavigation .mega-menu-nav-container .dropdown-menu a,
#mainnavigation .mega-menu-nav-container .dropdown-menu-mega a,
#mainnavigation .mega-menu-nav-container .dropdown-nav a,
#mainnavigation .mega-menu-nav-container .dropdown-nav-always-open a {
  font-weight: 400 !important;
}

#mainnavigation .mega-menu-nav-container .nav-link-dropdown,
#mainnavigation .mega-menu-nav-container .dropdown-menu a,
#mainnavigation .mega-menu-nav-container .dropdown-menu-mega a,
#mainnavigation .mega-menu-nav-container .dropdown-nav a,
#mainnavigation .mega-menu-nav-container .dropdown-nav-always-open a {
  border-bottom: none !important;
}

#mainnavigation .mega-menu-nav-container li.nav-item {
  border: none;
  padding-left: 0 !important;
}

/* ========================================
   .mega-menu-middle-section
   ======================================== */
#mainnavigation .mega-menu-middle-section {
  padding-right: var(--nav-space-xl);
  padding-left: var(--nav-space-xl);
}

@media (max-width: 1380px) {
  #mainnavigation .mega-menu-middle-section {
    padding-right: var(--nav-space-sm);
    padding-left: var(--nav-space-sm);
  }
}

#mainnavigation .mega-menu-middle-section .container {
  height: unset;
}

@media (max-width: 1200px) {
  #mainnavigation .mega-menu-middle-section .container > div > div > div > div > div .row {
    flex-direction: column;
    row-gap: 2rem;
  }
}

#mainnavigation .mega-menu-middle-section div.container div.frame .frame-container {
  max-width: unset;
  font-size: clamp(0.95rem, 0.26rem + 0.9vw, 1.2rem);
}

@media (max-width: 960px) {
  #mainnavigation .mega-menu-middle-section div.container div.frame .frame-container {
    max-width: unset;
    font-size: 1.2rem;
  }
}

#mainnavigation .mega-menu-middle-section div.container div.frame .frame-container .frame-inner .row .ce-col div {
  padding-top: 0;
  padding-bottom: 0;
}

#mainnavigation
  .mega-menu-middle-section
  div.container
  div.frame
  .frame-container
  .frame-inner
  .row
  .ce-col
  div
  .textpic-text
  strong {
  font-size: 1.5rem;
  font-weight: 500;
  color: #494847;
}

/* ========================================
   .mega-menu-bottom-section
   ======================================== */
#mainnavigation .mega-menu-bottom-section {
  background-color: #4a4a4a !important;
  color: white !important;
  padding-left: var(--nav-space-xl);
  padding-right: var(--nav-space-xl);
  /* height: 115px; */
  padding-top: 1rem;
}

@media (max-width: 1380px) {
  #mainnavigation .mega-menu-bottom-section {
    padding-left: var(--nav-space-sm);
    padding-right: var(--nav-space-sm);
  }
}

/* MenüButton wird kleiner ab hier */
@media (max-width: 1120px) {
  #mainnavigation .mega-menu-bottom-section {
    padding-right: 60px;
  }
}

@media (max-width: 960px) {
  #mainnavigation .mega-menu-bottom-section {
    padding-right: 2rem;
  }
}

@media (max-width: 855px) {
  #mainnavigation .mega-menu-bottom-section {
    padding-top: 1rem;
  }
}

/* ----------------------------------------
   .mega-menu-bottom-section .container
   ---------------------------------------- */
/* Background transparent, damit der dunkelgraue Hintergrund sichtbar bleibt */
#mainnavigation .mega-menu-bottom-section .container {
  background: unset !important;
  height: unset !important;
}

#mainnavigation .mega-menu-bottom-section .container > div {
  padding: 0;
}

/* ----------------------------------------
   .mega-menu-bottom-section .row
   ---------------------------------------- */
#mainnavigation .mega-menu-bottom-section .container .row {
  gap: 2rem;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0;
}

#mainnavigation .mega-menu-bottom-section .container .ce-col .row {
  gap: 1rem;
  flex-wrap: nowrap;
  width: unset;
  margin: 0;
}

@media (max-width: 775px) {
  #mainnavigation .mega-menu-bottom-section .container .row {
    flex-direction: column;
  }
}

#mainnavigation .mega-menu-bottom-section .container .row > * {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 775px) {
  #mainnavigation .mega-menu-bottom-section .container .row > * {
    width: unset;
  }
}

#mainnavigation .mega-menu-bottom-section .container .row * {
  color: white;
  list-style: none;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 300;
}

#mainnavigation .mega-menu-bottom-section .container .row div:nth-child(n + 3) {
  display: none;
}

#mainnavigation .mega-menu-bottom-section .container .row .btn {
  border-color: white;
  background-color: transparent;
  color: white !important;
  line-height: 1.3rem !important;
  font-weight: 400;
  border-radius: 50px;
}

@media (max-width: 775px) {
  #mainnavigation .mega-menu-bottom-section .container .row .btn {
    width: 100%;
  }
}

#mainnavigation .themen .texticon-content {
  display: none;
}

/* ----------------------------------------
   .mega-menu-bottom-section .row ul - Multi-Column
   ---------------------------------------- */
#mainnavigation .mega-menu-bottom-section .container .row ul {
  padding: 0;
  margin: 0;
  display: block !important;
  column-count: 4;
  column-gap: 2.5rem;
}

@media (max-width: 1650px) {
  #mainnavigation .mega-menu-bottom-section .container .row ul {
    column-count: 3;
  }
}

@media (max-width: 1240px) {
  #mainnavigation .mega-menu-bottom-section .container .row ul {
    column-count: 2;
  }
}

@media (max-width: 1040px) {
  #mainnavigation .mega-menu-bottom-section .container .row ul {
    column-count: 1;
  }
}

#mainnavigation .mega-menu-bottom-section .container .row ul > li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  /* Safari-Fallback */
  overflow: hidden;
  /* BFC: Chrome behandelt Element als atomare Box */
}

/* Safari-only: inline-block statt overflow für column-break fix */
@supports (hanging-punctuation: first) {
  #mainnavigation .mega-menu-bottom-section .container .row ul > li {
    overflow: visible;
    display: inline-block;
    width: 100%;
  }
}

/* ----------------------------------------
   .mega-menu-bottom-section .row ul - Multi-Column - 50%/50%
   ---------------------------------------- */
#mainnavigation .mega-menu-bottom-section .container .col-md-6.themen .row .themenmen ul {
  column-count: 4;
}

@media (max-width: 2350px) {
  #mainnavigation .mega-menu-bottom-section .container .col-md-6.themen .row .themenmen ul {
    column-count: 3;
  }
}

@media (max-width: 1670px) {
  #mainnavigation .mega-menu-bottom-section .container .col-md-6.themen .row .themenmen ul {
    column-count: 2;
  }
}

@media (max-width: 1320px) {
  #mainnavigation .mega-menu-bottom-section .container .col-md-6.themen .row .themenmen ul {
    column-count: 1;
  }
}

/* ----------------------------------------
   .mega-menu-bottom-section .row ul - Multi-Column - 75%/25%
   ---------------------------------------- */
#mainnavigation .mega-menu-bottom-section .container .col-md-3.themen .row .themenmen ul {
  column-count: 1;
}

/* ----------------------------------------
   .mega-menu-bottom-section .row - Überschriften & Spalten
   ---------------------------------------- */
#mainnavigation .mega-menu-bottom-section .container .row h2 {
  text-align: start;
  border-bottom: 1px solid white;
}

#mainnavigation .mega-menu-bottom-section .container .row h2 span {
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  line-height: 3rem;
}

/* #mainnavigation .mega-menu-bottom-section .container .frame-inner > .row > div:first-child { */
/*   min-width: fit-content; */
/* } */

#mainnavigation .mega-menu-bottom-section .container .row > div:nth-child(2) {
  flex: 1 1 75%;
  /* min-width: 597px; */
}

#mainnavigation .mega-menu-bottom-section .container .row > div.ce-col.col-md-9 > div > div.ce-col.col-md-1 {
  padding-top: 0.5rem;
}

#mainnavigation .mega-menu-bottom-section .container .row > div.ce-col.col-md-3 .texticon-icon {
  padding-top: 0.5rem;
}

@media (max-width: 775px) {
  #mainnavigation .mega-menu-bottom-section .container .row .texticon-icon {
    display: none;
  }

  #mainnavigation .mega-menu-bottom-section .container .row > div.ce-col.col-md-1 {
    display: none;
  }
}

#mainnavigation .mega-menu-bottom-section svg {
  width: 4rem;
  height: 4rem;
}

#mainnavigation .mega-menu-bottom-section .texticon-icon .texticon-inner-icon {
  width: fit-content;
  height: fit-content;
}

/* ----------------------------------------
   .mega-menu-bottom-section .frame
   ---------------------------------------- */
#mainnavigation .mega-menu-bottom-section .frame a:not([class]) {
  color: white !important;
  white-space: nowrap;
}

#mainnavigation .mega-menu-bottom-section .frame-container-default {
  max-width: unset !important;
}

/* ========================================
   .nav-item-divider & .nav-link-main
   ======================================== */
#mainnavigation .mega-menu-nav-primary .nav-item-divider,
#mainnavigation .navbar-nav-other .nav-item-divider,
#mainnavigation .mega-menu-special-box .nav-item-divider {
  flex: 0 0 100%;
  height: 0;
  border-bottom: 1px solid #ccc;
  margin: 0.25rem 0;
}

#mainnavigation .mega-menu-nav-primary > ul > .nav-item > .nav-link-main,
#mainnavigation .navbar-nav-other > .nav-item > .nav-link-main,
#mainnavigation .mega-menu-special-box > .nav-item > .nav-link-main {
  font-size: 1.5rem;
  font-weight: 500;
}

/* ----------------------------------------
   .nav-link-main:before - Hover-Linie
   ---------------------------------------- */
.navbar-mainnavigation .nav-link.nav-link-main:before {
  top: 46px;
}

#mainnavigation div.mega-menu-special-box .nav-link.nav-link-main:before {
  left: 0;
  right: 0;
  top: 39px;
}

/* ========================================
   Allgemein
   ======================================== */
#mainnavigation .bg-white .container {
  background-color: white;
}

#mainnavigation .mega-menu-certificates h2 span::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 6px;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: top;
  /* background-size: contain; */
  background-image: url("/fileadmin/Bilder/Allgemein/icons/certificate-solid.svg");
}

#mainnavigation .textpic.textpic-left {
  gap: 1rem;
  justify-content: center;
}

/* ========================================
   === ÄNDERUNGEN =========================
   ======================================== */

/* Buttons: kein Zeilenumbruch, Standardbreite */
#mainnavigation .btn {
  /* white-space: nowrap; */
  min-width: 245px;
}

/* Button-Container: Mindestbreite damit Button nicht abgeschnitten wird */
#mainnavigation .mega-menu-bottom-section .ce-col.col-md-9 .texticon-content {
  /* min-width: 245px; */
  flex: 1;
}

@media (max-width: 775px) {
  #mainnavigation .mega-menu-bottom-section .ce-col.col-md-9 .texticon-content {
    width: 100%;
  }
}

#mainnavigation .textpic-item.textpic-text {
  /* min-width: 245px; */
}

/* Button-Ausrichtung: Flex-Kette durch Bootstrap-Package-Wrapper */
#mainnavigation .mega-menu-middle-section .row > .ce-col {
  display: flex;
  flex-direction: column;
}

#mainnavigation .mega-menu-middle-section .row > .ce-col > .frame,
#mainnavigation .mega-menu-middle-section .row > .ce-col > .frame > .frame-group-container,
#mainnavigation .mega-menu-middle-section .row > .ce-col > .frame > .frame-group-container > .frame-group-inner,
#mainnavigation
  .mega-menu-middle-section
  .row
  > .ce-col
  > .frame
  > .frame-group-container
  > .frame-group-inner
  > .frame-container,
#mainnavigation
  .mega-menu-middle-section
  .row
  > .ce-col
  > .frame
  > .frame-group-container
  > .frame-group-inner
  > .frame-container
  > .frame-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#mainnavigation .mega-menu-middle-section .textpic.textpic-left {
  align-items: stretch;
  flex: 1;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
}

@media (max-width: 668px) {
  #mainnavigation .mega-menu-middle-section .frame-inner .textpic.textpic-left {
    flex-direction: column !important;
  }

  #mainnavigation .mega-menu-middle-section .frame-inner .textpic-item.textpic-gallery {
    /* width: unset !important; */
    width: 100%;
  }
}

@media (max-width: 960px) {
  #mainnavigation .mega-menu-middle-section .textpic.textpic-left {
    flex-direction: row !important;
  }

  #mainnavigation .mega-menu-middle-section .textpic-item.textpic-gallery {
    /* width: unset !important; */
    width: calc(50% - (40px / 2));
  }
}

@media (min-width: 960px) and (max-width: 1280px) {
  #mainnavigation .mega-menu-middle-section .textpic.textpic-left {
    flex-direction: column;
  }

  #mainnavigation .mega-menu-middle-section .textpic-item.textpic-gallery {
    width: 100% !important;
  }
}

#mainnavigation .mega-menu-middle-section .textpic-item.textpic-text {
  display: flex;
  flex-direction: column;
  flex: 1;
}

@media (max-width: 1280px) {
  #mainnavigation .mega-menu-middle-section .textpic-item.textpic-text {
    width: unset;
  }
}

#mainnavigation .mega-menu-middle-section .textpic-item.textpic-text p:last-child {
  margin-top: auto;
}

/* Middle-Section: Text & Button zentriert wenn Bild über Text springt */
@media (max-width: 480px) {
  #mainnavigation .mega-menu-middle-section .textpic-item.textpic-text {
    align-items: center;
    text-align: center;
  }
}

/* Bottom-Section: c13403 texticon-left auf Flexbox umstellen → Icon links vom Text */
#mainnavigation .mega-menu-bottom-section .ce-col.col-md-9 .texticon-left {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  min-width: 245px;
}

@media (max-width: 775px) {
  #mainnavigation .mega-menu-bottom-section .ce-col.col-md-9 .texticon-left {
    width: 100%;
  }
}

#mainnavigation .mega-menu-bottom-section .ce-col.col-md-9 .texticon-left::after {
  content: none;
}

#mainnavigation .mega-menu-bottom-section .ce-col.col-md-9 .texticon-left .texticon-icon {
  float: none;
  flex-shrink: 0;
  margin-left: 0;
  padding-top: 0.5rem;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 775px) {
  #mainnavigation .mega-menu-bottom-section .ce-col.col-md-9 .texticon-left .texticon-icon {
    display: none;
  }
}

/* Bottom-Section: GitHub-SVG-Spalte auf SVG-Breite schrumpfen */
#mainnavigation .mega-menu-bottom-section .row > .ce-col.col-md-1 {
  flex: 0 1 auto;
  width: fit-content;
  padding-left: 0;
  padding-right: 0;
}

/* Middle-Section: Stacking ab 960px statt Bootstrap-Standard 768px */
@media (max-width: 960px) {
  #mainnavigation .mega-menu-middle-section .row > .ce-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #mainnavigation .mega-menu-middle-section .textpic-item.textpic-text {
    justify-content: center;
  }

  #mainnavigation .mega-menu-middle-section .textpic-item.textpic-text p:last-child {
    margin-top: 0;
  }
}

@media (min-width: 960px) {
  #mainnavigation .mega-menu-middle-section .textpic-item.textpic-gallery {
    width: calc(40% - (40px / 2));
  }
}


/* Bilder Styles */
#mainnavigation figure.image img {
  border-radius: 20px;
}