/* =============================================================================
   ninetyone Navigation – Frontend Styles
   Version 1.1.39 | ninetyone.de
   ============================================================================= */

/* CSS Custom Properties – hier zentral anpassen */
:root {
  --nn-font:            inherit;
  --nn-accent:          #000000;
  --nn-white:           #ffffff;
  --nn-dark:            #111111;
  --nn-gray:            #888888;

  /* Navbar – Normalzustand (überschrieben durch PHP inline vars) */
  --nn-bar-bg:          transparent;
  --nn-bar-blur:        none;
  --nn-bar-radius:      0px;
  --nn-bar-width:       100%;
  --nn-bar-height:      80px;

  /* Navbar – Eingeschrumpft (überschrieben durch PHP inline vars) */
  --nn-scroll-bg:       rgba(255, 255, 255, 0.72);
  --nn-scroll-blur:     blur(12px) saturate(1.8);
  --nn-scroll-radius:   100px;
  --nn-scroll-width:    80%;
  --nn-scroll-height:   60px;

  /* Legacy-Referenzen (für Kompatibilität) */
  --nn-blur-border:     rgba(255, 255, 255, 0.4);
  --nn-shadow:          0 2px 32px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --nn-ease:            cubic-bezier(0.16, 1, 0.3, 1);
  --nn-duration:        0.5s;

  /* Overlay */
  --nn-overlay-bg:      #ffffff;
  --nn-overlay-ease:    cubic-bezier(0.76, 0, 0.24, 1);
  --nn-overlay-dur:     0.65s;
}

/* =============================================================================
   Reset / Base
   ============================================================================= */
.nn-navbar *,
.nn-overlay * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* =============================================================================
   NAVBAR – Wrapper
   ============================================================================= */
.nn-navbar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* Klickbereich nur auf Inner */
  padding: 0;
  transition:
    padding   var(--nn-duration) var(--nn-ease),
    transform var(--nn-duration) var(--nn-ease),
    opacity   var(--nn-duration) var(--nn-ease),
    top       var(--nn-duration) var(--nn-ease),
    bottom    var(--nn-duration) var(--nn-ease);
}

/* Position: top (Default) */
.nn-navbar--pos-top {
  top: var(--nn-offset, 0px);
  bottom: auto;
}

/* Position: bottom */
.nn-navbar--pos-bottom {
  top: auto;
  bottom: var(--nn-offset, 0px);
}

/* Scroll-Zustand: eigener Offset, Fallback auf Normalzustand-Offset */
.nn-navbar--scrolled.nn-navbar--pos-top {
  top: var(--nn-scroll-offset, var(--nn-offset, 0px));
}
.nn-navbar--scrolled.nn-navbar--pos-bottom {
  bottom: var(--nn-scroll-offset, var(--nn-offset, 0px));
}

/* Innerer Container – enthält das eigentliche visuelle Element */
.nn-navbar__inner {
  position: relative;
  width: 100%;
  max-width: var(--nn-bar-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0;
  padding-bottom: 0;
  padding-left:  var(--nn-bar-padding-l, 32px);
  padding-right: var(--nn-bar-padding-r, 32px);
  height: var(--nn-bar-height);
  border-style: solid;
  border-width: var(--nn-bar-border-width, 0);
  border-color: var(--nn-bar-border-color, transparent);
  border-radius: var(--nn-bar-radius);
  pointer-events: all;
  transition:
    height          var(--nn-duration) var(--nn-ease),
    max-width       var(--nn-duration) var(--nn-ease),
    border-width    var(--nn-duration) var(--nn-ease),
    border-color    var(--nn-duration) var(--nn-ease),
    border-radius   var(--nn-duration) var(--nn-ease),
    box-shadow      var(--nn-duration) var(--nn-ease),
    padding         var(--nn-duration) var(--nn-ease);
  will-change: transform;
}

/* Hintergrund + Blur als Pseudo-Element, damit backdrop-filter keinen
   neuen Containing-Block erzeugt (der Dropdown-/Megapanel-Blur brechen würde) */
.nn-navbar__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--nn-bar-bg);
  -webkit-backdrop-filter: var(--nn-bar-blur);
  backdrop-filter: var(--nn-bar-blur);
  z-index: -1;
  transition:
    background      var(--nn-duration) var(--nn-ease),
    backdrop-filter var(--nn-duration) var(--nn-ease),
    -webkit-backdrop-filter var(--nn-duration) var(--nn-ease);
}

/* =============================================================================
   NAVBAR – Scrolled State (Farbwechsel / Hintergrund)
   ============================================================================= */
.nn-navbar--scrolled .nn-navbar__inner::before {
  background: var(--nn-scroll-bg);
  -webkit-backdrop-filter: var(--nn-scroll-blur);
  backdrop-filter: var(--nn-scroll-blur);
}

/* =============================================================================
   NAVBAR – Shrink State (Eingeschrumpfter Zustand)
   ============================================================================= */
/* Outer Wrapper bekommt Padding erst im Shrink-State → Floating-Effekt.
   Wird durch --nn-shrink-pad steuerbar: leerer scroll_offset = 16px (Default,
   alter Floating-Effekt). Sobald scroll_offset im Backend gesetzt ist, wird
   das Padding via PHP auf 0 überschrieben und der top-Wert steuert den
   Abstand komplett (siehe ninetyone-navbar.php). */
.nn-navbar--shrink {
  padding: var(--nn-shrink-pad, 16px) 0;
}

.nn-navbar--shrink .nn-navbar__inner {
  max-width: var(--nn-scroll-width);
  height: var(--nn-scroll-height);
  border-width: var(--nn-scroll-border-width, 1px);
  border-color: var(--nn-scroll-border-color, var(--nn-blur-border));
  border-radius: var(--nn-scroll-radius);
  box-shadow: var(--nn-shadow);
  padding: 0 24px;
}

/* =============================================================================
   NAVBAR – Auto-Hide (Scroll-Richtung)
   ============================================================================= */
.nn-navbar--hidden {
  opacity: 0;
  pointer-events: none;
}
.nn-navbar--pos-top.nn-navbar--hidden {
  transform: translateY(-100%);
}
.nn-navbar--pos-bottom.nn-navbar--hidden {
  transform: translateY(100%);
}

/* =============================================================================
   NAVBAR – Logo
   ============================================================================= */
.nn-navbar__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nn-navbar__logo a {
  display: block;
  text-decoration: none;
  line-height: 0;
  position: relative;
}

/* Beide Logo-Varianten übereinander stapeeln */
.nn-logo-full,
.nn-logo-icon {
  display: block;
  object-fit: contain;
  transition:
    opacity    var(--nn-duration) var(--nn-ease),
    transform  var(--nn-duration) var(--nn-ease);
}

/* Volllogo: sichtbar beim Start */
.nn-logo-full {
  max-height: var(--nn-logo-full-h, 36px);
  max-width:  var(--nn-logo-full-w, 180px);
  width: auto;
  height: auto;
  opacity: 1;
  transform: scale(1) translateY(0);
  position: relative;
}

/* SVG-Logos: Höhe fixieren, Breite folgt dem Seitenverhältnis aus der viewBox.
   WICHTIG: width NICHT erzwingen — eine erzwungene Box (z.B. 180×36) hat bei
   nicht passendem Seitenverhältnis (etwa quadratischen Logos) unsichtbaren
   Leerraum links/rechts, das Logo wirkt dann falsch positioniert (mobil
   besonders sichtbar). max-width fängt sehr breite Logos ab; object-position
   pinnt den Inhalt links, falls die Box doch mal breiter ist als der Inhalt. */
img.nn-logo-full[src$=".svg"] {
  height: var(--nn-logo-full-h, 36px);
  width: auto;
  max-width: var(--nn-logo-full-w, 180px);
  object-position: left center;
}

img.nn-logo-icon[src$=".svg"] {
  height: var(--nn-logo-icon-h, 28px);
  width: auto;
  max-width: var(--nn-logo-icon-w, 120px);
  object-position: left center;
}

/* Icon-Logo: verborgen beim Start */
.nn-logo-icon {
  max-height: var(--nn-logo-icon-h, 28px);
  max-width:  var(--nn-logo-icon-w, 120px);
  width: auto;
  height: auto;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scale(0.85);
}

/* Mobile Logo-Skalierung */
@media (max-width: 768px) {
  .nn-logo-full {
    max-height: var(--nn-logo-full-h-m, var(--nn-logo-full-h, 36px));
    max-width:  var(--nn-logo-full-w-m, var(--nn-logo-full-w, 180px));
  }
  .nn-logo-icon {
    max-height: var(--nn-logo-icon-h-m, var(--nn-logo-icon-h, 28px));
    max-width:  var(--nn-logo-icon-w-m, var(--nn-logo-icon-w, 120px));
  }
  img.nn-logo-full[src$=".svg"] {
    height: var(--nn-logo-full-h-m, var(--nn-logo-full-h, 36px));
    width: auto;
    max-width: var(--nn-logo-full-w-m, var(--nn-logo-full-w, 180px));
  }
  img.nn-logo-icon[src$=".svg"] {
    height: var(--nn-logo-icon-h-m, var(--nn-logo-icon-h, 28px));
    width: auto;
    max-width: var(--nn-logo-icon-w-m, var(--nn-logo-icon-w, 120px));
  }
  /* Navbar-Bar-Width: separater Mobile-Wert mit Fallback auf Desktop */
  .nn-navbar__inner {
    max-width: var(--nn-bar-width-m, var(--nn-bar-width));
    padding-left:  var(--nn-bar-padding-l-m, var(--nn-bar-padding-l, 32px));
    padding-right: var(--nn-bar-padding-r-m, var(--nn-bar-padding-r, 32px));
  }
  .nn-navbar--shrink .nn-navbar__inner {
    max-width: var(--nn-scroll-width-m, var(--nn-scroll-width));
  }
}

/* Shrink: Volllogo ausblenden, Icon-Logo einblenden (nur Initial-Logos) */
.nn-navbar--shrink .nn-logo-full.nn-logo--initial {
  opacity: 0;
  transform: scale(0.9) translateY(-4px);
}

.nn-navbar--shrink .nn-logo-icon.nn-logo--initial {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Fallback: wenn nur ein Logo vorhanden (nur Initial-Logos) */
.nn-navbar__logo a:has(.nn-logo-full.nn-logo--initial):not(:has(.nn-logo-icon.nn-logo--initial)) .nn-logo-full.nn-logo--initial,
.nn-navbar__logo a:not(:has(.nn-logo-full.nn-logo--initial)) .nn-logo-icon.nn-logo--initial {
  position: relative;
  opacity: 1;
  transform: none;
}

/* =============================================================================
   NAVBAR – Scroll-Farbwechsel (Logo, Links, Burger)
   ============================================================================= */

/* Scrolled-Logos: standardmäßig versteckt, absolut positioniert */
.nn-logo--scrolled {
  opacity: 0 !important;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scale(0.9);
  transition:
    opacity    var(--nn-duration) var(--nn-ease),
    transform  var(--nn-duration) var(--nn-ease);
}

/* Wenn Farbwechsel aktiv UND gescrollt:
   - ALLE Initial-Logos ausblenden (Full + Icon)
   - Scrolled-Logos einblenden
   - Textfarbe und Burger-Farbe ändern */
.nn-navbar--color-change.nn-navbar--scrolled .nn-logo--initial {
  opacity: 0 !important;
}

/* Scrolled-Logo-Full einblenden — nur wenn kein Scrolled-Icon vorhanden */
.nn-navbar--color-change.nn-navbar--scrolled .nn-logo--scrolled.nn-logo-full {
  opacity: 1 !important;
  position: relative;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* Scrolled-Logo-Icon einblenden */
.nn-navbar--color-change.nn-navbar--scrolled .nn-logo--scrolled.nn-logo-icon {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
}

/* Wenn BEIDE scrolled-Logos vorhanden: Full verstecken, Icon zeigen (gleiche
   Logik wie beim normalen Logo-Swap — Icon hat beim Scrollen Vorrang) */
.nn-navbar--color-change.nn-navbar--scrolled .nn-logo--scrolled.nn-logo-full:has(~ .nn-logo--scrolled.nn-logo-icon) {
  opacity: 0 !important;
  position: absolute;
  transform: scale(0.9) translateY(-4px);
  pointer-events: none;
}

/* Textfarbe (Links, Elemente, Schrift-Logo).
   WICHTIG: Nur direkte Top-Level Menu-Links treffen (> ul > li > a).
   Die Nachfahren-Regel .nn-navbar__classic-menu a hätte alle Links auch
   in Mega-Panels und Dropdowns umgefärbt – das soll nicht passieren, da
   Mega-Buttons/-Links eigene CSS-Variablen haben.
   ZUSÄTZLICH: Buttons ausschließen — sonst kollidiert die scroll-text-color
   mit --nn-btn-color / --nn-outline-color (z.B. weißer Button-Text auf
   blauem Button-BG wurde beim Scroll zu blauem Text). */
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar-item:not(.nn-navbar-item--btn):not(.nn-navbar-item--outline),
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar__classic-menu > ul > li > a,
.nn-navbar--color-change.nn-navbar--scrolled .nn-logo-full:not(img) {
  color: var(--nn-scroll-text-color, #111111);
}

/* Burger-Farbe */
.nn-navbar--color-change.nn-navbar--scrolled .nn-burger__line {
  background: var(--nn-scroll-burger-color, #111111);
}

/* Button-Styling: Scroll-Farbvarianten für Link */
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar-item:not(.nn-navbar-item--btn) {
  color: var(--nn-scroll-link-color, var(--nn-scroll-text-color, var(--nn-link-color)));
}
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar-item:not(.nn-navbar-item--btn):hover {
  color: var(--nn-scroll-link-color-h, var(--nn-link-color-h));
}

/* Button-Styling: Scroll-Farbvarianten für Button (gefüllt) */
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar-item--btn:not(.nn-navbar-item--outline) {
  color: var(--nn-scroll-btn-color, var(--nn-btn-color));
  background: var(--nn-scroll-btn-bg, var(--nn-btn-bg));
  border-color: var(--nn-scroll-btn-border-c, var(--nn-btn-border-c));
}
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar-item--btn:not(.nn-navbar-item--outline):hover {
  color: var(--nn-scroll-btn-color-h, var(--nn-btn-color-h));
  background: var(--nn-scroll-btn-bg-h, var(--nn-btn-bg-h));
  border-color: var(--nn-scroll-btn-border-c-h, var(--nn-btn-border-c-h));
}

/* Button-Styling: Scroll-Farbvarianten für Button (Outline) */
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar-item--outline {
  color: var(--nn-scroll-outline-color, var(--nn-outline-color));
  background: var(--nn-scroll-outline-bg, var(--nn-outline-bg));
  border-color: var(--nn-scroll-outline-border-c, var(--nn-outline-border-c));
}
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar-item--outline:hover {
  color: var(--nn-scroll-outline-color-h, var(--nn-outline-color-h));
  background: var(--nn-scroll-outline-bg-h, var(--nn-outline-bg-h));
  border-color: var(--nn-scroll-outline-border-c-h, var(--nn-outline-border-c-h));
}

/* Classic-Menü: Scroll-Textfarbe – NUR Top-Level Menu-Links.
   Absichtlich > ul > li > a statt Nachfahren-Selektor: Mega-Panel- und
   Dropdown-Inhalte behalten ihre eigenen Farben (--nn-mega-btn-*,
   --nn-mega-outline-* etc.), auch wenn Scroll-Farbwechsel aktiv ist. */
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar__classic-menu > ul > li > a {
  color: var(--nn-scroll-link-color, var(--nn-scroll-text-color, #111111));
}
.nn-navbar--color-change.nn-navbar--scrolled .nn-navbar__classic-menu > ul > li > a:hover {
  color: var(--nn-scroll-link-color-h, var(--nn-link-color-h));
}

/* =============================================================================
   NAVBAR – Burger Button
   ============================================================================= */
.nn-burger {
  position: relative;
  z-index: 2;                /* innerhalb der Navbar über anderen Elementen */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 8px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.nn-burger__line {
  display: block;
  height: var(--nn-burger-weight, 1.5px);
  background: var(--nn-burger-color, var(--nn-dark));
  border-radius: var(--nn-burger-radius, 2px);
  transform-origin: center center;
  transition:
    width       0.35s cubic-bezier(0.4, 0, 0.2, 1),
    transform   0.4s  cubic-bezier(0.4, 0, 0.2, 1),
    opacity     0.25s ease;
}

/* --- Variante: Abgestuft (Standard) --- */
.nn-burger--staggered .nn-burger__line:nth-child(1) { width: 24px; }
.nn-burger--staggered .nn-burger__line:nth-child(2) { width: 16px; }
.nn-burger--staggered .nn-burger__line:nth-child(3) { width: 20px; }

/* --- Variante: Gleich lange Balken --- */
.nn-burger--equal .nn-burger__line { width: 22px; }

/* --- Variante: Zwei Balken --- */
.nn-burger--two { gap: 6px; }
.nn-burger--two .nn-burger__line { width: 22px; }

/* Burger → X: Alle Varianten zentrieren beim Öffnen */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--staggered,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--equal,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--two {
  align-items: center;
}

/* Burger → X beim Öffnen: Abgestuft (3 Linien)
   Verschiebung = gap (5px) + Balkenstärke, damit Linie 1 und 3
   exakt auf der Mitte (Linie 2) landen und ein symmetrisches X bilden. */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--staggered .nn-burger__line:nth-child(1) {
  width: 22px;
  transform: translateY(calc(5px + var(--nn-burger-weight, 1.5px))) rotate(45deg);
}
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--staggered .nn-burger__line:nth-child(2) {
  width: 22px;
  opacity: 0;
  transform: scaleX(0);
}
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--staggered .nn-burger__line:nth-child(3) {
  width: 22px;
  transform: translateY(calc(-5px - var(--nn-burger-weight, 1.5px))) rotate(-45deg);
}

/* Burger → X beim Öffnen: Gleich (3 Linien) */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--equal .nn-burger__line:nth-child(1) {
  transform: translateY(calc(5px + var(--nn-burger-weight, 1.5px))) rotate(45deg);
}
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--equal .nn-burger__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--equal .nn-burger__line:nth-child(3) {
  transform: translateY(calc(-5px - var(--nn-burger-weight, 1.5px))) rotate(-45deg);
}

/* Burger → X beim Öffnen: Zwei Balken */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--two .nn-burger__line:nth-child(1) {
  transform: translateY(calc(3px + var(--nn-burger-weight, 1.5px) / 2)) rotate(45deg);
}
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--two .nn-burger__line:nth-child(2) {
  transform: translateY(calc(-3px - var(--nn-burger-weight, 1.5px) / 2)) rotate(-45deg);
}

/* Navbar über Overlay heben wenn offen — nur Burger bleibt klickbar */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-navbar {
  z-index: 10001;
}
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-navbar__inner {
  pointer-events: none;        /* Navbar-Fläche nicht klickbar (Overlay darunter) */
}
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-navbar__inner::before {
  opacity: 0;                  /* Navbar-Hintergrund ausblenden */
}
/* Inner-Container im offenen Zustand neutralisieren, damit der Burger
   relativ zur .nn-navbar (full-width, fixed) ankert — sonst läge der Anker
   im max-width 80%-Container und das X säße zu weit links. */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-navbar__inner {
  position: static;
}

:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger {
  pointer-events: all;         /* Nur der Burger bleibt klickbar */
  /* X immer rechts oben verankern (Desktop & Mobile gleich), unabhängig
     vom konfigurierten burger_position. */
  position: absolute;
  top: 50%;
  right: clamp(20px, 2vw, 32px);
  left: auto;
  transform: translateY(-50%);
  margin: 0;
  z-index: 3;
}
/* Logo, Items, Classic-Menu im Navbar ausblenden wenn Overlay offen */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-navbar__logo,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-navbar__items,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-navbar__classic-menu {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Custom Burger-Icon (hochgeladenes Bild/SVG) */
.nn-burger--custom {
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.nn-burger__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  transition: opacity 0.25s ease, transform 0.25s var(--nn-ease);
}

/* Custom-Icon & Lottie: beim Öffnen ausblenden, CSS-X übernimmt */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--custom .nn-burger__icon,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--lottie .nn-burger__lottie {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

/* CSS-X für Custom-Icon & Lottie (Pseudo-Elemente) */
.nn-burger--custom::before,
.nn-burger--custom::after,
.nn-burger--lottie::before,
.nn-burger--lottie::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: var(--nn-burger-weight, 1.5px);
  background: var(--nn-burger-color, var(--nn-dark));
  border-radius: var(--nn-burger-radius, 2px);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nn-burger--custom::before,
.nn-burger--lottie::before {
  transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
}
.nn-burger--custom::after,
.nn-burger--lottie::after {
  transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
}

/* X-Icon-Farbe im offenen Overlay – greift wenn --nn-burger-x-color gesetzt ist.
   Fallback-Kette: x-color → burger-color → --nn-dark. Wenn der User keine
   X-Farbe wählt, bleibt das Verhalten exakt wie vorher (Burger-Color). */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger__line,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--custom::before,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--custom::after,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--lottie::before,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--lottie::after {
  background: var(--nn-burger-x-color, var(--nn-burger-color, var(--nn-dark)));
}

/* Overlay offen → CSS-X einblenden */
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--custom::before,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--lottie::before {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--custom::after,
:is(html.nn-overlay-open-root, body.nn-overlay--open) .nn-burger--lottie::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}

/* =============================================================================
   NAVBAR – Actions (Items + Burger)
   ============================================================================= */
.nn-navbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nn-navbar__items {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Link-Variante – reiner Textlink, kein Hintergrund/Border */
.nn-navbar-item {
  font-family: var(--nn-font);
  font-size: var(--nn-fs-nav, 13px);
  font-weight: var(--nn-fw-nav, 500);
  text-transform: var(--nn-tt-nav, none);
  font-style: var(--nn-fst-nav, normal);
  color: var(--nn-link-color, var(--nn-dark));
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 0;
  background: transparent;
  border: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.nn-navbar-item:hover {
  color: var(--nn-link-color-h, var(--nn-accent));
}

/* Button-Variante (gefüllt, konfigurierbar) */
.nn-navbar-item--btn {
  color: var(--nn-btn-color, var(--nn-white));
  background: var(--nn-btn-bg, var(--nn-dark));
  padding: var(--nn-btn-pad-v, 8px) var(--nn-btn-pad-h, 18px);
  border-radius: var(--nn-btn-radius, 100px);
  border: var(--nn-btn-border-w, 0px) solid var(--nn-btn-border-c, transparent);
  font-family: var(--nn-font);
  font-size: var(--nn-fs-btn, 12px);
  font-weight: var(--nn-fw-btn, 600);
  text-transform: var(--nn-tt-btn, none);
  font-style: var(--nn-fst-btn, normal);
  letter-spacing: 0.02em;
}

.nn-navbar-item--btn:hover {
  color: var(--nn-btn-color-h, var(--nn-white));
  background: var(--nn-btn-bg-h, #333333);
  border-color: var(--nn-btn-border-c-h, transparent);
}

/* Button-Variante (Outline, konfigurierbar) */
.nn-navbar-item--outline {
  color: var(--nn-outline-color, var(--nn-dark));
  background: var(--nn-outline-bg, transparent);
  border: var(--nn-outline-border-w, 1.5px) solid var(--nn-outline-border-c, var(--nn-dark));
  padding: var(--nn-outline-pad-v, 8px) var(--nn-outline-pad-h, 18px);
  border-radius: var(--nn-outline-radius, 100px);
}

.nn-navbar-item--outline:hover {
  color: var(--nn-outline-color-h, var(--nn-white));
  background: var(--nn-outline-bg-h, var(--nn-dark));
  border-color: var(--nn-outline-border-c-h, var(--nn-dark));
}

/* Auf kleinen Screens: Navbar-Items ausblenden, nur Burger bleibt */
/* =============================================================================
   NAVBAR – Layout-Varianten
   ============================================================================= */

/* Layout 1: Logo links (Default) – keine Änderungen nötig */

/* Layout 3: Logo rechts (gespiegelt) – Burger ganz links */
.nn-navbar--layout-right .nn-navbar__inner {
  flex-direction: row-reverse;
}

.nn-navbar--layout-right .nn-navbar__actions {
  flex-direction: row-reverse;
}

/* =============================================================================
   Layout Klassisch: Inline-Menü direkt in der Navbar
   ============================================================================= */

/* Burger auf Desktop versteckt (Standard) */
.nn-navbar--layout-classic .nn-navbar__classic-burger {
  display: none;
}

/* Burger auf Desktop sichtbar wenn explizit aktiviert */
.nn-navbar--layout-classic.nn-navbar--classic-show-burger .nn-navbar__classic-burger {
  display: flex;
}

/* =============================================================================
   Priority Navigation: „Mehr"-Dropdown für Overflow-Items
   ============================================================================= */

/* Container: nimmt den verfügbaren Platz ein, damit die Breitenberechnung stimmt */
.nn-navbar--priority-nav .nn-navbar__classic-menu {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
}

/* „Mehr"-Item in der Menüliste */
.nn-priority-more {
  position: relative;
  list-style: none;
  flex-shrink: 0;
}

/* „Mehr"-Button: gleicher Stil wie Menü-Links */
.nn-priority-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--nn-font);
  font-size: var(--nn-fs-nav, clamp(13px, 1.1vw, 16px));
  font-weight: var(--nn-fw-nav, 500);
  text-transform: var(--nn-tt-nav, none);
  font-style: var(--nn-fst-nav, normal);
  color: var(--nn-link-color, #000);
  letter-spacing: -0.01em;
  padding: 0;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nn-priority-more__btn:hover {
  color: var(--nn-link-hover, var(--nn-accent, #000));
}

.nn-priority-more__arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nn-priority-more--open .nn-priority-more__arrow {
  transform: rotate(180deg);
}

/* ── Mehr-Dropdown: ALLE Classic-Menu-Overrides zurücksetzen ──
   Die Regeln für .nn-navbar__classic-menu ul/li/a greifen auch hier,
   weil das Dropdown innerhalb des Classic-Menüs liegt. Wir müssen
   sie mit höherer Spezifität überschreiben. */

/* Dropdown-Container selbst */
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  flex-direction: column;
  align-items: stretch;
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--nn-panel-bg, #fff);
  border-radius: var(--nn-panel-radius, 12px);
  padding: 6px 0;
  box-shadow: var(--nn-panel-shadow, 0 8px 32px rgba(0,0,0,0.12));
  -webkit-backdrop-filter: var(--nn-panel-blur, none);
  backdrop-filter: var(--nn-panel-blur, none);
  z-index: 100;
  list-style: none;
  margin: 8px 0 0 0;
  gap: 0;
  columns: unset;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s var(--nn-ease);
}

/* Hover-Gap zwischen Button und Dropdown */
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Geöffneter Zustand */
.nn-navbar--layout-classic .nn-priority-more--open > .nn-priority-more__dropdown {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* ── Items im Dropdown: vertikale Liste ── */
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown > li,
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown > .nn-mega-nav__item {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  border-bottom: none;
  opacity: 1;
  transform: none;
  columns: unset;
}

/* ── Links im Dropdown: block mit Padding (Override für inline/padding:0) ── */
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown > li > a,
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown > .nn-mega-nav__item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  text-decoration: none;
  color: var(--nn-link-color, #000);
  font-family: var(--nn-font);
  font-size: 14px;
  font-weight: var(--nn-fw-nav, 500);
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
  letter-spacing: -0.01em;
}

.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown > li > a:hover,
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown > .nn-mega-nav__item > a:hover {
  color: var(--nn-link-hover, var(--nn-accent, #000));
  background: rgba(0, 0, 0, 0.04);
  padding-left: 16px;
}

/* Kein ::after auf Links (überschreibt Classic-Menu-Reset) */
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown > li > a::after {
  display: none;
}

/* Pfeil für Items mit Sub-Panel (zeigt nach unten, dreht bei open) */
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown > .nn-mega-nav__item--has-panel > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Pfeil dreht nach oben wenn offen */
.nn-navbar--layout-classic .nn-navbar__classic-menu .nn-priority-more__dropdown > .nn-mega-nav__item--open.nn-mega-nav__item--has-panel > a::after {
  transform: rotate(-135deg);
}

/* =============================================================================
   Accordion-Submenüs innerhalb des Mehr-Dropdowns
   Sub-Panels klappen sich inline unterhalb des Items auf (kein Flyout).
   ============================================================================= */

/* ── Dropdown-Panels: versteckt, im Dokumentfluss (nicht absolut) ── */
.nn-navbar--layout-classic .nn-priority-more__dropdown > .nn-mega-nav__item > .nn-dropdown {
  display: none;
  position: static;
  transform: none;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  z-index: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Kein Pseudo-Element nötig */
.nn-navbar--layout-classic .nn-priority-more__dropdown > .nn-mega-nav__item > .nn-dropdown::before {
  display: none;
}

/* Geöffnet per JS-Klasse */
.nn-navbar--layout-classic .nn-priority-more__dropdown > .nn-mega-nav__item--open > .nn-dropdown {
  display: block;
}

/* Dropdown-Liste: vertikale Anordnung, eingerückt */
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown__list,
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown__list li,
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown li {
  display: block;
  margin: 0;
  padding: 0;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown__list a,
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown__list .nn-dropdown__styled-link,
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown a {
  display: block;
  padding: 7px 16px 7px 28px;
  text-decoration: none;
  color: var(--nn-link-color, #000);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown__list a::after,
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown a::after {
  display: none;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown__list a:hover,
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown a:hover {
  color: var(--nn-link-hover, var(--nn-accent, #000));
  background: rgba(0, 0, 0, 0.04);
}

/* Styled-Dropdown: Icon + Label + Description */
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 8px;
  flex-shrink: 0;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown__label {
  font-weight: 500;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-dropdown__desc {
  display: block;
  font-size: 11px;
  color: var(--nn-gray, #888);
  margin-top: 2px;
  white-space: normal;
}

/* ── Mega-Panels als Accordion (inline aufklappbar) ── */
.nn-navbar--layout-classic .nn-priority-more__dropdown > .nn-mega-nav__item > .nn-megapanel {
  display: none;
  position: static;
  transform: none;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 4px 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  z-index: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.nn-navbar--layout-classic .nn-priority-more__dropdown > .nn-mega-nav__item--open > .nn-megapanel {
  display: block;
}

/* Mega-Panel intern: einspaltiges Layout */
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Media-Bereich und Hintergründe ausblenden (zu groß für Accordion) */
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__media,
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__panel-bg,
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__panel-overlay {
  display: none;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__content {
  width: 100%;
}

/* Link-Gruppen vertikal */
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__group-heading {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nn-gray, #888);
  padding: 0 28px;
  margin-bottom: 2px;
}

/* Links im Mega-Panel */
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__links li {
  display: block;
  margin: 0;
  padding: 0;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__links li a {
  display: block;
  padding: 6px 16px 6px 28px;
  text-decoration: none;
  color: var(--nn-link-color, #000);
  font-size: 13px;
  font-weight: 400;
  transition: color 0.15s ease, background 0.15s ease;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__links li a::after {
  display: none;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__links li a:hover {
  color: var(--nn-link-hover, var(--nn-accent, #000));
  background: rgba(0, 0, 0, 0.04);
}

/* Buttons im Mega-Panel */
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__buttons {
  padding: 6px 16px 2px 28px;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__btn {
  display: block;
  text-align: center;
  padding: 6px 12px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}

/* Kacheln im Mega-Panel: Original-Card-Design beibehalten, nur einspaltig */
.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 4px 8px 8px;
  width: 100%;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__tile {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  background: #f0f0f0;
  min-height: 100px;
  color: #fff;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__tile:hover {
  color: #fff;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__tile-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown video.nn-megapanel__tile-bg {
  pointer-events: none;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__tile-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  z-index: 1;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__tile-label {
  display: block;
  font-family: var(--nn-font);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.nn-navbar--layout-classic .nn-priority-more__dropdown .nn-megapanel__tile-sub {
  display: block;
  font-family: var(--nn-font);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 1px;
}

/* Auf Mobile: Priority-Nav deaktivieren, Burger übernimmt */
@media (max-width: 768px) {
  .nn-priority-more {
    display: none !important;
  }
}

/* Inline-Menü: ul horizontal, keine Bullets – Override für overlay__menu-list */
.nn-navbar--layout-classic .nn-navbar__classic-menu ul,
.nn-navbar--layout-classic .nn-navbar__classic-menu ul.nn-overlay__menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  columns: unset;
}

.nn-navbar--layout-classic .nn-navbar__classic-menu li {
  margin: 0;
  padding: 0;
  border-bottom: none;
  opacity: 1;
  transform: none;
}

.nn-navbar--layout-classic .nn-navbar__classic-menu a {
  text-decoration: none;
  color: var(--nn-link-color, #000);
  font-family: var(--nn-font);
  font-size: var(--nn-fs-nav, clamp(13px, 1.1vw, 16px));
  font-weight: var(--nn-fw-nav, 500);
  text-transform: var(--nn-tt-nav, none);
  font-style: var(--nn-fst-nav, normal);
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
  white-space: nowrap;
  padding: 0;
  display: inline;
}

.nn-navbar--layout-classic .nn-navbar__classic-menu a::after {
  display: none;
}

.nn-navbar--layout-classic .nn-navbar__classic-menu a:hover {
  color: var(--nn-link-color-h, #555);
  padding-left: 0;
}

/* Untermenü in Classic: Dropdown bei Hover */
.nn-navbar--layout-classic .nn-navbar__classic-menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--nn-bar-bg, #fff);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  flex-direction: column;
  z-index: 100;
}

.nn-navbar--layout-classic .nn-navbar__classic-menu li {
  position: relative;
}

.nn-navbar--layout-classic .nn-navbar__classic-menu li:hover > .sub-menu {
  display: flex;
}

.nn-navbar--layout-classic .nn-navbar__classic-menu .sub-menu li {
  padding: 0;
}

.nn-navbar--layout-classic .nn-navbar__classic-menu .sub-menu a {
  display: block;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

/* Menü-Position rechts: Logo links, Menü rechts, Items ganz rechts */
/* Klassisch-Layout: justify-content vom Default (space-between) auf flex-start
   umstellen, damit die folgenden margin-Regeln (clamp für „nah", auto für
   „verteilt") überhaupt sichtbare Wirkung haben. Mit space-between würden die
   Kinder immer über die volle Breite verteilt – das Menü säße dann unabhängig
   von der Spacing-Wahl rechts. */
.nn-navbar--layout-classic .nn-navbar__inner {
  justify-content: flex-start;
}

.nn-navbar--layout-classic.nn-navbar--classic-pos-right .nn-navbar__inner {
  display: flex;
  align-items: center;
}

/* Spacing: „Nah" = Menü direkt neben Logo (kein flex-grow dazwischen) */
.nn-navbar--layout-classic.nn-navbar--classic-close .nn-navbar__classic-menu {
  margin-left: clamp(20px, 3vw, 48px);
}

.nn-navbar--layout-classic.nn-navbar--classic-close .nn-navbar__items {
  margin-left: auto;
}

/* Spacing: „Verteilt" = Menü am gegenüberliegenden Rand via flex */
.nn-navbar--layout-classic.nn-navbar--classic-spaced .nn-navbar__classic-menu {
  margin-left: auto;
}

.nn-navbar--layout-classic.nn-navbar--classic-spaced .nn-navbar__items {
  margin-left: clamp(16px, 2vw, 32px);
}

/* Menü-Position links: Menü zuerst, dann Logo, Items ganz rechts */
.nn-navbar--layout-classic.nn-navbar--classic-pos-left .nn-navbar__inner {
  display: flex;
  align-items: center;
}

.nn-navbar--layout-classic.nn-navbar--classic-pos-left.nn-navbar--classic-close .nn-navbar__classic-menu {
  margin-right: clamp(20px, 3vw, 48px);
  margin-left: 0;
}

.nn-navbar--layout-classic.nn-navbar--classic-pos-left.nn-navbar--classic-close .nn-navbar__logo {
  margin-right: auto;
}

.nn-navbar--layout-classic.nn-navbar--classic-pos-left.nn-navbar--classic-close .nn-navbar__items {
  margin-left: 0;
}

.nn-navbar--layout-classic.nn-navbar--classic-pos-left.nn-navbar--classic-spaced .nn-navbar__classic-menu {
  margin-left: 0;
  margin-right: auto;
}

.nn-navbar--layout-classic.nn-navbar--classic-pos-left.nn-navbar--classic-spaced .nn-navbar__logo {
  margin-right: 0;
}

.nn-navbar--layout-classic.nn-navbar--classic-pos-left.nn-navbar--classic-spaced .nn-navbar__items {
  margin-left: clamp(16px, 2vw, 32px);
}

/* Mobile-Override für Klassisch-Layout: separater Spacing-Wert nur für ≤768px.
   Falls im Backend nicht gesetzt, greifen die Desktop-Regeln auch auf Mobile.
   Wenn gesetzt, überschreiben diese !important-Regeln das Spacing nur auf Mobile. */
@media (max-width: 768px) {
  /* „Nah" auf Mobile: Burger direkt neben Logo */
  .nn-navbar--layout-classic.nn-navbar--classic-m-close .nn-navbar__classic-burger {
    margin-left: clamp(12px, 3vw, 24px) !important;
    margin-right: 0 !important;
  }
  .nn-navbar--layout-classic.nn-navbar--classic-m-close .nn-navbar__items {
    margin-left: auto !important;
  }
  /* „Verteilt" auf Mobile: Burger ans rechte Ende */
  .nn-navbar--layout-classic.nn-navbar--classic-m-spaced .nn-navbar__classic-burger {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* Responsive: Auf Mobile → Inline-Menü ausblenden, Burger zeigen */
@media (max-width: 768px) {
  .nn-navbar--layout-classic .nn-navbar__classic-menu {
    display: none;
  }
  .nn-navbar--layout-classic .nn-navbar__classic-burger {
    display: flex;
  }
  .nn-navbar--layout-classic .nn-navbar__items {
    margin-left: auto;
  }

  /* Wenn Mega-Items definiert → WP-Nav im Overlay ausblenden, Mobile-Mega einblenden */
  .nn-overlay--has-mega .nn-overlay__nav {
    display: none !important;
  }
  .nn-overlay--has-mega .nn-overlay__mega--mobile {
    display: block !important;
    flex: 0 0 auto;
  }

  /* Overlay auf Mobile scrollbar machen:
     1. Der .nn-overlay Container bekommt overflow-y:auto → scrollt wenn Inhalt überläuft.
     2. Der .nn-overlay__inner bekommt height:auto → darf über den Container hinauswachsen. */
  .nn-overlay {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .nn-overlay__inner,
  .nn-layout--left .nn-overlay__inner,
  .nn-layout--right .nn-overlay__inner {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none;
    grid-template-areas: none;
  }

  /* Alle Overlay-Sektionen: nicht schrumpfen, natürliche Größe behalten */
  .nn-overlay__tiles,
  .nn-overlay__nav,
  .nn-overlay__mega,
  .nn-overlay__mobile-ctas,
  .nn-overlay__footer {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  .nn-overlay__nav {
    min-height: auto !important;
    justify-content: flex-start !important;
  }

  .nn-overlay__footer {
    opacity: 1 !important;
    transform: none !important;
  }

}

/* =============================================================================
   RESPONSIVE – Tablet (641–1024px)
   Auf Tablet-Größen wäre das Default-3-Spalten-Tile-Grid zu eng (Tiles würden
   zu schmalen Streifen kollabieren, vor allem auf engen Tablet-Viewports und
   während Resize-Animationen). Wir aktivieren das gleiche 2-Spalten-Masonry
   wie auf Mobile, aber mit etwas großzügigeren Werten. Mobile (≤640px) hat
   eigene padding/inset/Inner-Regeln und bleibt unangetastet.
   ============================================================================= */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Inner zurück auf flex-column, falls ein Side-Layout (left/right/sidebar) aktiv ist.
     Sonst würde Inner ein Grid mit grid-template-areas bleiben und das Tile-
     Layout wäre inkonsistent zum Mobile-Verhalten. */
  .nn-overlay__inner,
  .nn-layout--left .nn-overlay__inner,
  .nn-layout--right .nn-overlay__inner,
  .nn-layout--sidebar .nn-overlay__inner {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }

  /* Sidebar: Tiles auf Tablet wieder normal (nicht absolut) */
  .nn-layout--sidebar .nn-overlay__tiles {
    position: relative !important;
    display: grid !important;
  }
  .nn-layout--sidebar .nn-tile {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    clip-path: none !important;
    border-radius: var(--nn-tile-radius, 12px) !important;
  }

  /* WICHTIG: alle kritischen Tile-Werte mit !important, weil die Default-
     Side-Layout-Regeln (`.nn-layout--left .nn-overlay__tiles { min-height: 0 }`)
     im Stylesheet weiter unten stehen und sonst per Reihenfolge gewinnen. */
  .nn-overlay__tiles,
  .nn-layout--left .nn-overlay__tiles,
  .nn-layout--right .nn-overlay__tiles,
  .nn-layout--sidebar .nn-overlay__tiles {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
    min-height: 32vh !important;
  }

  .nn-tile,
  .nn-layout--left .nn-tile,
  .nn-layout--right .nn-tile,
  .nn-layout--sidebar .nn-tile {
    min-height: 0 !important;
    grid-row: auto;
  }

  .nn-tiles--count-3 .nn-tile:nth-child(2),
  .nn-layout--left .nn-tiles--count-3 .nn-tile:nth-child(2),
  .nn-layout--right .nn-tiles--count-3 .nn-tile:nth-child(2) {
    grid-row: 1 / -1 !important;
  }

  .nn-tiles--count-2,
  .nn-layout--left .nn-tiles--count-2,
  .nn-layout--right .nn-tiles--count-2 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
  }

  .nn-tiles--count-1,
  .nn-layout--left .nn-tiles--count-1,
  .nn-layout--right .nn-tiles--count-1 {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }

  .nn-tiles--vertical,
  .nn-layout--left .nn-tiles--vertical,
  .nn-layout--right .nn-tiles--vertical {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-height: auto !important;
  }
  .nn-tiles--vertical .nn-tile,
  .nn-layout--left .nn-tiles--vertical .nn-tile,
  .nn-layout--right .nn-tiles--vertical .nn-tile {
    min-height: clamp(120px, 20vh, 200px) !important;
    grid-row: auto !important;
  }
}

/* =============================================================================
   MEGA-MENÜ – Dropdown
   ============================================================================= */

/* Mega-Nav Item: relative für Panels */
.nn-mega-nav__item {
  position: relative;
}

/* Reset: Elemente in Dropdown/Megapanel vor Classic-Menu-Styles schützen
   .nn-navbar--layout-classic .nn-navbar__classic-menu a/ul/li hat Spezifität 0,2,1
   → wir brauchen mindestens 0,2,1 um zu gewinnen */
.nn-navbar__classic-menu .nn-dropdown ul,
.nn-navbar__classic-menu .nn-megapanel ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  columns: unset;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nn-navbar__classic-menu .nn-dropdown li,
.nn-navbar__classic-menu .nn-megapanel li {
  margin: 0;
  padding: 0;
  border-bottom: none;
  opacity: 1;
  transform: none;
  position: static;
}
.nn-navbar__classic-menu .nn-dropdown a,
.nn-navbar__classic-menu .nn-megapanel a {
  display: block;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  white-space: normal;
  color: inherit;
  text-align: inherit;
}
.nn-navbar__classic-menu .nn-dropdown a::after,
.nn-navbar__classic-menu .nn-megapanel a::after {
  display: none;
}
.nn-navbar__classic-menu .nn-dropdown a:hover,
.nn-navbar__classic-menu .nn-megapanel a:hover {
  padding-left: 0;
}

/* Dropdown-Panel */
.nn-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: var(--nn-panel-bg, #fff);
  border-radius: var(--nn-panel-radius, 12px);
  padding: 8px 0;
  box-shadow: var(--nn-panel-shadow, 0 8px 32px rgba(0,0,0,0.12));
  -webkit-backdrop-filter: var(--nn-panel-blur, none);
  backdrop-filter: var(--nn-panel-blur, none);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s var(--nn-ease);
  transform: translateX(-50%) translateY(4px);
}

/* Klick-Modus: nur per JS-Klasse öffnen */
.nn-mega-nav__item--open > .nn-dropdown {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Hover-Modus: auch per :hover öffnen */
[data-mega-trigger="hover"] .nn-mega-nav__item:hover > .nn-dropdown {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Overflow-Items: CSS-Hover deaktivieren — Accordion nutzt Klick + --open-Klasse */
[data-mega-trigger="hover"] .nn-priority-more__dropdown > .nn-mega-nav__item:hover > .nn-dropdown {
  display: none;
  opacity: 0;
  transform: none;
}
[data-mega-trigger="hover"] .nn-priority-more__dropdown > .nn-mega-nav__item--open:hover > .nn-dropdown {
  display: block;
  opacity: 1;
  transform: none;
}

/* Kleiner Abstand oben für Hover-Gap */
.nn-dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.nn-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nn-dropdown__list li {
  margin: 0;
  padding: 0;
  border-bottom: none;
  opacity: 1;
  transform: none;
}

.nn-dropdown .nn-dropdown__list a {
  display: block;
  padding: 8px 20px;
  font-family: var(--nn-font);
  font-size: 14px;
  font-weight: 400;
  /* Gleiche Fallback-Kette wie Mega-Panel-Links: Mega-Link-Farbe → Link-Farbe → dunkel */
  color: var(--nn-mega-link-color, var(--nn-link-color, var(--nn-dark)));
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nn-dropdown .nn-dropdown__list a:hover {
  background: #f5f5f5;
  color: var(--nn-mega-link-color-h, var(--nn-link-color-h, var(--nn-accent)));
  padding-left: 20px;
}

.nn-dropdown .nn-dropdown__list a::after { display: none; }

/* Dropdown: Gestaltet (mit Icon + Beschreibung) */
.nn-dropdown--styled .nn-dropdown__list {
  padding: 4px 8px;
}

.nn-dropdown--styled .nn-dropdown__styled-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  white-space: normal;
}

.nn-dropdown--styled .nn-dropdown__styled-link:hover {
  background: #f5f5f5;
  padding-left: 14px;
}

.nn-dropdown--styled .nn-dropdown__styled-link::after { display: none; }

.nn-dropdown__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}

.nn-dropdown__label {
  font-weight: 500;
  font-size: 14px;
  display: block;
}

.nn-dropdown__desc {
  font-size: 12px;
  color: var(--nn-gray);
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

/* =============================================================================
   MEGA-MENÜ – Panel
   ============================================================================= */

.nn-megapanel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--nn-panel-bg, #fff);
  border-radius: var(--nn-panel-radius, 16px);
  box-shadow: var(--nn-panel-shadow, 0 12px 48px rgba(0,0,0,0.14));
  -webkit-backdrop-filter: var(--nn-panel-blur, none);
  backdrop-filter: var(--nn-panel-blur, none);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s var(--nn-ease);
  overflow: hidden;
}

/* L – Groß: volle Navbar-Breite, fixiert positioniert */
.nn-megapanel--l {
  left: 0;
  right: 0;
  transform: translateY(4px);
  width: var(--nn-bar-width, 100%);
  max-width: var(--nn-bar-width, 100%);
  position: fixed;
  top: auto;
  margin-top: 8px;
}

/* M – Mittel: 60% der Navbar-Breite, zentriert */
.nn-megapanel--m {
  min-width: 420px;
  width: 60vw;
  max-width: 800px;
}

/* S – Klein: kompakt unter dem Menüpunkt */
.nn-megapanel--s {
  min-width: 340px;
  max-width: 500px;
}

/* Custom – frei wählbare Breite über Inline-CSS-Variablen --nn-mp-w / --nn-mp-w-m (vw) */
.nn-megapanel--custom {
  width: var(--nn-mp-w, 60vw);
  max-width: var(--nn-mp-w, 60vw);
}
@media (max-width: 768px) {
  .nn-megapanel--custom {
    width: var(--nn-mp-w-m, var(--nn-mp-w, 60vw));
    max-width: var(--nn-mp-w-m, var(--nn-mp-w, 60vw));
  }
}

/* ─── Panel-Ausrichtung (nur für s/m/custom) ─────────────────────────
   center = Default (bereits im Base-Style: left:50% + translateX(-50%))
   left/right = kantenbündig am Menüpunkt
   viewport = Auto-Korrektur per JS (siehe navbar.js) — kein Verlassen des Bildschirms

   WICHTIG: Doppel-Klassen-Selektoren (.nn-megapanel.nn-megapanel--align-*)
   für höhere Spezifität, damit die generische .nn-mega-nav__item--open >
   .nn-megapanel-Regel (die weiter unten im Stylesheet steht) unser transform
   nicht überschreibt. */

.nn-megapanel.nn-megapanel--align-left {
  left: 0;
  right: auto;
  transform: translateY(4px);
}
.nn-mega-nav__item--open > .nn-megapanel.nn-megapanel--align-left,
[data-mega-trigger="hover"] .nn-mega-nav__item:hover > .nn-megapanel.nn-megapanel--align-left {
  transform: translateY(0);
}

.nn-megapanel.nn-megapanel--align-right {
  left: auto;
  right: 0;
  transform: translateY(4px);
}
.nn-mega-nav__item--open > .nn-megapanel.nn-megapanel--align-right,
[data-mega-trigger="hover"] .nn-mega-nav__item:hover > .nn-megapanel.nn-megapanel--align-right {
  transform: translateY(0);
}

/* viewport-Modus: startet zentriert (translateX(-50%)), JS shifted per
   --nn-mp-shift falls es über den Bildschirmrand ragt (siehe navbar.js). */
.nn-megapanel.nn-megapanel--align-viewport {
  --nn-mp-shift: 0px;
  transform: translateX(calc(-50% + var(--nn-mp-shift))) translateY(4px);
}
.nn-mega-nav__item--open > .nn-megapanel.nn-megapanel--align-viewport,
[data-mega-trigger="hover"] .nn-mega-nav__item:hover > .nn-megapanel.nn-megapanel--align-viewport {
  transform: translateX(calc(-50% + var(--nn-mp-shift))) translateY(0);
}

/* Hover-Gap oben */
.nn-megapanel::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Klick-Modus: nur per JS-Klasse öffnen */
.nn-mega-nav__item--open > .nn-megapanel {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.nn-mega-nav__item--open > .nn-megapanel--l {
  transform: translateY(0);
}

/* Hover-Modus: auch per :hover öffnen */
[data-mega-trigger="hover"] .nn-mega-nav__item:hover > .nn-megapanel {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[data-mega-trigger="hover"] .nn-mega-nav__item:hover > .nn-megapanel--l {
  transform: translateY(0);
}

/* Overflow-Items: CSS-Hover deaktivieren — Accordion nutzt Klick + --open-Klasse */
[data-mega-trigger="hover"] .nn-priority-more__dropdown > .nn-mega-nav__item:hover > .nn-megapanel {
  display: none;
  opacity: 0;
  transform: none;
}
[data-mega-trigger="hover"] .nn-priority-more__dropdown > .nn-mega-nav__item--open:hover > .nn-megapanel {
  display: block;
  opacity: 1;
  transform: none;
}

/* Panel-Hintergrund (Bild/Video) */
.nn-megapanel__panel-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}
.nn-megapanel__panel-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.nn-megapanel--has-bg .nn-megapanel__inner {
  position: relative;
  z-index: 2;
}
.nn-megapanel--has-bg {
  position: relative;
}
/* Weiße Schrift wenn Panel-Hintergrund aktiv */
.nn-megapanel--has-bg .nn-megapanel__group-heading {
  color: rgba(255,255,255,0.7);
}
.nn-megapanel--has-bg .nn-megapanel__links a {
  color: #fff;
}
.nn-megapanel--has-bg .nn-megapanel__links a:hover {
  color: rgba(255,255,255,0.75);
}
.nn-megapanel--has-bg .nn-megapanel__buttons {
}

.nn-megapanel__inner {
  display: flex;
  gap: 0;
  min-height: 280px;
}

/* Layout 2: Reihenfolge umkehren */
.nn-megapanel--layout-2 .nn-megapanel__inner {
  flex-direction: row-reverse;
}

/* Layout 4: Nur Content (kein Media-Bereich) */
.nn-megapanel--layout-4 .nn-megapanel__content {
  flex: 1 1 100%;
  max-width: 100%;
}

/* Layout 5: Kacheln + Content nebeneinander */
.nn-megapanel--layout-5 .nn-megapanel__inner {
  flex-direction: row;
}
.nn-megapanel--layout-5 .nn-megapanel__tiles {
  flex: 0 0 60%;
  max-width: 60%;
  align-self: stretch;
}
.nn-megapanel--layout-5 .nn-megapanel__content {
  flex: 1 1 40%;
  max-width: 40%;
}
/* Position der Links-Spalte: rechts (Default = Tiles links, Content rechts) ist die natürliche Reihenfolge */
.nn-megapanel--layout-5.nn-megapanel--tiles-pos-left .nn-megapanel__inner {
  flex-direction: row-reverse;
}

/* Mobile: Layout 5 vertikal stapeln */
@media (max-width: 768px) {
  .nn-megapanel--layout-5 .nn-megapanel__inner {
    flex-direction: column;
  }
  .nn-megapanel--layout-5.nn-megapanel--tiles-pos-left .nn-megapanel__inner {
    flex-direction: column;
  }
  .nn-megapanel--layout-5 .nn-megapanel__tiles,
  .nn-megapanel--layout-5 .nn-megapanel__content {
    flex: 1 1 auto;
    max-width: 100%;
  }
}

/* Media-Bereich (Bild/Video) */
.nn-megapanel__media {
  flex: 0 0 40%;
  max-width: 40%;
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
}

.nn-megapanel__media-link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.nn-megapanel__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--nn-ease);
}

.nn-megapanel__media:hover .nn-megapanel__bg {
  transform: scale(1.03);
}

.nn-megapanel__media-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  color: #fff;
  font-family: var(--nn-font);
  font-size: 16px;
  font-weight: 600;
  z-index: 1;
}

/* Content-Bereich (Link-Gruppen) */
.nn-megapanel__content {
  flex: 1;
  padding: clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
}

/* Ausrichtung: Links (Standard) */
.nn-megapanel__content--left {
  align-items: flex-start;
  text-align: left;
}

/* Ausrichtung: Mittig */
.nn-megapanel__content--center {
  align-items: center;
  text-align: center;
}
.nn-megapanel__content--center .nn-megapanel__groups {
  justify-content: center;
}
.nn-megapanel__content--center .nn-megapanel__group {
  align-items: center;
}
.nn-megapanel__content--center .nn-megapanel__buttons {
  justify-content: center;
}

/* Ausrichtung: Rechts */
.nn-megapanel__content--right {
  align-items: flex-end;
  text-align: right;
}
.nn-megapanel__content--right .nn-megapanel__groups {
  justify-content: flex-end;
}
.nn-megapanel__content--right .nn-megapanel__group {
  align-items: flex-end;
}
.nn-megapanel__content--right .nn-megapanel__buttons {
  justify-content: flex-end;
}

/* Gruppen-Wrapper: fließt in 2–3 Spalten */
.nn-megapanel__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: flex-start;
  flex: 1;
}

.nn-megapanel__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 calc(33.333% - 20px);
  min-width: 140px;
  max-width: 100%;
}

.nn-megapanel__group-heading {
  font-family: var(--nn-font);
  font-size: var(--nn-fs-mega, 11px);
  font-weight: var(--nn-fw-mega, 600);
  text-transform: var(--nn-tt-mega, uppercase);
  font-style: var(--nn-fst-mega, normal);
  letter-spacing: 0.08em;
  color: var(--nn-gray);
  margin-bottom: 4px;
}

.nn-megapanel__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nn-megapanel__links li {
  margin: 0;
  padding: 0;
  border-bottom: none;
  opacity: 1;
  transform: none;
}

.nn-megapanel .nn-megapanel__links a {
  display: block;
  padding: 6px 0;
  font-family: var(--nn-font);
  font-size: 14px;
  font-weight: 400;
  /* Fallback-Kette: eigene Mega-Link-Variable → Standard-Link-Farbe des Users → --nn-dark */
  color: var(--nn-mega-link-color, var(--nn-link-color, var(--nn-dark)));
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.2s var(--nn-ease);
}

.nn-megapanel .nn-megapanel__links a::after { display: none; }

.nn-megapanel .nn-megapanel__links a:hover {
  color: var(--nn-mega-link-color-h, var(--nn-link-color-h, var(--nn-accent)));
  /* Einrück-Effekt abschaltbar via Backend-Toggle (Safari-Rendering-Bug bei
     bestimmten Glyphen, z.B. "J", während der padding-Transition) */
  padding-left: var(--nn-mega-link-shift, 4px);
}

/* Mega-Panel Button-Bereich */
.nn-megapanel__buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: clamp(14px, 1.5vw, 20px);
  margin-top: auto;
}

/* Button 1 (gefüllt) – hohe Spezifität um Classic-Menu a-Styles zu überschreiben */
.nn-megapanel .nn-megapanel__buttons .nn-megapanel__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--nn-mega-btn-pad-v, 10px) var(--nn-mega-btn-pad-h, 20px);
  background: var(--nn-mega-btn-bg, var(--nn-dark));
  color: var(--nn-mega-btn-color, var(--nn-white));
  font-family: var(--nn-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: var(--nn-mega-btn-radius, 100px);
  border: var(--nn-mega-btn-border-w, 0px) solid var(--nn-mega-btn-border-c, transparent);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nn-megapanel .nn-megapanel__buttons .nn-megapanel__btn:hover {
  background: var(--nn-mega-btn-bg-h, #333);
  color: var(--nn-mega-btn-color-h, var(--nn-white));
  border-color: var(--nn-mega-btn-border-c-h, transparent);
  padding-left: var(--nn-mega-btn-pad-h, 20px);
}

/* Button 2 (Outline) */
.nn-megapanel .nn-megapanel__buttons .nn-megapanel__btn--secondary {
  padding: var(--nn-mega-outline-pad-v, 10px) var(--nn-mega-outline-pad-h, 20px);
  background: var(--nn-mega-outline-bg, transparent);
  color: var(--nn-mega-outline-color, var(--nn-dark));
  border: var(--nn-mega-outline-border-w, 1.5px) solid var(--nn-mega-outline-border-c, var(--nn-dark));
  border-radius: var(--nn-mega-outline-radius, 100px);
}

.nn-megapanel .nn-megapanel__buttons .nn-megapanel__btn--secondary:hover {
  background: var(--nn-mega-outline-bg-h, var(--nn-dark));
  color: var(--nn-mega-outline-color-h, var(--nn-white));
  border-color: var(--nn-mega-outline-border-c-h, var(--nn-dark));
  padding-left: var(--nn-mega-outline-pad-h, 20px);
}

/* =============================================================================
   MEGA-MENÜ – Layout 3: Kacheln
   ============================================================================= */

.nn-megapanel__tiles {
  display: grid;
  gap: 8px;
  padding: clamp(12px, 1.5vw, 20px);
  width: 100%;
}

.nn-megapanel__tiles--count-1 { grid-template-columns: 1fr; }
.nn-megapanel__tiles--count-2 { grid-template-columns: 1fr 1fr; }
.nn-megapanel__tiles--count-3 { grid-template-columns: 1fr 1fr 1fr; }
.nn-megapanel__tiles--count-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.nn-megapanel__tiles--count-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.nn-megapanel__tile {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: #f0f0f0;
  min-height: 180px;
}

.nn-megapanel__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  transition: background 0.2s ease;
}

.nn-megapanel__tile:hover::after {
  background: rgba(0,0,0,0.3);
}

.nn-megapanel__tile-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--nn-ease);
}
video.nn-megapanel__tile-bg {
  pointer-events: none;
}

.nn-megapanel__tile:hover .nn-megapanel__tile-bg {
  transform: scale(1.04);
}

.nn-megapanel__tile-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  z-index: 1;
  color: #fff;
}

.nn-megapanel__tile-label {
  display: block;
  font-family: var(--nn-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.nn-megapanel__tile-sub {
  display: block;
  font-family: var(--nn-font);
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}

/* Mega-Menü: Scroll-Farbwechsel für Dropdown/Megapanel-Trigger-Links.
   WICHTIG: > li > a statt Nachfahren-Selektor — die alte Regel `.nn-mega-nav a`
   traf ALLE Links in den Panels mit, inkl. der Mega-Buttons (<a>-Tags) und
   überschrieb deren --nn-mega-btn-color nach dem Scrollen (Spezifität 0,3,1
   schlug die Button-Regel 0,3,0). Panel-Inhalte haben eigene Farb-Variablen. */
.nn-navbar--color-change.nn-navbar--scrolled .nn-mega-nav > li > a {
  color: var(--nn-scroll-link-color, var(--nn-scroll-text-color, #111111));
}
.nn-navbar--color-change.nn-navbar--scrolled .nn-mega-nav > li > a:hover {
  color: var(--nn-scroll-link-color-h, var(--nn-link-color-h));
}

/* Mega-Menü Panel-Links im Scroll-State:
   Präzisere Regel als .nn-mega-nav a — trifft NUR die Panel-Link-Gruppen,
   damit die Trigger-Links oben ihre eigene Scroll-Link-Farbe behalten.
   Fallback-Kette: eigene Scroll-Mega-Link-Farbe → initial Mega-Link-Farbe
   → Scroll-Link-Farbe → Scroll-Textfarbe. */
.nn-navbar--color-change.nn-navbar--scrolled .nn-megapanel .nn-megapanel__links a {
  color: var(--nn-scroll-mega-link-color, var(--nn-mega-link-color, var(--nn-scroll-link-color, var(--nn-scroll-text-color, #111111))));
}
.nn-navbar--color-change.nn-navbar--scrolled .nn-megapanel .nn-megapanel__links a:hover {
  color: var(--nn-scroll-mega-link-color-h, var(--nn-mega-link-color-h, var(--nn-scroll-link-color-h, var(--nn-link-color-h))));
}

/* Dropdown-Panel-Links im Scroll-State: gleiche Kette wie Mega-Panel-Links */
.nn-navbar--color-change.nn-navbar--scrolled .nn-dropdown .nn-dropdown__list a {
  color: var(--nn-scroll-mega-link-color, var(--nn-mega-link-color, var(--nn-scroll-link-color, var(--nn-scroll-text-color, #111111))));
}
.nn-navbar--color-change.nn-navbar--scrolled .nn-dropdown .nn-dropdown__list a:hover {
  color: var(--nn-scroll-mega-link-color-h, var(--nn-mega-link-color-h, var(--nn-scroll-link-color-h, var(--nn-link-color-h))));
}

/* Responsive: Mega-Menü auf Mobile ausblenden (Burger-Fallback) */
@media (max-width: 768px) {
  .nn-dropdown,
  .nn-megapanel {
    display: none !important;
  }
}

/* Layout 2: Logo zentriert – drei Spalten per CSS Grid */
.nn-navbar--layout-center .nn-navbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.nn-navbar--layout-center .nn-navbar__logo {
  grid-column: 2;
  justify-self: center;
}

.nn-navbar--layout-center .nn-navbar__zone {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nn-navbar--layout-center .nn-navbar__zone--left {
  grid-column: 1;
  justify-self: start;
}

.nn-navbar--layout-center .nn-navbar__zone--right {
  grid-column: 3;
  justify-self: end;
}

/* Mobil: Navbar-Elemente einzeln verstecken (nicht den Container), damit
   Elemente mit "Mobil anzeigen"-Option sichtbar bleiben können. */
@media (max-width: 640px) {
  .nn-navbar__items .nn-navbar-item {
    display: none;
  }
  .nn-navbar__items .nn-navbar-item--show-mobile {
    display: inline-block;
  }
}

/* =============================================================================
   OVERLAY – Fullscreen Menü
   ============================================================================= */
.nn-overlay {
  position: fixed;
  inset: 12px;                      /* Kleiner Abstand rundum */
  background: var(--nn-overlay-bg);
  border-radius: var(--nn-overlay-radius, 16px);
  z-index: 10000;                   /* über der Navbar (9999) */
  overflow: hidden;
  overflow-y: auto;

  /* Startzustand: unsichtbar */
  opacity: 0;
  transform: scale(0.97) translateY(-8px);
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition:
    opacity    var(--nn-overlay-dur) var(--nn-overlay-ease),
    transform  var(--nn-overlay-dur) var(--nn-overlay-ease),
    box-shadow var(--nn-overlay-dur) ease;
  will-change: transform, opacity;
}

/* Overlay offen */
.nn-overlay--open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;

  /* Backdrop: riesiger Box-Shadow dunkelt alles hinter dem Overlay ab */
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.45);
}

/* Scroll lock auf Body (position:fixed ist robuster für iOS als overflow:hidden).
   Das Overlay wird beim Öffnen per JS aus dem Body in <html> verschoben, damit
   es vom body:fixed-Trick (und seinen Nebeneffekten auf den Containing-Block)
   nicht betroffen ist. Beim Schließen wandert es zurück in den Body. */
body.nn-no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Overlay: Scroll im Overlay soll nicht an den Body durchreichen */
.nn-overlay--open {
  overscroll-behavior: contain;
}

/* Close-Button oben rechts im Overlay — versteckt, Burger übernimmt */
.nn-close {
  position: absolute;
  top: clamp(16px, 2.5vh, 28px);
  right: clamp(16px, 2.5vw, 32px);
  z-index: 2;
  display: none;                /* Burger-Button übernimmt die Schließen-Funktion */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  cursor: pointer;
  color: var(--nn-dark);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.25s var(--nn-ease);
  -webkit-tap-highlight-color: transparent;

  /* Einblend-Animation */
  opacity: 0;
  transform: scale(0.8);
}

/* Close-Button bleibt versteckt – Burger übernimmt */
.nn-overlay--open .nn-close {
  display: none;
}

.nn-close:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.2);
}

.nn-close:active {
  transform: scale(0.92);
}

.nn-close:focus-visible {
  outline: 2px solid var(--nn-accent);
  outline-offset: 4px;
}

/* Overlay innerer Container – füllt die volle Höhe, verteilt Platz per flex */
.nn-overlay__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(70px, 10vh, 100px) clamp(24px, 4vw, 48px) clamp(20px, 3vh, 48px);
  gap: clamp(16px, 2.5vh, 48px);
  overflow: hidden;
}

/* =============================================================================
   OVERLAY – Kacheln (dynamisches Grid)
   ============================================================================= */
.nn-overlay__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  flex: 1.2 1 0;        /* Kacheln bekommen den größten Anteil */
  min-height: 0;        /* erlaubt schrumpfen unter Content-Size */
}

/* Dynamisch: nur 2 Kacheln → 2 gleiche Spalten */
.nn-tiles--count-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Dynamisch: nur 1 Kachel → volle Breite */
.nn-tiles--count-1 {
  grid-template-columns: 1fr;
}

/* Vertikale Anordnung: Kacheln untereinander */
.nn-tiles--vertical {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.nn-tiles--vertical .nn-tile {
  min-height: clamp(100px, 18vh, 220px);
}

.nn-tile {
  position: relative;
  border-radius: var(--nn-tile-radius, 12px);
  overflow: hidden;
  text-decoration: none;
  display: block;
  background: #f0f0f0;
  min-height: 0;        /* flexibel schrumpfbar */

  /* Stagger: Clip-Path-Reveal aus der Mitte
     Das Bild liegt schon in voller Größe, nur der sichtbare
     Rahmen morpht von 0 auf volle Größe. */
  clip-path: inset(50% 50% 50% 50% round var(--nn-tile-radius, 12px));
  transition:
    clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.nn-overlay--open .nn-tile:nth-child(1) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.12s; }
.nn-overlay--open .nn-tile:nth-child(2) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.24s; }
.nn-overlay--open .nn-tile:nth-child(3) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.36s; }
.nn-overlay--open .nn-tile:nth-child(4) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.48s; }
.nn-overlay--open .nn-tile:nth-child(5) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.52s; }
.nn-overlay--open .nn-tile:nth-child(6) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.56s; }
.nn-overlay--open .nn-tile:nth-child(7) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.60s; }
.nn-overlay--open .nn-tile:nth-child(8) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.64s; }
.nn-overlay--open .nn-tile:nth-child(9) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.68s; }
.nn-overlay--open .nn-tile:nth-child(10) { clip-path: inset(0% 0% 0% 0% round var(--nn-tile-radius, 12px)); transition-delay: 0.72s; }

/* Sidebar-Tiles: kein clip-path Reveal nötig (Opacity steuert Sichtbarkeit) */
.nn-layout--sidebar .nn-overlay--open .nn-tile,
.nn-overlay--open .nn-sidebar-tiles .nn-tile {
  clip-path: none !important;
  transition-delay: 0s !important;
}

/* Tile Hover */
.nn-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease;
}
.nn-tile:hover::after {
  background: rgba(0, 0, 0, 0.28);
}

.nn-tile__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--nn-ease);
}
.nn-tile:hover .nn-tile__bg {
  transform: scale(1.04);
}

/* Video als Kachel-Hintergrund */
.nn-tile__bg--video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.nn-tile__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(10px, 1.5vw, 20px);
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  z-index: 1;
  color: white;
}

.nn-tile__label {
  display: block;
  font-family: var(--nn-font);
  font-weight: var(--nn-fw-tiles, 600);
  text-transform: var(--nn-tt-tiles, none);
  font-style: var(--nn-fst-tiles, normal);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Label-Größen: S, M (Standard), L */
.nn-tile__label--s { font-size: clamp(11px, 1vw, 14px); }
.nn-tile__label--m { font-size: clamp(14px, 1.4vw, 20px); }
.nn-tile__label--l { font-size: clamp(18px, 2.2vw, 32px); letter-spacing: -0.02em; }

.nn-tile__sub {
  display: block;
  font-family: var(--nn-font);
  font-size: clamp(10px, 0.9vw, 12px);
  opacity: 0.8;
  margin-top: 3px;
  font-weight: 400;
}

/* =============================================================================
   OVERLAY – Navigation Links
   ============================================================================= */
.nn-overlay__nav {
  flex: 1 1 0;          /* füllt den Rest */
  min-height: 0;        /* erlaubt schrumpfen */
  overflow-y: auto;     /* Sicherheitsnetz, falls Links sehr viele */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nn-overlay__menu-list {
  list-style: none;
  columns: 2;
  column-gap: clamp(24px, 3vw, 48px);
}

.nn-overlay__menu-list li {
  break-inside: avoid;     /* verhindert Umbruch mitten im Eintrag */
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);

  /* Stagger */
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity   0.5s var(--nn-ease),
    transform 0.5s var(--nn-ease);
}

.nn-overlay--open .nn-overlay__menu-list li:nth-child(1)  { opacity: 1; transform: none; transition-delay: 0.22s; }
.nn-overlay--open .nn-overlay__menu-list li:nth-child(2)  { opacity: 1; transform: none; transition-delay: 0.28s; }
.nn-overlay--open .nn-overlay__menu-list li:nth-child(3)  { opacity: 1; transform: none; transition-delay: 0.34s; }
.nn-overlay--open .nn-overlay__menu-list li:nth-child(4)  { opacity: 1; transform: none; transition-delay: 0.40s; }
.nn-overlay--open .nn-overlay__menu-list li:nth-child(5)  { opacity: 1; transform: none; transition-delay: 0.46s; }
.nn-overlay--open .nn-overlay__menu-list li:nth-child(6)  { opacity: 1; transform: none; transition-delay: 0.52s; }
.nn-overlay--open .nn-overlay__menu-list li:nth-child(7)  { opacity: 1; transform: none; transition-delay: 0.58s; }
.nn-overlay--open .nn-overlay__menu-list li:nth-child(n+8){ opacity: 1; transform: none; transition-delay: 0.62s; }

.nn-overlay__menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(8px, 1.5vh, 16px) 0;
  font-family: var(--nn-font);
  font-size: var(--nn-fs-overlay-heading, clamp(16px, 2.5vw, 28px));
  font-weight: var(--nn-fw-overlay-heading, 500);
  text-transform: var(--nn-tt-overlay-heading, none);
  font-style: var(--nn-fst-overlay-heading, normal);
  color: var(--nn-dark);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color 0.2s ease, padding-left 0.25s var(--nn-ease);
}

.nn-overlay__menu-list a::after {
  content: '→';
  font-size: 0.6em;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s var(--nn-ease);
  transform: translateX(-6px);
}

.nn-overlay__menu-list a:hover {
  color: var(--nn-accent);
  padding-left: 6px;
}

.nn-overlay__menu-list a:hover::after {
  opacity: 0.5;
  transform: translateX(0);
}

/* Untermenü (Sub-Items) */
.nn-overlay__menu-list .sub-menu {
  list-style: none;
  padding: 4px 0 12px 16px;
  display: none;
}

.nn-overlay__menu-list li.menu-item-has-children:hover .sub-menu,
.nn-overlay__menu-list li.menu-item-has-children.nn-sub-open .sub-menu {
  display: block;
}

.nn-overlay__menu-list .sub-menu a {
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 400;
  padding: 8px 0;
  color: var(--nn-gray);
}

.nn-overlay__menu-list .sub-menu a:hover {
  color: var(--nn-accent);
}

/* =============================================================================
   OVERLAY – Desktop / Mobile Menü-Switching
   ============================================================================= */

/* Mobile-Menü standardmäßig ausblenden (nur sichtbar auf ≤640px) */
.nn-overlay__nav--mobile {
  display: none !important;
}

/* Auf kleinen Screens: Desktop-Menü ausblenden, Mobile-Menü einblenden */
@media (max-width: 640px) {
  .nn-overlay__nav--desktop {
    display: none !important;
  }
  .nn-overlay__nav--mobile {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
}

/* =============================================================================
   OVERLAY – Footer / Kontakt
   ============================================================================= */
.nn-overlay__footer {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vh, 20px);
  padding-top: clamp(12px, 2vh, 32px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  flex: 0 0 auto;

  /* Stagger */
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity   0.5s var(--nn-ease),
    transform 0.5s var(--nn-ease);
  transition-delay: 0.5s;
}

/* Wrapper um alle Inhaltsspalten (ohne Social-Links) */
.nn-footer__columns {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.5vh, 20px);
}

/* Footer-Spalten */
.nn-footer__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Side-by-side: Spalten nebeneinander, gleichmäßig verteilt */
.nn-footer--side .nn-footer__columns {
  flex-direction: row;
  gap: clamp(20px, 3vw, 48px);
}

.nn-footer--side .nn-footer__col {
  flex: 1 1 0;
  min-width: 0;
}

/* Freitext-Block: gleiche Struktur wie .nn-overlay__contact */
.nn-overlay__text-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nn-overlay__text {
  font-family: var(--nn-font);
  font-size: var(--nn-fs-overlay-text, 14px);
  font-weight: var(--nn-fw-overlay-text, 400);
  text-transform: var(--nn-tt-overlay-text, none);
  font-style: var(--nn-fst-overlay-text, normal);
  line-height: 1.6;
  color: var(--nn-dark);
}
.nn-overlay__text p:first-child { margin-top: 0; }
.nn-overlay__text p:last-child  { margin-bottom: 0; }
.nn-overlay__text a {
  color: var(--nn-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nn-overlay__text a:hover { opacity: 0.7; }
.nn-overlay__text ul,
.nn-overlay__text ol { margin: 8px 0; padding-left: 20px; }

.nn-overlay--open .nn-overlay__footer {
  opacity: 1;
  transform: none;
}

.nn-overlay__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nn-overlay__contact a {
  color: var(--nn-dark);
  text-decoration: none;
  font-family: var(--nn-font);
  font-size: var(--nn-fs-contact, 14px);
  font-weight: var(--nn-fw-contact, 400);
  text-transform: var(--nn-tt-contact, none);
  font-style: var(--nn-fst-contact, normal);
  transition: color 0.2s ease;
}

.nn-overlay__contact a:hover {
  color: var(--nn-accent);
}

/* Einheitliches Label-Styling – überall gleich im Footer */
.nn-contact-label {
  display: block;
  font-family: var(--nn-font);
  font-size: var(--nn-fs-contact, 11px);
  font-weight: var(--nn-fw-contact, 600);
  text-transform: var(--nn-tt-contact, uppercase);
  font-style: var(--nn-fst-contact, normal);
  letter-spacing: 0.08em;
  color: var(--nn-gray);
  margin-bottom: 4px;
}

.nn-overlay__social {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  flex: 1 1 100%;
}

/* Social-Links Position */
.nn-social--right {
  justify-content: flex-end;
}

.nn-social--left {
  justify-content: flex-start;
}

.nn-overlay__social a {
  font-family: var(--nn-font);
  font-size: 13px;
  color: var(--nn-dark);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.nn-overlay__social a:hover {
  color: var(--nn-accent);
  transform: translateY(-2px);
}

/* Icon-Variante der Social-Links */
.nn-overlay__social a.nn-social-link--icon {
  width: 32px;
  height: 32px;
  padding: 4px;
  border-radius: 50%;
  justify-content: center;
}

.nn-overlay__social a.nn-social-link--icon:hover {
  opacity: 0.7;
}

.nn-social-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* =============================================================================
   LAYOUT-VARIANTEN – Side-by-Side (left / right)
   ============================================================================= */

/* --- Gemeinsame Basis für left + right --- */
.nn-layout--left .nn-overlay__inner,
.nn-layout--right .nn-overlay__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: clamp(16px, 2.5vh, 32px) clamp(16px, 2vw, 48px);
  height: 100%;
  overflow: hidden;
}

/* Layout 2: Kacheln links, Links rechts */
.nn-layout--left .nn-overlay__inner {
  grid-template-areas:
    "tiles nav"
    "footer footer";
}

/* Layout 3: Links links, Kacheln rechts (gespiegelt) */
.nn-layout--right .nn-overlay__inner {
  grid-template-areas:
    "nav tiles"
    "footer footer";
}

/* Grid-Areas zuweisen */
.nn-layout--left .nn-overlay__tiles,
.nn-layout--right .nn-overlay__tiles   { grid-area: tiles; }

.nn-layout--left .nn-overlay__nav,
.nn-layout--right .nn-overlay__nav     { grid-area: nav; }

.nn-layout--left .nn-overlay__footer,
.nn-layout--right .nn-overlay__footer  { grid-area: footer; }

/* --- Tile-Grid in Side-by-Side: 3 Kacheln = 2 Spalten, Masonry --- */
.nn-layout--left .nn-overlay__tiles,
.nn-layout--right .nn-overlay__tiles {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  flex: none;
  min-height: 0;
}

/* Kachel 2 spannt über beide Zeilen (nur bei 3 Kacheln) */
.nn-layout--left .nn-tiles--count-3 .nn-tile:nth-child(2),
.nn-layout--right .nn-tiles--count-3 .nn-tile:nth-child(2) {
  grid-row: 1 / -1;
}

/* Side-by-Side: 2 Kacheln → gleichgroß nebeneinander */
.nn-layout--left .nn-tiles--count-2,
.nn-layout--right .nn-tiles--count-2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

/* Side-by-Side: 1 Kachel → volle Fläche */
.nn-layout--left .nn-tiles--count-1,
.nn-layout--right .nn-tiles--count-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* Side-by-Side: vertikale Anordnung → Kacheln untereinander */
.nn-layout--left .nn-tiles--vertical,
.nn-layout--right .nn-tiles--vertical {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.nn-layout--left .nn-tiles--vertical .nn-tile,
.nn-layout--right .nn-tiles--vertical .nn-tile {
  grid-row: auto;
}

/* --- Nav in Side-by-Side: vertikal zentriert, einspaltig --- */
.nn-layout--left .nn-overlay__nav,
.nn-layout--right .nn-overlay__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  min-height: 0;
}

.nn-layout--left .nn-overlay__menu-list,
.nn-layout--right .nn-overlay__menu-list {
  columns: 1;
}

/* --- Footer in Side-by-Side: volle Breite --- */
.nn-layout--left .nn-overlay__footer,
.nn-layout--right .nn-overlay__footer {
  flex: none;
}

/* =============================================================================
   LAYOUT 4: Sidebar + Preview (Hover → Tile)
   ============================================================================= */

/* Grid: 30 % Links | 70 % Preview */
.nn-layout--sidebar .nn-overlay__inner {
  display: grid;
  grid-template-columns: 30fr 70fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "nav tiles"
    "footer footer";
  height: 100%;
  overflow: hidden;
}

.nn-layout--sidebar .nn-overlay__nav    { grid-area: nav; }
.nn-layout--sidebar .nn-overlay__tiles  { grid-area: tiles; }
.nn-layout--sidebar .nn-overlay__footer { grid-area: footer; }

/* Nav: vertikal zentriert, schmale Spalte */
.nn-layout--sidebar .nn-overlay__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 32px;
  min-height: 0;
  overflow-y: auto;
}

.nn-layout--sidebar .nn-overlay__menu-list {
  columns: 1;
}

/* Tiles: relativ positioniert, Kinder gestapelt */
.nn-layout--sidebar .nn-overlay__tiles {
  position: relative;
  display: block;
  min-height: 0;
  flex: none;
  overflow: hidden;
}

/* Einzelne Tiles: absolut übereinander, nur aktive sichtbar */
.nn-layout--sidebar .nn-tile {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  border-radius: var(--nn-tile-radius, 12px);
  min-height: 0;
  clip-path: none;
}

.nn-layout--sidebar .nn-tile.nn-tile--sidebar-active {
  opacity: 1;
  pointer-events: auto;
}

/* Footer: volle Breite */
.nn-layout--sidebar .nn-overlay__footer {
  flex: none;
}

/* Sidebar Reversed: Links rechts, Preview links */
.nn-sidebar--reversed .nn-overlay__inner {
  grid-template-areas:
    "tiles nav"
    "footer footer" !important;
}
.nn-sidebar--reversed.nn-layout--sidebar .nn-overlay__inner {
  grid-template-columns: 70fr 30fr;
}

/* =============================================================================
   RESPONSIVE – Mobile
   ============================================================================= */
@media (max-width: 900px) {
  .nn-navbar--shrink .nn-navbar__inner {
    max-width: 92%;
  }
}

@media (max-width: 640px) {
  .nn-overlay {
    inset: 8px;
    border-radius: var(--nn-overlay-radius, 16px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Auf Mobile: Inner wächst über Overlay hinaus → .nn-overlay scrollt */
  .nn-overlay__inner,
  .nn-layout--left .nn-overlay__inner,
  .nn-layout--right .nn-overlay__inner,
  .nn-layout--sidebar .nn-overlay__inner {
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none;
    grid-template-areas: none;
    padding: clamp(60px, 9vh, 80px) 20px clamp(16px, 2vh, 32px);
    gap: clamp(12px, 2vh, 24px);
  }

  /* Sidebar: Tiles auf Mobile wieder normal (nicht absolut) */
  .nn-layout--sidebar .nn-overlay__tiles {
    position: relative !important;
    display: grid !important;
  }
  .nn-layout--sidebar .nn-tile {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    clip-path: none !important;
    border-radius: var(--nn-tile-radius, 12px) !important;
  }

  /* Tiles: 2-Spalten-Masonry auf Mobile (3 Kacheln) */
  .nn-overlay__tiles,
  .nn-layout--left .nn-overlay__tiles,
  .nn-layout--right .nn-overlay__tiles,
  .nn-layout--sidebar .nn-overlay__tiles {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 30vh;
  }

  .nn-tile,
  .nn-layout--left .nn-tile,
  .nn-layout--right .nn-tile,
  .nn-layout--sidebar .nn-tile {
    min-height: 0;
    grid-row: auto;
  }

  /* Kachel 2 spannt über beide Zeilen (nur bei 3 Kacheln) */
  .nn-tiles--count-3 .nn-tile:nth-child(2) {
    grid-row: 1 / -1;
  }

  /* Mobile: 2 Kacheln → gleichgroß nebeneinander */
  .nn-tiles--count-2 {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
  }

  /* Mobile: 1 Kachel → volle Breite */
  .nn-tiles--count-1 {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }

  /* Mobile: vertikale Anordnung → untereinander */
  .nn-tiles--vertical {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    min-height: auto !important;
  }
  .nn-tiles--vertical .nn-tile {
    min-height: clamp(80px, 15vh, 160px);
    grid-row: auto !important;
  }

  /* Nav: sichtbar, nicht schrumpfen */
  .nn-overlay__nav {
    flex: 0 0 auto !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .nn-overlay__menu-list {
    columns: 1 !important;
  }

  .nn-overlay__menu-list a {
    padding: clamp(6px, 1.2vh, 12px) 0;
    font-size: clamp(16px, 4vw, 22px);
  }

  /* Footer: explizit sichtbar, volle Breite */
  .nn-overlay__footer {
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 auto !important;
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Side-by-side auf Mobile → untereinander */
  .nn-footer--side .nn-footer__columns {
    flex-direction: column;
  }

  /* Text-Block und Kontaktbereich: sicherstellen dass sichtbar */
  .nn-overlay__text-block {
    flex: 0 0 auto;
  }

  .nn-overlay__contact,
  .nn-overlay__social {
    display: flex !important;
  }

  .nn-navbar--shrink .nn-navbar__inner {
    max-width: 96%;
    padding: 0 16px;
  }

  .nn-navbar__inner {
    padding: 0 16px;
  }
}

/* =============================================================================
   Accessibility
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .nn-navbar__inner,
  .nn-overlay,
  .nn-tile,
  .nn-overlay__menu-list li,
  .nn-overlay__footer,
  .nn-logo-full,
  .nn-logo-icon,
  .nn-burger__line {
    transition: none !important;
    transition-delay: 0s !important;
  }
}

.nn-burger:focus-visible {
  outline: 2px solid var(--nn-accent);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Screen-reader-only helper */
.nn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   MOBILE MEGA-MENÜ (Akkordeon im Overlay)
   ============================================================================= */

/* Desktop: Mobile-Mega ausblenden */
.nn-overlay__mega--mobile {
  display: none !important;
}

/* Reset Liste */
.nn-mobile-mega {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Einzelner Menüpunkt */
.nn-mobile-mega__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.nn-mobile-mega__item:last-child {
  border-bottom: none;
}

/* Einfacher Link */
.nn-mobile-mega__link {
  display: block;
  padding: clamp(8px, 1.5vh, 16px) 0;
  font-family: var(--nn-font);
  font-size: var(--nn-fs-overlay-heading, clamp(16px, 2.5vw, 28px));
  font-weight: var(--nn-fw-overlay-heading, 500);
  color: var(--nn-dark);
  text-decoration: none;
  letter-spacing: -0.02em;
  transition: color 0.2s ease, padding-left 0.25s var(--nn-ease);
}
.nn-mobile-mega__link:hover {
  color: var(--nn-accent);
  padding-left: 6px;
}

/* Akkordeon-Toggle */
.nn-mobile-mega__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: clamp(8px, 1.5vh, 16px) 0;
  font-family: var(--nn-font);
  font-size: var(--nn-fs-overlay-heading, clamp(16px, 2.5vw, 28px));
  font-weight: var(--nn-fw-overlay-heading, 500);
  color: var(--nn-dark);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  letter-spacing: -0.02em;
  transition: color 0.2s ease;
}
.nn-mobile-mega__toggle:hover {
  color: var(--nn-accent);
}

/* Pfeil-Animation */
.nn-mobile-mega__arrow {
  transition: transform 0.3s var(--nn-ease);
  flex-shrink: 0;
  margin-left: 12px;
}
.nn-mobile-mega__item--open .nn-mobile-mega__arrow {
  transform: rotate(180deg);
}

/* Akkordeon-Panel */
.nn-mobile-mega__panel {
  overflow: hidden;
  padding-bottom: 16px;
}
.nn-mobile-mega__panel[hidden] {
  display: none;
}

/* Link-Gruppen */
.nn-mobile-mega__group {
  margin-bottom: 16px;
}
.nn-mobile-mega__group:last-child {
  margin-bottom: 0;
}
.nn-mobile-mega__group-heading {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.4);
  margin-bottom: 8px;
  padding-left: 2px;
}

/* Sub-Links */
.nn-mobile-mega__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nn-mobile-mega__sub li {
  margin: 0;
  padding: 0;
}
.nn-mobile-mega__sub a {
  display: block;
  padding: 8px 0;
  font-size: clamp(14px, 1.8vw, 16px);
  color: var(--nn-dark);
  opacity: 0.7;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease, padding-left 0.2s var(--nn-ease);
}
.nn-mobile-mega__sub a:hover {
  color: var(--nn-accent);
  opacity: 1;
  padding-left: 4px;
}

/* Buttons im Mobile-Mega */
.nn-mobile-mega__buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.nn-mobile-mega__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--nn-mega-btn-pad-v, 10px) var(--nn-mega-btn-pad-h, 20px);
  background: var(--nn-mega-btn-bg, var(--nn-dark));
  color: var(--nn-mega-btn-color, var(--nn-white, #fff));
  border-radius: var(--nn-mega-btn-radius, 100px);
  border: var(--nn-mega-btn-border-w, 0px) solid var(--nn-mega-btn-border-c, transparent);
  font-family: var(--nn-font);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.nn-mobile-mega__btn--secondary {
  background: transparent;
  color: var(--nn-dark);
  border: var(--nn-mega-outline-border-w, 1.5px) solid var(--nn-mega-outline-border-c, var(--nn-dark));
}
.nn-mobile-mega__btn--secondary:hover {
  background: var(--nn-mega-outline-bg-h, var(--nn-dark));
  color: var(--nn-mega-outline-color-h, var(--nn-white, #fff));
  border-color: var(--nn-mega-outline-border-c-h, var(--nn-dark));
}

/* Kacheln vertikal gestapelt */
.nn-mobile-mega__tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nn-mobile-mega__tile {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #222;
  text-decoration: none;
}
.nn-mobile-mega__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
  pointer-events: none;
  transition: background 0.3s ease;
}
.nn-mobile-mega__tile:hover::after {
  background: rgba(0,0,0,0.3);
}
.nn-mobile-mega__tile-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--nn-ease);
}
video.nn-mobile-mega__tile-bg {
  pointer-events: none;
}
.nn-mobile-mega__tile:hover .nn-mobile-mega__tile-bg {
  transform: scale(1.04);
}
.nn-mobile-mega__tile-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  z-index: 2;
  color: #fff;
}
.nn-mobile-mega__tile-label {
  display: block;
  font-family: var(--nn-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.nn-mobile-mega__tile-sub {
  display: block;
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}

/* =============================================================================
   MOBILE CTAs (nur auf Mobile sichtbar)
   ============================================================================= */
.nn-overlay__mobile-ctas {
  display: none;
}

/* =============================================================================
   MOBILE SICHTBARKEITS-TOGGLES + REIHENFOLGE + CTAs
   Ganz am Ende der Datei, damit sie alle vorherigen !important-Regeln überschreiben.
   ============================================================================= */
@media (max-width: 768px) {
  /* Reihenfolge per CSS Custom Property */
  .nn-overlay__tiles,
  .nn-overlay__nav,
  .nn-overlay__mega,
  .nn-overlay__mobile-ctas,
  .nn-overlay__footer {
    order: var(--nn-mobile-order, 0);
  }

  /* Mobile CTAs sichtbar */
  .nn-overlay__mobile-ctas {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
  }

  .nn-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--nn-font);
    font-size: 14px;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }

  /* Button (gefüllt) — gleiche Variablen wie .nn-navbar-item--btn */
  .nn-mobile-cta--btn {
    color: var(--nn-btn-color, var(--nn-white));
    background: var(--nn-btn-bg, var(--nn-dark));
    padding: var(--nn-btn-pad-v, 10px) var(--nn-btn-pad-h, 20px);
    border-radius: var(--nn-btn-radius, 100px);
    border: var(--nn-btn-border-w, 0px) solid var(--nn-btn-border-c, transparent);
    font-weight: var(--nn-fw-btn, 600);
  }
  .nn-mobile-cta--btn:not(.nn-mobile-cta--outline):hover {
    color: var(--nn-btn-color-h, var(--nn-white));
    background: var(--nn-btn-bg-h, #333333);
    border-color: var(--nn-btn-border-c-h, transparent);
  }

  /* Button (Outline) — gleiche Variablen wie .nn-navbar-item--outline */
  .nn-mobile-cta--outline {
    color: var(--nn-outline-color, var(--nn-dark));
    background: var(--nn-outline-bg, transparent);
    border: var(--nn-outline-border-w, 1.5px) solid var(--nn-outline-border-c, var(--nn-dark));
    padding: var(--nn-outline-pad-v, 10px) var(--nn-outline-pad-h, 20px);
    border-radius: var(--nn-outline-radius, 100px);
    font-weight: var(--nn-fw-btn, 600);
  }
  .nn-mobile-cta--outline:hover {
    color: var(--nn-outline-color-h, var(--nn-white));
    background: var(--nn-outline-bg-h, var(--nn-dark));
    border-color: var(--nn-outline-border-c-h, var(--nn-dark));
  }

  /* Link-Stil */
  .nn-mobile-cta--link {
    background: transparent;
    color: var(--nn-dark, #1a1a1a);
    padding: 8px 0;
    justify-content: flex-start;
    font-weight: 500;
  }
  .nn-mobile-cta--link:hover {
    color: var(--nn-accent, #000);
  }

  .nn-mobile-cta__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
  }
}

/* =============================================================================
   Hinweisleiste (Notice Bar)
   ============================================================================= */
.nn-noticebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nn-nb-h, 36px);
  background: var(--nn-nb-bg, #111111);
  color: var(--nn-nb-color, #ffffff);
  font-size: var(--nn-nb-fs, 13px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.4s var(--nn-ease);
}

.nn-noticebar--hidden {
  transform: translateY(-100%);
}

.nn-noticebar--separator {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.nn-noticebar__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nn-noticebar__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 0 20px;
  text-decoration: none;
  color: inherit;
  font-size: var(--nn-fs-noticebar, inherit);
  font-weight: var(--nn-fw-noticebar, 400);
  text-transform: var(--nn-tt-noticebar, none);
  font-style: var(--nn-fst-noticebar, normal);
  letter-spacing: 0.02em;
}

.nn-noticebar__slide--active {
  opacity: 1;
}

a.nn-noticebar__slide:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 3-Spalten-Layout wenn feste Links vorhanden */
.nn-noticebar--has-links {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.nn-noticebar--has-links .nn-noticebar__inner {
  position: relative;
  min-width: 0;
}

.nn-noticebar__side {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 100%;
  flex-shrink: 0;
  white-space: nowrap;
}

.nn-noticebar__side--left {
  justify-content: flex-start;
}

.nn-noticebar__side--right {
  justify-content: flex-end;
}

.nn-noticebar__link {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.85;
  transition: opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.nn-noticebar__link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nn-noticebar__link--icon:hover {
  text-decoration: none;
}

.nn-noticebar__icon {
  height: calc(var(--nn-nb-h, 36px) * 0.45);
  width: auto;
  max-height: 18px;
  object-fit: contain;
  display: block;
}

/* =============================================================================
   Lottie-Player – Logos & Burger
   ============================================================================= */
lottie-player.nn-lottie-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* Lottie-Logo Größe folgt den normalen Logo-Skalierungs-CSS-Vars */
.nn-logo-full.nn-lottie-logo {
  transform: scale(var(--nn-logo-full-scale, 1));
  transform-origin: left center;
}

.nn-logo-icon.nn-lottie-logo {
  transform: scale(var(--nn-logo-icon-scale, 1));
  transform-origin: left center;
}

@media (max-width: 768px) {
  .nn-logo-full.nn-lottie-logo {
    transform: scale(var(--nn-logo-full-scale-m, var(--nn-logo-full-scale, 1)));
  }
  .nn-logo-icon.nn-lottie-logo {
    transform: scale(var(--nn-logo-icon-scale-m, var(--nn-logo-icon-scale, 1)));
  }
}

/* Burger Lottie */
.nn-burger--lottie {
  background: none;
  border: none;
  padding: 0;
}

.nn-burger__lottie {
  pointer-events: none;
  display: block;
}

/* Navbar Offset wenn Noticebar aktiv (nur bei top-Position) */
body.nn-has-noticebar .nn-navbar--pos-top {
  top: calc(var(--nn-nb-h, 36px) + var(--nn-offset, 0px));
}

body.nn-has-noticebar.nn-noticebar-hidden .nn-navbar--pos-top {
  top: 0;
}

/* Mobile: Hinweisleiste ausblenden */
@media (max-width: 768px) {
  .nn-noticebar--hide-mobile {
    display: none !important;
  }
  body.nn-has-noticebar-mobile-hidden .nn-navbar {
    top: 0;
  }
  /* Feste Links auf kleinen Screens ausblenden, Slider bekommt vollen Platz */
  .nn-noticebar__side {
    display: none;
  }
  .nn-noticebar--has-links {
    display: flex;
  }
}

/* Sichtbarkeits-Toggles müssen ganz am Ende stehen */
@media (max-width: 768px) {
  .nn-hide-mobile-tiles.nn-overlay__tiles,
  .nn-overlay__tiles.nn-hide-mobile-tiles {
    display: none !important;
  }
  .nn-hide-mobile-nav.nn-overlay__nav,
  .nn-overlay__nav.nn-hide-mobile-nav,
  .nn-hide-mobile-nav.nn-overlay__mega,
  .nn-overlay__mega.nn-hide-mobile-nav {
    display: none !important;
  }
  .nn-hide-mobile-contact.nn-overlay__footer,
  .nn-overlay__footer.nn-hide-mobile-contact {
    display: none !important;
  }
}

/* =============================================================================
   Divi Kompatibilität
   ============================================================================= */

/* Navbar muss IMMER über Divi-Containern liegen – auch wenn Theme Builder aktiv */
body .nn-navbar,
body .nn-overlay,
body .nn-noticebar {
  /* Sicherstellen, dass position:fixed an viewport gebunden ist, nicht an
     Divi-Container mit transform/will-change */
  position: fixed !important;
}

/* Divi Visual Builder – Navigation komplett ausblenden */
body.et-fb .nn-navbar,
body.et-fb .nn-overlay,
body.et-fb .nn-noticebar {
  display: none !important;
}