/**
 * Theme: Modern
 * Zusätzliche Styles für das neue Design.
 * Die Basis (app.css, style.css) wird weiterhin geladen.
 * Überschreiben Sie hier Layout, Typografie, Abstände etc.
 */

/* Sichtbarer Unterschied zum Default-Theme (zum Testen des Theme-Wechsels) */
body.theme-modern .header { border-bottom: 3px solid var(--blue); }
body.theme-modern .search-card { border-radius: 16px; }

/* Topbar (alle Viewports): Telefon + Top-Links links, Sprachschalter rechts, eine Zeile */
body.theme-modern .topbar .inner,
body.theme-modern .topbar .header-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
body.theme-modern .topbar .links {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px 18px;
  flex: 1 1 auto;
  min-width: 0;
}
body.theme-modern .topbar .topbar-links-scroll {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 12px 18px;
}
body.theme-modern .topbar .topbar-cms-links {
  margin-left: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 18px;
  flex-shrink: 0;
}
body.theme-modern .topbar .lang-dd {
  margin-left: 12px;
  flex-shrink: 0;
}

/* Desktop: Schließen-Button ausblenden – nur für Mobile-Drawer */
@media (min-width: 981px) {
  body.theme-modern .header .nav-close-btn {
    display: none !important;
  }
  .mega-mobile-footer {
    display: none !important;
  }
}

/* ========== Mobile-Menü (movingimage-Style mit Theme-Farben) ========== */
@media (max-width: 980px) {
  /* Topbar: eine Zeile, links Telefon/Impressum/AGB, rechts Sprache (Padding siehe layout_top) */
  body.theme-modern .topbar .inner,
  body.theme-modern .topbar .header-inner {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  body.theme-modern .topbar {
    font-size: 12px;
  }
  body.theme-modern .topbar .links {
    gap: 8px 14px;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    text-align: left;
    overflow: visible;
  }
  body.theme-modern .topbar .links .topbar-links-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 8px 14px;
  }
  body.theme-modern .topbar .topbar-links-scroll .topbar-phone,
  body.theme-modern .topbar .links a,
  body.theme-modern .topbar .topbar-cms-links,
  body.theme-modern .topbar .topbar-cms-links .topbar-dd {
    white-space: nowrap;
    flex-shrink: 0;
  }
  body.theme-modern .lang-btn {
    padding: 5px 8px;
    font-size: 12px;
  }
  @media (max-width: 620px) {
    body.theme-modern .topbar { font-size: 11px; }
    body.theme-modern .topbar .links { gap: 6px 10px; }
    body.theme-modern .topbar .links .topbar-links-scroll { gap: 6px 10px; }
    body.theme-modern .lang-btn { padding: 4px 6px; font-size: 11px; }
  }

  /* Header: Logo links, Hamburger rechts – mit Abständen zum Rand */
  body.theme-modern .header .inner,
  body.theme-modern .header .header-inner {
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Logo: Abstand zum linken Rand */
  body.theme-modern .header .inner .brand {
    flex-shrink: 0;
    margin-right: 12px;
  }
  /* Menü-Icon: Abstand zum rechten Rand */
  body.theme-modern .header .inner .nav-toggle {
    flex-shrink: 0;
  }
  /* Logo auf Mobile */
  body.theme-modern .brand img {
    height: 44px !important;
  }
  body.theme-modern .site-header-wrap.is-scrolled .brand img {
    height: 44px !important;
  }
  body.theme-modern .brand .brand-text {
    font-size: 1.2rem;
  }
  /* Hamburger: kleiner, rechts */
  body.theme-modern .nav-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    background: #e2e8f0;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #cbd5e1;
    transition: background .2s, border-color .2s;
    box-shadow: 0 2px 6px rgba(15,35,60,.06);
    flex-shrink: 0;
    box-sizing: border-box;
  }
  body.theme-modern .nav-toggle:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }
  body.theme-modern .nav-toggle .nav-toggle-bar {
    width: 20px;
    height: 2px;
    background: #0f172a;
    border-radius: 1px;
  }
  body.theme-modern .nav-toggle:hover {
    background: #cbd5e1;
    border-color: #94a3b8;
    box-shadow: 0 2px 8px rgba(15,35,60,.08);
  }
  /* Schließen (X): heller Hintergrund */
  body.theme-modern .nav-toggle[aria-expanded="true"] {
    background: #fff;
    border: 1px solid #94a3b8;
    box-shadow: 0 2px 10px rgba(15,35,60,.1);
  }
  body.theme-modern .nav-toggle[aria-expanded="true"] .nav-toggle-bar {
    background: #0f172a;
  }
  body.theme-modern .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.theme-modern .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
  body.theme-modern .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /*
   * Schließen außerhalb von .nav (kein transform-Vorfahre): position:fixed bezieht sich auf den Viewport.
   * Zuvor lag der Button in .nav → fixed wirkte relativ zum transformierten Drawer → X oft unsichtbar.
   */
  body.theme-modern .header .nav-close-btn {
    display: none;
    box-sizing: border-box;
  }
  body.theme-modern .header.nav-open .nav-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid rgba(15, 23, 42, 0.22);
    border-radius: 12px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    z-index: 125;
    box-shadow: 0 4px 18px rgba(15, 35, 60, 0.18);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
  }
  body.theme-modern .header.nav-open .nav-close-btn:hover {
    background: #f1f5f9;
    color: var(--blue);
    border-color: var(--blue, #1e4194);
  }
  body.theme-modern .header.nav-open .nav-close-btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }
  body.theme-modern .header.nav-open .nav-close-btn__icon {
    display: block;
    font-size: 1.85rem;
    font-weight: 300;
    line-height: 0.85;
    margin-top: -2px;
  }
  /* Hamburger ausblenden wenn Menü offen (Schließen-Button im Menü sichtbar) */
  body.theme-modern .header.nav-open .nav-toggle {
    visibility: hidden;
    pointer-events: none;
  }
  /* Topbar-„Informationen“/-Links im Drawer: dezenter, kompakter (sekundär zur Hauptnav) */
  body.theme-modern .header.nav-open .nav .nav-topbar-drawer {
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    max-width: 100%;
  }
  body.theme-modern .header.nav-open .nav .nav-topbar-drawer .nav-pill,
  body.theme-modern .header.nav-open .nav .nav-topbar-drawer .nav-topbar-mobile-dd-toggle {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    margin-bottom: 6px;
    border-radius: 10px !important;
  }
  body.theme-modern .header.nav-open .nav .nav-topbar-drawer .nav-topbar-mobile-dd-toggle .nav-topbar-mobile-dd-label {
    font-size: 0.75rem !important;
    font-weight: 600;
  }
  body.theme-modern .header.nav-open .nav .nav-topbar-drawer .nav-topbar-mobile-dd-chevron {
    font-size: 0.65em;
    opacity: 0.85;
  }
  body.theme-modern .header.nav-open .nav .nav-topbar-drawer .nav-topbar-mobile-dd-panel {
    margin-top: 4px;
    padding: 4px;
  }
  body.theme-modern .header.nav-open .nav .nav-topbar-drawer .nav-topbar-mobile-dd-link {
    padding: 8px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
  }
  body.theme-modern .header.nav-open .nav .nav-topbar-drawer .nav-item {
    margin-bottom: 6px !important;
    border-radius: 10px !important;
    overflow: visible !important;
  }
  body.theme-modern .nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    /* Volle Viewport-Höhe, Breite begrenzen – kein horizontaler Seiten-Overflow */
    width: min(380px, calc(100vw - 16px));
    max-width: min(380px, 100%);
    left: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: -16px 0 56px rgba(15, 35, 60, 0.18);
    border-left: 1px solid rgba(226, 232, 240, 0.95);
    flex-direction: column;
    align-items: stretch;
    align-content: flex-start;
    padding: max(88px, calc(env(safe-area-inset-top, 0px) + 68px)) max(16px, env(safe-area-inset-right, 0px)) max(28px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    box-sizing: border-box;
    min-width: 0;
    transform: translate3d(100%, 0, 0);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s;
    will-change: transform;
  }
  body.theme-modern .header.nav-open .nav {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    body.theme-modern .nav {
      transition: none;
    }
  }
  /* Verhindert, dass ein geöffnetes Mega-Menü die übrigen Punkte nach rechts „schiebt“ */
  body.theme-modern .header.nav-open .nav > a.nav-pill,
  body.theme-modern .header.nav-open .nav > .nav-btn,
  body.theme-modern .header.nav-open .nav > .nav-drawer-action-wrap,
  body.theme-modern .header.nav-open .nav > .nav-item {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Shop + medentis: unten andocken, schmaler — verhindert horizontales Überlaufen auf schmalen Viewports */
  body.theme-modern .header.nav-open .nav > .nav-drawer-action-wrap {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    flex-shrink: 0;
  }
  body.theme-modern .nav .nav-drawer-action-wrap .nav-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px;
    margin-bottom: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    justify-content: center;
    gap: 8px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.theme-modern .nav .nav-item.mega {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Kategorie-Header: hellgrauer Hintergrund, abgerundet (movingimage-Style) */
  body.theme-modern .nav .nav-item,
  body.theme-modern .nav > a.nav-pill {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 10px;
    border-radius: 14px;
    overflow: hidden;
    background: #f1f5f9;
    box-sizing: border-box;
  }
  body.theme-modern .nav > a.nav-pill {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 16px 18px;
    text-decoration: none;
    font-weight: 800;
    color: #334155;
    box-sizing: border-box;
  }
  /* Drawer offen: klare Lesbarkeit — Hover nie weiße Schrift auf hellem Chip-Hintergrund */
  @media (hover: hover) and (pointer: fine) {
    body.theme-modern .header.nav-open .nav > a.nav-pill:hover {
      background: #e2e8f0 !important;
      color: #0f172a !important;
    }
    body.theme-modern .header.nav-open .nav > a.nav-pill:hover .menu-item-icon {
      color: #0f172a !important;
      opacity: 0.85;
    }
  }
  body.theme-modern .header.nav-open .nav > a.nav-pill:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }
  body.theme-modern .nav .nav-item.mega .nav-pill,
  body.theme-modern .nav .nav-item:not(.mega) .nav-pill {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    padding: 16px 18px;
    background: #f1f5f9;
    border: none;
    border-radius: 14px;
    font-weight: 800;
    color: #334155;
    text-align: left;
    box-sizing: border-box;
  }
  body.theme-modern .header.nav-open .nav .nav-item .nav-pill:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }
  /* Mega- & Topbar-Zeilen im Drawer: einheitlicher Hover (dunkle Schrift) */
  @media (hover: hover) {
    body.theme-modern .header.nav-open .nav .nav-item.mega:not(.open) .nav-pill:hover,
    body.theme-modern .header.nav-open .nav .nav-item.nav-flyout:not(.open) .nav-pill:hover,
    body.theme-modern .header.nav-open .nav .nav-item:not(.mega):not(.nav-flyout) .nav-pill:hover,
    body.theme-modern .header.nav-open .nav .nav-topbar-mobile-dd:not(.open) .nav-pill:hover {
      color: #0f172a !important;
      background: #e2e8f0 !important;
    }
  }
  body.theme-modern .nav .nav-item.mega.open .nav-pill {
    background: #e2e8f0 !important;
    color: #0f172a !important;
  }
  body.theme-modern .nav .nav-item.nav-flyout.open .nav-pill {
    background: #e2e8f0 !important;
    color: #0f172a !important;
  }
  body.theme-modern .nav .nav-item.nav-topbar-mobile-dd.open .nav-pill {
    background: #e2e8f0 !important;
    color: #0f172a !important;
  }
  body.theme-modern .nav .nav-item.mega.open .nav-pill:hover,
  body.theme-modern .nav .nav-item.mega.open .nav-pill:focus-visible,
  body.theme-modern .nav .nav-item.nav-flyout.open .nav-pill:hover,
  body.theme-modern .nav .nav-item.nav-flyout.open .nav-pill:focus-visible {
    background: #dbeafe !important;
    color: #0f172a !important;
  }
  body.theme-modern .nav .nav-item.mega.open .nav-pill .menu-item-icon,
  body.theme-modern .nav .nav-item.nav-flyout.open .nav-pill .menu-item-icon {
    color: var(--blue, #1e4194) !important;
    opacity: 1;
  }
  body.theme-modern .nav .nav-item.mega .nav-pill::after {
    content: "+";
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    color: var(--blue, #1e4194);
    opacity: 1;
    transition: color .2s ease, transform .2s ease;
    flex-shrink: 0;
    margin-left: 10px;
  }
  body.theme-modern .nav .nav-item.mega.open .nav-pill::after {
    content: "\2212";
    transform: none;
  }
  body.theme-modern .nav .nav-item.nav-flyout .nav-pill::after {
    content: "+";
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    color: var(--blue, #1e4194);
    opacity: 1;
    transition: color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 10px;
  }
  body.theme-modern .nav .nav-item.nav-flyout.open .nav-pill::after {
    content: "\2212";
    transform: none;
  }
  @media (min-width: 981px) {
    @media (hover: hover) and (pointer: fine) {
      body.theme-modern .nav .nav-item.mega .nav-pill:hover::after,
      body.theme-modern .nav .nav-item.mega .nav-pill:focus-visible::after,
      body.theme-modern .nav .nav-item.nav-flyout .nav-pill:hover::after,
      body.theme-modern .nav .nav-item.nav-flyout .nav-pill:focus-visible::after {
        color: #fff !important;
      }
    }
    body.theme-modern .nav .nav-item.mega > .nav-pill.is-current::after,
    body.theme-modern .nav .nav-item.mega > .nav-pill.is-current-branch::after,
    body.theme-modern .nav .nav-item.nav-flyout > .nav-pill.is-current::after,
    body.theme-modern .nav .nav-item.nav-flyout > .nav-pill.is-current-branch::after,
    body.theme-modern .nav .nav-item.mega.open > .nav-pill::after,
    body.theme-modern .nav .nav-item.nav-flyout.open > .nav-pill::after {
      color: #fff !important;
    }
  }
  body.theme-modern .nav .nav-btn {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    padding: 16px 18px;
    border-radius: 14px;
    margin-bottom: 10px;
    background: var(--blue);
    color: #fff;
    box-sizing: border-box;
  }
  body.theme-modern .header.nav-open .nav .nav-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* Mega-Panel: Accordion-Inhalt (kein Desktop-min-width / kein absolute) */
  body.theme-modern .nav .mega-panel {
    position: static !important;
    left: auto !important;
    top: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none;
    padding: 0 0 14px;
    margin: 0;
    background: transparent;
    border-radius: 0 0 14px 14px;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  /* Nur das Untermenü des geöffneten Hauptpunkts (kein „Überlagern“ mehrerer Mega-Menüs) */
  body.theme-modern .nav .nav-item.mega:not(.open) .mega-panel {
    display: none !important;
  }
  body.theme-modern .nav .nav-item.mega.open .mega-panel {
    display: block !important;
    max-height: min(52vh, 440px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  body.theme-modern .nav .mega-grid {
    grid-template-columns: 1fr !important;
    gap: 0;
    padding: 0 14px 10px;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  body.theme-modern .nav .mega-left {
    background: transparent;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  body.theme-modern .nav .mega-tab {
    width: 100%;
    flex: 0 0 auto;
    min-height: 44px;
    text-align: left;
    padding: 12px 14px 12px 32px;
    border-radius: 10px;
    margin-bottom: 0;
    position: relative;
    white-space: normal;
    box-sizing: border-box;
    max-width: 100%;
  }
  body.theme-modern .nav .mega-tab:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
  }
  body.theme-modern .nav .mega-tab::before {
    content: "→";
    position: absolute;
    left: 14px;
    font-size: 14px;
    color: var(--blue);
    opacity: .9;
  }
  body.theme-modern .nav .mega-tab.active {
    background: #fff;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(15,23,42,.08);
    border: 1px solid #e8eefc;
  }
  body.theme-modern .nav .mega-tab.active::before {
    color: var(--blue);
  }
  /* Aufgeklapptes Mega: linke Einträge bei Hover weiß (auch Tablet mit grobem Zeiger, nicht nur „feine Maus“) */
  @media (hover: hover) {
    body.theme-modern .nav .mega-tab:hover,
    body.theme-modern .nav .mega-tab:focus-visible {
      background: linear-gradient(90deg, var(--blue) 0%, #153a7a 100%);
      color: #fff !important;
    }
    body.theme-modern .nav .mega-tab:hover::before,
    body.theme-modern .nav .mega-tab:focus-visible::before {
      color: #fff !important;
    }
    body.theme-modern .nav .mega-tab.active:hover,
    body.theme-modern .nav .mega-tab.active:focus-visible {
      background: linear-gradient(90deg, var(--blue) 0%, #153a7a 100%);
      color: #fff !important;
      border-color: transparent;
      box-shadow: 0 6px 18px rgba(30, 65, 148, 0.35);
    }
    body.theme-modern .nav .mega-tab.active:hover::before,
    body.theme-modern .nav .mega-tab.active:focus-visible::before {
      color: #fff !important;
    }
  }
  /* Touch ohne Hover: kurz gleiche Kontrast-Farbe beim Tippen */
  @media (hover: none) {
    body.theme-modern .nav .nav-item.mega.open .mega-panel .mega-tab:active {
      background: linear-gradient(90deg, var(--blue) 0%, #153a7a 100%);
      color: #fff !important;
    }
    body.theme-modern .nav .nav-item.mega.open .mega-panel .mega-tab:active::before {
      color: #fff !important;
    }
  }

  /* Komplettlösung-Card: dunkler Hintergrund (movingimage-Style) */
  body.theme-modern .nav .mega-right {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Karten untereinander: kein horizontales „Wegschieben“ der Hauptmenüpunkte */
  body.theme-modern .nav .mega-cards {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-x: hidden;
    gap: 10px;
    padding-bottom: 6px;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.theme-modern .nav .mega-right .mega-cards:first-of-type .mega-card:first-child.mega-card--rich {
    background: transparent;
    border: none;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
  }
  body.theme-modern .nav .mega-right .mega-cards:first-of-type .mega-card:first-child .mega-card__body {
    background: var(--navy);
    color: #fff;
    padding: 18px;
    border-radius: 0 0 14px 14px;
  }
  body.theme-modern .nav .mega-right .mega-cards:first-of-type .mega-card:first-child .mega-title {
    color: #fff;
  }
  body.theme-modern .nav .mega-right .mega-cards:first-of-type .mega-card:first-child .mega-desc {
    color: rgba(255,255,255,.85);
  }
  body.theme-modern .nav .mega-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: 0;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body.theme-modern .nav .mega-card .mega-title,
  body.theme-modern .nav .mega-card .mega-card__body {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  body.theme-modern .nav .mega-card.mega-card--rich {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
  }
  body.theme-modern .nav .mega-card.mega-card--rich .mega-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  body.theme-modern .nav .mega-card.mega-card--rich:not(.mega-card--all) .mega-card__body::after {
    content: "→";
    font-size: 16px;
    color: var(--blue);
    flex-shrink: 0;
  }
  body.theme-modern .nav .mega-card::after {
    content: "→";
    font-size: 16px;
    color: var(--blue);
    flex-shrink: 0;
    margin-left: 10px;
  }
  body.theme-modern .nav .mega-card.mega-card--rich::after {
    display: none;
  }
  body.theme-modern .nav .mega-right .mega-cards:first-of-type .mega-card:first-child .mega-card__body::after {
    color: rgba(255,255,255,.9);
  }
  body.theme-modern .nav .mega-card:hover {
    background: #f8fafc;
    border-color: var(--blue);
  }
  body.theme-modern .nav .mega-right .mega-cards:first-of-type .mega-card:first-child:hover {
    background: #0f172a;
    border-color: transparent;
  }
  /* Unterkategorien: eine Spalte, volle Breite (siehe layout_top .mega-subgrid) */
  body.theme-modern .nav .mega-subgrid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  body.theme-modern .nav .mega-sub-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  body.theme-modern .nav .mega-dd-item {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-items: flex-start;
  }
  body.theme-modern .nav .mega-dd-item::after {
    content: "→";
    font-size: 15px;
    color: var(--blue);
    flex-shrink: 0;
    margin-left: auto;
    margin-top: 4px;
  }
  body.theme-modern .nav .mega-dd-item .mega-dd-item__text {
    align-items: flex-start;
    min-width: 0;
  }

  /*
   * Mega ohne Untereinträge (nur Sprungziele): Desktop = Flyout mit Karten,
   * Mobil = kompakte Link-Leiste unten (kein seitliches Abwandern / große Karten).
   */
  body.theme-modern .nav .mega-panel--cms-leaf-links .mega-grid {
    display: none !important;
  }
  body.theme-modern .nav .mega-panel--cms-leaf-links .mega-mobile-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0 14px 12px;
    box-sizing: border-box;
    max-width: 100%;
  }
  body.theme-modern .nav .mega-panel--cms-leaf-links .mega-mobile-footer li {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 100%;
  }
  body.theme-modern .nav .mega-panel--cms-leaf-links .mega-dd-item--footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(30, 65, 148, 0.35);
    background: #f1f5f9;
    color: var(--blue, #1e4194);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.25;
    box-sizing: border-box;
    word-break: break-word;
  }
  body.theme-modern .nav .mega-panel--cms-leaf-links .mega-dd-item--footer::after {
    display: none;
  }
  body.theme-modern .nav .mega-panel--cms-leaf-links .mega-dd-item--footer:hover,
  body.theme-modern .nav .mega-panel--cms-leaf-links .mega-dd-item--footer:focus-visible {
    background: var(--blue, #1e4194);
    color: #fff;
    border-color: transparent;
  }
}

/* Mobile: Abdunkelung hinter dem Off-Canvas-Menü */
@media (max-width: 980px) {
  .nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  body.theme-modern.nav-drawer-open .nav-drawer-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  /* Verhindert horizontales Mitscrollen der Seite bei geöffnetem Drawer (100vw-/Panel-Overflow) */
  body.theme-modern.nav-drawer-open {
    overflow-x: hidden;
    max-width: 100%;
  }
  /*
   * Backdrop (z-index 99) muss UNTER dem Off-Canvas-Drawer liegen.
   * .site-header-wrap hat sonst nur z-index 50 → Backdrop liegt über dem gesamten Header,
   * das Menü wirkt „durch Milchglas“ (backdrop-filter auf dem Overlay).
   */
  body.theme-modern.nav-drawer-open .site-header-wrap {
    z-index: 110;
  }
  /*
   * Topbar (z-index 52) lag über .header (51) → festes Nav-Panel wirkte unter der dunklen Top-Zeile.
   * Drawer offen: Header über Topbar, Panel inkl. top:0 überdeckt den Top-Bereich im rechten Streifen.
   */
  body.theme-modern.nav-drawer-open .site-header-wrap .topbar {
    z-index: 1;
    opacity: 0.9;
  }
  body.theme-modern.nav-drawer-open .site-header-wrap .header {
    z-index: 65;
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-drawer-backdrop {
      transition: none;
    }
  }
}

/* Desktop: Wrapper nur für Mobile-Layout — hier unsichtbar, Buttons bleiben nebeneinander */
@media (min-width: 981px) {
  body.theme-modern .header .nav > .nav-drawer-action-wrap {
    display: contents;
  }
  /* Horizontalnav: Mega-Pill kompakt (Icon + Ladezeichen); Label im span ausgeblendet */
  body.theme-modern .nav .nav-item.mega .nav-pill span {
    display: none;
  }
}

/* Desktop: bei blauem Hover immer weiße Schrift (Kontrast) */
@media (min-width: 981px) {
  body.theme-modern .header .nav > a.nav-pill:hover,
  body.theme-modern .header .nav > a.nav-pill:focus-visible {
    color: #fff !important;
  }
  body.theme-modern .header .nav .nav-item.mega .nav-pill:hover,
  body.theme-modern .header .nav .nav-item.mega .nav-pill:focus-visible {
    color: #fff !important;
  }
  body.theme-modern .header .nav .nav-btn:hover,
  body.theme-modern .header .nav .nav-btn:focus-visible {
    color: #fff !important;
  }
}