/* ---------- Celexx Systems WooCommerce-Styling ---------- */

/* Mein Konto – Navigationsbereich */
.woocommerce-account .woocommerce-MyAccount-navigation {
    max-width: 300px;
    margin-bottom: 2rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.3s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:hover {
    background-color: #ecfbe5;
    border-color: #6cbf2d;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
}

/* Aktiver Menüpunkt */
.woocommerce-MyAccount-navigation li.is-active {
    background-color: #e4f6da !important;
    border-left: 4px solid #6cbf2d;
    border-radius: 0 4px 4px 0;
}

.woocommerce-MyAccount-navigation li.is-active a {
    color: #000 !important;
    font-weight: 600;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Aktiver Menüpunkt beim Hover – gleiche Farbe wie Rahmen nur dunkler */
.woocommerce-MyAccount-navigation li.is-active:hover {
    background-color: #5aaa25 !important;
}
.woocommerce-MyAccount-navigation li.is-active:hover a {
    color: #fff !important;
}

/* Inhaltsbereich */
.woocommerce-account .woocommerce-MyAccount-content {
    padding: 20px;
    border-left: 2px solid #6cbf2d;
    color: #444;
}

.woocommerce-account .woocommerce-MyAccount-content p:first-of-type {
    font-weight: bold;
}

.woocommerce-account .woocommerce-MyAccount-content a {
    color: #6cbf2d;
    text-decoration: underline;
}

/* Hinweisboxen (Nachrichten & Info) */
.woocommerce-message,
.woocommerce-info {
    background-color: #f4fef1 !important;
    border-left: 3px solid #6cbf2d !important;
    padding: 15px 20px;
    font-size: 15px;
    color: #333;
    margin-top: 20px;
    border-top: none !important; /* entfernt den blauen Balken oben */
}

/* Hinweisbox-Button */
.woocommerce-message .button,
.woocommerce-info .button {
    background-color: #6cbf2d !important;
    color: #000 !important;
    border: none !important;
    padding: 8px 14px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    background-color: #5aaa25 !important;
    color: #000 !important;
}

/* Fokusrand (blauer Kasten bei Tastatur-Navigation) komplett entfernen */
*:focus {
    outline: none !important;
}


/* Entferne blauen Fokusrahmen bei Navigation im Kundenbereich */
.woocommerce-MyAccount-navigation li a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Entfernt blauen Fokusrahmen bei aktiven oder fokussierten Menüpunkten */
.woocommerce-MyAccount-navigation li,
.woocommerce-MyAccount-navigation li a {
    outline: none !important;
    box-shadow: none !important;
}

.woocommerce-MyAccount-navigation li:focus-within,
.woocommerce-MyAccount-navigation li a:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Macht den gesamten Menübereich anklickbar */
.woocommerce-MyAccount-navigation li a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Entfernt blauen Fokusrahmen auch bei tief eingebauten Selektoren */
.woocommerce-MyAccount-navigation li:focus,
.woocommerce-MyAccount-navigation li:focus-within,
.woocommerce-MyAccount-navigation li a:focus,
.woocommerce-MyAccount-navigation li a:focus-visible,
.woocommerce-MyAccount-navigation li a:-moz-focusring {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: inherit !important;
}

/* Falls zusätzlich Pseudoelemente verwendet werden */
.woocommerce-MyAccount-navigation li a::before,
.woocommerce-MyAccount-navigation li a::after {
    box-shadow: none !important;
    outline: none !important;
}

/* Entfernt das blaue Icon-Kästchen (ShopEngine oder WooCommerce Hinweisbox) */
.woocommerce-message::before,
.woocommerce-info::before {
    display: none !important;
    content: none !important;
}

/* Entfernt das Symbol-Icon vor dem Hinweistext */
.wc-block-cart__empty-cart__title::before {
  display: none !important;
  content: none !important;
}

/* ============= LEERER WARENKORB ============= */

/* Überschrift ohne Symbol-Icon */
.wc-block-cart__empty-cart__title::before {
  display: none !important;
}

/* Überschrift mittig & modern */
.wc-block-cart__empty-cart__title {
  font-size: 22px;
  font-weight: 500;
  color: #333;
  text-align: center;
  margin-bottom: 15px;
}

/* Button "Produkte durchsuchen" */
.wc-block-cart__empty-cart__actions .wc-block-components-button {
  background-color: #b0ffaf !important;  /* Celexx hellgrün */
  color: #000 !important;
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.wc-block-cart__empty-cart__actions .wc-block-components-button:hover {
  background-color: #6cbf2d !important;  /* Celexx dunkelgrün */
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Abstand zur Produktvorschau */
.wp-block-woocommerce-empty-cart-block {
  margin-bottom: 40px;
}


/* ============= PRODUKT-VORSCHAU „Neu im Shop“ ============= */

/* Produktnamen */
.woocommerce .wc-block-grid__product-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-top: 10px;
}

/* Preise */
.woocommerce .wc-block-grid__product-price {
  font-size: 14px;
  color: #555;
  text-align: center;
}

/* Buttons unter Produkten */
.woocommerce .wc-block-grid__product-add-to-cart.wp-block-button {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.woocommerce .wc-block-grid__product-add-to-cart .wp-block-button__link {
  background-color: #6cbf2d;
  color: #fff;
  padding: 8px 14px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.woocommerce .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  background-color: #5aaa25;
  transform: scale(1.03);
}

/* Produkt-Container visuell auflockern */
.woocommerce .wc-block-grid__product {
  background-color: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}

.woocommerce .wc-block-grid__product:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

/* ========== NEU IM SHOP: Celexx Style ========== */

/* Produktnamen im Grid – klar, ohne Unterstrich */
.wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title {
    text-decoration: none !important;
    font-weight: 600;
    font-size: 16px;
    color: #222;
}

/* MwSt.-Zeile gezielt ausblenden (Block-Stil) */
.wc-block-grid__products .wc-gzd-additional-info-loop-tax {
    display: none !important;
}

/* Zusatzinfos (inkl. MwSt., Versand etc.) komplett entfernen */
.wc-block-grid__product .wc-block-grid__product-price .wc-gzd-additional-info {
    display: none !important;
}

/* Buttons – modern, Celexx-Style */
.wc-block-grid__product .wp-block-button__link {
    background-color: #6cbf2d !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.wc-block-grid__product .wp-block-button__link:hover {
    background-color: #5aaa25 !important;
    color: #fff !important;
}

/* Warengruppe-Box modernisieren */
.wc-block-grid__product {
    border-radius: 12px;
    border: 1px solid #eee;
    padding: 12px;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Bild mit runden Ecken */
.wc-block-grid__product img {
    border-radius: 10px;
}

/* Abstand nach unten */
.wc-block-grid__product {
    margin-bottom: 20px;
}

/* MwSt.-Hinweis gezielt entfernen (auch bei Variantenpreisen) */
.wc-gzd-additional-info,
.wc-gzd-additional-info-loop-tax,
.wc-block-grid__product .wc-gzd-product-price-info {
    display: none !important;
}

/* Unterstreichung bei Artikeltiteln komplett entfernen */
.wc-block-grid__product-title {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Optional: Hover-Effekt für Produkttitel */
.wc-block-grid__product-title:hover {
    color: #6cbf2d !important;
}

/* Restliche MwSt.-Hinweise entfernen */
.wc-block-grid__product .wc-gzd-additional-info,
.wc-block-grid__product .wc-gzd-additional-info * {
  display: none !important;
}

/* Trennung & Design "Neu im Shop" */
.wp-block-heading.has-text-align-center + .wp-block-separator {
  margin-top: 30px;
  margin-bottom: 30px;
  border-color: #6cbf2d;
  border-width: 2px;
  opacity: 0.4;
}

/* "Neu im Shop"-Überschrift größer und markanter */
.wp-block-heading.has-text-align-center {
  font-size: 1.6rem !important;
  font-weight: 600;
  color: #222;
  margin-top: 60px;
  margin-bottom: 10px;
  position: relative;
}

/* "Neu im Shop" mit grünem Unterstrich */
.wp-block-heading.has-text-align-center::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: #6cbf2d;
  margin: 10px auto 0 auto;
  border-radius: 1px;
}

/* Optional: Abstand zur Produktliste darunter */
ul.wc-block-grid__products {
  margin-top: 20px !important;
}

/* Letzte MwSt.-Zeile unter Preis entfernen */
.wc-block-grid__product .wc-gzd-additional-info.wc-gzd-additional-info--product-loop {
  display: none !important;
}

/* Entfernt die 3 Punkte (Trennlinie) unter dem leeren Warenkorb */
.wp-block-woocommerce-empty-cart-block + .wp-block-separator.is-style-dots {
  display: none !important;
}

/* Alternativ alle Punkte-Separators auf der Seite ausblenden */
.wp-block-separator.is-style-dots {
  display: none !important;
}

.site-footer {
  display: block !important;
}

/* Kein manuelles Nachbauen jedes Produkts mit Elementor */

.celexx-hero-text {
    background: #f5f5f5;
    padding: 20px;
    font-size: 1.2rem;
    margin-bottom: 20px;
    border-left: 5px solid #008f68;
}

.celexx-hero-image img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    margin-bottom: 20px;
}

/* Breadcrumb (Startseite / Shop / Produktname) ausblenden */
.single-product .woocommerce-breadcrumb {
    display: none;
}

/* Produktseite: Max-Breite beschränken für schöneres Layout */
.single-product .product {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Weißes Logo + Slogan oben auf Produktseiten ausblenden */
.single-product header.site-header {
    display: none;
}

/* Menü-Liste horizontal zentrieren */
.eael-simple-menu-container.eael-simple-menu-align-center ul {
  display: flex !important;
  justify-content: center !important;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

/* Menüelemente statt inline-block = Flex-Item */
.eael-simple-menu-container.eael-simple-menu-align-center ul li {
  display: flex !important;
  align-items: center;
  padding: 0 15px;
}

.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;  /* ↓ Abstand verkleinert */
    justify-content: center;
    padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    margin: 0 !important;
}

/* Der Abschnitt „Ähnliche Produkte“ dezent farblich hinterlegen */
.related.products {
    background-color: #f9f9f9;
    padding: 40px 20px;
    margin-top: 50px;
    border-radius: 10px;
}

/* Überschrift „Ähnliche Produkte“ zentrieren */
.related.products {
    text-align: center;
}

.related.products h2 {
    font-size: 26px;
    color: #444;
    margin-bottom: 30px;
}

/* Optional: Buttons mittig, falls sie durch andere Styles versetzt sind */
.related.products .button {
    margin: 0 auto;
    display: inline-block;
}

/* Optional: Boxen etwas ordnen (Padding, Abstand, etc.) */
.related.products ul.products li.product {
    float: none;
    display: inline-block;
    margin: 0 15px;
}

/* Produkt-Grid: Responsive, zentriert, flex */
.related.products ul.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 0;
    margin: 0;
}

/* Produktboxen: feste max-Höhe durch auto-layout */
.related.products ul.products li.product {
    flex: 1 1 250px;
    max-width: 250px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.08);
    min-height: 430px; /* optional, bei extrem kurzen Produkten */
}

/* Bildgröße gleich */
.related.products li.product img {
    height: 200px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* Produktüberschrift */
.related.products li.product h2.woocommerce-loop-product__title {
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 10px;
    min-height: 3.6em; /* Platz für 2 Zeilen Text */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Preis */
.related.products li.product .price {
    font-size: 14px;
    margin-bottom: 10px;
    color: #444;
}

/* Kaufen-Button am unteren Rand */
.related.products li.product .button {
    margin-top: auto;
    background: #eee;
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    color: #444;
    transition: all 0.2s ease;
}

.related.products li.product .button:hover {
    background: #ccc;
}

/* Wenn Produkt kein Bild hat → Platzhalter zeigen */
.related.products li.product img {
  background-color: #eee;
  height: 200px;
  width: 100%;
  object-fit: contain;
}

/* Wenn kein Preis → Mindesthöhe reservieren */
.related.products li.product .price {
  min-height: 1.6em;
}

/* Hover-Aufhellung im Hero-Bereich endgültig deaktivieren */
body.single-product .celexx-hero-image:hover img,
body.single-product .celexx-hero-image img:hover,
body .celexx-hero-image img:hover {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
}

/* Grundzustand fixieren */
body.single-product .celexx-hero-image img {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
}

/* === Celexx Systems: Einheitliches Menü-Design wie Shop-Seite === */

/* Menü über gesamte Breite */
.elementor-location-header {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  background: #f8f8f8 !important; /* hellgrauer Hintergrund */
  border-top: 2px solid #c2dca6 !important;
  border-bottom: 2px solid #c2dca6 !important;
  padding: 10px 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Menü-Inhalt zentriert */
.elementor-widget-nav-menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  background: transparent !important;
}

/* UL gleichmäßig mittig */
.elementor-widget-nav-menu ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Menülinks mit Button-Look */
.elementor-widget-nav-menu ul li a {
  display: inline-block !important;
  padding: 10px 22px !important;
  background: #f2f2f2 !important; /* Button-Hintergrund */
  border-radius: 6px !important;
  color: #333 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  position: relative !important;
}

/* Hover-Farbe */
.elementor-widget-nav-menu ul li a:hover {
  background: #c7e4a6 !important;
}

/* Blaue Standardlinie (Elementor) entfernen */
.elementor-widget-nav-menu .elementor-item::before,
.elementor-widget-nav-menu .elementor-item::after {
  display: none !important;
  content: none !important;
}

/* Aktive Seite: grüne Unterstreichung */
.elementor-widget-nav-menu ul li.current-menu-item > a::after,
.elementor-widget-nav-menu .elementor-item-active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 15% !important;
  width: 70% !important;
  height: 2px !important;
  background-color: #6cbf2d !important; /* Celexx-Grün */
  border-radius: 2px !important;
}

/* Einheitlicher Abstand nach unten auf allen Seiten */
body.page .elementor-location-header,
body.single .elementor-location-header,
body.woocommerce-page .elementor-location-header {
  margin-bottom: 20px !important;
}

/* Harmonisierung: Shop-Seite soll identisch bleiben */
body.post-type-archive-product .elementor-location-header {
  margin-bottom: 20px !important;
  padding-bottom: 10px !important;
}

/* Mobile Darstellung */
@media (max-width: 768px) {
  .elementor-widget-nav-menu ul {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .elementor-widget-nav-menu ul li a {
    width: 100% !important;
    text-align: center !important;
    padding: 12px 0 !important;
  }
}

/* === Celexx Systems: Shop-Seite optisch an andere Seiten angleichen === */

/* Hintergrundfarbe des Menüs auf Shop-Seite wie auf den anderen Seiten */
body.post-type-archive-product .elementor-location-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Menü selbst – gleicher Look wie auf Startseite */
body.post-type-archive-product .elementor-widget-nav-menu ul li a {
  background: #f2f2f2 !important;
  border-radius: 6px !important;
  color: #333 !important;
  font-weight: 500 !important;
  padding: 10px 22px !important;
}

/* Hover-Effekt und aktive Seite */
body.post-type-archive-product .elementor-widget-nav-menu ul li a:hover {
  background: #c7e4a6 !important;
}

body.post-type-archive-product .elementor-widget-nav-menu ul li.current-menu-item > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 15% !important;
  width: 70% !important;
  height: 2px !important;
  background-color: #6cbf2d !important;
  border-radius: 2px !important;
}

/* Vereinheitlichte Abstände unterhalb des Menüs */
body.post-type-archive-product main,
body.post-type-archive-product .site-main {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* === Celexx Systems: Einheitliche Menügestaltung auf Shop-Seite (ID 1654) === */

/* Hintergrund des Menüs wie auf allen anderen Seiten */
body.page-id-1654 .elementor-location-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}

/* Menü-Buttons angleichen */
body.page-id-1654 .elementor-widget-nav-menu ul li a {
  background: #f2f2f2 !important;
  border-radius: 6px !important;
  color: #333 !important;
  font-weight: 500 !important;
  padding: 10px 22px !important;
  transition: all 0.2s ease-in-out !important;
}

/* Hover- und aktive Zustände */
body.page-id-1654 .elementor-widget-nav-menu ul li a:hover {
  background: #c7e4a6 !important;
}

body.page-id-1654 .elementor-widget-nav-menu ul li.current-menu-item > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 15% !important;
  width: 70% !important;
  height: 2px !important;
  background-color: #6cbf2d !important;
  border-radius: 2px !important;
}

/* Abstände unter Menü wie auf anderen Seiten */
body.page-id-1654 main,
body.page-id-1654 .site-main {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* Option: leicht grauer Hintergrund hinter gesamtem Menübereich */
body.page-id-1654 .elementor-location-header .elementor-widget-container {
  background-color: #f8f8f8 !important;
  border-top: 2px solid #c2dca6 !important;
  border-bottom: 2px solid #c2dca6 !important;
  padding: 10px 0 !important;
  border-radius: 0 !important;
}

/* === Celexx Systems: Einheitlicher grauer Menü-Balken auf allen Seiten === */

/* Grundhintergrund des Menüs */
.elementor-location-header,
.elementor-location-header .elementor-widget-container {
  background-color: #F5F5F5 !important;
  border-top: 2px solid #e0e0e0 !important;
  border-bottom: 2px solid #e0e0e0 !important;
  padding: 10px 0 !important;
  margin: 0 !important;
}

/* Menü gleichmäßig mittig anordnen */
.elementor-location-header nav ul,
.elementor-location-header .elementor-widget-nav-menu ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 25px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none;
}

/* Menülinks */
.elementor-location-header nav ul li a {
  color: #333 !important;
  font-weight: 500 !important;
  padding: 10px 22px !important;
  background: transparent !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease-in-out;
}

/* Hover-Effekt */
.elementor-location-header nav ul li a:hover {
  background-color: #e8e8e8 !important;
}

/* Aktive Seite unterstreichen */
.elementor-location-header nav ul li.current-menu-item > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 15% !important;
  width: 70% !important;
  height: 2px !important;
  background-color: #6cbf2d !important; /* Celexx-Grün */
  border-radius: 2px !important;
}

/* Verhindert Abstände zwischen Menü und Inhalt */
body.elementor-page main,
body.elementor-page .site-main {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

/* === Celexx Systems: Menü-Balken bündig mit Inhaltsbreite === */

/* Menü-Hintergrund auf Inhaltsbreite (nicht Seitenrand) begrenzen */
.elementor-location-header,
.elementor-location-header .elementor-widget-container {
  background-color: #F5F5F5 !important;
  border-top: 2px solid #E0E0E0 !important;
  border-bottom: 2px solid #E0E0E0 !important;
  padding: 15px 0 !important;
  margin: 0 auto 30px auto !important;
  max-width: 1200px !important; /* gleiche Breite wie der Inhalt */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
  border-radius: 6px !important;
}

/* Menü mittig ausrichten */
.elementor-location-header nav ul,
.elementor-location-header .elementor-widget-nav-menu ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 25px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none;
}

/* Menülinks */
.elementor-location-header nav ul li a {
  color: #333 !important;
  font-weight: 500 !important;
  padding: 10px 22px !important;
  background: transparent !important;
  border-radius: 6px !important;
  transition: background-color 0.2s ease-in-out;
}

/* Hover */
.elementor-location-header nav ul li a:hover {
  background-color: #E8E8E8 !important;
}

/* Aktive Seite */
.elementor-location-header nav ul li.current-menu-item > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 6px !important;
  left: 15% !important;
  width: 70% !important;
  height: 2px !important;
  background-color: #6CBF2D !important;
  border-radius: 2px !important;
}

/* Verhindert, dass der nächste Abschnitt zu nah rückt */
body.elementor-page main,
body.elementor-page .site-main {
  margin-top: 0 !important;
  padding-top: 30px !important;
}

/* === Celexx Systems: Footer bündig unten – angepasst auf deine Canvas-Struktur === */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Das Body-Grid aufbauen */
body.elementor-template-canvas {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Der Seitenwrapper (page-id-xxxx) enthält den Inhalt */
body.elementor-template-canvas > .page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Der mittlere Inhaltsbereich wächst automatisch */
body.elementor-template-canvas > .page > .elementor {
  grid-row: 2;
  min-height: 0;
}

/* Footer unten fixieren */
body.elementor-template-canvas > .page > .elementor-location-footer {
  grid-row: 3;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Letzter Container vor dem Footer: kein extra Abstand */
body.elementor-template-canvas > .page > .elementor > .elementor-section:last-child,
body.elementor-template-canvas > .page > .elementor > .e-con:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Footer-Innenabstände nach oben vermeiden */
body.elementor-template-canvas > .page > .elementor-location-footer > .elementor,
body.elementor-template-canvas > .page > .elementor-location-footer > .elementor-section:first-of-type,
body.elementor-template-canvas > .page > .elementor-location-footer > .e-con:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
}