/*
 * Platz für eigene Änderungen direkt als CSS
 * Die hier gemachten Änderungen überschreiben ggfs. andere Styles, da diese Datei als letzte geladen wird.
 */
/* =====================================================
   KOBAKI – KOMPLETT NEU (JTL-Shop 5 NOVA)
   Sauber von Grund auf. Kein alter Code.
   ===================================================== */

/* =====================================================
   DESIGN-VARIABLEN
   ===================================================== */
:root {
  --kobaki-sage:   #9CAF88;
  --kobaki-sand:   #E6D3B1;

  --icon-size:     40px;
  --round-pill:    999px;
  --round-lg:      16px;
  --round-md:      10px;
  --round-sm:      6px;
}

/* =====================================================
   1) GLOBALE RUNDUNGEN (shop-weit, alle Geräte)
   ===================================================== */

/* Eingabefelder */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea,
.form-control {
  border-radius: var(--round-md) !important;
}

/* Suchleiste im Header – extra rund */
.header-search input[type="search"],
.header-search input[type="text"],
input[name="qs"],
input[name="search"] {
  border-radius: 28px !important;
  padding: 10px 16px !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  background: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

.header-search input:focus {
  border-color: var(--kobaki-sage) !important;
  box-shadow: 0 0 0 3px rgba(156,175,136,.25) !important;
  outline: none !important;
}

/* Buttons */
.btn,
button,
input[type="button"],
input[type="submit"] {
  border-radius: var(--round-pill) !important;
}

/* ALLE Buttons mit Primärfarbe: weiße Schrift */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
button.btn-primary,
a.btn-primary,
input.btn-primary,
.btn.btn-primary {
  color: #ffffff !important;
}

/* Checkout-Buttons */
button[type="submit"],
input[type="submit"],
.checkout-button,
.submit-button,
button[name="submit"],
button[name="login"],
button[name="registrieren"],
button[name="weiter"],
.btn-checkout {
  color: #ffffff !important;
}

/* Warenkorb-Button auf Produktseite */
button[name="inWarenkorb"],
button[data-toggle="cart"],
.btn-cart,
#buy_form button[type="submit"],
.product-detail button[type="submit"] {
  color: #ffffff !important;
}

/* AUSNAHME: Entfernen-Button im Warenkorb (NICHT weiß) */
.cart-remove,
.btn-remove,
.cart-items-delete-button,
button.cart-items-delete-button,
.btn.cart-items-delete-button,
button[title*="entfernen" i],
button[title*="löschen" i],
button[title*="remove" i],
a[title*="entfernen" i],
a[title*="löschen" i],
.basket-remove,
.remove-item,
button[name="dropPos"] {
  color: inherit !important;
}

/* AUSNAHME: Preise in Produktslider & Produktboxen (NICHT weiß) */
.price,
.productbox-price,
.productbox-price *,
.price_wrapper,
.price_wrapper *,
.price-note,
span[itemprop="price"],
.product-price,
.price-productbox,
div[class*="price"] *,
.price > *,
span.price_label,
span.footnote-reference {
  color: #2a2a2a !important;
}

/* ABER: Footer Social Icons bleiben weiß (normal & hover - Footer ist grün) */
.footer-additional-wrapper a.btn-icon-secondary i,
.footer-additional-wrapper a.btn-icon-secondary:hover i {
  color: #ffffff !important;
}

/* Warenkorb-Icon Badge: weiße Zahl */
#header .badge,
.cart-icon-dropdown .badge,
.badge-cart,
a.nav-link.nav-link-custom .badge {
  color: #ffffff !important;
  background: var(--kobaki-sage) !important;
}

/* Produkt-Merkmale/Attribute (Badges) */
.badge-primary,
a.badge-primary,
.attr-characteristic .badge-primary,
td.attr-characteristic .badge-primary {
  color: #ffffff !important;
}

/* Ausgewählte Radio/Checkbox Labels */
.form-group.variations input[type="radio"]:checked + label,
.form-group.variations input[type="checkbox"]:checked + label,
.variation-picker .btn.active,
.variation-wrapper .btn.active {
  color: #ffffff !important;
}

/* Karten & Boxen */
.card,
.productbox,
.productbox-inner,
.panel,
.modal-content,
.dropdown-menu,
.popover,
.toast {
  border-radius: var(--round-lg) !important;
}

/* Badges */
.badge,
.label,
.tag {
  border-radius: var(--round-pill) !important;
}

/* Bilder leicht weich */
img {
  border-radius: var(--round-sm);
}

/* =====================================================
   2) SUCHLEISTE – Such-Button
   ===================================================== */
.header-search button,
#search button {
  border-radius: var(--round-pill) !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* =====================================================
   3) NAVIGATIONS-PILLS (Desktop & Mobile)
   ===================================================== */
.navbar-nav .nav-link,
.navbar-nav .nav-link-custom {
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 10px !important;
  margin: 0 2px !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}

.navbar-nav .nav-link::before,
.navbar-nav .nav-link::after {
  content: none !important;
  display: none !important;
}

.navbar-nav .nav-link:hover {
  background: rgba(230,211,177,.45) !important;
}

.navbar-nav .nav-item.active > .nav-link {
  background: rgba(156,175,136,.18) !important;
  border: 1px solid rgba(156,175,136,.28) !important;
}

/* =====================================================
   4) HEADER-ICONS (Desktop)
   ===================================================== */
#header a.nav-link.nav-link-custom {
  width: var(--icon-size) !important;
  height: var(--icon-size) !important;
  padding: 0 !important;
  margin-left: 8px !important;
  border-radius: var(--round-pill) !important;
  background: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  text-decoration: none !important;
}

#header a.nav-link.nav-link-custom:hover {
  background: rgba(230,211,177,.60) !important;
  border-color: rgba(230,211,177,.95) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;
}

#header a.nav-link.nav-link-custom i,
#header a.nav-link.nav-link-custom svg {
  font-size: 18px !important;
  line-height: 1 !important;
}

#header a.nav-link.nav-link-custom .badge {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  border-radius: var(--round-pill) !important;
}

/* =====================================================
   5) DROPDOWN-MENÜS
   ===================================================== */
.dropdown-menu {
  border-radius: var(--round-lg) !important;
  overflow: hidden !important;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease !important;
}

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =====================================================
   6) MICRO-ANIMATIONEN (alle Geräte)
   ===================================================== */
a, button, .btn, input, select, textarea,
.card, .productbox, .productbox-inner {
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    opacity .18s ease !important;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  transform: translateY(-1px);
}

.card:hover,
.productbox:hover,
.productbox-inner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10) !important;
}

/* Kein Hover-Effekt auf Touch-Geräten */
@media (hover: none) and (pointer: coarse) {
  .card:hover,
  .productbox:hover,
  .productbox-inner:hover,
  .btn:hover,
  button:hover {
    transform: none !important;
  }
}

/* Animationen deaktivieren wenn User das möchte */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* =====================================================
   7) FOKUS-STIL (Accessibility)
   ===================================================== */
:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(156,175,136,.25) !important;
  border-radius: 10px;
}

/* =====================================================
   8) DESKTOP – Header-Bereich zentrieren
   ===================================================== */
#header .header-right,
#header .header-actions,
#header .navbar-right,
#header .header-tools,
#header .header-icons,
#header .navbar-collapse {
  display: flex !important;
  align-items: center !important;
}

#header .header-search,
#header .header-search form {
  display: flex !important;
  align-items: center !important;
}

/* =====================================================
   9) MOBILE HEADER – KOMPLETT NEU
      Struktur:
      Zeile 1: [Hamburger] [Logo mittig] [Login + Warenkorb]
      Zeile 2: [Suchleiste – volle Breite]
      Zeile 3: [Mini-Nav / Kategorien]
   ===================================================== */
@media (max-width: 991px) {

  /* --- Alle alten Positionierungen zurücksetzen --- */
  #header .navbar,
  header .navbar,
  .header .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: static !important;
    flex-wrap: wrap !important;
  }

  #header .navbar-brand,
  header .navbar-brand,
  .header .navbar-brand {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    order: 2 !important;           /* Logo in die Mitte (flex order) */
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Logo-Bildgröße */
  #header .navbar-brand img,
  header .navbar-brand img,
  .header .navbar-brand img {
    height: 44px !important;
    width: auto !important;
    max-width: 160px !important;
  }

  /* --- ZEILE 1: Hamburger | Logo | Icons --- */

  /* Der Navbar-Container wird zur Zeile 1 */
  #header .navbar > .container,
  #header .navbar > .container-fluid,
  header .navbar > .container,
  header .navbar > .container-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* Hamburger-Button: ganz links */
  #header .navbar-toggler,
  header .navbar-toggler,
  .header .navbar-toggler {
    order: 1 !important;
    position: static !important;
    transform: none !important;
    flex-shrink: 0 !important;
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    padding: 0 !important;
    border-radius: var(--round-pill) !important;
    border: 1px solid rgba(0,0,0,.12) !important;
    background: rgba(255,255,255,.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Icons-Gruppe (Login + Warenkorb): ganz rechts */
  #header .header-icons,
  #header .header-actions,
  #header .header-right,
  #header .navbar-right,
  #header .account-icon-dropdown,
  #header .wishlist-icon-dropdown,
  #header .cart-icon-dropdown,
  header .header-icons,
  header .header-actions {
    order: 3 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    height: var(--icon-size) !important;
  }

  /* ALLE Icon-Links auf Mobile: harter Reset damit alle gleich sind */
  #header a.nav-link.nav-link-custom,
  header a.nav-link.nav-link-custom,
  .header a.nav-link.nav-link-custom {
    /* Reset aller Werte die für Versatz sorgen könnten */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    vertical-align: middle !important;
    /* Einheitliche Größe für alle Icons */
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
    min-width: var(--icon-size) !important;
    min-height: var(--icon-size) !important;
    max-width: var(--icon-size) !important;
    max-height: var(--icon-size) !important;
    /* Kein Margin/Padding das die Ausrichtung stört */
    margin: 0 !important;
    padding: 0 !important;
    /* Icon-Inhalte (i, svg) zentrieren */
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  /* Icon-Inhalt (SVG / Fontawesome) ebenfalls reset */
  #header a.nav-link.nav-link-custom i,
  #header a.nav-link.nav-link-custom svg,
  header a.nav-link.nav-link-custom i,
  header a.nav-link.nav-link-custom svg {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    position: static !important;
    transform: none !important;
  }

  /* --- ZEILE 2: Suchleiste – volle Breite --- */
  #header .header-search,
  header .header-search,
  .header .header-search {
    display: flex !important;
    order: 4 !important;
    width: 100% !important;
    padding: 0 12px 10px 12px !important;
    flex-shrink: 0 !important;
  }

  #header .header-search form,
  header .header-search form {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #header .header-search input,
  header .header-search input {
    flex: 1 !important;
    width: 100% !important;
  }

  /* --- ZEILE 3: Mini-Nav / Kategorien --- */
  #kobaki-mini-nav {
    order: 5 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 12px 10px 12px !important;
    margin: 0 !important;
  }

  #kobaki-mini-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    border-radius: var(--round-pill) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  /* --- Touch-Ziele groß genug --- */
  .btn,
  button,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }
}
/* =====================================================
   KOBAKI – VERGLEICHSTABELLE (eco-vgl)
   Zum bestehenden Theme CSS hinzufügen
   ===================================================== */

/* Äußerer Wrapper */
.eco-vgl-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Tabelle */
.eco-vgl-table {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #E8E8E0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}

/* Kopfzeile */
.eco-vgl-head {
  background: rgb(156,175,136);
  display: flex;
  align-items: stretch;
}

/* Alle Zeilen außer Kopfzeile */
.eco-vgl-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #EEEEE6;
}

.eco-vgl-row:last-child {
  border-bottom: none;
}

/* Abwechselnde Zeilenfarben */
.eco-vgl-odd  { background: #ffffff; }
.eco-vgl-even { background: #F9F8F4; }

/* Eigenschaftsspalte (links) */
.eco-vgl-label {
  flex: 0 0 40%;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #EEEEE6;
}

.eco-vgl-head .eco-vgl-label {
  border-right: 1px solid rgba(255,255,255,0.1);
}

.eco-vgl-label-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #2c3318;
  margin-bottom: 2px;
}

.eco-vgl-label-sub {
  font-size: 0.75rem;
  color: #9a9a85;
}

/* Wrapper für die 3 Vergleichsspalten */
.eco-vgl-cols-wrapper {
  flex: 1;
  display: flex;
}

/* Einzelne Spalte */
.eco-vgl-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 0.5rem;
  border-left: 1px solid #EEEEE6;
  text-align: center;
}

.eco-vgl-head .eco-vgl-col {
  border-left: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 0.5rem;
  flex-direction: column;
  gap: 0.2rem;
}

/* ? Ja */
.eco-vgl-yes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(156,175,136,0.15);
  border: 1.5px solid rgba(156,175,136,0.5);
  color: #6b8f5a;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ? Nein */
.eco-vgl-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(220,80,60,0.08);
  border: 1.5px solid rgba(220,80,60,0.25);
  color: #c94a38;
  font-size: 0.85rem;
  font-weight: 700;
}

/* ? Teilweise */
.eco-vgl-part {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(210,160,40,0.10);
  border: 1.5px solid rgba(210,160,40,0.30);
  color: #b8881a;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Mobile-Labels (nur auf kleinen Screens sichtbar) */
.eco-vgl-col-mobilabel {
  display: none;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width: 640px) {

  /* Kopfzeile auf Mobile ausblenden */
  .eco-vgl-head {
    display: none;
  }

  /* Jede Zeile wird zur eigenen Karte */
  .eco-vgl-row {
    flex-direction: column;
    border-bottom: none;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  }

  .eco-vgl-table {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }

  /* Eigenschaftsspalte oben, volle Breite */
  .eco-vgl-label {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #EEEEE6;
    padding: 0.85rem 1rem;
  }

  /* Die 3 Spalten nebeneinander unterhalb des Labels */
  .eco-vgl-cols-wrapper {
    width: 100%;
  }

  .eco-vgl-col {
    flex-direction: column;
    gap: 4px;
    padding: 0.75rem 0.4rem;
    border-left: none;
    border-top: none;
    border-right: 1px solid #EEEEE6;
  }

  .eco-vgl-col:last-child {
    border-right: none;
  }

  /* Mobile-Label einblenden */
  .eco-vgl-col-mobilabel {
    display: block;
    color: #9a9a85;
  }
}
/* =====================================================
   KOBAKI – MOBILE HEADER ABSTAND OBEN
   Ans Ende des bestehenden Theme CSS anhängen
   ===================================================== */

@media (max-width: 991px) {

  /* Hauptnavigation / Header bekommt oben Luft */
  #header,
  header,
  .header,
  nav#navbar,
  .navbar {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }

  /* Falls der Header sticky/fixed ist */
  #header.sticky,
  header.sticky,
  .header.sticky,
  .navbar.fixed-top,
  .navbar.sticky-top {
    padding-top: max(12px, env(safe-area-inset-top)) !important;
  }

  /* Erste Zeile im Header (Container) ebenfalls etwas Luft */
  #header .navbar > .container,
  #header .navbar > .container-fluid,
  header .navbar > .container,
  header .navbar > .container-fluid {
    padding-top: max(10px, env(safe-area-inset-top)) !important;
  }

}
/* =====================================================
   KOBAKI – SUCHLEISTE AUSBLENDEN + MINI-KATEGORIENLEISTE
   Ans Ende des bestehenden Theme CSS anhängen
   ===================================================== */

/* Suchleiste ausblenden – auf allen Geräten */
.main-search-wrapper,
.col.main-search-wrapper,
#search-nav-item,
.search-wrapper,
#nav-search-item {
  display: none !important;
}

/* =====================================================
   MINI-KATEGORIENLEISTE
   ===================================================== */

#kobaki-mini-nav {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 12px;
  background: transparent;
}

#kobaki-mini-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 28px;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

/* Primär-Button – Korkbaukiste */
#kobaki-mini-nav a.kbk-nav-primary {
  background: rgb(156,175,136);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(156,175,136,0.35);
}

#kobaki-mini-nav a.kbk-nav-primary:hover {
  background: rgb(130,152,110);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(156,175,136,0.45);
}

/* Ghost-Button – Ersatzteile */
#kobaki-mini-nav a.kbk-nav-ghost {
  background: transparent;
  color: rgb(110,128,94);
  border: 2px solid rgb(156,175,136);
}

#kobaki-mini-nav a.kbk-nav-ghost:hover {
  background: rgba(156,175,136,0.1);
  transform: translateY(-1px);
}

/* Desktop: Mini-Nav zentriert anzeigen */
@media (min-width: 992px) {
  #kobaki-mini-nav {
    padding: 6px 16px 10px;
  }
}
/* =====================================================
   KOBAKI – DESKTOP HEADER FIXES
   Ans Ende des bestehenden Theme CSS anhängen
   ===================================================== */

/* -- Logo zentrieren – Icons spiegeln -- */
@media (min-width: 992px) {

  /* Navbar-Row: Flexbox ohne Bootstrap-Grid-Einschränkungen */
  .hide-navbar .navbar.row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* Suchleiste unsichtbar als Gegengewicht links */
  .col.main-search-wrapper,
  .main-search-wrapper {
    display: block !important;
    visibility: hidden !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* Logo mittig */
  .col-lg-auto.nav-logo-wrapper,
  .nav-logo-wrapper {
    flex: 0 0 auto !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Icons: gleich breit wie linke Seite, rechtsbündig */
  .col-auto.nav-icons-wrapper,
  .nav-icons-wrapper {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
  }
}

/* -- Kategorien-Nav stylen (die "Korkbaukiste · Ersatzteile" Zeile) -- */
@media (min-width: 992px) {

  /* Container der unteren Nav-Zeile */
  .container-fluid.me_r-center,
  .menu-multiple-rows-multiple,
  nav.navbar.justify-content-start {
    display: flex !important;
    justify-content: center !important;
    padding: 4px 0 18px !important;
    background: transparent !important;
    border-top: none !important;
  }

  /* Einzelne Nav-Links als Pills */
  .menu-multiple-rows-multiple .nav-link,
  .menu-multiple-rows-multiple .navbar-nav .nav-link,
  nav.justify-content-start .navbar-nav .nav-link {
    background: transparent !important;
    border: none !important;
    color: rgb(110,128,94) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    padding: 8px 22px !important;
    border-radius: 999px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }

  .menu-multiple-rows-multiple .nav-link:hover,
  nav.justify-content-start .navbar-nav .nav-link:hover {
    background: rgba(156,175,136,0.15) !important;
    color: rgb(156,175,136) !important;
  }

  /* Aktiver Link */
  .menu-multiple-rows-multiple .nav-item.active .nav-link,
  nav.justify-content-start .navbar-nav .nav-item.active .nav-link {
    background: rgb(156,175,136) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(156,175,136,0.3) !important;
  }

  /* Trennlinie zwischen den Links entfernen */
  .menu-multiple-rows-multiple .nav-item + .nav-item::before {
    display: none !important;
  }
}