/* === THEME-ABHÄNGIGE FARBEN === */
[data-bs-theme] #nav_container {
    position: relative;
    overflow: visible;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.35),   /* heller Reflex oben */
        rgba(255,255,255,0.15),   /* weicher Glanz */
        rgba(0,0,0,0.20)          /* dunkler Metallschatten unten */
    ) !important;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.4),   /* Glanzkante oben */
        inset 0 -2px 4px rgba(0,0,0,0.35),       /* Schatten unten */
        0 0 6px rgba(0,0,0,0.25);                /* leichte Außen-Tiefe */
}

[data-bs-theme] #nav_container::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: repeating-linear-gradient(
        to right,
        rgba(255,255,255,0.03) 0px,
        rgba(255,255,255,0.03) 1px,
        rgba(0,0,0,0.03) 2px
    );
    opacity: 0.4;
}

[data-bs-theme="dark"] #nav_container {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.18),
        rgba(255,255,255,0.08),
        rgba(0,0,0,0.35)
    ) !important;
}

/* Light Mode */
[data-bs-theme="light"] .right-sticky-nav .rsn-item:hover {
    color: #222; /* dunkles Grau → perfekt sichtbar */
}

/* Dark Mode */
[data-bs-theme="dark"] .right-sticky-nav .rsn-item:hover {
    color: #fff; /* helles Weiß → perfekt sichtbar */
}

/* Light Mode */
:root[data-bs-theme="light"] {
	--top-leiste-bag: #F2F2F2;
	--top-leiste-border: #cccccc;
	--top-leiste-color: #575757;
	--top-leiste-hover: #373737;
	--header-bag: #000000;
    --mini-nav-bg: #f2f2f2;
    --mini-nav-border: #cccccc;
	--mini-nav-icon: #575757;
	--mini-nav-icon-hover: #373737;
	--navigation-hover-rgb: 57,255,20;
	--navigation-bag: #f2f2f2;
	--navigation-color: #000000;
	--navigation-hover: #2ecc10;
	--navigation-border: #cccccc;
    --footer-bg: #f5f5f5;
    --footer-color: #111;      /* Text schwarz */
    --footer-heading: #000;    /* Überschrift schwarz */
    --footer-border: #000;     /* Linie schwarz */
    --footer-link: #000;       /* Links schwarz */
}

/* Dark Mode */
:root[data-bs-theme="dark"] {
	--top-leiste-bag: #000000;
	--top-leiste-border: #222222;
	--top-leiste-color: #39ff14;
	--top-leiste-hover: #2ecc10;
	--header-bag: #000000;
    --mini-nav-bg: #000000;
    --mini-nav-border: #222222;
	--mini-nav-icon: #39ff14;
	--mini-nav-icon-hover: #2ecc10;
	--navigation-hover-rgb: 57,255,20;
	--navigation-bag: #000000;
	--navigation-color: #ffffff;
	--navigation-hover: #39ff14;
	--navigation-border: #222222;
    --footer-bg: #0f0f0f;
    --footer-color: #eee;
    --footer-heading: #fff;
    --footer-border: #fff;
    --footer-link: #fff;
}

/* Top Leiste */
.top {
	min-height: 20px;
	color: rgb(var(--top-leiste-color)) !important;
    background: var(--top-leiste-bag);
	border-bottom: 1px solid var(--top-leiste-border) !important;
}

.top a:hover {
	color: rgb(var(--top-leiste-hover)) !important;
}

#top.top {
    background-color: var(--top-leiste-bag) !important;
    color: rgb(var(--top-leiste-color)) !important;
}

#container1.header, #container1, .header {
	background-color: var(--header-bag) !important;
}

.fa-lg {
  font-size: 1.5em !important;
}

.text-danger {
  --bs-text-opacity: 1;
  color: rgb(255, 0, 29) !important;
}

[data-bs-theme="dark"] .text-danger,
[data-bs-theme="light"] .text-danger {
  color: rgb(255, 0, 29) !important;
}

[data-bs-theme="dark"] .text-danger:hover,
[data-bs-theme="light"] .text-danger:hover {
  color: rgb(255, 0, 29, 0.8) !important;
}

.logobar-icons a.text-danger i {
    color: rgb(255, 0, 29) !important;
}

.logobar-icons a.text-danger:hover i {
    color: rgb(255, 0, 29, 0.8) !important;
}

#logobar, #toggle_wishlist, #toggle_cart {
	background: black;
	color: #39ff14 !important;
	border-bottom: 1px solid #000;
	padding: 12px 0;
}

/* Ab 542px wieder normaler Header */
@media (min-width: 542px), (orientation: landscape) {
	#logobar {
		height: 150px;
	}
}

.logobar-inner {
    max-width: 1320px;
    margin: 0 auto;
    align-items: center;
    gap: 20px;
	justify-content: space-between;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
}

/* Logo */
.nav-logo img {
	flex: 0 1 auto;
	max-height: 200px;
	width: auto;
	height: auto;
}

/* Suche */
.logobar-search {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

/* Icons rechts */
.logobar-icons {
    display: flex;
    align-items: center;
    gap: 16px;
	flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.nav-icon {
    background: none;
    border: none;
    color: #023E8D;
    font-size: 1.25em;
    cursor: pointer;
}

/* Basis-Styling für ALLE Icons im Header */
.logobar-icons button,
.logobar-icons a,
.logobar-icons .icon,
.logobar-icons i,
.icontext,
.icontext a {
    color: #39ff14;
    transition: color .2s ease, transform .2s ease;
}

.logobar-icons button:hover i,
.logobar-icons a:hover i,
.logobar-icons .icon:hover i {
    color: #2ecc10;
    transform: scale(1.15);
}

.logobar-icons .icontext:hover {
    color: #2ecc10;
}

.logobar-icons button:active i,
.logobar-icons a:active i,
.logobar-icons .icon:active i {
    color: #2ecc10;
    transform: scale(1.05);
}

.flexbox-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: center;
}

.flexbox-item {
    flex: 1 1 auto;
}

.flex-item:nth-child(1) {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(2) {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(3) {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.flex-item:nth-child(4) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

/* Mobile: Suchfeld wird zur Lupe */
@media (max-width: 768px) {
    .logobar-search {
        display: none;
    }
}

/* Mobile Layout */
@media (max-width: 541px) {
    .logobar-inner {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .nav-logo {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .mobile-row {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .mobile-search-icon {
        display: flex;
        font-size: 26px;
        color: #39ff14;
        cursor: pointer;
    }

    .mobile-icons {
        display: flex;
        gap: 14px;
        align-items: center;
    }

    .logobar-search {
        display: none !important;
    }

    .logobar-icons {
        display: none !important;
    }

    .logobar-inner > .flex-item:nth-child(3) {
        display: none !important;
    }
}

/* Desktop: Mobile-Zeile ausblenden */
@media (min-width: 542px) {
    .mobile-row {
        display: none;
    }
}

/* Toggle-Button */
.ni-theme-toggle-btn {
    all: unset;
    position: relative !important;
    width: 42px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10;
    transition: transform .2s ease;
}

/* Neon-Ring */
.ni-theme-toggle-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 0;
}

.ni-theme-toggle-btn:hover::before {
    border-color: #2ecc10;
	box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14;
}

/* Icon */
.ni-theme-toggle-icon {
    all: unset;
    font-family: "Phosphor";
    font-size: 26px;
    line-height: 1;
    display: inline-block;
    color: #39ff14 !important;
    position: relative;
    z-index: 1;
    transition: transform .2s ease, color .2s ease;
}

/* Hover: Ring + Icon */
.ni-theme-toggle-btn:hover {
    transform: scale(1.15);
}

.ni-theme-toggle-btn:hover .ni-theme-toggle-icon {
    color: #2ecc10 !important;
}

@keyframes cyberGlow {
    0%   { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
    33%  { box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; }
    66%  { box-shadow: 0 0 8px #ff00ff, 0 0 16px #ff00ff; }
    100% { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
}

.ni-theme-toggle-btn::before {
    animation: cyberGlow 3s infinite linear;
}

/* Mobile: Ring ausblenden */
@media (max-width: 541px) {
    .ni-theme-toggle-btn {
        width: auto !important;
        height: auto !important;
        transform: none !important;
    }
}

/* Suchbutton komplett neutralisieren */
.ni-search-btn {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid var(--bs-border-color);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-left: -1px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-color: rgba(var(--bs-secondary-color));
}

/* Lupe – Neon-Grün */
.ni-search-icon {
    all: unset;
    font-family: "Phosphor";
    font-size: 22px;
    line-height: 1;
    display: inline-block;
    color: #39ff14 !important;
    opacity: 1 !important;
}

/* Hover – dunkleres Neon-Grün */
.ni-search-btn:hover .ni-search-icon {
    color: #2ecc10 !important;
    transform: scale(1.15);
}

/* Haupt Navigation */
#nav_container {
    position: relative;
	opacity: 0;
	transform: translateY(-100%);
    transition:
        transform .55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity .55s cubic-bezier(0.22, 1, 0.36, 1);	
    z-index: 9999;
}

/* Navigation rausfahren */
#nav_container.nav-hide {
    transform: translateY(-100%);
	opacity: 0;
}

/* Navigation reinfahren */
#nav_container.nav-show {
    position: fixed;
    top: 53px;
    left: 0;
    right: 0;
    transform: translateY(0);
	opacity: 1;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.65),
        rgba(0,0,0,0.08));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0,0,0,0.15);
    z-index: 9999;
}

:root[data-bs-theme="dark"] #nav_container.nav-animate {
    animation:
		navGlowDark 0.6s ease-out,
        navBounceDark 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

#nav_container.nav-animate {
    animation:
		navGlow 0.6s ease-out,
        navBounce 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

/* Glow */
@keyframes navGlow {
    0%   { box-shadow: 0 0 0 rgba(57,255,20,0); }
    40%  { box-shadow: 0 0 22px rgba(57,255,20,0.55); }
    100% { box-shadow: 0 0 0 rgba(57,255,20,0); }
}

/* Bounce */
@keyframes navBounceDark {
    0%   { transform: translateY(-140%); }
    55%  { transform: translateY(10px); }
    75%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

@keyframes navBounce {
    0%   { transform: translateY(-120%); }
    60%  { transform: translateY(6px); }
    80%  { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}

:root[data-bs-theme="dark"] #nav_container.nav-show {
    animation: navGlowDark 0.6s ease-out;
}

@keyframes navGlowDark {
    0% {
        box-shadow: 0 0 0 rgba(57,255,20,0);
    }
    40% {
        box-shadow: 0 0 22px rgba(57,255,20,0.65);
    }
    100% {
        box-shadow: 0 0 0 rgba(57,255,20,0);
    }
}

:root[data-bs-theme="dark"] #nav_container.nav-show {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(0,0,0,0.35));
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

:root[data-bs-theme="light"] #nav_container.nav-show {
    background-color: #ffffff !important;
}

:root[data-bs-theme="dark"] #nav_container.nav-show {
    background-color: #212529 !important;
}

#nav_container {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.10),
        rgba(0,0,0,0.15)
    ) !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3),
                inset 0 -2px 4px rgba(0,0,0,0.25);
}

/* Navigationselemente */
#nav_container li.nav-home-li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
}

#nav_container li.nav-home-li > a.nav-home-a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    height: 35px;
    line-height: 35px;
    color: var(--navigation-color);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
}

/* HOME – Linie oben */
#nav_container li.nav-home-li::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--navigation-hover);
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform .3s ease, opacity .2s ease, box-shadow .3s ease;
}

/* HOME – Hover */
#nav_container li.nav-home-li:hover::after,
#nav_container li.nav-home-li.active::after {
    transform: scaleX(1);
    opacity: 1;
    background: linear-gradient(90deg, var(--navigation-hover), #e52e71, var(--navigation-hover));
    box-shadow: 0 0 12px var(--navigation-hover);
}

#nav_container li.nav-home-li:hover > a.nav-home-a,
#nav_container li.nav-home-li.active > a.nav-home-a {
    color: var(--navigation-hover);
    font-weight: 700;
    text-shadow: 0 0 2px var(--navigation-hover);
}

/* Home Icon – sanfte Rotation */
#nav_container a.nav-home-a .ph-house-bold {
    transition: transform .45s ease;
    transform-origin: center;
}

#nav_container a.nav-home-a:hover .pph-house-bold {
    transform: rotate(20deg);
}

#nav_container a.nav-home-a .ph-house-bold {
	font-size: 24px;
    --ph-weight: 600;
    transition: transform .45s ease;
    transform-origin: center;
	transform: scale(1.15);
}

#nav_container a.nav-home-a .ph-house-bold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    transform: translateZ(0);
	transform: scale(1.15);
}

#nav_container a.nav-home-a .ph-house-bold {
    transition:
        transform .45s cubic-bezier(0.25, 0.1, 0.25, 1),
        filter .45s ease;
}

@keyframes homeGlowPulse {
    0%   { filter: drop-shadow(0 0 8px #39ff14) drop-shadow(0 0 16px #39ff14); }
    33%  { filter: drop-shadow(0 0 8px #00eaff) drop-shadow(0 0 16px #00eaff); }
    66%  { filter: drop-shadow(0 0 8px #ff00ff) drop-shadow(0 0 16px #ff00ff); }
    100% { filter: drop-shadow(0 0 8px #39ff14) drop-shadow(0 0 16px #39ff14); }
}

/* Hover-Effekt */
#nav_container a.nav-home-a:hover .ph-house-bold {
    transform: scale(1.15);
    animation: 
		homeGlowPulse 3.2s ease-in-out infinite,
		homeWiggleBounce .55s ease-out;
}

@keyframes homeWiggleBounce {
    0%   { transform: rotate(0deg) scale(1.15); }
    15%  { transform: rotate(10deg) scale(1.15); }
    30%  { transform: rotate(-10deg) scale(1.15); }
    45%  { transform: rotate(8deg) scale(1.15); }
    60%  { transform: rotate(-8deg) scale(1.15); }
    75%  { transform: rotate(4deg) scale(1.15); }
    90%  { transform: rotate(-2deg) scale(1.15); }
    100% { transform: rotate(0deg) scale(1.15); }
}

#nav_container a.nav-home-a .ph-house-bold {
    animation: homeGlowPulse 3.2s ease-in-out infinite;
    transform-origin: center;
    --ph-weight: 600;
    color: var(--navigation-color);
}

#nav_container .navbar-nav {
    row-gap: 7px;
    column-gap: 2px;
}

/* ============================
   BASIS-TYPOGRAFIE FÜR ALLE LINKS
   ============================ */
/* Basislinie (unsichtbar) */
#nav_container li[class^="nav-"]:not(.nav-mega-li)::before {
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition:
        transform .6s cubic-bezier(0.25, 0.1, 0.25, 1),
        opacity .4s ease,
        box-shadow .4s ease;
}

/* Hover + Active – langsam wachsend */
#nav_container li[class^="nav-"]:not(.nav-mega-li):hover::before,
#nav_container li[class^="nav-"]:not(.nav-mega-li).active::before {
    transform: scaleX(1);
    opacity: 1;
}

#nav_container li.nav-mega-li > a.nav-mega-a::before {
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition:
        transform .6s cubic-bezier(0.25, 0.1, 0.25, 1),
        opacity .4s ease,
        box-shadow .4s ease;
}

#nav_container li.nav-mega-li > a.nav-mega-a:hover::before,
#nav_container li.nav-mega-li > a.nav-mega-a.active::before {
    transform: scaleX(1);
    opacity: 1;
}

#nav_container li[class^="nav-"] > a[class^="nav-"],
#nav_container li.nav-home-li > a.nav-home-a,
#nav_container li.nav-cat-li > a.nav-cat-a {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    height: 35px !important;
    line-height: 35px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: var(--navigation-color) !important;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ============================
   TYPOGRAFIE FÜR MEGA-MENÜ-LINK
   ============================ */

#nav_container li.nav-mega-li > a.nav-mega-a {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    height: 35px !important;
    line-height: 35px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--navigation-color) !important;
    text-decoration: none !important;
    backface-visibility: hidden;
    transform: translateZ(0);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Normale Kategorie – LI MUSS relativer Container sein */
#nav_container li.nav-cat-li {
    position: relative !important;
    display: flex;
    align-items: center;
    padding: 0 !important;
}

/* ============================
   HOVER-LINIE FÜR NORMALE LINKS
   ============================ */

/* Basislinie (unsichtbar) */
#nav_container li.nav-cat-li::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--navigation-hover), #e52e71, var(--navigation-hover));
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition:
        transform .25s ease,
        opacity .2s ease,
        box-shadow .3s ease;
}

/* Hover + Active */
#nav_container li.nav-cat-li:hover::before,
#nav_container li.nav-cat-li.active::before {
    transform: scaleX(1);
    opacity: 1;
    box-shadow: 0 0 5px var(--navigation-hover);
}

/* Textfarbe beim Hover */
#nav_container li.nav-cat-li:hover > a.nav-cat-a,
#nav_container li.nav-cat-li.active > a.nav-cat-a {
    color: var(--navigation-hover);
    font-weight: 600;
    text-shadow: 0 0 2px var(--navigation-hover);
}

/* Mega-Menü Hauptlink – Linie am A-Tag */
#nav_container li.nav-mega-li > a.nav-mega-a {
    position: relative !important;
}

#nav_container li.nav-mega-li > a.nav-mega-a::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 255, 0.6);
    border-radius: 4px;
    transform: scaleX(1);
}

#nav_container li.nav-mega-li > a.nav-mega-a.dropdown-toggle::after {
    margin-left: 6px !important;
    vertical-align: middle !important;
}

/* Manufaktur */
#nav_container li.nav-man-li {
    position: relative !important;
}

#nav_container li.nav-man-li::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 255, 0.6);
    border-radius: 4px;
    transform: scaleX(1);
}

/* Bootstrap-Overrides für nav-wha-a und nav-spe-a */
#nav_container a.nav-wha-a,
#nav_container a.nav-spe-a {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 35px !important;
    height: 35px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--navigation-color) !important;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Textfarbe beim Hover */
#nav_container li.nav-wha-li:hover > a.nav-wha-a,
#nav_container li.nav-wha-li.active > a.nav-wha-a,
#nav_container li.nav-spe-li:hover > a.nav-spe-a,
#nav_container li.nav-spe-li.active > a.nav-spe-a {
    color: var(--navigation-hover);
    font-weight: 600;
    text-shadow: 0 0 2px var(--navigation-hover);
}

#nav_container li.nav-wha-li,
#nav_container li.nav-spe-li {
	position: relative !important;
	display: flex;
	align-items: center;
	padding: 0 !important;
}

/* Added Links */
#nav_container li.nav-wha-li,
#nav_container li.nav-spe-li,
#nav_container li.nav-add-li {
    position: relative !important;
}

#nav_container li.nav-wha-li::before,
#nav_container li.nav-spe-li::before,
#nav_container li.nav-add-li::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 255, 0.6);
    border-radius: 4px;
    transform: scaleX(1);
}

/* ============================
   HOVER-LINIE FÜR MEGA-MENÜ LINKS
   ============================ */
#nav_container li.nav-mega-li > a.nav-mega-a::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--navigation-hover), #e52e71, var(--navigation-hover));
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition:
        transform .25s ease,
        opacity .2s ease,
        box-shadow .3s ease;
}

/* Hover + Active */
#nav_container li.nav-mega-li > a.nav-mega-a:hover::before,
#nav_container li.nav-mega-li > a.nav-mega-a.active::before {
    transform: scaleX(1);
    opacity: 1;
    box-shadow: 0 0 5px var(--navigation-hover);
}

/* Textfarbe beim Hover */
#nav_container li.nav-mega-li > a.nav-mega-a:hover,
#nav_container li.nav-mega-li > a.nav-mega-a.active {
    font-weight: 600 !important;
    text-shadow: 0 0 2px var(--navigation-hover);
}

/* ============================
   HOVER-LINIE FÜR ADD-LINKS
   ============================ */
#nav_container li.nav-wha-li::before,
#nav_container li.nav-spe-li::before,
#nav_container li.nav-add-li::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--navigation-hover), #e52e71, var(--navigation-hover));
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition:
        transform .25s ease,
        opacity .2s ease,
        box-shadow .3s ease;
}

/* Hover + Active */
#nav_container li.nav-wha-li:hover::before,
#nav_container li.nav-wha-li.active::before,
#nav_container li.nav-spe-li:hover::before,
#nav_container li.nav-spe-li.active::before,
#nav_container li.nav-add-li:hover::before,
#nav_container li.nav-add-li.active::before {
    transform: scaleX(1);
    opacity: 1;
    box-shadow: 0 0 5px var(--navigation-hover);
}

/* Textfarbe beim Hover */
#nav_container li.nav-wha-li:hover > a.nav-add-a,
#nav_container li.nav-wha-li.active > a.nav-add-a,
#nav_container li.nav-spe-li:hover > a.nav-add-a,
#nav_container li.nav-spe-li.active > a.nav-add-a,
#nav_container li.nav-add-li:hover > a.nav-add-a,
#nav_container li.nav-add-li.active > a.nav-add-a {
    font-weight: 600 !important;
    text-shadow: 0 0 2px var(--navigation-hover);
}

/* Reduzierter Glow für normale Links */
#nav_container li.nav-cat-li:hover::before,
#nav_container li.nav-cat-li.active::before,
#nav_container li.nav-man-li:hover::before,
#nav_container li.nav-man-li.active::before,
#nav_container li.nav-wha-li:hover::before,
#nav_container li.nav-wha-li.active::before,
#nav_container li.nav-spe-li:hover::before,
#nav_container li.nav-spe-li.active::before,
#nav_container li.nav-add-li:hover::before,
#nav_container li.nav-add-li.active::before {
    box-shadow: 0 0 4px var(--navigation-hover);
}

/* Reduzierter Glow für Mega-Menü */
#nav_container li.nav-mega-li > a.nav-mega-a:hover::before,
#nav_container li.nav-mega-li > a.nav-mega-a.active::before {
    box-shadow: 0 0 4px var(--navigation-hover);
}

/* Reduzierter Text-Glow */
#nav_container li[class^="nav-"]:hover > a[class^="nav-"],
#nav_container li[class^="nav-"].active > a[class^="nav-"] {
    text-shadow: 0 0 1px var(--navigation-hover);
}

/* Dynamische Gradient-Animation für normale Links */
#nav_container li.nav-cat-li:hover::before,
#nav_container li.nav-cat-li.active::before,
#nav_container li.nav-man-li:hover::before,
#nav_container li.nav-man-li.active::before,
#nav_container li.nav-wha-li:hover::before,
#nav_container li.nav-wha-li.active::before,
#nav_container li.nav-spe-li:hover::before,
#nav_container li.nav-spe-li.active::before,
#nav_container li.nav-add-li:hover::before,
#nav_container li.nav-add-li.active::before {
    animation: navGradientMove 3s linear infinite;
    background-size: 200% 200%;
}

/* Dynamische Gradient-Animation für Mega-Menü */
#nav_container li.nav-mega-li > a.nav-mega-a:hover::before,
#nav_container li.nav-mega-li > a.nav-mega-a.active::before {
    animation: navGradientMove 3s linear infinite;
    background-size: 200% 200%;
}

@keyframes navGradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Megamenü */
li.kk-mega.level2 > a {
	color: var(--navigation-color) !important;
	font-weight: normal !important;
}

li.kk-mega.level2 > a:hover {
	color: var(--navigation-hover) !important;
	font-weight: normal !important;
}

.dropdown-menu {
	margin-top: 18px;
}

#main li.dropdown .row.kk-mega {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    left: 0;
    right: 0;
    top: auto;
    z-index: 1030;
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color-translucent);
    border-radius: var(--bs-border-radius);
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
    transition-delay: 400ms;
}

#main li.dropdown .row.kk-mega {
    margin-top: 10px;
}

#main li.dropdown .row.kk-mega {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    left: 0;
    right: 0;
    top: auto;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(0.25, 0.1, 0.25, 1),
        visibility 0s linear .45s;
    z-index: 1030;
}

#main li.dropdown:hover .row.kk-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

@keyframes megaGlowBorder {
    0%   { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
    33%  { box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; }
    66%  { box-shadow: 0 0 8px #ff00ff, 0 0 16px #ff00ff; }
    100% { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
}

#main li.dropdown:hover .row.kk-mega {
    animation: megaGlowBorder 3.2s ease-in-out infinite;
}

#main li.dropdown .row.kk-mega {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    left: 0;
    right: 0;
    top: auto;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition:
        opacity .35s ease,
        transform .45s cubic-bezier(0.25, 0.1, 0.25, 1),
        visibility 0s linear .45s;
    z-index: 1030;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    border-radius: 10px;
}

#main li.dropdown:hover .row.kk-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
    animation: megaGlowBorder 3.2s ease-in-out infinite;
}

html[data-bs-theme="light"] #main li.dropdown .row.kk-mega {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    color: #000;
}

#main li.dropdown .row.kk-mega .col {
    opacity: 0;
    transform: translateY(12px) rotateX(8deg);
    transform-origin: top center;
    transition:
        opacity .45s ease,
        transform .55s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#main li.dropdown:hover .row.kk-mega .col {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

#main li.dropdown:hover .row.kk-mega .col:nth-child(n) {
    transition-delay: calc(var(--i) * 70ms);
}

#main li.dropdown .row.kk-mega .col:nth-child(1)  { --i: 0; }
#main li.dropdown .row.kk-mega .col:nth-child(2)  { --i: 1; }
#main li.dropdown .row.kk-mega .col:nth-child(3)  { --i: 2; }
#main li.dropdown .row.kk-mega .col:nth-child(4)  { --i: 3; }
#main li.dropdown .row.kk-mega .col:nth-child(5)  { --i: 4; }
#main li.dropdown .row.kk-mega .col:nth-child(6)  { --i: 5; }
#main li.dropdown .row.kk-mega .col:nth-child(7)  { --i: 6; }
#main li.dropdown .row.kk-mega .col:nth-child(8)  { --i: 7; }
#main li.dropdown .row.kk-mega .col:nth-child(9)  { --i: 8; }
#main li.dropdown .row.kk-mega .col:nth-child(10) { --i: 9; }
#main li.dropdown .row.kk-mega .col:nth-child(11) { --i: 10; }
#main li.dropdown .row.kk-mega .col:nth-child(12) { --i: 11; }
#main li.dropdown .row.kk-mega .col:nth-child(13) { --i: 12; }
#main li.dropdown .row.kk-mega .col:nth-child(14) { --i: 13; }
#main li.dropdown .row.kk-mega .col:nth-child(15) { --i: 14; }
#main li.dropdown .row.kk-mega .col:nth-child(16) { --i: 15; }
#main li.dropdown .row.kk-mega .col:nth-child(17) { --i: 16; }
#main li.dropdown .row.kk-mega .col:nth-child(18) { --i: 17; }
#main li.dropdown .row.kk-mega .col:nth-child(19) { --i: 18; }
#main li.dropdown .row.kk-mega .col:nth-child(20) { --i: 19; }
#main li.dropdown .row.kk-mega .col:nth-child(21) { --i: 20; }
#main li.dropdown .row.kk-mega .col:nth-child(22) { --i: 21; }
#main li.dropdown .row.kk-mega .col:nth-child(23) { --i: 22; }
#main li.dropdown .row.kk-mega .col:nth-child(24) { --i: 23; }
#main li.dropdown .row.kk-mega .col:nth-child(25) { --i: 24; }
#main li.dropdown .row.kk-mega .col:nth-child(26) { --i: 25; }
#main li.dropdown .row.kk-mega .col:nth-child(27) { --i: 26; }
#main li.dropdown .row.kk-mega .col:nth-child(28) { --i: 27; }
#main li.dropdown .row.kk-mega .col:nth-child(29) { --i: 28; }
#main li.dropdown .row.kk-mega .col:nth-child(30) { --i: 29; }

/* Level‑3 Hover */
ul.mega-l3-col li.level3 > a:hover {
    color: var(--navigation-hover) !important;
    font-weight: 600 !important;
    transform: translateX(1px);
    transition: all 0.25s ease;
}

/* Megamenü Level 2 */
ul.mega-l3-col {
    position: relative;
    padding-left: 24px;
}

/* Level 2 wieder auf Null setzen */
ul.mega-l3-col li.level2 > a {
    padding-left: 0;
}

ul.mega-l3-col::before {
    content: none;
}

ul.mega-l3-col:has(li.level3)::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 42px;
    bottom: 55px;
    width: 3px;
    background: #39ff14;
    border-radius: 3px;
    box-shadow:
        0 0 6px #39ff14,
        0 0 12px #39ff14;
    animation: megaLineGlow 3.2s ease-in-out infinite;
}

ul.mega-l3-col li.level3 > a {
    padding-left: 20px !important;
}

ul.mega-l3-col li.morecats > a {
    display: inline-block;
    padding-left: 20px;
}

@keyframes megaLineGlow {
    0%   { box-shadow: 0 0 6px #39ff14, 0 0 12px #39ff14; }
    33%  { box-shadow: 0 0 6px #00eaff, 0 0 12px #00eaff; }
    66%  { box-shadow: 0 0 6px #ff00ff, 0 0 12px #ff00ff; }
    100% { box-shadow: 0 0 6px #39ff14, 0 0 12px #39ff14; }
}

/* Grundstil für den Schalter */
ul.mega-l3-col li.morecats > a {
    display: inline-block;
    padding: 6px 14px;
    margin-left: 20px;
    background: #1a1a1a;
    border-radius: 20px;
    color: #fff;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    z-index: 2;
}

/* Glow-Effekt */
ul.mega-l3-col li.morecats > a {
    box-shadow:
        0 0 6px rgba(57,255,20,0.6),
        0 0 12px rgba(57,255,20,0.4);
}

/* Hover: heller + leicht größer */
ul.mega-l3-col li.morecats > a:hover {
    transform: translateX(3px);
    box-shadow:
        0 0 8px rgba(57,255,20,0.9),
        0 0 16px rgba(57,255,20,0.7);
}

/* Grundstil für den Schalter */
ul.mega-l3-col li.morecats > a {
    display: inline-block;
    padding: 6px 14px;
    margin-left: 20px;
    background: #1a1a1a;
    border-radius: 20px;
    color: #fff;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    z-index: 2;
}

/* Glow-Effekt */
ul.mega-l3-col li.morecats > a {
    box-shadow:
        0 0 6px rgba(57,255,20,0.6),
        0 0 12px rgba(57,255,20,0.4);
}

/* Hover: heller + leicht größer */
ul.mega-l3-col li.morecats > a:hover {
    transform: translateX(3px);
    box-shadow:
        0 0 5px rgba(57,255,20,0.9),
        0 0 10px rgba(57,255,20,0.7);
}

@keyframes moreGlow {
    0%   { box-shadow: 0 0 4px #39ff14, 0 0 8px #39ff14; }
    33%  { box-shadow: 0 0 4px #00eaff, 0 0 8px #00eaff; }
    66%  { box-shadow: 0 0 4px #ff00ff, 0 0 8px #ff00ff; }
    100% { box-shadow: 0 0 4px #39ff14, 0 0 8px #39ff14; }
}

/* --- Metallischer Button --- */
ul.mega-l3-col li.morecats > a {
    position: relative;
    display: inline-block;
    padding: 6px 18px;
    margin-left: 20px;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border-radius: 22px;
    color: #fff;
    font-size: 0.85rem;
    text-decoration: none;
    z-index: 2;
    overflow: visible;
    border: 1px solid #333;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.15),
        inset 0 -1px 2px rgba(0,0,0,0.4),
        0 2px 4px rgba(0,0,0,0.4);
}

/* Glossy Highlight oben */
ul.mega-l3-col li.morecats > a::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 6px;
    right: 6px;
    height: 40%;
    border-radius: 20px;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.05)
    );
    pointer-events: none;
}

/*Puls + Orbit kombiniert*/
ul.mega-l3-col li.morecats > a::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 28px;
    background: conic-gradient(
        #39ff14,
        #00eaff,
        #ff00ff,
        #39ff14
    );
    filter: blur(8px);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

/* Hover: Orbit + Puls starten */
ul.mega-l3-col li.morecats > a:hover::before {
    opacity: 0.8;
    animation: orbitGlow 4s linear infinite, pulseGlow 3s ease-in-out infinite;
}

/* Orbit: Licht läuft im Kreis */
@keyframes orbitGlow {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Puls: Glow wird stärker/schwächer */
@keyframes pulseGlow {
    0%   { filter: blur(6px); opacity: 0.5; }
    50%  { filter: blur(12px); opacity: 1; }
    100% { filter: blur(6px); opacity: 0.5; }
}

/* === ANIMATIONEN === */

/* Neon-Glow Flash + größerer Einstieg */
@keyframes miniNavGlowIntro {
    0%   { 
        transform: translateY(-140%);
        height: 72px; /* vorher 64px → jetzt größer */
        box-shadow: 0 0 0px rgba(57,255,20,0);
        opacity: 0;
    }
    30%  { 
        transform: translateY(0);
        height: 72px;
        box-shadow: 0 0 22px rgba(57,255,20,0.8);
        opacity: 1;
    }
    60%  { 
        height: 62px;
        box-shadow: 0 0 32px rgba(57,255,20,0.6);
    }
    100% { 
        height: 55px; /* neue Endhöhe */
        box-shadow: 0 0 0px rgba(57,255,20,0);
    }
}

/* Logo Drop-In (höher & größer) */
@keyframes miniLogoDrop {
    0%   { transform: translateY(-26px) scale(1.45); opacity: 0; }
    50%  { transform: translateY(-8px) scale(1.30); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes miniLogoGlow {
    0%   { filter: drop-shadow(0 0 0px #39ff14); }
    40%  { filter: drop-shadow(0 0 12px #39ff14); }
    70%  { filter: drop-shadow(0 0 20px #39ff14); }
    100% { filter: drop-shadow(0 0 0px #39ff14); }
}

/* Icons Slide-In (Basis) */
@keyframes miniIconStagger {
    0%   { transform: translateX(32px); opacity: 0; }
    60%  { transform: translateX(6px); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes miniIconRotate {
    0%   { transform: translateX(32px) rotate(-25deg); opacity: 0; }
    60%  { transform: translateX(6px) rotate(-8deg); opacity: 1; }
    100% { transform: translateX(0) rotate(0deg); opacity: 1; }
}

/* ÄUSSERER CONTAINER */
.mini-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: var(--mini-nav-bg);
	border-bottom: 1px solid var(--mini-nav-border);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9997;
    overflow: hidden;
}

/* Sichtbar + Glow + Slide-In */
.mini-nav.visible {
    opacity: 1;
    transform: translateY(0);
    animation: miniNavGlowIntro 0.6s ease-out forwards;
}

.mini-nav-limit {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.mini-left {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.mini-logo {
    height: 45px;
    opacity: 0;
}

.mini-nav.visible .mini-logo {
    animation:
        miniLogoDrop 0.55s ease-out forwards,
        miniLogoGlow 0.55s ease-out forwards;
}

.mini-right {
    flex: 0 0 auto;
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Icons Grundzustand */
.mini-right .mini-item {
    opacity: 0;
    color: var(--mini-nav-icon);
    font-size: 20px;
    transition: color .2s ease, transform .2s ease;
    text-decoration: none;
}

/* Hover */
.mini-item:hover {
    transform: scale(1.2);
    color: var(--mini-nav-icon-hover);
}

/* Icons Grundzustand */
.mini-right .mini-item {
    opacity: 0;
}

/* Stagger: 1–7 */
.mini-nav.visible .mini-right .mini-item:nth-child(1) {
    animation: miniIconRotate 0.55s ease-out forwards;
    animation-delay: 0.00s;
}

.mini-nav.visible .mini-right .mini-item:nth-child(2) {
    animation: miniIconRotate 0.55s ease-out forwards;
    animation-delay: 0.08s;
}

.mini-nav.visible .mini-right .mini-item:nth-child(3) {
    animation: miniIconRotate 0.55s ease-out forwards;
    animation-delay: 0.16s;
}

.mini-nav.visible .mini-right .mini-item:nth-child(4) {
    animation: miniIconRotate 0.55s ease-out forwards;
    animation-delay: 0.24s;
}

.mini-nav.visible .mini-right .mini-item:nth-child(5) {
    animation: miniIconRotate 0.55s ease-out forwards;
    animation-delay: 0.32s;
}

.mini-nav.visible .mini-right .mini-item:nth-child(6) {
    animation: miniIconRotate 0.55s ease-out forwards;
    animation-delay: 0.40s;
}

.mini-nav.visible .mini-right .mini-item:nth-child(7) {
    animation: miniIconRotate 0.55s ease-out forwards;
    animation-delay: 0.48s;
}

/* Toggle animiert wie ein mini-item */
.mini-nav.visible #themeToggle {
    opacity: 0;
    transform: translateY(-6px) rotate(-15deg);
    animation: miniIconRotate 0.55s ease-out forwards;
    animation-delay: 0.48s;
}

.mini-logo-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
	padding-top: 10px;
	padding-left: 25px;
	padding-bottom: 5px;
}

/* Elliptischer, farbiger Shine – KEIN KASTEN MEHR */
.mini-logo-wrapper::after {
    content: "";
    position: absolute;
    top: -250%;
    left: -150%;
    width: 00%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        rgba(57,255,20,0.18) 0%,
        rgba(0,234,255,0.15) 25%,
        rgba(255,0,255,0.12) 45%,
        rgba(255,255,255,0) 70%
    );
    transform: translate(-120%, -120%) rotate(35deg);
    animation: logoDiagonalShine 5.2s linear infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes logoDiagonalShine {
    0% {
        transform: translate(-120%, -120%) rotate(35deg);
        opacity: 0.35;
    }
    50% {
        opacity: 0.55;
    }
    100% {
        transform: translate(120%, 120%) rotate(35deg);
        opacity: 0.35;
    }
}

.mini-logo {
    position: relative;
    z-index: 2;
}

/* Lupe – runder Neon-Button wie Toggle, aber kleiner (ca. 30px) */
.mini-search-btn {
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    overflow: visible;
    z-index: 10;
}

/* Neon-Grüner Glow-Ring */
.mini-search-btn::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14;
    animation: cyberGlow 2.4s ease-in-out infinite;
    animation-delay: 1.2s;
    pointer-events: none;
}

/* Lupe selbst neongrün */
.mini-search-btn i {
    color: #39ff14;
    font-size: 1.1rem;
}

@keyframes cyberGlow {
    0%   { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
    33%  { box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; }
    66%  { box-shadow: 0 0 8px #ff00ff, 0 0 16px #ff00ff; }
    100% { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
}

.mini-nav.visible .mini-search-btn {
    opacity: 0;
    transform: translateY(-6px) rotate(-15deg);
    animation: miniIconRotate 0.55s ease-out forwards;
    animation-delay: 0.40s;
}

.mini-right .mini-badge {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #ff0033 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 2px 6px !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    min-width: 18px !important;
    text-align: center !important;
    box-shadow: 0 0 6px rgba(255,0,0,0.6) !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.mini-right .mini-badge {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%   { box-shadow: 0 0 6px #ff0033; }
    50%  { box-shadow: 0 0 12px #ff4d6d; }
    100% { box-shadow: 0 0 6px #ff0033; }
}

/* Header-Badge Glow + Orbit */
.badge-corner.badge.bg-danger {
    position: relative;
    animation: headerBadgePulse 2.4s ease-in-out infinite;
    box-shadow:
        0 0 6px rgba(255,0,0,0.6),
        0 0 12px rgba(255,0,0,0.4);
}

/* Orbit-Ring */
.badge-corner.badge.bg-danger::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: inherit;
    background: conic-gradient(
        rgba(255,0,0,0.0),
        rgba(255,0,0,0.4),
        rgba(255,0,0,0.0)
    );
    filter: blur(6px);
    z-index: -1;
    animation: headerBadgeOrbit 3.6s linear infinite;
}

/* Puls */
@keyframes headerBadgePulse {
    0%   { box-shadow: 0 0 6px rgba(255,0,0,0.6); }
    50%  { box-shadow: 0 0 12px rgba(255,0,0,0.9); }
    100% { box-shadow: 0 0 6px rgba(255,0,0,0.6); }
}

/* Orbit */
@keyframes headerBadgeOrbit {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Grundstil: Logo klarer & kräftiger */
.nav-logo img {
    filter:
        brightness(1.2)
        contrast(1.15)
        drop-shadow(0 0 6px #39ff14)
        drop-shadow(0 0 12px #39ff14);
    transition: all 0.35s ease;
    opacity: 0;
    transform: scale(1);
    animation:
        logoIntro 1.2s ease-out forwards,
        logoAuraPulse 3s ease-in-out infinite 1.2s;
}

/* Intro-Animation OHNE transform */
@keyframes logoIntro {
    0% {
        opacity: 0;
        filter:
            brightness(0.6)
            contrast(0.8)
            drop-shadow(0 0 0px #39ff14);
    }
    40% {
        opacity: 1;
        filter:
            brightness(1.55)
            contrast(1.25)
            drop-shadow(0 0 22px #39ff14)
            drop-shadow(0 0 32px #00eaff);
    }
    100% {
        opacity: 1;
        filter:
            brightness(1.2)
            contrast(1.15)
            drop-shadow(0 0 6px #39ff14)
            drop-shadow(0 0 12px #39ff14);
    }
}

/* Dauerhafter Glow-Pulse */
@keyframes logoAuraPulse {
    0% {
        filter:
            brightness(1.15)
            contrast(1.1)
            drop-shadow(0 0 6px #39ff14)
            drop-shadow(0 0 12px #39ff14);
    }
    50% {
        filter:
            brightness(1.35)
            contrast(1.2)
            drop-shadow(0 0 12px #00eaff)
            drop-shadow(0 0 22px #00eaff);
    }
    100% {
        filter:
            brightness(1.15)
            contrast(1.1)
            drop-shadow(0 0 6px #39ff14)
            drop-shadow(0 0 12px #39ff14);
    }
}

/* Hover-Effekt – funktioniert jetzt, weil transform NICHT mehr blockiert wird */
.nav-logo:hover img {
    transform: scale(1.05) rotateX(6deg);
    filter:
        brightness(1.55)
        contrast(1.28)
        drop-shadow(0 0 18px #39ff14)
        drop-shadow(0 0 32px #00eaff);
    transition: transform 0.35s ease, filter 0.35s ease;
    transform-origin: center bottom;
}

.nav-logo {
    position: relative;
    display: inline-block;
    overflow: visible;
}

/* Card Animation */
.card {
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

/* FLASH */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    pointer-events: none;
    opacity: 0;
}

.card:hover::after {
    animation: cardBorderFlash 0.6s ease-out forwards;
}

@keyframes cardBorderFlash {
    0% {
        opacity: 0;
        border-color: rgba(57,255,20,0);
    }
    40% {
        opacity: 1;
        border-color: rgba(57,255,20,0.9);
        box-shadow:
            0 0 18px rgba(57,255,20,0.8),
            0 0 28px rgba(0,234,255,0.6);
    }
    100% {
        opacity: 0;
        border-color: rgba(57,255,20,0);
    }
}

/* ORBIT (einmaliger Lauf) */
.card:not(.neon-card)::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: conic-gradient(
        #39ff14,
        #00eaff,
        #ff00ff,
        #39ff14
    );
    filter: blur(10px);
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

.card:not(.neon-card):hover::before {
    opacity: 1;
    animation: cardOrbitOnce 1.2s linear 0s 1 forwards;
}

@keyframes cardOrbitOnce {
    0%   { transform: rotate(0deg); opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0; }
}

/* Daueranimation */
.ni-close {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #39ff14 !important;
    font-size: 1.4rem;
    opacity: 0.95;
    cursor: pointer;
    position: relative;

    animation: neonBreath 3.2s linear infinite;
}

@keyframes neonBreath {
    0%   { filter: drop-shadow(0 0 10px #39ff14) drop-shadow(0 0 20px #39ff14); }
    33%  { filter: drop-shadow(0 0 10px #00eaff) drop-shadow(0 0 20px #00eaff); }
    66%  { filter: drop-shadow(0 0 10px #ff00ff) drop-shadow(0 0 20px #ff00ff); }
    100% { filter: drop-shadow(0 0 10px #39ff14) drop-shadow(0 0 20px #39ff14); }
}

/* Hover Orbit */
.ni-close:hover::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(#39ff14, #00eaff, #ff00ff, #39ff14);
    filter: blur(10px);
    opacity: 0;
    animation: closeOrbit 0.7s linear forwards;
}

@keyframes closeOrbit {
    0%   { transform: rotate(0deg); opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0; }
}

/* Mini Explosion */
.ni-close:active::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(57,255,20,0.9) 0%,
        rgba(57,255,20,0.4) 40%,
        rgba(57,255,20,0) 70%
    );
    animation: closeExplode 0.25s ease-out forwards;
}

@keyframes closeExplode {
    0%   { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

.offcanvas-header {
    position: relative;
    overflow: visible; /* wichtig, damit Explosion sichtbar bleibt */
}

/* Explosion beim Hover */
.offcanvas-header:hover::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(57,255,20,0.9) 0%,
        rgba(57,255,20,0.4) 40%,
        rgba(57,255,20,0) 70%
    );
    animation: headerExplode 0.45s ease-out forwards;
}

@keyframes headerExplode {
    0%   { width: 0; height: 0; opacity: 1; }
    100% { width: 180%; height: 180%; opacity: 0; }
}

/* Nur diese Box */
.neon-info-box {
    position: relative;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(57,255,20,0.25) !important;
    color: #d8ffe0 !important;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    overflow: hidden;
    animation: neonInfoPulse 3.2s ease-in-out infinite;
}

/* Mehrfarbiger Neon-Pulse */
@keyframes neonInfoPulse {
    0% {
        box-shadow:
            0 0 6px #39ff14,
            0 0 12px #39ff14;
        border-color: #39ff14;
    }
    33% {
        box-shadow:
            0 0 6px #00eaff,
            0 0 12px #00eaff;
        border-color: #00eaff;
    }
    66% {
        box-shadow:
            0 0 6px #ff00ff,
            0 0 12px #ff00ff;
        border-color: #ff00ff;
    }
    100% {
        box-shadow:
            0 0 6px #39ff14,
            0 0 12px #39ff14;
        border-color: #39ff14;
    }
}

/* Doppel-Neon-Shine – beide gleichzeitig */
.neon-info-box::after,
.neon-info-box::before {
    content: "";
    position: absolute;
    top: 0;
    width: 55%;
    height: 100%;
    pointer-events: none;
    transform: skewX(-20deg);
    filter: blur(8px);
    background: linear-gradient(
        120deg,
        rgba(57,255,20,0) 0%,
        rgba(57,255,20,0.35) 20%,
        rgba(0,234,255,0.45) 50%,
        rgba(255,0,255,0.35) 80%,
        rgba(255,0,255,0) 100%
    );
    opacity: 0.9;
}

/* Shine A – links → rechts */
.neon-info-box::after {
    left: -60%;
    animation: neonShineA 7s ease-in-out infinite;
}

/* Shine B – rechts → links */
.neon-info-box::before {
    right: -60%;
    animation: neonShineB 7s ease-in-out infinite;
}

/* Animationen – beide laufen gleichzeitig */
@keyframes neonShineA {
    0%   { left: -60%; opacity: 0.2; }
    25%  { opacity: 1; }
    50%  { left: 120%; opacity: 1; }
    75%  { opacity: 0.4; }
    100% { left: 120%; opacity: 0; }
}

@keyframes neonShineB {
    0%   { right: -60%; opacity: 0.2; }
    25%  { opacity: 1; }
    50%  { right: 120%; opacity: 1; }
    75%  { opacity: 0.4; }
    100% { right: 120%; opacity: 0; }
}

/* ---------------------------------------------------
   OFFCANVAS GRUNDLAYOUT
--------------------------------------------------- */
#my-offcanvas-menu *::before,
#my-offcanvas-menu *::after {
    pointer-events: none !important;
}

.my-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 100%;
    background: rgb(0, 0, 0) !important;
    backdrop-filter: blur(12px);
    transform: translateX(-100%);
    border-right: 2px solid rgba(57, 255, 20, 0.35);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.35), 0 0 22px rgba(0, 234, 255, 0.25);
    transition: all 0.45s ease;
    z-index: 9999;
}

.my-offcanvas.open {
    transform: translateX(0);
}

/* ---------------------------------------------------
   OVERLAY
--------------------------------------------------- */

#my-offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.05);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 9998;
}

#my-offcanvas-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ---------------------------------------------------
   HEADER
--------------------------------------------------- */

.my-offcanvas-header {
    position: sticky;
    top: 0;
    z-index: 10;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 1rem;

    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(10px);

    border-bottom: 1px solid rgba(57,255,20,0.35);

    position: relative;
    overflow: hidden;
}

/* Explosion beim Hover */
.my-offcanvas-header:hover::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(57,255,20,0.9) 0%,
        rgba(57,255,20,0.4) 40%,
        rgba(57,255,20,0) 70%
    );
    animation: headerExplode 0.45s ease-out forwards;
}

@keyframes headerExplode {
    0%   { width: 0; height: 0; opacity: 1; }
    100% { width: 180%; height: 180%; opacity: 0; }
}

/* ---------------------------------------------------
   HEADER TITLE – NEON
--------------------------------------------------- */

.my-offcanvas-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #39ff14;
    text-shadow:
        0 0 6px rgba(57,255,20,0.6),
        0 0 12px rgba(57,255,20,0.3);
    letter-spacing: 0.5px;
}

/* ---------------------------------------------------
   OFFCANVAS CLOSE BUTTON – IDENTISCH ZU .ni-close
--------------------------------------------------- */

.my-offcanvas-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #39ff14 !important;
    font-size: 1.6rem;
    cursor: pointer;
    position: relative;
    opacity: 0.95;
    animation: neonBreath 3.2s linear infinite;
}

/* Daueranimation – 1:1 übernommen */
@keyframes neonBreath {
    0%   { filter: drop-shadow(0 0 10px #39ff14) drop-shadow(0 0 20px #39ff14); }
    33%  { filter: drop-shadow(0 0 10px #00eaff) drop-shadow(0 0 20px #00eaff); }
    66%  { filter: drop-shadow(0 0 10px #ff00ff) drop-shadow(0 0 20px #ff00ff); }
    100% { filter: drop-shadow(0 0 10px #39ff14) drop-shadow(0 0 20px #39ff14); }
}

/* Hover Orbit – 1:1 übernommen */
.my-offcanvas-close:hover::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(#39ff14, #00eaff, #ff00ff, #39ff14);
    filter: blur(10px);
    opacity: 0;
    animation: closeOrbit 0.7s linear forwards;
}

@keyframes closeOrbit {
    0%   { transform: rotate(0deg); opacity: 0.8; }
    100% { transform: rotate(360deg); opacity: 0; }
}

/* Mini Explosion – 1:1 übernommen */
.my-offcanvas-close:active::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(57,255,20,0.9) 0%,
        rgba(57,255,20,0.4) 40%,
        rgba(57,255,20,0) 70%
    );
    animation: closeExplode 0.25s ease-out forwards;
}

@keyframes closeExplode {
    0%   { transform: scale(0.4); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* ---------------------------------------------------
   BODY
--------------------------------------------------- */

.my-offcanvas-body {
    padding: 0px 10px 5px 0px;
    overflow-y: auto;
    height: calc(100% - 70px);
}

/* ---------------------------------------------------
   NAVIGATION GRUNDSTRUKTUR
--------------------------------------------------- */

#my-offcanvas-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#my-offcanvas-menu li {
    border-bottom: 1px solid #222;
}

/* ---------------------------------------------------
   FLEX-ZEILE (Text + Pfeil)
--------------------------------------------------- */

#my-offcanvas-menu .nav-row {
    display: flex;
    width: 100%;
    padding: 8px 18px;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

/* ---------------------------------------------------
   LEVEL 1 – Hauptkategorie
--------------------------------------------------- */

#my-offcanvas-menu .nav-row > a,
#my-offcanvas-menu .nav-row > span {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    text-shadow:
        0 0 3px rgba(57,255,20,0.35),
        0 0 6px rgba(57,255,20,0.25);
    transition: color .25s ease, text-shadow .25s ease;
}

#my-offcanvas-menu .nav-row > a:hover,
#my-offcanvas-menu .nav-row > span:hover {
    color: #39ff14;
    text-shadow:
        0 0 6px rgba(57,255,20,0.6),
        0 0 12px rgba(57,255,20,0.4);
}

/* ---------------------------------------------------
   PFEIL-BUTTON
--------------------------------------------------- */

#my-offcanvas-menu .submenu-toggle {
    display: flex;
    flex: 0 0 30px;
    height: 100%;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
}

#my-offcanvas-menu .submenu-toggle::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
    color: #39ff14;
    text-shadow:
        0 0 6px rgba(57,255,20,0.7),
        0 0 12px rgba(57,255,20,0.5);
    transition: transform .3s ease;
    animation: arrowPulse 2s infinite ease-in-out;
}

#my-offcanvas-menu li.open > .nav-row > .submenu-toggle::before {
    transform: rotate(90deg);
}

@keyframes arrowPulse {
    0%   { text-shadow: 0 0 6px rgba(57,255,20,0.5); }
    50%  { text-shadow: 0 0 18px rgba(57,255,20,0.9); }
    100% { text-shadow: 0 0 6px rgba(57,255,20,0.5); }
}

/* ---------------------------------------------------
   SUBMENU TOGGLE – Neon Wobble + Multi-Color Pulse
--------------------------------------------------- */

#my-offcanvas-menu .submenu-toggle {
    display: flex;
    flex: 0 0 30px;
    height: 100%;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    animation: toggleWobble 2.8s ease-in-out infinite,
               toggleColorPulse 3.2s linear infinite;
    transition: transform .35s ease;
}

/* Pfeil-Symbol */
#my-offcanvas-menu .submenu-toggle::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 22px;
    color: #39ff14;
    text-shadow:
        0 0 6px #39ff14,
        0 0 12px #39ff14;
    transition: transform .35s ease, font-size .35s ease;
}

/* ---------------------------------------------------
   HOVER-EFFEKT (größer + nach unten drehen)
--------------------------------------------------- */

#my-offcanvas-menu .submenu-toggle:hover::before {
    transform: rotate(90deg) scale(1.25);
    font-size: 22px;
}

/* ---------------------------------------------------
   Rotation beim Öffnen (bleibt bestehen)
--------------------------------------------------- */

#my-offcanvas-menu li.open > .nav-row > .submenu-toggle::before {
    transform: rotate(90deg);
}

/* ---------------------------------------------------
   Wobble Animation (leichtes Hin-und-Her-Wackeln)
--------------------------------------------------- */

@keyframes toggleWobble {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-2px); }
    40%  { transform: translateX(2px); }
    60%  { transform: translateX(-1px); }
    80%  { transform: translateX(1px); }
    100% { transform: translateX(0); }
}

/* ---------------------------------------------------
   Multi-Color Pulse (wie dein Neon-Rahmen)
--------------------------------------------------- */

@keyframes toggleColorPulse {
    0% {
        filter: drop-shadow(0 0 6px #39ff14)
                drop-shadow(0 0 12px #39ff14);
        color: #39ff14;
    }
    33% {
        filter: drop-shadow(0 0 6px #00eaff)
                drop-shadow(0 0 12px #00eaff);
        color: #00eaff;
    }
    66% {
        filter: drop-shadow(0 0 6px #ff00ff)
                drop-shadow(0 0 12px #ff00ff);
        color: #ff00ff;
    }
    100% {
        filter: drop-shadow(0 0 6px #39ff14)
                drop-shadow(0 0 12px #39ff14);
        color: #39ff14;
    }
}

/* ---------------------------------------------------
   UNTERMENÜ (SLIDE)
--------------------------------------------------- */

#my-offcanvas-menu ul ul {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    background: #111;
    transition:
        max-height .35s ease,
        opacity .35s ease,
        transform .35s ease;
}

#my-offcanvas-menu li.open > ul {
    max-height: 800px;
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------
   LEVEL 2 / LEVEL 3
--------------------------------------------------- */

#my-offcanvas-menu ul ul li a {
    display: block;
    width: 100%;
    padding: 8px 8px;
    font-size: 16px;
    color: #C6FFBC; /* deine Farbe */
    border-left: 2px solid rgba(57,255,20,0.35);
    text-shadow:
        0 0 3px rgba(57,255,20,0.25);
    transition: color .25s ease, border-color .25s ease;
}

#my-offcanvas-menu ul ul li a:hover {
    color: #39ff14;
    border-color: #39ff14;
}

#my-offcanvas-menu ul ul ul li a {
    padding: 8px 18px;
    font-size: 15px;
    color: #C6FFBC;
    border-left: 2px solid rgba(57,255,20,0.25);
}

/* ---------------------------------------------------
   LEVEL 2/3 – Neon Glow Border Left (wie Mega-Menü)
--------------------------------------------------- */

#my-offcanvas-menu ul ul li a {
    position: relative;
    display: block;
    width: 100%;
    padding: 8px 8px 8px 18px;
    font-size: 16px;
    color: #C6FFBC;
    text-shadow: 0 0 3px rgba(57,255,20,0.25);
    transition: color .25s ease;
}

/* Die Glow-Line */
#my-offcanvas-menu ul ul li a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: #39ff14;
    box-shadow:
        0 0 6px #39ff14,
        0 0 12px #39ff14;
    animation: megaLineGlow 3.2s ease-in-out infinite;
}

/* Hover – Linie wird heller */
#my-offcanvas-menu ul ul li a:hover::before {
    background: #39ff14;
    box-shadow:
        0 0 10px #39ff14,
        0 0 20px #39ff14;
}

/* ---------------------------------------------------
   LEVEL 3 – gleiche Linie, nur weiter eingerückt
--------------------------------------------------- */

#my-offcanvas-menu ul ul ul li a {
    padding-left: 28px; /* mehr Platz für Linie */
}

#my-offcanvas-menu ul ul ul li a::before {
    left: 18px; /* weiter rechts */
}

/* ---------------------------------------------------
   Glow Animation – identisch zum Mega-Menü
--------------------------------------------------- */

@keyframes megaLineGlow {
    0% {
        box-shadow:
            0 0 6px #39ff14,
            0 0 12px #39ff14;
        background: #39ff14;
    }
    33% {
        box-shadow:
            0 0 6px #00eaff,
            0 0 12px #00eaff;
        background: #00eaff;
    }
    66% {
        box-shadow:
            0 0 6px #ff00ff,
            0 0 12px #ff00ff;
        background: #ff00ff;
    }
    100% {
        box-shadow:
            0 0 6px #39ff14,
            0 0 12px #39ff14;
        background: #39ff14;
    }
}

/* ---------------------------------------------------
   ACTIVE-KATEGORIE
--------------------------------------------------- */

#my-offcanvas-menu li.active > .nav-row > a,
#my-offcanvas-menu li[data-nav-active] > .nav-row > a,
#my-offcanvas-menu a.active,
#my-offcanvas-menu a.Selected.active {
    color: #D0FFC6 !important;
    font-weight: 500;
    text-shadow:
        0 0 3px rgba(31,200,0,0.8),
        0 0 6px rgba(31,200,0,0.5);
}

/* ---------------------------------------------------
   ACTIVE NAV-ROW – Neon-Info-Box Style
--------------------------------------------------- */

#my-offcanvas-menu li.active > .nav-row,
#my-offcanvas-menu li[data-nav-active] > .nav-row,
#my-offcanvas-menu .nav-row.active {
    position: relative;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(57,255,20,0.25);
    border-radius: 6px;
    overflow: hidden;
    animation: neonInfoPulse 3.2s ease-in-out infinite;
}

/* Textfarbe der aktiven Kategorie */
#my-offcanvas-menu li.active > .nav-row > a,
#my-offcanvas-menu li[data-nav-active] > .nav-row > a,
#my-offcanvas-menu .nav-row.active > a {
    color: #D0FFC6 !important;
    font-weight: 500;
    text-shadow:
        0 0 3px rgba(31,200,0,0.8),
        0 0 6px rgba(31,200,0,0.5);
}

/* ---------------------------------------------------
   Shine-Swipe (links + rechts)
--------------------------------------------------- */

#my-offcanvas-menu li.active > .nav-row::after,
#my-offcanvas-menu li.active > .nav-row::before,
#my-offcanvas-menu li[data-nav-active] > .nav-row::after,
#my-offcanvas-menu li[data-nav-active] > .nav-row::before {
    content: "";
    position: absolute;
    top: 0;
    width: 55%;
    height: 100%;
    pointer-events: none;
    transform: skewX(-20deg);
    filter: blur(8px);
    background: linear-gradient(
        120deg,
        rgba(57,255,20,0) 0%,
        rgba(57,255,20,0.35) 20%,
        rgba(0,234,255,0.45) 50%,
        rgba(255,0,255,0.35) 80%,
        rgba(255,0,255,0) 100%
    );
    opacity: 0.9;
}

/* Shine A – links → rechts */
#my-offcanvas-menu li.active > .nav-row::after,
#my-offcanvas-menu li[data-nav-active] > .nav-row::after {
    left: -60%;
    animation: neonShineA 7s ease-in-out infinite;
}

/* Shine B – rechts → links */
#my-offcanvas-menu li.active > .nav-row::before,
#my-offcanvas-menu li[data-nav-active] > .nav-row::before {
    right: -60%;
    animation: neonShineB 7s ease-in-out infinite;
}

/* ---------------------------------------------------
   Pulse Animation (1:1 wie neon-info-box)
--------------------------------------------------- */

@keyframes neonInfoPulse {
    0% {
        box-shadow:
            0 0 6px #39ff14,
            0 0 12px #39ff14;
        border-color: #39ff14;
    }
    33% {
        box-shadow:
            0 0 6px #00eaff,
            0 0 12px #00eaff;
        border-color: #00eaff;
    }
    66% {
        box-shadow:
            0 0 6px #ff00ff,
            0 0 12px #ff00ff;
        border-color: #ff00ff;
    }
    100% {
        box-shadow:
            0 0 6px #39ff14,
            0 0 12px #39ff14;
        border-color: #39ff14;
    }
}

/* Shine Animationen */
@keyframes neonShineA {
    0%   { left: -60%; opacity: 0.2; }
    25%  { opacity: 1; }
    50%  { left: 120%; opacity: 1; }
    75%  { opacity: 0.4; }
    100% { left: 120%; opacity: 0; }
}

@keyframes neonShineB {
    0%   { right: -60%; opacity: 0.2; }
    25%  { opacity: 1; }
    50%  { right: 120%; opacity: 1; }
    75%  { opacity: 0.4; }
    100% { right: 120%; opacity: 0; }
}

/* ---------------------------------------------------
   RIBBON – Neon Multi-Color Pulse (dauerhaft)
--------------------------------------------------- */

.card .ribbon {
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    position: absolute;
    left: -40px;
    top: 26px;
    width: 160px;
    text-align: center;
    transform: rotate(-45deg);
    z-index: 100;
    background: rgba(0,0,0,0.35);
    color: #d8ffe0;
    border: 1px solid #39ff14;
    border-radius: 4px;
    animation: ribbonPulse 3.2s ease-in-out infinite;
    overflow: hidden;
}

/* Multi-Color Pulse (identisch zu Menü-Rahmen) */
@keyframes ribbonPulse {
    0% {
        box-shadow:
            0 0 6px #39ff14,
            0 0 12px #39ff14;
        border-color: #39ff14;
        color: #d8ffe0;
    }
    33% {
        box-shadow:
            0 0 6px #00eaff,
            0 0 12px #00eaff;
        border-color: #00eaff;
        color: #d8faff;
    }
    66% {
        box-shadow:
            0 0 6px #ff00ff,
            0 0 12px #ff00ff;
        border-color: #ff00ff;
        color: #ffd8ff;
    }
    100% {
        box-shadow:
            0 0 6px #39ff14,
            0 0 12px #39ff14;
        border-color: #39ff14;
        color: #d8ffe0;
    }
}

/* ---------------------------------------------------
   Hover Shine – Farbiger Shine-Swipe
--------------------------------------------------- */

.card:hover .ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(
        120deg,
        rgba(57,255,20,0) 0%,
        rgba(57,255,20,0.35) 20%,
        rgba(0,234,255,0.45) 50%,
        rgba(255,0,255,0.35) 80%,
        rgba(255,0,255,0) 100%
    );
    filter: blur(6px);
    opacity: 0.9;
    animation: ribbonShine 0.9s ease-out forwards;
}

@keyframes ribbonShine {
    0%   { left: -80%; opacity: 0.2; }
    40%  { opacity: 1; }
    100% { left: 140%; opacity: 0; }
}

/* ---------------------------------------------------
   CATEGORY HEADING – Neon Pulse + Shine Swipe (smooth)
--------------------------------------------------- */

.cat.heading.bg-h {
    position: relative;
    display: inline-block;
    font-size: 2.2rem;
    font-weight: 700;
    color: #d8ffe0;
    letter-spacing: 0.5px;
    overflow: visible;
    animation: catTitlePulse 3.2s ease-in-out infinite;
    text-shadow:
        0 0 8px #39ff14,
        0 0 16px #39ff14;
}

/* Multi-Color Pulse */
@keyframes catTitlePulse {
    0% {
        text-shadow:
            0 0 8px #39ff14,
            0 0 16px #39ff14;
        color: #d8ffe0;
    }
    33% {
        text-shadow:
            0 0 8px #00eaff,
            0 0 16px #00eaff;
        color: #d8faff;
    }
    66% {
        text-shadow:
            0 0 8px #ff00ff,
            0 0 16px #ff00ff;
        color: #ffd8ff;
    }
    100% {
        text-shadow:
            0 0 8px #39ff14,
            0 0 16px #39ff14;
        color: #d8ffe0;
    }
}

/* ---------------------------------------------------
   Shine Swipe – mit runden Enden & Überstrahlung
--------------------------------------------------- */

.cat.heading.bg-h:hover::after {
    content: "";
    position: absolute;
    top: -10%;
    left: -80%;
    width: 70%;
    height: 120%;
    transform: skewX(-20deg);
    border-radius: 50px;
    background: linear-gradient(
        120deg,
        rgba(57,255,20,0) 0%,
        rgba(57,255,20,0.35) 20%,
        rgba(0,234,255,0.45) 50%,
        rgba(255,0,255,0.35) 80%,
        rgba(255,0,255,0) 100%
    );
    filter: blur(12px);
    opacity: 0.9;
    animation: catTitleShine 1.1s ease-out forwards;
}

@keyframes catTitleShine {
    0%   { left: -80%; opacity: 0.2; }
    40%  { opacity: 1; }
    100% { left: 150%; opacity: 0; }
}

/* ---------------------------------------------------
   CATEGORY IMAGE – Nur Neon Glow Pulse
--------------------------------------------------- */

.prod-listing .cat_image {
    display: block;
    border-radius: 12px;
    animation: catImgPulse 3.2s ease-in-out infinite;
    filter: drop-shadow(0 0 2px #39ff14);
}

/* Multi-Color Pulse (wie Menü, Ribbon, Toggle) */
@keyframes catImgPulse {
    0% {
        filter:
            drop-shadow(0 0 2px #39ff14)
            drop-shadow(0 0 8px #39ff14);
    }
    33% {
        filter:
            drop-shadow(0 0 2px #00eaff)
            drop-shadow(0 0 8px #00eaff);
    }
    66% {
        filter:
            drop-shadow(0 0 2px #ff00ff)
            drop-shadow(0 0 8px #ff00ff);
    }
    100% {
        filter:
            drop-shadow(0 0 2px #39ff14)
            drop-shadow(0 0 8px #39ff14);
    }
}

/* ---------------------------------------------------
   NEON SELECT – nur für .neon-select
--------------------------------------------------- */
.neon-select-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Echter Pfeil als Icon */
.neon-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #39ff14;
    pointer-events: none;
    z-index: 5;
}

.neon-select {
    padding-right: 42px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    animation: selectBorderPulse 3.2s ease-in-out infinite;
}

html[data-bs-theme="dark"] .neon-select {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.35));
    color: #d8ffe0;
    border: 1px solid #39ff14;
}

html[data-bs-theme="dark"] .neon-select:hover {
    box-shadow: 0 0 8px #39ff14;
}


html[data-bs-theme="light"] .neon-select {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(0, 0, 0, 0.08));
    color: #111;
    border: 1px solid #39ff14;
}

html[data-bs-theme="light"] .neon-select:hover {
    box-shadow: 0 0 6px #39ff14;
    color: #000;
}

@keyframes selectBorderPulse {
    0%   { border-color: #39ff14; box-shadow: 0 0 4px #39ff14; }
    33%  { border-color: #00eaff; box-shadow: 0 0 4px #00eaff; }
    66%  { border-color: #ff00ff; box-shadow: 0 0 4px #ff00ff; }
    100% { border-color: #39ff14; box-shadow: 0 0 4px #39ff14; }
}

/* Pfeil wippt beim Hover */
.neon-select-wrap:hover .neon-select-arrow {
    animation: arrowWiggle 0.35s ease-in-out;
}

@keyframes arrowWiggle {
    0%   { transform: translateY(-50%) rotate(0deg); }
    30%  { transform: translateY(-50%) rotate(12deg); }
    60%  { transform: translateY(-50%) rotate(-12deg); }
    100% { transform: translateY(-50%) rotate(0deg); }
}

/* Glow-Rahmen beim Öffnen */
.neon-select:focus {
    box-shadow:
        0 0 8px #39ff14,
        0 0 16px rgba(57,255,20,0.6);
    border-color: #39ff14;
}

/* Dropdown-Liste */
html[data-bs-theme="dark"] .form-select option {
    background: #000;
    color: #d8ffe0;
}

/* Dropdown-Liste */
html[data-bs-theme="light"] .form-select option {
    background: #fff;
    color: #111;
}

/* Sichtbarer Select-Schalter */
.neon-select-ui {
    position: relative;
    border: 1px solid #39ff14;
    border-radius: 6px;
    padding: 8px 40px 8px 12px;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(0,0,0,0.08));
    color: #111;
    font-size: 16px;
    user-select: none;
}

.neon-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.85);
    border: 1px solid #39ff14;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(57,255,20,0.5);
    display: none;
    z-index: 99999;
}

/* Einzelne Option */
.neon-option {
    padding: 8px 12px;
    color: #d8ffe0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Shine-Swipe */
.neon-option::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(57,255,20,0.35) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: left 0.35s ease;
}

.neon-option:hover::after {
    left: 120%;
}

/* Hover */
.neon-option:hover {
    background: rgba(57,255,20,0.25);
    color: #000;
}

/* Aktive Option (gedrückt) */
.neon-option.active {
    background: linear-gradient(180deg,
        rgba(57,255,20,0.35),
        rgba(0,0,0,0.25)
    );
    color: #000;
    font-weight: 600;
}

.neon-options {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.neon-options.show {
    opacity: 1;
    transform: translateY(0);
}

html[data-bs-theme="dark"] .neon-options {
    background: rgba(0, 0, 0, 0.92);
    border-color: #39ff14;
}

html[data-bs-theme="dark"] .neon-option {
    color: #d8ffe0;
}

html[data-bs-theme="dark"] .neon-option.active {
    background: rgba(57,255,20,0.35);
    color: #fff;
}

html[data-bs-theme="dark"] .neon-option:hover {
    background: rgba(57,255,20,0.25);
    color: #000;
}

html[data-bs-theme="light"] .neon-options {
    background: rgba(255, 255, 255, 0.95);
    border-color: #39ff14;
}

html[data-bs-theme="light"] .neon-option {
    color: #222;
}

html[data-bs-theme="light"] .neon-option.active {
    background: rgba(57,255,20,0.25);
    color: #000;
}

html[data-bs-theme="light"] .neon-option:hover {
    background: rgba(57,255,20,0.35);
    color: #000;
}

.neon-options {
    min-width: 180px !important;
    max-width: 240px !important;
    width: auto !important;
}

/* ============================================================
   NEON SELECT – OPTIONSLISTE SCROLLBAR + HÖHENLIMIT
   ============================================================ */
.neon-options {
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    border-radius: 8px;
}

/* Scrollbar – Dark Mode */
html[data-bs-theme="dark"] .neon-options::-webkit-scrollbar {
    width: 8px;
}
html[data-bs-theme="dark"] .neon-options::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.4);
}
html[data-bs-theme="dark"] .neon-options::-webkit-scrollbar-thumb {
    background: #39ff14;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Scrollbar – Light Mode */
html[data-bs-theme="light"] .neon-options::-webkit-scrollbar {
    width: 8px;
}
html[data-bs-theme="light"] .neon-options::-webkit-scrollbar-track {
    background: rgba(200,200,200,0.4);
}
html[data-bs-theme="light"] .neon-options::-webkit-scrollbar-thumb {
    background: #39ff14;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* Button */
.lb_buttons .btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

html[data-bs-theme="light"] .lb_buttons .btn {
    background: #ffffff;
    color: #111;
    border: 1px solid #39ff14;
    box-shadow: 0 0 6px rgba(57,255,20,0.35);
}

html[data-bs-theme="light"] .lb_buttons .btn:hover {
    background: #eaffea;
    box-shadow: 0 0 10px rgba(57,255,20,0.55);
    transform: translateY(-2px);
}

html[data-bs-theme="light"] .lb_buttons .btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 4px rgba(57,255,20,0.3);
}

html[data-bs-theme="dark"] .lb_buttons .btn {
    background: rgba(0,0,0,0.85);
    color: #d8ffe0;
    border: 1px solid #39ff14;
    box-shadow: 0 0 8px rgba(57,255,20,0.45);
}

html[data-bs-theme="dark"] .lb_buttons .btn:hover {
    background: rgba(57,255,20,0.15);
    color: #fff;
    box-shadow: 0 0 12px rgba(57,255,20,0.75);
    transform: translateY(-2px);
}

html[data-bs-theme="dark"] .lb_buttons .btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 6px rgba(57,255,20,0.4);
}

.lb_buttons .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.4) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: all 0.45s ease;
}

.lb_buttons .btn:hover::before {
    left: 120%;
}

.lb_buttons .btn i {
    color: inherit;
    transition: color 0.25s ease;
}

/* Basis */
.lb_buttons .btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

/* Shine Swipe */
.lb_buttons .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.4) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: all 0.45s ease;
}

.lb_buttons .btn:hover::before {
    left: 120%;
}

/* Icon */
.lb_buttons .btn i {
    color: inherit;
    transition: color 0.25s ease;
}

/* LIGHT MODE */
html[data-bs-theme="light"] .lb_buttons .btn {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #f2fff2 100%
    );
    color: #111;
    border: 1px solid #39ff14;
    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.12),
        0 0 6px rgba(57,255,20,0.35);
}

html[data-bs-theme="light"] .lb_buttons .btn:hover {
    background: linear-gradient(
        to bottom,
        #eaffea 0%,
        #dfffdc 100%
    );
    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.15),
        0 0 10px rgba(57,255,20,0.55);
    transform: translateY(-2px);
}

html[data-bs-theme="light"] .lb_buttons .btn:active {
    background: #d4ffd4;
    transform: translateY(1px);
    box-shadow:
        inset 0 0 4px rgba(0,0,0,0.25),
        0 0 4px rgba(57,255,20,0.3);
}

/* DARK MODE */
html[data-bs-theme="dark"] .lb_buttons .btn {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.70) 100%
    );
    color: #d8ffe0;
    border: 1px solid #39ff14;
    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.35),
        0 0 8px rgba(57,255,20,0.45);
}

html[data-bs-theme="dark"] .lb_buttons .btn:hover {
    background: linear-gradient(
        to bottom,
        rgba(57,255,20,0.20) 0%,
        rgba(57,255,20,0.10) 100%
    );
    color: #fff;
    box-shadow:
        inset 0 0 10px rgba(0,0,0,0.45),
        0 0 12px rgba(57,255,20,0.75);
    transform: translateY(-2px);
}

html[data-bs-theme="dark"] .lb_buttons .btn:active {
    background: rgba(57,255,20,0.12);
    transform: translateY(1px);
    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.5),
        0 0 6px rgba(57,255,20,0.4);
}

/* Basis für alle Buttons */
.btn {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.btn i {
    color: inherit;
}

.btn:not(.btn-viewer):not(.togglePw)::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.4) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: all 0.45s ease;
}

.btn:not(.btn-viewer):hover::before {
    left: 120%;
}

html[data-bs-theme="light"] .btn,
html[data-bs-theme="light"] .btn-outline-secondary,
html[data-bs-theme="light"] .btn-wish {
    background: linear-gradient(to bottom, #ffffff 0%, #f2fff2 100%);
    color: #111;
    border: 1px solid #39ff14;
    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.12),
        0 0 6px rgba(57,255,20,0.35);
}
html[data-bs-theme="light"] .btn:hover {
    background: linear-gradient(to bottom, #eaffea 0%, #dfffdc 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.15),
        0 0 10px rgba(57,255,20,0.55);
}
html[data-bs-theme="light"] .btn:active {
    transform: translateY(1px);
    background: #d4ffd4;
    box-shadow:
        inset 0 0 4px rgba(0,0,0,0.25),
        0 0 4px rgba(57,255,20,0.3);
}

html[data-bs-theme="dark"] .btn,
html[data-bs-theme="dark"] .btn-outline-secondary,
html[data-bs-theme="dark"] .btn-wish {
    background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.70) 100%);
    color: #d8ffe0;
    border: 1px solid #39ff14;
    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.35),
        0 0 8px rgba(57,255,20,0.45);
}
html[data-bs-theme="dark"] .btn:hover {
    background: linear-gradient(to bottom, rgba(57,255,20,0.20) 0%, rgba(57,255,20,0.10) 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 10px rgba(0,0,0,0.45),
        0 0 12px rgba(57,255,20,0.75);
}
html[data-bs-theme="dark"] .btn:active {
    transform: translateY(1px);
    background: rgba(57,255,20,0.12);
    box-shadow:
        inset 0 0 6px rgba(0,0,0,0.5),
        0 0 6px rgba(57,255,20,0.4);
}

html[data-bs-theme="light"] .btn-cart {
    background: linear-gradient(to bottom, #d9ffd9 0%, #b8ffb8 100%);
    border: 1px solid #2cff0f;
    color: #000;
    box-shadow:
        inset 0 0 10px rgba(0,0,0,0.25),
        0 0 12px rgba(57,255,20,0.65);
}
html[data-bs-theme="light"] .btn-cart:hover {
    background: linear-gradient(to bottom, #caffca 0%, #aaffaa 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 12px rgba(0,0,0,0.3),
        0 0 16px rgba(57,255,20,0.85);
}

html[data-bs-theme="dark"] .btn-cart {
    background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.80) 100%);
    border: 1px solid #39ff14;
    color: #fff;
    box-shadow:
        inset 0 0 12px rgba(0,0,0,0.55),
        0 0 14px rgba(57,255,20,0.85);
}
html[data-bs-theme="dark"] .btn-cart:hover {
    background: linear-gradient(to bottom, rgba(57,255,20,0.25) 0%, rgba(57,255,20,0.15) 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 14px rgba(0,0,0,0.6),
        0 0 18px rgba(57,255,20,1);
}

/* Go To Top */
.go2top,
.go2top-ring,
.go2top-mask {
    all: unset;
}

/* Shine-Swipe für Go-To-Top deaktivieren */
.go2top::before,
.go2top:hover::before {
    content: none !important;
}

.go2top {
    background: linear-gradient(#000 15%, #38FF00 100%);
    background-color: #000;
    background-clip: padding-box;
    color: var(--bs-body-color);
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 20;
}

.go2top:hover {
    background: linear-gradient(#000 2%, #38FF00 100%);
    color: var(--bs-body-color);
    transform: scale(1.05);
}

.go2top-ring {
    position: fixed;
    right: 9px;
    bottom: 9px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: conic-gradient(
        #00FF58 var(--progress),
        transparent 0deg
    );
    z-index: 10;
    pointer-events: none;
}

.go2top-mask {
    position: fixed;
    right: 15px;
    bottom: 15px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    z-index: 15;
    pointer-events: none;
}

.go2top,
.go2top-mask,
.go2top-ring {
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
}

.go2top.visible,
.go2top-mask.visible,
.go2top-ring.visible {
    opacity: 1;
}

/* Breathing Animation */
@keyframes breathe {
    0%   { transform: scale(1);     box-shadow: 0 0 8px rgba(57,255,20,0.35); }
    50%  { transform: scale(1.06);  box-shadow: 0 0 14px rgba(57,255,20,0.55); }
    100% { transform: scale(1);     box-shadow: 0 0 8px rgba(57,255,20,0.35); }
}

/* Animation nur wenn sichtbar */
.go2top.visible {
    animation: breathe 2.8s ease-in-out infinite;
}

html[data-bs-theme="light"] .go2top {
    background: linear-gradient(#ffffff 10%, #caffca 100%);
    color: #000;
    box-shadow: 0 0 10px rgba(57,255,20,0.45);
}

html[data-bs-theme="light"] .go2top-mask {
    background: #ffffff;
}

html[data-bs-theme="light"] .go2top-ring {
    background: conic-gradient(#39ff14 var(--progress), transparent 0deg);
}

html[data-bs-theme="dark"] .go2top {
    background: linear-gradient(#000 15%, #38FF00 100%);
    color: #d8ffe0;
    box-shadow: 0 0 12px rgba(57,255,20,0.65);
}

html[data-bs-theme="dark"] .go2top-mask {
    background: #000;
}

html[data-bs-theme="dark"] .go2top-ring {
    background: conic-gradient(#39ff14 var(--progress), transparent 0deg);
}

/* Dynamischer Glow abhängig vom Scroll-Fortschritt */
.go2top-ring {
    filter: drop-shadow(0 0 calc(4px + (var(--progress) / 360 * 12px)) #39ff14);
}

html[data-bs-theme="light"] .go2top-ring {
    filter: drop-shadow(0 0 calc(3px + (var(--progress) / 360 * 10px)) #39ff14);
}

html[data-bs-theme="dark"] .go2top-ring {
    filter: drop-shadow(0 0 calc(6px + (var(--progress) / 360 * 16px)) #39ff14);
}

.go2top {
    box-shadow: 0 0 calc(4px + (var(--progress) / 360 * 10px)) rgba(57,255,20,0.55);
	cursor: pointer;
}

/* Ampel */
@keyframes traffic-breathe {
    0%   { transform: scale(1);   box-shadow: 0 0 8px rgba(57,255,20,0.55); }
    50%  { transform: scale(1.15); box-shadow: 0 0 14px rgba(57,255,20,0.85); }
    100% { transform: scale(1);   box-shadow: 0 0 8px rgba(57,255,20,0.55); }
}

html[data-bs-theme="dark"] .traffic .badge:not(.bg-success) {
    background: rgba(0,0,0,0.6);
    border-color: #39ff14;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}

@keyframes glow-green {
    0%   { transform: scale(1);   box-shadow: 0 0 8px #39ff14, inset 0 0 4px rgba(0,0,0,0.4); }
    50%  { transform: scale(1.15); box-shadow: 0 0 16px #39ff14, inset 0 0 6px rgba(0,0,0,0.5); }
    100% { transform: scale(1);   box-shadow: 0 0 8px #39ff14, inset 0 0 4px rgba(0,0,0,0.4); }
}

.traffic .badge.bg-success {
    background: radial-gradient(circle at 30% 30%, #7fff6a, #39ff14 60%, #1e8f0a 100%);
    animation: glow-green 2.4s ease-in-out infinite;
}

@keyframes glow-yellow {
    0%   { transform: scale(1);   box-shadow: 0 0 6px #ffd900, inset 0 0 3px rgba(0,0,0,0.4); }
    50%  { transform: scale(1.10); box-shadow: 0 0 12px #ffd900, inset 0 0 5px rgba(0,0,0,0.5); }
    100% { transform: scale(1);   box-shadow: 0 0 6px #ffd900, inset 0 0 3px rgba(0,0,0,0.4); }
}

.traffic .badge.bg-warning {
    background: radial-gradient(circle at 30% 30%, #ffe97a, #ffd900 60%, #b38a00 100%);
    animation: glow-yellow 2.8s ease-in-out infinite;
}

@keyframes glow-red {
    0%   { transform: scale(1);   box-shadow: 0 0 8px #ff0033, inset 0 0 4px rgba(0,0,0,0.4); }
    50%  { transform: scale(1.20); box-shadow: 0 0 18px #ff0033, inset 0 0 6px rgba(0,0,0,0.5); }
    100% { transform: scale(1);   box-shadow: 0 0 8px #ff0033, inset 0 0 4px rgba(0,0,0,0.4); }
}

.traffic .badge.bg-danger {
    background: radial-gradient(circle at 30% 30%, #ff7a8a, #ff0033 60%, #8f0015 100%);
    animation: glow-red 1.8s ease-in-out infinite;
}

html[data-bs-theme="light"] .traffic .badge:not(.bg-success) {
    background: #e6ffe6;
    border-color: #39ff14;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

html[data-bs-theme="dark"] .traffic .badge:not(.bg-success) {
    background: rgba(0,0,0,0.6);
    border-color: #39ff14;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
}

html[data-bs-theme="light"] .traffic .badge:not(.bg-success):not(.bg-warning):not(.bg-danger) {
    background: radial-gradient(circle at 30% 30%, #eaffea, #c8ffc8 70%, #9adf9a 100%);
}

html[data-bs-theme="dark"] .traffic .badge:not(.bg-success):not(.bg-warning):not(.bg-danger) {
    background: radial-gradient(circle at 30% 30%, #1a1a1a, #0f0f0f 70%, #000000 100%);
}

.traffic .badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    padding: 0;
    margin: 0 4px;
    position: relative;
    border: 1px solid #39ff14;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.45),
        inset 0 -2px 4px rgba(255,255,255,0.15);
    overflow: hidden;
}

.traffic .badge::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 40%;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    filter: blur(3px);
    opacity: 0.9;
    pointer-events: none;
}

/* --- RATING SYSTEM: Grundstruktur --- */
.empty-stars i {
    font-size: 1.25rem;
    color: #666;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.4));
    transition: 0.25s ease;
}

.full-stars i {
    font-size: 1.25rem;
    color: #ffd900;
    filter:
        drop-shadow(0 0 4px rgba(255,217,0,0.75))
        drop-shadow(0 0 8px rgba(255,217,0,0.55));
    transition: 0.25s ease;
}

.ratings i {
    position: relative;
}

.ratings i::after {
    content: "";
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 35%;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
    filter: blur(3px);
    pointer-events: none;
}

html[data-bs-theme="light"] .empty-stars i {
    color: #888;
}

html[data-bs-theme="dark"] .empty-stars i {
    color: #333;
}

.ratings:hover .full-stars i {
    filter:
        drop-shadow(0 0 10px rgba(255,217,0,1))
        drop-shadow(0 0 18px rgba(255,217,0,0.9));
    transform: scale(1.05);
}

<span class="empty-stars">
    <i class="fa-regular fa-star"></i>
    <i class="fa-regular fa-star"></i>
    <i class="fa-regular fa-star"></i>
    <i class="fa-regular fa-star"></i>
    <i class="fa-regular fa-star"></i>
</span>

<span class="full-stars" style="width: X%">
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
    <i class="fa-solid fa-star"></i>
</span>

.ratings .text-secondary-emphasis {
    font-size: 0.95rem;
    color: var(--bs-body-color);
    opacity: 0.85;
    transition: 0.25s ease;
}

.ratings .text-secondary-emphasis {
    text-shadow: 0 0 4px rgba(57,255,20,0.35);
}

html[data-bs-theme="light"] .ratings .text-secondary-emphasis {
    color: #222;
    text-shadow: 0 0 4px rgba(57,255,20,0.45);
}

html[data-bs-theme="dark"] .ratings .text-secondary-emphasis {
    color: #d8ffd8;
    text-shadow: 0 0 6px rgba(57,255,20,0.65);
}

@keyframes rating-breathe {
    0%   { opacity: 0.75; text-shadow: 0 0 4px rgba(57,255,20,0.35); }
    50%  { opacity: 1;    text-shadow: 0 0 8px rgba(57,255,20,0.55); }
    100% { opacity: 0.75; text-shadow: 0 0 4px rgba(57,255,20,0.35); }
}

.ratings:hover .text-secondary-emphasis {
    animation: rating-breathe 2.8s ease-in-out infinite;
}

/* Lieferzeit */
.pd_shippingrow a {
    margin-left: 6px;
    text-decoration: none !important;
}

.pd_shippingrow a {
    color: #39ff14 !important;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(57,255,20,0.45);
    transition: 0.25s ease;
}

.pd_shippingrow a:hover {
    color: #b6ffb0 !important;
    text-shadow: 0 0 8px rgba(57,255,20,0.75);
}

html[data-bs-theme="light"] .pd_shippingrow a {
    color: #1a7f0a !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.35);
}

html[data-bs-theme="dark"] .pd_shippingrow a {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.65);
}

@keyframes delivery-breathe {
    0%   { text-shadow: 0 0 4px rgba(57,255,20,0.45); }
    50%  { text-shadow: 0 0 10px rgba(57,255,20,0.75); }
    100% { text-shadow: 0 0 4px rgba(57,255,20,0.45); }
}

.pd_shippingrow a:hover {
    animation: delivery-breathe 1.8s ease-in-out infinite;
}

/* --- Standardpreis (value_price) – Basis --- */
.value_price {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-bottom: 6px;
    transition: 0.25s ease;
}

/* --- Light Mode: Schwarz + dezenter Glow --- */
html[data-bs-theme="light"] .value_price {
    color: #000 !important;
    text-shadow:
        0 0 4px rgba(57,255,20,0.25),
        0 0 6px rgba(57,255,20,0.15);
}

/* --- Dark Mode: Weiß + kräftiger Glow --- */
html[data-bs-theme="dark"] .value_price {
    color: #fff !important;
    text-shadow:
        0 0 6px rgba(57,255,20,0.55),
        0 0 12px rgba(57,255,20,0.35);
}

/* --- Hover-Effekt (edel, nicht übertrieben) --- */
.value_price:hover {
    text-shadow:
        0 0 10px rgba(57,255,20,0.75),
        0 0 18px rgba(57,255,20,0.55);
    transform: scale(1.03);
}

/* Versandkosten-Link – Basis */
.pd_tax a {
    text-decoration: none !important;
    margin-left: 4px;
    font-weight: 600;
    color: #39ff14 !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.45);
    transition: 0.25s ease;
}

/* Hover */
.pd_tax a:hover {
    color: #b6ffb0 !important;
    text-shadow: 0 0 8px rgba(57,255,20,0.75);
}

/* Light Mode */
html[data-bs-theme="light"] .pd_tax a {
    color: #1a7f0a !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.35);
}

/* Dark Mode */
html[data-bs-theme="dark"] .pd_tax a {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.65);
}

/* Optional: Atmen beim Hover */
@keyframes tax-breathe {
    0%   { text-shadow: 0 0 4px rgba(57,255,20,0.45); }
    50%  { text-shadow: 0 0 10px rgba(57,255,20,0.75); }
    100% { text-shadow: 0 0 4px rgba(57,255,20,0.45); }
}

.pd_tax a:hover {
    animation: tax-breathe 1.8s ease-in-out infinite;
}

/* Info-Text unter dem Bild */
#zoomtext {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 25px;
    color: var(--bs-body-color);
    text-shadow: 0 0 4px rgba(57,255,20,0.35);
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] #zoomtext {
    color: #222;
    text-shadow: 0 0 4px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] #zoomtext {
    color: #d8ffd8;
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
}

/* Optional: Atmen beim Hover */
@keyframes zoomtext-breathe {
    0%   { text-shadow: 0 0 4px rgba(57,255,20,0.35); }
    50%  { text-shadow: 0 0 10px rgba(57,255,20,0.65); }
    100% { text-shadow: 0 0 4px rgba(57,255,20,0.35); }
}

#zoomtext:hover {
    animation: zoomtext-breathe 2.8s ease-in-out infinite;
}

/* Entfernt den störenden Hintergrund hinter dem Produkttitel */
.pd_title h1.bg-h {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Neon-Style bleibt */
.pd_title h1 {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
    text-shadow: 0 0 6px rgba(57,255,20,0.35);
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .pd_title h1 {
    color: #111;
}

/* Dark Mode */
html[data-bs-theme="dark"] .pd_title h1 {
    color: #eaffea;
}

/* Optional: dezente Unterlinie */
.pd_title h1 {
    border-bottom: 1px solid rgba(57,255,20,0.25);
    padding-bottom: 6px;
}

/* Basis-Schalter */
.navbox .nav-link {
    border-radius: 6px;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid rgba(57,255,20,0.35);
    background: rgba(0,0,0,0.25);
    color: var(--bs-body-color);
    text-shadow: 0 0 4px rgba(57,255,20,0.25);
    transition: 0.25s ease;
    position: relative;
}

/* Light Mode */
html[data-bs-theme="light"] .navbox .nav-link {
    background: rgba(255,255,255,0.65);
    color: #111;
    border-color: rgba(57,255,20,0.25);
    text-shadow: 0 0 3px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .navbox .nav-link {
    background: rgba(0,0,0,0.45);
    color: #eaffea;
    border-color: rgba(57,255,20,0.45);
    text-shadow: 0 0 5px rgba(57,255,20,0.45);
}

/* Hover */
.navbox .nav-link:hover {
    color: #39ff14 !important;
    border-color: rgba(57,255,20,0.75);
    text-shadow: 0 0 8px rgba(57,255,20,0.75);
    transform: translateY(-1px);
}

/* Aktiver Tab */
.navbox .nav-link.active {
    background: rgba(57,255,20,0.15);
    color: #39ff14 !important;
    border-color: rgba(57,255,20,0.85);
    text-shadow:
        0 0 8px rgba(57,255,20,0.75),
        0 0 14px rgba(57,255,20,0.55);
    transform: translateY(-2px);
}

/* 3D-Wölbung */
.navbox .nav-link::after {
    content: "";
    position: absolute;
    top: 12%;
    left: 8%;
    width: 84%;
    height: 30%;
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
    pointer-events: none;
}

/* Shine-Swipe Animation */
@keyframes tab-shine {
    0% {
        left: -60%;
        opacity: 0;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        left: 160%;
        opacity: 0;
    }
}

/* Shine nur für aktive Tabs im Card-Header */
.card-header .navbox .nav-link.active {
    position: relative;
    overflow: hidden;
}

.card-header .navbox .nav-link.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.6) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    animation: tab-shine 2.4s ease-in-out infinite;
    pointer-events: none;
}

/* Light Mode – Shine weicher */
html[data-bs-theme="light"] .card-header .navbox .nav-link.active::before {
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.45) 50%,
        transparent 100%
    );
}

/* Dark Mode – Shine stärker */
html[data-bs-theme="dark"] .card-header .navbox .nav-link.active::before {
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.75) 50%,
        transparent 100%
    );
}

/* Links in der Produktbeschreibung */
.tab-content.card-body a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .tab-content.card-body a {
    color: #1a7f0a !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .tab-content.card-body a {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
}

/* Hover */
.tab-content.card-body a:hover {
    color: #b6ffb0 !important;
    text-shadow: 0 0 10px rgba(57,255,20,0.75);
}

/* System-Info in der Beschreibung (Datum der Aufnahme) */
.tab-content.card-body p.small.mt-4 {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 25px;
    margin-bottom: 10px;
    color: var(--bs-body-color);
    text-shadow: 0 0 4px rgba(57,255,20,0.35);
    transition: 0.25s ease;
}

/* Orbit / Pulse / Wobble / Breath innerhalb der Tabs deaktivieren */
.neon-card-body:hover {
    animation: none !important;
    filter: none !important;
}

/* Auch Pseudo-Elemente blockieren */
.neon-card-body:hover ::before,
.neon-card-body:hover ::after {
    animation: none !important;
    filter: none !important;
}

/* Light Mode */
html[data-bs-theme="light"] .tab-content.card-body p.small.mt-4 {
    color: #222;
    text-shadow: 0 0 4px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .tab-content.card-body p.small.mt-4 {
    color: #d8ffd8;
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
}

/* Optional: Atmen beim Hover */
@keyframes added-breathe {
    0%   { text-shadow: 0 0 4px rgba(57,255,20,0.35); }
    50%  { text-shadow: 0 0 10px rgba(57,255,20,0.65); }
    100% { text-shadow: 0 0 4px rgba(57,255,20,0.35); }
}

.tab-content.card-body p.small.mt-4:hover {
    animation: added-breathe 2.8s ease-in-out infinite;
}

/* Container der Artikelnavigation */
.productnavigator .p-3.text-center {
    color: var(--bs-body-color);
    text-shadow: 0 0 3px rgba(57,255,20,0.25);
}

/* Light/Dark Mode Text */
html[data-bs-theme="light"] .productnavigator .p-3.text-center {
    color: #222;
    text-shadow: 0 0 3px rgba(57,255,20,0.15);
}

html[data-bs-theme="dark"] .productnavigator .p-3.text-center {
    color: #eaffea;
    text-shadow: 0 0 5px rgba(57,255,20,0.35);
}

/* Infozeile "Artikel 18 von 19" */
.productnavigator .p-3.text-center p.small {
    margin-bottom: 10px;
    font-weight: 500;
}

/* Links in der Navigation */
.productnavigator .p-3.text-center a {
    text-decoration: none !important;
    color: #39ff14 !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.45);
    transition: 0.25s ease;
}

/* Light/Dark Anpassung für Links */
html[data-bs-theme="light"] .productnavigator .p-3.text-center a {
    color: #1a7f0a !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.25);
}

html[data-bs-theme="dark"] .productnavigator .p-3.text-center a {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
}

/* Hover-Effekt für Links */
.productnavigator .p-3.text-center a:hover {
    color: #b6ffb0 !important;
    text-shadow: 0 0 10px rgba(57,255,20,0.75);
}

/* "Letzter" (nicht klickbar) im gleichen Stil wie Text */
.productnavigator .p-3.text-center .text-secondary-emphasis {
    text-shadow: 0 0 3px rgba(57,255,20,0.25);
}

/* H2 "Zuletzt angesehen" – Neon-Style */
.box_last_viewed .h2 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px 0;
    text-shadow: 0 0 6px rgba(57,255,20,0.35);
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .box_last_viewed .h2 {
    color: #111;
    text-shadow: 0 0 5px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .box_last_viewed .h2 {
    color: #eaffea;
    text-shadow: 0 0 8px rgba(57,255,20,0.55);
}

/* Optional: Unterlinie */
.box_last_viewed .d-flex {
    border-bottom: 1px solid rgba(57,255,20,0.25) !important;
    padding-bottom: 6px;
}

/* H3 "Kunden kauften auch" – Neon-Style */
.also_purchased .h3 {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px 0;
    text-shadow: 0 0 6px rgba(57,255,20,0.35);
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .also_purchased .h3 {
    color: #111;
    text-shadow: 0 0 5px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .also_purchased .h3 {
    color: #eaffea;
    text-shadow: 0 0 8px rgba(57,255,20,0.55);
}

/* Optional: Unterlinie */
.also_purchased .d-flex {
    border-bottom: 1px solid rgba(57,255,20,0.25) !important;
    padding-bottom: 6px;
}

/* H2 "Unser Angebot" – Neon-Style */
.cat_show .h2 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px 0;
    text-shadow: 0 0 6px rgba(57,255,20,0.35);
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .cat_show .h2 {
    color: #111;
    text-shadow: 0 0 5px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .cat_show .h2 {
    color: #eaffea;
    text-shadow: 0 0 8px rgba(57,255,20,0.55);
}

/* Unterlinie */
.cat_show .d-flex {
    border-bottom: 1px solid rgba(57,255,20,0.25) !important;
    padding-bottom: 6px;
}

/* H2 Überschriften in "Neue Artikel" & "TOP-Artikel" */
.box_whatsnew .h2,
.new-products-default .h2 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px 0;
    text-shadow: 0 0 6px rgba(57,255,20,0.35);
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .box_whatsnew .h2,
html[data-bs-theme="light"] .new-products-default .h2 {
    color: #111;
    text-shadow: 0 0 5px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .box_whatsnew .h2,
html[data-bs-theme="dark"] .new-products-default .h2 {
    color: #eaffea;
    text-shadow: 0 0 8px rgba(57,255,20,0.55);
}

/* Unterlinie */
.box_whatsnew .d-flex,
.new-products-default .d-flex {
    border-bottom: 1px solid rgba(57,255,20,0.25) !important;
    padding-bottom: 6px;
}

/* H2 Überschriften in "Bestseller" & "Kundenrezensionen" */
.box_best_sellers .h2,
.box_reviews .h2 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px 0;
    text-shadow: 0 0 6px rgba(57,255,20,0.35);
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .box_best_sellers .h2,
html[data-bs-theme="light"] .box_reviews .h2 {
    color: #111;
    text-shadow: 0 0 5px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .box_best_sellers .h2,
html[data-bs-theme="dark"] .box_reviews .h2 {
    color: #eaffea;
    text-shadow: 0 0 8px rgba(57,255,20,0.55);
}

/* Unterlinie */
.box_best_sellers .d-flex,
.box_reviews .d-flex {
    border-bottom: 1px solid rgba(57,255,20,0.25) !important;
    padding-bottom: 6px;
}

/* Produkt-Titel im Carousel */
.lb_title {
    text-shadow: 0 0 6px rgba(57,255,20,0.45);
    font-weight: 500;
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .lb_title {
    color: #111 !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .lb_title {
    color: #f2f2f2 !important;
    text-shadow: 0 0 8px rgba(57,255,20,0.55);
}

/* Hover */
.lb_title:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* Unterlinie für Produkt-Titel im Carousel entfernen */
.lb_title,
.lb_title a,
.lb_title a:link,
.lb_title a:visited,
.lb_title a:hover,
.lb_title a:active {
    text-decoration: none !important;
}

.lb_title:hover,
.lb_title a:hover {
    color: #d8ffd8 !important;
    text-shadow: 0 0 10px rgba(57,255,20,0.75);
}

/* Icon in der Infozeile */
.box_reviews .fa-circle-info {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
    transition: 0.25s ease;
}

/* Link-Styling */
.box_reviews .small a {
    text-decoration: none !important;
    font-weight: 600;
    color: #39ff14 !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.45);
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .box_reviews .small a {
    color: #1a7f0a !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .box_reviews .small a {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
}

/* Hover */
.box_reviews .small a:hover {
    color: #b6ffb0 !important;
    text-shadow: 0 0 10px rgba(57,255,20,0.75);
}

/* Lieferzeit-Link im Carousel */
.lb_shipping a {
    text-decoration: none !important;
    margin-left: 4px;
    color: #39ff14 !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.45);
    font-weight: 600;
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .lb_shipping a {
    color: #1a7f0a !important;
    text-shadow: 0 0 3px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .lb_shipping a {
    color: #b6ffb0 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
}

/* Hover */
.lb_shipping a:hover {
    color: #d8ffd8 !important;
    text-shadow: 0 0 10px rgba(57,255,20,0.75);
}

/* Versandkosten-Link im Carousel */
.lb_tax a {
    text-decoration: none !important;
    margin-left: 4px;
    color: #39ff14 !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.45);
    font-weight: 600;
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .lb_tax a {
    color: #1a7f0a !important;
    text-shadow: 0 0 3px rgba(57,255,20,0.25);
}

/* Dark Mode */
html[data-bs-theme="dark"] .lb_tax a {
    color: #b6ffb0 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.55);
}

/* Hover */
.lb_tax a:hover {
    color: #d8ffd8 !important;
    text-shadow: 0 0 10px rgba(57,255,20,0.75);
}

/* -----------------------------------------
   NEON CARD (Container)
----------------------------------------- */
.neon-card {
    border: 2px solid rgba(57,255,20,0.35);
    border-radius: 14px;
    background: rgba(0,0,0,0.35);
    box-shadow:
        0 0 12px rgba(57,255,20,0.25),
        0 0 22px rgba(0,234,255,0.15);
    overflow: hidden;
}

/* -----------------------------------------
   HEADER
----------------------------------------- */
.neon-card-header {
    background: rgba(0,0,0,0.55);
    border-bottom: 1px solid rgba(57,255,20,0.35);
    padding: 0.75rem 1rem;
    position: relative;
}

/* -----------------------------------------
   TABS (Pills)
----------------------------------------- */
.neon-card-pills .nav-link {
    position: relative;
    margin-right: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(57,255,20,0.25);
    color: #C6FFBC;
    font-weight: 500;
    text-shadow:
        0 0 4px rgba(57,255,20,0.35),
        0 0 8px rgba(57,255,20,0.25);
    transition: all .35s ease;
}

/* Hover */
.neon-card-pills .nav-link:hover {
    color: #39ff14;
    border-color: rgba(57,255,20,0.55);
    background: rgba(0,0,0,0.55);
}

/* -----------------------------------------
   ACTIVE TAB (mit Shine)
----------------------------------------- */
.neon-card-pills .nav-link.active {
    color: #39ff14 !important;
    background: rgba(0,0,0,0.75);
    border-color: rgba(57,255,20,0.85);
    box-shadow:
        0 0 10px rgba(57,255,20,0.55),
        0 0 20px rgba(57,255,20,0.35);
}

/* Shine Swipe */
.neon-card-pills .nav-link.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    transform: skewX(-25deg);
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.45) 50%,
        transparent 100%
    );
    animation: neonTabShine 1.2s ease-out forwards;
    pointer-events: none;
}

@keyframes neonTabShine {
    0%   { left: -60%; opacity: 0.2; }
    40%  { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}

/* -----------------------------------------
   BADGE (z.B. Rezensionen)
----------------------------------------- */
.neon-card-pills .badge {
    background: rgba(57,255,20,0.35) !important;
    color: #fff !important;
    border: 1px solid rgba(57,255,20,0.55);
    box-shadow: 0 0 6px rgba(57,255,20,0.45);
}

/* -----------------------------------------
   LIGHT MODE
----------------------------------------- */
html[data-bs-theme="light"] .neon-card {
    background: rgba(255,255,255,0.65);
    border-color: rgba(57,255,20,0.25);
}

html[data-bs-theme="light"] .neon-card-header {
    background: rgba(255,255,255,0.85);
}

html[data-bs-theme="light"] .neon-card-pills .nav-link {
    background: rgba(255,255,255,0.65);
    color: #1a7f0a;
    border-color: rgba(57,255,20,0.25);
}

html[data-bs-theme="light"] .neon-card-pills .nav-link.active {
    background: rgba(255,255,255,0.95);
    color: #000 !important;
    border-color: rgba(57,255,20,0.65);
}

/* CyberGlow */
@keyframes neoGlow {
    0%   { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
    33%  { box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; }
    66%  { box-shadow: 0 0 8px #ff00ff, 0 0 16px #ff00ff; }
    100% { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
}

/* Shine */
@keyframes neoShine {
    0%   { left: -60%; opacity: 0; }
    50%  { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}

/* Neon-Buttons */
.resCarousel .btn-neo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.85);
    border: 2px solid rgba(57,255,20,0.55);
    color: #39ff14;
    position: absolute !important;
    transform: translateY(-50%) !important;
    overflow: hidden;
    animation: neoGlow 3s linear infinite;
    transition: 0.25s ease;
}

/* Shine im Button */
.resCarousel .btn-neo::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    transform: skewX(-25deg);
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.7) 50%,
        transparent 100%
    );
    animation: neoShine 2.8s ease-in-out infinite;
    pointer-events: none;
}

/* Hover */
.resCarousel .btn-neo:hover {
    background: rgba(0,0,0,0.95);
    border-color: rgba(57,255,20,0.85);
    color: #d8ffd8;
}

/* Position */
.resCarousel .leftRs.btn-neo { left: -22px; }
.resCarousel .rightRs.btn-neo { right: -22px; }

.neon-img-box {
    padding: 10px;
    border: 2px solid rgba(57,255,20,0.35);
    border-radius: 12px;
    background: rgba(218, 218, 218, 0.25);
    box-shadow: 0 0 12px rgba(57,255,20,0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: 0.35s ease;
}

.neon-fit-img {
    width: 100%;
    height: auto;
    max-width: 150px;
    max-height: 170px;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    transition: transform 0.35s ease;
}

.card-body:hover .neon-fit-img {
    transform: scale(1.08);
}

.neon-img-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    transform: skewX(-25deg);
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.35) 50%,
        transparent 100%
    );
    opacity: 0;
    z-index: 2;
    transition: opacity 0.2s ease;
}

.card-body:hover .neon-img-box::before {
    opacity: 1;
    animation: neonImgShine 0.9s ease-out forwards;
}

@keyframes neonImgShine {
    0%   { left: -60%; opacity: 0.2; }
    40%  { opacity: 1; }
    100% { left: 160%; opacity: 0; }
}

#modal {
	z-index: 99999;
}

/* -----------------------------------------
   MODAL – Grundstruktur (seriös + neon Rahmen)
----------------------------------------- */
#modal .modal-content {
    border: 2px solid rgba(57,255,20,0.35) !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,0.90) !important;
    box-shadow:
        0 0 12px rgba(57,255,20,0.25),
        0 0 22px rgba(0,234,255,0.15) !important;
    color: #e6e6e6 !important;
}

/* -----------------------------------------
   HEADER – linksbündig, klar, ohne Neon-Matsch
----------------------------------------- */
#modal .modal-header {
    background: rgba(0,0,0,0.85) !important;
    border-bottom: 1px solid rgba(57,255,20,0.25) !important;
}

#modal .modal-title {
    margin: 0;
    padding: 0;
    text-align: left !important;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff !important;
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

/* -----------------------------------------
   CLOSE BUTTON – neutral, nicht neon
----------------------------------------- */
#modal .btn-close {
    filter: none !important;
    opacity: 0.8;
}

#modal .btn-close:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* -----------------------------------------
   BODY – seriös, klare Typografie
----------------------------------------- */
#modal .modal-body {
    background: rgba(0,0,0,0.80) !important;
    color: #e6e6e6 !important;
    font-size: 16px;
    line-height: 1.55;
}

/* H-Tags im Body – NICHT größer als Header */
#modal .modal-body h1,
#modal .modal-body h2,
#modal .modal-body h3 {
    font-size: 22px !important;
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Listen */
#modal .modal-body ul li {
    margin-bottom: 0.5rem;
    color: #777 !important;
}

/* Links */
#modal .modal-body a {
    color: #00aaff !important;
    text-decoration: underline;
}

#modal .modal-body a:hover {
    color: #39ff14 !important;
}

/* -----------------------------------------
   FOOTER – neutral, seriös
----------------------------------------- */
#modal .modal-footer {
    background: rgba(0,0,0,0.85) !important;
    border-top: 1px solid rgba(57,255,20,0.25) !important;
}

/* Footer-Buttons – neutral, nicht neon */
#modal .modal-footer .btn {
    background: #222 !important;
    border: 1px solid #444 !important;
    color: #fff !important;
}

#modal .modal-footer .btn:hover {
    background: #333 !important;
    border-color: #666 !important;
}

/* -----------------------------------------
   LIGHT MODE – juristisch sauber
----------------------------------------- */
html[data-bs-theme="light"] #modal .modal-content {
    background: #ffffff !important;
    color: #222 !important;
}

html[data-bs-theme="light"] #modal .modal-header {
    background: #f5f5f5 !important;
}

html[data-bs-theme="light"] #modal .modal-body {
    background: #ffffff !important;
    color: #222 !important;
}

html[data-bs-theme="light"] #modal .modal-body h1,
html[data-bs-theme="light"] #modal .modal-body h2,
html[data-bs-theme="light"] #modal .modal-body h3 {
    color: #111 !important;
}

html[data-bs-theme="light"] #modal .modal-footer {
    background: #f5f5f5 !important;
}

html[data-bs-theme="light"] #modal .modal-footer .btn {
    background: #e6e6e6 !important;
    color: #111 !important;
}

/* -----------------------------------------
   RECHTSTEXTE / CONTENT – Links korrigieren
----------------------------------------- */
#content .content a {
    color: #00aaff !important;
    text-decoration: none !important;
    font-weight: 500;
}

#content .content a:hover {
    color: #39ff14 !important;
    text-decoration: none !important;
}

html[data-bs-theme="light"] #content .content a {
    color: #0066cc !important;
}

html[data-bs-theme="light"] #content .content a:hover {
    color: #39ff14 !important;
}

/* -----------------------------------------
   RECHTSTEXTE – Grundtypografie
----------------------------------------- */
#content .content {
    font-size: 16px;
    line-height: 1.6;
    color: #e6e6e6;
    max-width: 900px;
}

/* -----------------------------------------
   H-TAGS – Einheitlich, seriös, max. 24px
----------------------------------------- */
#content .content h1,
#content .content h2,
#content .content h3 {
    font-size: 22px !important;
    font-weight: 600;
    margin-top: 1.8rem;
    margin-bottom: 0.8rem;
    color: #ffffff;
    text-shadow: none;
}

/* Abstand nach dem ersten H1 (z. B. Impressum) */
#content .content h1:first-child {
    margin-top: 0;
}

/* -----------------------------------------
   ABSÄTZE – sauber, juristisch korrekt
----------------------------------------- */
#content .content p,
#content .content div,
#content .content ul,
#content .content li {
    margin-bottom: 0.75rem;
}

/* -----------------------------------------
   LISTEN – klar, nicht zu eng
----------------------------------------- */
#content .content ul {
    padding-left: 1.2rem;
}

#content .content ul li {
    margin-bottom: 0.5rem;
}

/* -----------------------------------------
   LINKS – neutral, nicht unterstrichen
----------------------------------------- */
#content .content a {
    color: #00aaff !important;
    text-decoration: none !important;
    font-weight: 500;
}

#content .content a:hover {
    color: #39ff14 !important;
    text-decoration: none !important;
}

/* -----------------------------------------
   DEZENTE TRENNER
----------------------------------------- */
#content .content hr {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin: 2rem 0;
}

/* -----------------------------------------
   KONTAKT-DATEN – typografisch sauber
----------------------------------------- */
#content .content p br + br {
    line-height: 2;
}

#content .content p strong {
    font-weight: 600;
}

/* -----------------------------------------
   LIGHT MODE
----------------------------------------- */
html[data-bs-theme="light"] #content .content {
    color: #222;
}

html[data-bs-theme="light"] #content .content h1,
html[data-bs-theme="light"] #content .content h2,
html[data-bs-theme="light"] #content .content h3 {
    color: #111;
}

html[data-bs-theme="light"] #content .content a {
    color: #0066cc !important;
}

html[data-bs-theme="light"] #content .content a:hover {
    color: #39ff14 !important;
}

html[data-bs-theme="light"] #content .content hr {
    border-top-color: rgba(0,0,0,0.15);
}

/* ============================================================
   GLOBAL – H1 Überschriften (heading bg-h)
   ============================================================ */
#content h1.heading.bg-h {
    font-size: 28px;
    font-weight: 700;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: 0.5px;
}

/* DARK MODE – H1 */
html[data-bs-theme="dark"] #content h1.heading.bg-h {
    color: #39ff14;
    background: linear-gradient(
        145deg,
        rgba(0,0,0,0.85),
        rgba(20,20,20,0.75)
    );
    border: 1px solid rgba(57,255,20,0.35);
    box-shadow:
        0 0 10px rgba(57,255,20,0.35),
        inset 0 0 10px rgba(255,255,255,0.05);
    animation: h1PulseDark 3s infinite ease-in-out;
}

@keyframes h1PulseDark {
    0%   { box-shadow: 0 0 8px rgba(57,255,20,0.25); }
    50%  { box-shadow: 0 0 18px rgba(57,255,20,0.55); }
    100% { box-shadow: 0 0 8px rgba(57,255,20,0.25); }
}

/* LIGHT MODE – H1 */
html[data-bs-theme="light"] #content h1.heading.bg-h {
    color: #000;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.95),
        rgba(245,245,245,0.85)
    );
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
    animation: h1PulseLight 3s infinite ease-in-out;
}

@keyframes h1PulseLight {
    0%   { box-shadow: 0 0 6px rgba(57,255,20,0.25); }
    50%  { box-shadow: 0 0 14px rgba(57,255,20,0.45); }
    100% { box-shadow: 0 0 6px rgba(57,255,20,0.25); }
}

/* ============================================================
   GLOBAL – Warenkorb & Systemseiten: h1.h3.bg-h wie heading bg-h
   ============================================================ */

/* Basis */
#content h1.h3.bg-h {
    font-size: 28px !important;
    font-weight: 700 !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 10px !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

/* DARK MODE */
html[data-bs-theme="dark"] #content h1.h3.bg-h {
    color: #39ff14 !important;
    background: linear-gradient(
        145deg,
        rgba(0,0,0,0.85),
        rgba(20,20,20,0.75)
    ) !important;
    border: 1px solid rgba(57,255,20,0.35) !important;
    box-shadow:
        0 0 10px rgba(57,255,20,0.35),
        inset 0 0 10px rgba(255,255,255,0.05) !important;
    animation: h1PulseDark 3s infinite ease-in-out !important;
}

/* LIGHT MODE */
html[data-bs-theme="light"] #content h1.h3.bg-h {
    color: #000 !important;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.95),
        rgba(245,245,245,0.85)
    ) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
    animation: h1PulseLight 3s infinite ease-in-out !important;
}

/* ============================================================
   WARENKORB – CHECKOUT BUTTON FIX
   ============================================================ */

/* Breite begrenzen */
.shopping_cart .button_row .btn-checkout {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px !important;
}

/* Textabstand optimieren */
.shopping_cart .button_row .btn-checkout span.mx-3 {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
}

/* Neon-Shadow kompakter */
.shopping_cart .button_row .btn-checkout:hover {
    box-shadow:
        0 0 8px rgba(57,255,20,0.45),
        0 0 14px rgba(57,255,20,0.35) !important;
}

/* ============================================================
   WARENKORB – PRODUKTLISTE
   ============================================================ */
.shopping_cart .list-group-item {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 1rem;
    transition: 0.25s ease;
}

.shopping_cart .list-group-item:hover {
    box-shadow: 0 0 10px rgba(57,255,20,0.35);
}

/* Light Mode */
html[data-bs-theme="light"] .shopping_cart .list-group-item {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.1);
}

/* Produktbild */
.shopping_cart img {
    border-radius: 8px;
}

/* Produkttitel */
.shopping_cart .list-group-item a.link-secondary {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: 0.25s ease;
}

.shopping_cart .list-group-item a.link-secondary:hover {
    color: #39ff14;
    text-shadow: 0 0 6px rgba(57,255,20,0.5);
}

/* Light Mode */
html[data-bs-theme="light"] .shopping_cart .list-group-item a.link-secondary {
    color: #000;
}

/* Mengenfeld */
.shopping_cart input.form-control {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(57,255,20,0.35);
    color: #fff;
    border-radius: 8px;
    transition: 0.25s ease;
}

.shopping_cart input.form-control:focus {
    background: rgba(0,0,0,0.65);
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.55);
}

/* Light Mode */
html[data-bs-theme="light"] .shopping_cart input.form-control {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

/* ============================================================
   WARENKORB – SUMMENBOX
   ============================================================ */
.ordersum .list-group-item {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: 0.25s ease;
}

.ordersum .list-group-item:first-child {
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(
        145deg,
        rgba(0,0,0,0.85),
        rgba(20,20,20,0.75)
    );
    border: 1px solid rgba(57,255,20,0.35);
    box-shadow:
        0 0 10px rgba(57,255,20,0.35),
        inset 0 0 10px rgba(255,255,255,0.05);
}

/* Light Mode */
html[data-bs-theme="light"] .ordersum .list-group-item {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.1);
}

html[data-bs-theme="light"] .ordersum .list-group-item:first-child {
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.95),
        rgba(245,245,245,0.85)
    );
    border: 1px solid rgba(0,0,0,0.15);
}

/* Gutscheinbox */
.giftbox {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px;
    padding: 1rem;
}

html[data-bs-theme="light"] .giftbox {
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
}

/* Versandkosten Select */
.ordersum .neon-select-ui {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(57,255,20,0.35);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.25s ease;
}

.ordersum .neon-select-ui:hover {
    box-shadow: 0 0 10px rgba(57,255,20,0.45);
}

/* Light Mode */
html[data-bs-theme="light"] .ordersum .neon-select-ui {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.25);
}

.alert-success {
    background: rgba(57,255,20,0.15) !important;
    border: 1px solid rgba(57,255,20,0.35) !important;
    color: #39ff14 !important;
    border-radius: 10px;
}

/* Light Mode */
html[data-bs-theme="light"] .alert-success {
    background: rgba(57,255,20,0.15) !important;
    color: #000 !important;
}
/* Dark Mode – Text sichtbar machen */
html[data-bs-theme="dark"] .neon-select-ui {
    color: #fff !important;
}

.neon-select-ui {
    padding-left: 14px !important;
    padding-right: 28px !important; /* Platz für Pfeil */
}

.neon-select-ui::after {
    right: 10px !important;
}

/* ============================================================
   WARENKORB – PRODUKTBILD ZENTRIEREN + DYNAMISCHE GRÖSSE
   ============================================================ */
.shopping_cart .list-group-item img {
    display: block;
    margin: 0 auto;
    max-width: 110px;
    min-width: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}

.shopping_cart .list-group-item img:hover {
    box-shadow: 0 0 10px rgba(57,255,20,0.35);
    transition: 0.25s ease;
}

/* ============================================================
   NEON SELECT – FIX: Doppel-Pfeil entfernen + eigener Pfeil
   ============================================================ */

/* Browser-Pfeil entfernen */
.neon-select-ui {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: none !important;
    padding-right: 32px !important;
    padding-left: 14px !important;
    position: relative;
}

/* Dark Mode – Text sichtbar */
html[data-bs-theme="dark"] .neon-select-ui {
    color: #fff !important;
}

/* Eigener Neon-Pfeil */
.neon-select-ui::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: 0.25s ease;
    pointer-events: none;
}

/* Pfeil drehen beim Öffnen */
.neon-select-ui.open::after {
    transform: translateY(-50%) rotate(180deg);
}

.offcanvas-header {
    background: rgba(0, 0, 0, 0.65) !important;
    border-bottom: 1px solid rgba(57,255,20,0.35) !important;
    backdrop-filter: blur(10px) !important;
    padding: 1rem !important;
}

.offcanvas-title {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6) !important;
    font-weight: 600 !important;
}

.offcanvas-body {
    background: rgba(0, 0, 0, 0.35) !important;
    padding: 1rem !important;
    color: #e0ffe8 !important;
}

.offcanvas.offcanvas-start {
    transform: translateX(-100%);
    opacity: 0;
}

.offcanvas.show {
    transform: translateX(0);
    opacity: 1;
}

.offcanvas.show::after {
    content: "";
    position: absolute;
    inset: 0;
    border-right: 2px solid #39ff14;
    opacity: 0;
    pointer-events: none;
    animation: offcanvasFlash 0.6s ease-out forwards;
}

@keyframes offcanvasFlash {
    0%   { opacity: 0; border-color: rgba(57,255,20,0); }
    40%  { opacity: 1; border-color: rgba(57,255,20,1); }
    100% { opacity: 0; border-color: rgba(57,255,20,0); }
}

.offcanvas-body {
    background: rgba(0, 0, 0, 0.35) !important;
    color: #e0ffe8 !important;
    padding: 1.25rem !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
}

.offcanvas-body h5,
.offcanvas-body h6 {
    color: #39ff14 !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.5);
    margin-bottom: 0.75rem !important;
}

.offcanvas-body p,
.offcanvas-body span,
.offcanvas-body li {
    color: #d8ffe0 !important;
}

.offcanvas-body .list-group-item {
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(57,255,20,0.15) !important;
    color: #d8ffe0 !important;
    transition: all 0.25s ease;
}

.offcanvas-body .list-group-item:hover {
    background: rgba(0, 0, 0, 0.45) !important;
    border-color: #39ff14 !important;
    box-shadow: 0 0 12px rgba(57,255,20,0.35);
    transform: translateX(4px);
}

.offcanvas-body .btn {
    background: rgba(0, 0, 0, 0.55) !important;
    border: 1px solid #39ff14 !important;
    color: #39ff14 !important;
    text-shadow: 0 0 4px rgba(57,255,20,0.6);
    transition: all 0.3s ease;
}

.offcanvas-body .btn:hover {
    background: #39ff14 !important;
    color: #000 !important;
    box-shadow: 0 0 18px rgba(57,255,20,0.8);
}

.offcanvas-body input,
.offcanvas-body select,
.offcanvas-body textarea {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(57,255,20,0.35) !important;
    color: #d8ffe0 !important;
}

.offcanvas-body input:focus,
.offcanvas-body select:focus,
.offcanvas-body textarea:focus {
    border-color: #39ff14 !important;
    box-shadow: 0 0 12px rgba(57,255,20,0.45) !important;
}

.offcanvas-body .section-divider {
    height: 1px;
    background: linear-gradient(
        to right,
        rgba(57,255,20,0),
        rgba(57,255,20,0.5),
        rgba(57,255,20,0)
    );
    margin: 1rem 0;
}

.offcanvas-body::-webkit-scrollbar {
    width: 8px;
}

.offcanvas-body::-webkit-scrollbar-thumb {
    background: linear-gradient(#39ff14, #00eaff);
    border-radius: 10px;
}

.offcanvas-body::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.offcanvas-body select.form-select {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(57,255,20,0.35) !important;
    color: #d8ffe0 !important;
    padding-right: 2.2rem !important;
    appearance: none !important;
    position: relative;
}

.list-group-item {
    position: relative;
}

.list-group-item select.form-select::after {
    content: "";
}

/*Korrektur prüfen*/
#settings .list-group-item::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
	font-weight: 900;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: #39ff14;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
    pointer-events: none;
}

.list-group-item:has(select.form-select)::after {
    opacity: 1;
}

.list-group-item:not(:has(select.form-select))::after {
    opacity: 0;
}

/* ============================================================
   PASSWORT-AUGE SICHTBAR + KORREKTE BREITE
   ============================================================ */
.togglePw {
    color: #fff !important;
    font-size: 18px !important;
    width: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Light Mode */
html[data-bs-theme="light"] .togglePw {
    color: #000 !important;
}

/* Hover-Effekt */
.togglePw:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* ============================================================
   CHECKOUT – STEP NAVIGATION (1–4)
   ============================================================ */
/* Aktiver Schritt */
#checkoutnavigation .col[aria-current="step"] .badge {
    background: #39ff14 !important;
    color: #000 !important;
    border-color: rgba(57,255,20,0.6) !important;
    box-shadow: 0 0 10px rgba(57,255,20,0.5);
}

/* Inaktive Schritte */
#checkoutnavigation .col.opacity-50 .badge {
    background: rgba(255,255,255,0.1) !important;
    color: #aaa !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Light Mode */
html[data-bs-theme="light"] #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(0,0,0,0.05) !important;
    color: #555 !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* ============================================================
   CHECKOUT – ACCORDION (Versandarten)
   ============================================================ */
.accordion-item {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: rgba(0,0,0,0.35);
}

/* Light Mode */
html[data-bs-theme="light"] .accordion-item {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.15);
}

/* Header */
.accordion-button {
    background: transparent !important;
    color: #fff !important;
    padding: 12px 16px;
    box-shadow: none !important;
}

/* Light Mode */
html[data-bs-theme="light"] .accordion-button {
    color: #000 !important;
}

/* Hover */
.accordion-button:hover {
    background: rgba(57,255,20,0.1) !important;
}

/* Aktiver Header */
.accordion-button:not(.collapsed) {
    background: rgba(57,255,20,0.15) !important;
    color: #39ff14 !important;
    border-bottom: 1px solid rgba(57,255,20,0.4);
}

.accordion-body {
    background: rgba(0,0,0,0.25);
    padding: 14px 18px;
    color: #ddd;
}

/* Light Mode */
html[data-bs-theme="light"] .accordion-body {
    background: rgba(255,255,255,0.85);
    color: #333;
}

/* ============================================================
   CHECKOUT – VERSANDADRESSE BOX
   ============================================================ */

.checkout_shipping .bg-body-tertiary {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 1rem;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_shipping .bg-body-tertiary {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.15);
}

.checkout_shipping .h4 {
    font-weight: 700;
    margin-bottom: 6px;
}

.checkout_shipping .small {
    opacity: 0.85;
}

.form-check-input {
    border: 2px solid rgba(57,255,20,0.4);
    background: transparent;
}

.form-check-input:checked {
    background-color: #39ff14;
    border-color: #39ff14;
    box-shadow: 0 0 8px rgba(57,255,20,0.6);
}

/* Light Mode */
html[data-bs-theme="light"] .form-check-input {
    border-color: rgba(0,0,0,0.3);
}

.shipping img {
    max-height: 32px;
    margin-right: 6px;
    filter: drop-shadow(0 0 4px rgba(57,255,20,0.4));
}

/* ============================================================
   CHECKOUT – STEP NAVIGATION (Schritt 2)
   ============================================================ */
/* Aktiver Schritt */
.checkout_payment #checkoutnavigation .col[aria-current="step"] .badge {
    background: #39ff14 !important;
    color: #000 !important;
    border-color: rgba(57,255,20,0.6) !important;
    box-shadow: 0 0 10px rgba(57,255,20,0.5);
}

/* Abgeschlossene Schritte (mit Haken) */
.checkout_payment #checkoutnavigation .fa-check {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.5);
}

/* Inaktive Schritte */
.checkout_payment #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(255,255,255,0.1) !important;
    color: #aaa !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_payment #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(0,0,0,0.05) !important;
    color: #555 !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* ============================================================
   CHECKOUT – PAYMENT ACCORDION
   ============================================================ */
.checkout_payment .accordion-item {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: rgba(0,0,0,0.35);
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_payment .accordion-item {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.15);
}

/* Header */
.checkout_payment .accordion-button {
    background: transparent !important;
    color: #fff !important;
    padding: 12px 16px;
    box-shadow: none !important;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_payment .accordion-button {
    color: #000 !important;
}

/* Hover */
.checkout_payment .accordion-button:hover {
    background: rgba(57,255,20,0.1) !important;
}

/* Aktiver Header */
.checkout_payment .accordion-button:not(.collapsed) {
    background: rgba(57,255,20,0.15) !important;
    color: #39ff14 !important;
    border-bottom: 1px solid rgba(57,255,20,0.4);
}

/* Body */
.checkout_payment .accordion-body {
    background: rgba(0,0,0,0.25);
    padding: 14px 18px;
    color: #ddd;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_payment .accordion-body {
    background: rgba(255,255,255,0.85);
    color: #333;
}

/* ============================================================
   CHECKOUT – RECHNUNGSADRESSE BOX
   ============================================================ */

.checkout_payment .bg-body-tertiary {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 1rem;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_payment .bg-body-tertiary {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.15);
}

/* Textarea */
.checkout_payment textarea.form-control {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(57,255,20,0.35);
    color: #fff;
    border-radius: 8px;
    transition: 0.25s ease;
}

.checkout_payment textarea.form-control:focus {
    background: rgba(0,0,0,0.65);
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.55);
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_payment textarea.form-control {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

/* ============================================================
   CHECKOUT – AGB / DATENSCHUTZ BOXEN
   ============================================================ */

.checkout_payment .bg-warning-subtle {
    background: rgba(255,200,0,0.15) !important;
    border: 1px solid rgba(255,200,0,0.35);
    border-radius: 10px;
    padding: 12px;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_payment .bg-warning-subtle {
    background: rgba(255,240,150,0.5) !important;
    border-color: rgba(0,0,0,0.15);
}

/* Checkbox */
.checkout_payment .form-check-input {
    border: 2px solid rgba(57,255,20,0.4);
    background: transparent;
}

.checkout_payment .form-check-input:checked {
    background-color: #39ff14;
    border-color: #39ff14;
    box-shadow: 0 0 8px rgba(57,255,20,0.6);
}

.checkout_payment .h4 {
    font-weight: 700;
    margin-bottom: 6px;
}

.checkout_payment .small {
    opacity: 0.85;
}

/* ============================================================
   CHECKOUT – STEP NAVIGATION (Schritt 3)
   ============================================================ */

/* Aktiver Schritt */
.checkout_confirmation #checkoutnavigation .col[aria-current="step"] .badge {
    background: #39ff14 !important;
    color: #000 !important;
    border-color: rgba(57,255,20,0.6) !important;
    box-shadow: 0 0 10px rgba(57,255,20,0.5);
}

/* Abgeschlossene Schritte (mit Haken) */
.checkout_confirmation #checkoutnavigation .fa-check {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.5);
}

/* Inaktive Schritte */
.checkout_confirmation #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(255,255,255,0.1) !important;
    color: #aaa !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_confirmation #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(0,0,0,0.05) !important;
    color: #555 !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* ============================================================
   CHECKOUT – INFOBOX LINKS
   ============================================================ */

.checkout_confirmation .bg-body-tertiary {
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 1rem;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_confirmation .bg-body-tertiary {
    background: rgba(255,255,255,0.9) !important;
    border-color: rgba(0,0,0,0.15);
}

/* Überschriften */
.checkout_confirmation .h6 {
    font-weight: 700;
    margin-bottom: 6px;
}

/* Bearbeiten-Links */
.checkout_confirmation a.link-secondary {
    color: #39ff14 !important;
    text-decoration: none;
}

.checkout_confirmation a.link-secondary:hover {
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* ============================================================
   CHECKOUT – SUMMENBOX
   ============================================================ */

.checkout_confirmation .ot-nocart .d-flex {
    background: rgba(0,0,0,0.25);
    border-color: rgba(255,255,255,0.1) !important;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_confirmation .ot-nocart .d-flex {
    background: rgba(255,255,255,0.85);
}

.checkout_confirmation .giftbox_confirmation {
    background: rgba(0,0,0,0.35) !important;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_confirmation .giftbox_confirmation {
    background: rgba(255,255,255,0.9) !important;
}

.checkout_confirmation .small {
    opacity: 0.85;
}

.checkout_confirmation .fw-bold {
    font-weight: 700 !important;
}

/* Grundstil */
.checkout_confirmation .bg-body-tertiary a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Dark Mode – Links heller als normaler Text */
html[data-bs-theme="dark"] .checkout_confirmation .bg-body-tertiary a {
    color: #e6e6e6 !important;
}

/* Hover – Neon */
html[data-bs-theme="dark"] .checkout_confirmation .bg-body-tertiary a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode – Links dunkler als normaler Text */
html[data-bs-theme="light"] .checkout_confirmation .bg-body-tertiary a {
    color: #222 !important;
}

/* Hover – Neon */
html[data-bs-theme="light"] .checkout_confirmation .bg-body-tertiary a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* Speziell für (Bearbeiten) – noch klarer */
.checkout_confirmation .bg-body-tertiary .h6 a {
    font-weight: 700;
}

.checkout_shipping_address #checkoutnavigation .col[aria-current="step"] .badge {
    background: #39ff14 !important;
    color: #000 !important;
    border-color: rgba(57,255,20,0.6) !important;
    box-shadow: 0 0 10px rgba(57,255,20,0.5);
}

.checkout_shipping_address #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(255,255,255,0.1) !important;
    color: #aaa !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_shipping_address #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(0,0,0,0.05) !important;
    color: #555 !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* ============================================================
   CHECKOUT – ADRESSKARTEN
   ============================================================ */
.checkout_shipping_address .border-top.border-bottom {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px;
    padding: 1rem;
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_shipping_address .border-top.border-bottom {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.15) !important;
}

/* Hover */
.checkout_shipping_address .border-top.border-bottom:hover {
    box-shadow: 0 0 10px rgba(57,255,20,0.35);
}

/* Aktive Adresse */
.checkout_shipping_address .active {
    background: rgba(57,255,20,0.15) !important;
    border-color: rgba(57,255,20,0.4) !important;
    box-shadow: 0 0 12px rgba(57,255,20,0.45);
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_shipping_address .active {
    background: rgba(57,255,20,0.15) !important;
    border-color: rgba(57,255,20,0.4) !important;
}

/* ============================================================
   CHECKOUT – LINKSTYLING (Ändern)
   ============================================================ */
.checkout_shipping_address a.btn-outline-secondary.btn-sm {
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 600;
}

.checkout_shipping_address a.btn-outline-secondary.btn-sm:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_shipping_address a.btn-outline-secondary.btn-sm {
    color: #000 !important;
}

html[data-bs-theme="light"] .checkout_shipping_address a.btn-outline-secondary.btn-sm:hover {
    color: #39ff14 !important;
}

.checkout_shipping_address .fw-bold {
    font-weight: 700 !important;
}

.checkout_shipping_address .small {
    opacity: 0.85;
}

/* ============================================================
   CHECKOUT – STEP NAVIGATION (Adresse bearbeiten)
   ============================================================ */
.checkout_shipping_address #checkoutnavigation .col[aria-current="step"] .badge {
    background: #39ff14 !important;
    color: #000 !important;
    border-color: rgba(57,255,20,0.6) !important;
    box-shadow: 0 0 10px rgba(57,255,20,0.5);
}

.checkout_shipping_address #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(255,255,255,0.1) !important;
    color: #aaa !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_shipping_address #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(0,0,0,0.05) !important;
    color: #555 !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* ============================================================
   CHECKOUT – FORMULARBOX
   ============================================================ */
.checkout_shipping_address .checkout_new_address {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 1.2rem;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_shipping_address .checkout_new_address {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.15);
}

/* Labels */
.checkout_shipping_address .form-label {
    font-weight: 600;
    margin-bottom: 4px;
}

/* Pflichtsternchen */
.checkout_shipping_address .inputRequirement {
    color: #39ff14;
    font-weight: 700;
    margin-left: 4px;
}

/* ============================================================
   CHECKOUT – INPUT-FELDER
   ============================================================ */
.checkout_shipping_address .form-control {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(57,255,20,0.35);
    color: #fff;
    border-radius: 8px;
    transition: 0.25s ease;
}

.checkout_shipping_address .form-control:focus {
    background: rgba(0,0,0,0.65);
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.55);
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_shipping_address .form-control {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

.checkout_shipping_address .neon-select-ui {
    margin-bottom: 4px;
}

/* ============================================================
   CHECKOUT – STANDARDADRESSE CHECKBOX
   ============================================================ */
.checkout_shipping_address .bg-warning-subtle {
    background: rgba(255,200,0,0.15) !important;
    border: 1px solid rgba(255,200,0,0.35);
    border-radius: 10px;
    padding: 12px;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_shipping_address .bg-warning-subtle {
    background: rgba(255,240,150,0.5) !important;
    border-color: rgba(0,0,0,0.15);
}

/* Checkbox */
.checkout_shipping_address .form-check-input {
    border: 2px solid rgba(57,255,20,0.4);
    background: transparent;
}

.checkout_shipping_address .form-check-input:checked {
    background-color: #39ff14;
    border-color: #39ff14;
    box-shadow: 0 0 8px rgba(57,255,20,0.6);
}

.checkout_shipping_address .small {
    opacity: 0.85;
}

.checkout_shipping_address .fw-bold {
    font-weight: 700 !important;
}

/* ============================================================
   CHECKOUT – PRODUKTÜBERSICHT LINKS ([Mehr], Produktinfo)
   ============================================================ */
.checkout_confirmation .of_prod_row a,
.checkout_confirmation .of_prod_row .details {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Dark Mode – Links heller als normaler Text */
html[data-bs-theme="dark"] .checkout_confirmation .of_prod_row a,
html[data-bs-theme="dark"] .checkout_confirmation .of_prod_row .details {
    color: #e6e6e6 !important;
}

/* Hover – Neon */
html[data-bs-theme="dark"] .checkout_confirmation .of_prod_row a:hover,
html[data-bs-theme="dark"] .checkout_confirmation .of_prod_row .details:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode – Links dunkler als normaler Text */
html[data-bs-theme="light"] .checkout_confirmation .of_prod_row a,
html[data-bs-theme="light"] .checkout_confirmation .of_prod_row .details {
    color: #222 !important;
}

/* Hover – Neon */
html[data-bs-theme="light"] .checkout_confirmation .of_prod_row a:hover,
html[data-bs-theme="light"] .checkout_confirmation .of_prod_row .details:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* ============================================================
   PRINTWRAP – LINKSTYLING
   ============================================================ */
.printwrap a {
    text-decoration: none !important;
    color: #0056b3;
    font-weight: 600;
    transition: 0.25s ease;
}

.printwrap a:hover {
    color: #003d80;
    text-decoration: none !important;
}

/* Beim Drucken: Links schwarz, ohne Unterstrich */
@media print {
    .printwrap a {
        color: #000 !important;
        text-decoration: none !important;
    }
}

/* ============================================================
   PRINTWRAP – CARD / LAYOUT
   ============================================================ */
.printwrap .card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1rem;
}

.printwrap .card-body {
    padding: 1.5rem;
}

.printwrap h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 1rem;
}

.printwrap h2 {
    font-size: 20px;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* ============================================================
   PRINTWRAP – SPALTEN
   ============================================================ */
.printwrap .printColumsInfoLeft {
    width: 65%;
    float: left;
    padding-right: 2rem;
}

.printwrap .printColumsInfoRight {
    width: 35%;
    float: right;
    text-align: center;
}

.printwrap .printColumsInfoRight img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.printwrap .printlogo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.printwrap .printlogo img {
    max-width: 180px;
    height: auto;
}

@media print {
    body {
        background: #fff !important;
    }

    .printwrap .card {
        border-color: #000;
    }

    .printwrap h1, 
    .printwrap h2 {
        color: #000 !important;
    }
}

/* ============================================================
   CHECKOUT – AGB / DATENSCHUTZ LINKS ([Mehr])
   ============================================================ */
.checkout_action .bg-warning-subtle a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Dark Mode – Links heller als normaler Text */
html[data-bs-theme="dark"] .checkout_action .bg-warning-subtle a {
    color: #e6e6e6 !important;
}

/* Hover – Neon */
html[data-bs-theme="dark"] .checkout_action .bg-warning-subtle a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode – Links dunkler als normaler Text */
html[data-bs-theme="light"] .checkout_action .bg-warning-subtle a {
    color: #222 !important;
}

/* Hover – Neon */
html[data-bs-theme="light"] .checkout_action .bg-warning-subtle a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* Abstand über der Gutscheinbox */
.checkout_confirmation .giftbox_confirmation {
    margin-top: 20px !important;
}

/* ============================================================
   CHECKOUT – STEP NAVIGATION (Schritt 4)
   ============================================================ */
.checkout_success #checkoutnavigation .col[aria-current="step"] .badge {
    background: #39ff14 !important;
    color: #000 !important;
    border-color: rgba(57,255,20,0.6) !important;
    box-shadow: 0 0 10px rgba(57,255,20,0.5);
}

.checkout_success #checkoutnavigation .fa-check {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.5);
}

.checkout_success #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(255,255,255,0.1) !important;
    color: #aaa !important;
    border-color: rgba(255,255,255,0.2) !important;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_success #checkoutnavigation .col.opacity-50 .badge {
    background: rgba(0,0,0,0.05) !important;
    color: #555 !important;
    border-color: rgba(0,0,0,0.15) !important;
}

/* ============================================================
   CHECKOUT – ERFOLGSBOX
   ============================================================ */
.checkout_success .contentbox {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 1.2rem;
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_success .contentbox {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.15);
}

.checkout_success .contentbox .h4 {
    font-weight: 700;
    margin-bottom: 10px;
}

.checkout_success .contentbox p {
    opacity: 0.85;
    margin-bottom: 0.8rem;
}

.checkout_success .row.my-4 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

.checkout_success .row.mb-4 {
    margin-top: 1rem !important;
}

/* ============================================================
   CHECKOUT – LINKS IN ERFOLGSBOX
   ============================================================ */
.checkout_success .contentbox a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Dark Mode */
html[data-bs-theme="dark"] .checkout_success .contentbox a {
    color: #e6e6e6 !important;
}

html[data-bs-theme="dark"] .checkout_success .contentbox a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode */
html[data-bs-theme="light"] .checkout_success .contentbox a {
    color: #222 !important;
}

html[data-bs-theme="light"] .checkout_success .contentbox a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* ============================================================
   REGISTRIERUNG – LINKS IN HINWEISBOX ([Mehr])
   ============================================================ */
.create_account .bg-warning-subtle a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Dark Mode – Links heller als normaler Text */
html[data-bs-theme="dark"] .create_account .bg-warning-subtle a {
    color: #e6e6e6 !important;
}

/* Hover – Neon */
html[data-bs-theme="dark"] .create_account .bg-warning-subtle a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode – Links dunkler als normaler Text */
html[data-bs-theme="light"] .create_account .bg-warning-subtle a {
    color: #222 !important;
}

/* Hover – Neon */
html[data-bs-theme="light"] .create_account .bg-warning-subtle a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* ============================================================
   PAGINATION – NEON STYLE (Checkout / Listing)
   ============================================================ */
.pagination .page-link {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.15);
    color: #e6e6e6;
    border-radius: 8px;
    padding: 6px 12px;
    text-decoration: none !important;
    transition: 0.25s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .pagination .page-link {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.2);
    color: #222;
}

/* Hover – Neon */
.pagination .page-link:hover {
    color: #39ff14 !important;
    border-color: #39ff14 !important;
    box-shadow: 0 0 8px rgba(57,255,20,0.5);
    text-decoration: none !important;
}

/* Aktive Seite */
.pagination .page-item.active .page-link {
    background: rgba(57,255,20,0.15) !important;
    border-color: rgba(57,255,20,0.4) !important;
    color: #39ff14 !important;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(57,255,20,0.45);
}

/* Light Mode – aktive Seite */
html[data-bs-theme="light"] .pagination .page-item.active .page-link {
    background: rgba(57,255,20,0.15) !important;
    border-color: rgba(57,255,20,0.4) !important;
    color: #39ff14 !important;
}

/* ============================================================
   PRODUKTSEITE – LR PRICE BOX LINKS (Versandkosten / Lieferzeit)
   ============================================================ */
.lr_price_box a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Dark Mode – Links heller als normaler Text */
html[data-bs-theme="dark"] .lr_price_box a {
    color: #e6e6e6 !important;
}

/* Hover – Neon */
html[data-bs-theme="dark"] .lr_price_box a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode – Links dunkler als normaler Text */
html[data-bs-theme="light"] .lr_price_box a {
    color: #222 !important;
}

/* Hover – Neon */
html[data-bs-theme="light"] .lr_price_box a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* ============================================================
   PRODUKTSEITE – LR TITLE (Produktüberschrift)
   ============================================================ */
.lr_title {
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    text-decoration: none !important;
    transition: 0.25s ease;
}

/* Dark Mode – kräftiges Weiß */
html[data-bs-theme="dark"] .lr_title {
    color: #f2f2f2 !important;
}

/* Light Mode – kräftiges Schwarz */
html[data-bs-theme="light"] .lr_title {
    color: #111 !important;
}

/* Optional: dezenter Neon-Hover (kannst du weglassen, wenn du willst) */
.lr_title:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* ============================================================
   CATEGORY CARD – NEON STYLE
   ============================================================ */
.card.h-100.text-center {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.8rem;
    transition: 0.3s ease;
}

/* Light Mode */
html[data-bs-theme="light"] .card.h-100.text-center {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.15);
}

/* Hover – leicht schweben */
.card.h-100.text-center:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 12px rgba(57,255,20,0.35);
}

.card .cat_image img {
    border-radius: 10px;
    border: 1px solid rgba(57,255,20,0.35);
    padding: 4px;
    background: rgba(0,0,0,0.25);
    transition: 0.3s ease;
}

/* Hover */
.card:hover .cat_image img {
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.45);
}

/* Light Mode */
html[data-bs-theme="light"] .card .cat_image img {
    background: rgba(255,255,255,0.8);
    border-color: rgba(0,0,0,0.2);
}

.card .stretched-link {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Dark Mode */
html[data-bs-theme="dark"] .card .stretched-link {
    color: #e6e6e6 !important;
}

/* Hover – Neon */
html[data-bs-theme="dark"] .card .stretched-link:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode */
html[data-bs-theme="light"] .card .stretched-link {
    color: #222 !important;
}

/* Hover – Neon */
html[data-bs-theme="light"] .card .stretched-link:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

.card .mt-2 {
    font-size: 1.05rem;
    line-height: 1.3;
}

/* ============================================================
   SUBNAV – NEON SIDEBAR
   ============================================================ */
#subnav.navbar {
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 1rem;
}

/* Light Mode */
html[data-bs-theme="light"] #subnav.navbar {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.15);
}

#subnav .navbar-brand {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    color: #39ff14;
    text-shadow: 0 0 6px rgba(57,255,20,0.5);
}

#subnav .nav-link {
    text-decoration: none !important;
    font-weight: 600;
    padding: 0.5rem 0;
    transition: 0.25s ease;
}

/* Dark Mode */
html[data-bs-theme="dark"] #subnav .nav-link {
    color: #e6e6e6 !important;
}

/* Hover – Neon */
html[data-bs-theme="dark"] #subnav .nav-link:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode */
html[data-bs-theme="light"] #subnav .nav-link {
    color: #222 !important;
}

/* Hover – Neon */
html[data-bs-theme="light"] #subnav .nav-link:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

#subnav .nav-link.active {
    color: #39ff14 !important;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(57,255,20,0.6);
}

#subnav .fa-chevron-right {
    color: rgba(255,255,255,0.4);
    transition: 0.25s ease;
}

#subnav .nav-link:hover .fa-chevron-right {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light Mode */
html[data-bs-theme="light"] #subnav .fa-chevron-right {
    color: rgba(0,0,0,0.4);
}

#subnav .dropdown-menu {
    background: rgba(0,0,0,0.9) !important;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    margin-top: 0.3rem;
    padding: 0.5rem 0.8rem;
}

/* ============================================================
   SUBNAV – STICKY FIX (bleibt unter der Navigation stehen)
   ============================================================ */
#col_left {
    position: relative;
}

#subnav {
    position: sticky;
    top: 140px;
    z-index: 5;
}

/* verhindert, dass Bootstrap sticky überschreibt */
#subnav.navbar {
    position: sticky !important;
}

/* Light Mode */
html[data-bs-theme="light"] #subnav .dropdown-menu {
    background: rgba(255,255,255,0.95) !important;
    border-color: rgba(0,0,0,0.15);
}

#subnav .border-top,
#subnav .border-bottom {
    border-color: rgba(255,255,255,0.1) !important;
}

/* Light Mode */
html[data-bs-theme="light"] #subnav .border-top,
html[data-bs-theme="light"] #subnav .border-bottom {
    border-color: rgba(0,0,0,0.1) !important;
}

/* ============================================================
   WIDERRUF – GRUNDLAYOUT
   ============================================================ */
#content > .contact-full,
#content .shopcontent > .content:has(.withdraw) {
    max-width: 100% !important;
    width: 100% !important;
}

#content .withdraw {
    font-size: 16px;
    line-height: 1.6;
    color: #e6e6e6;
}

#content .withdraw h1 {
    font-size: 28px;
    font-weight: 700;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

/* DARK MODE */
html[data-bs-theme="dark"] #content .withdraw h1 {
    color: #39ff14;
    background: linear-gradient(
        145deg,
        rgba(0,0,0,0.85),
        rgba(20,20,20,0.75)
    );
    border: 1px solid rgba(57,255,20,0.35);
    box-shadow:
        0 0 10px rgba(57,255,20,0.35),
        inset 0 0 10px rgba(255,255,255,0.05);
    animation: h1PulseDark 3s infinite ease-in-out;
}

/* LIGHT MODE */
html[data-bs-theme="light"] #content .withdraw h1 {
    color: #000;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.95),
        rgba(245,245,245,0.85)
    );
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
    animation: h1PulseLight 3s infinite ease-in-out;
}

#content .withdraw .contentbox {
    background: linear-gradient(
        145deg,
        rgba(0,0,0,0.85),
        rgba(20,20,20,0.75)
    );
    border: 1px solid rgba(57,255,20,0.25);
    border-radius: 12px;
    padding: 1.5rem;

    box-shadow:
        0 0 10px rgba(57,255,20,0.25),
        inset 0 0 10px rgba(255,255,255,0.05);
    animation: neonPulseDark 3s infinite ease-in-out;
}

/* LIGHT MODE */
html[data-bs-theme="light"] #content .withdraw .contentbox {
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.95),
        rgba(245,245,245,0.85)
    );
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
    animation: neonPulseLight 3s infinite ease-in-out;
}

.withdraw-head-left,
.withdraw-head-right {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
}

/* Light Mode */
html[data-bs-theme="light"] .withdraw-head-left,
html[data-bs-theme="light"] .withdraw-head-right {
    color: #000;
}

.fields_required {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.8;
    color: #39ff14;
}

/* Light Mode */
html[data-bs-theme="light"] .fields_required {
    color: #2a7f10;
}

#content .withdraw .form-control {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(57,255,20,0.35);
    color: #e6e6e6;
    border-radius: 8px;
    padding: 10px 14px;
    transition: 0.25s ease;
}

#content .withdraw .form-control:focus {
    background: rgba(0,0,0,0.65);
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.55);
    color: #fff;
}

/* Light Mode */
html[data-bs-theme="light"] #content .withdraw .form-control {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

#content .withdraw .p-2.position-relative {
    background: rgba(255,200,0,0.15);
    border: 1px solid rgba(255,200,0,0.35);
    border-radius: 10px;
}

/* Light Mode */
html[data-bs-theme="light"] #content .withdraw .p-2.position-relative {
    background: rgba(255,240,150,0.5);
    border-color: rgba(0,0,0,0.15);
}

#content .withdraw button.btn {
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(57,255,20,0.45);
    color: #39ff14;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    transition: 0.25s ease;
}

#content .withdraw button.btn:hover {
    background: rgba(0,0,0,0.75);
    border-color: rgba(57,255,20,0.85);
    box-shadow:
        0 0 10px rgba(57,255,20,0.55),
        0 0 20px rgba(57,255,20,0.35);
}

/* Light Mode */
html[data-bs-theme="light"] #content .withdraw button.btn {
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

html[data-bs-theme="light"] #content .withdraw button.btn:hover {
    background: #eaeaea;
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.45);
}

.withdraw-gesamt-box .col {
    display: flex;
    flex-direction: column;
}

.withdraw-gesamt-box .contentbox {
    flex-grow: 1;
}

/* ============================================================
   WITHDRAW – LINKS (wie Kontaktseite)
   ============================================================ */
#content .withdraw a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* DARK MODE */
html[data-bs-theme="dark"] #content .withdraw a {
    color: #e6e6e6 !important;
}

html[data-bs-theme="dark"] #content .withdraw a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* LIGHT MODE */
html[data-bs-theme="light"] #content .withdraw a {
    color: #000 !important;
}

html[data-bs-theme="light"] #content .withdraw a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

/* Kontakt */
#content .contact_us {
    font-size: 16px;
    line-height: 1.6;
    color: #e6e6e6;
}

#content .contact_us h1 {
    font-size: 28px;
    font-weight: 700;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

/* DARK MODE */
html[data-bs-theme="dark"] #content .contact_us h1 {
    color: #39ff14;
    background: linear-gradient(145deg, rgba(0,0,0,0.85), rgba(20,20,20,0.75));
    border: 1px solid rgba(57,255,20,0.35);
    box-shadow: 0 0 10px rgba(57,255,20,0.35), inset 0 0 10px rgba(255,255,255,0.05);
    animation: h1PulseDark 3s infinite ease-in-out;
}

/* LIGHT MODE */
html[data-bs-theme="light"] #content .contact_us h1 {
    color: #000;
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(245,245,245,0.85));
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
    animation: h1PulseLight 3s infinite ease-in-out;
}

#content .contact_us .contentbox {
    border-radius: 12px;
    padding: 1.5rem;
}

/* LIGHT MODE */
html[data-bs-theme="light"] #content .contact_us .contentbox {

}

.contact-head-left,
.contact-head-right {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
}

/* Light Mode */
html[data-bs-theme="light"] .contact-head-left,
html[data-bs-theme="light"] .contact-head-right {
    color: #000;
}

#content .contact_us .fields_required {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.8;
    color: #39ff14;
    margin-left: 4px;
}

/* Light Mode */
html[data-bs-theme="light"] #content .contact_us .fields_required {
    color: #2a7f10;
}

#content .contact_us .form-control {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(57,255,20,0.35);
    color: #e6e6e6;
    border-radius: 8px;
    padding: 10px 14px;
    transition: 0.25s ease;
}

#content .contact_us .form-control:focus {
    background: rgba(0,0,0,0.65);
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.55);
    color: #fff;
}

/* Light Mode */
html[data-bs-theme="light"] #content .contact_us .form-control {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

#content .contact_us .p-2.position-relative {
    background: rgba(255,200,0,0.15);
    border: 1px solid rgba(255,200,0,0.35);
    border-radius: 10px;
}

/* Light Mode */
html[data-bs-theme="light"] #content .contact_us .p-2.position-relative {
    background: rgba(255,240,150,0.5);
    border-color: rgba(0,0,0,0.15);
}

#content .contact_us button.btn {
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(57,255,20,0.45);
    color: #39ff14;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 600;
    transition: 0.25s ease;
}

#content .contact_us button.btn:hover {
    background: rgba(0,0,0,0.75);
    border-color: rgba(57,255,20,0.85);
    box-shadow: 0 0 10px rgba(57,255,20,0.55), 0 0 20px rgba(57,255,20,0.35);
}

/* Light Mode */
html[data-bs-theme="light"] #content .contact_us button.btn {
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

html[data-bs-theme="light"] #content .contact_us button.btn:hover {
    background: #eaeaea;
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.45);
}

#content .contact_us a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* DARK */
html[data-bs-theme="dark"] #content .contact_us a {
    color: #e6e6e6 !important;
}

html[data-bs-theme="dark"] #content .contact_us a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* LIGHT */
html[data-bs-theme="light"] #content .contact_us a {
    color: #000 !important;
}

html[data-bs-theme="light"] #content .contact_us a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

#content .contact_us a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* DARK */
html[data-bs-theme="dark"] #content .contact_us a {
    color: #e6e6e6 !important;
}

html[data-bs-theme="dark"] #content .contact_us a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* LIGHT */
html[data-bs-theme="light"] #content .contact_us a {
    color: #000 !important;
}

html[data-bs-theme="light"] #content .contact_us a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

.contact-gesamt-box .col {
    display: flex;
    flex-direction: column;
}

.contact-gesamt-box .contentbox {
    flex-grow: 1;
}

#content .contact_us .form-control {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(57,255,20,0.35);
    color: #e6e6e6;
    border-radius: 8px;
    padding: 10px 14px;
    transition: 0.25s ease;
}

#content .contact_us .form-control:focus {
    background: rgba(0,0,0,0.65);
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.55);
    color: #fff;
}

/* Light Mode */
html[data-bs-theme="light"] #content .contact_us .form-control {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

/* Sitemap */
#content .sitemap {
    background: linear-gradient(145deg, rgba(0,0,0,0.85), rgba(20,20,20,0.75));
    border: 1px solid rgba(57,255,20,0.25);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 0 10px rgba(57,255,20,0.25), inset 0 0 10px rgba(255,255,255,0.05);
}

/* Light Mode */
html[data-bs-theme="light"] #content .sitemap {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(245,245,245,0.85));
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

#content .sitemap ul {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

#content .sitemap li {
    margin: 0.4rem 0;
}

#content .sitemap a {
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.25s ease;
}

/* Dark */
html[data-bs-theme="dark"] #content .sitemap a {
    color: #e6e6e6 !important;
}

html[data-bs-theme="dark"] #content .sitemap a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.6);
}

/* Light */
html[data-bs-theme="light"] #content .sitemap a {
    color: #000 !important;
}

html[data-bs-theme="light"] #content .sitemap a:hover {
    color: #39ff14 !important;
    text-shadow: 0 0 6px rgba(57,255,20,0.4);
}

#content .sitemap .level1 > a {
    font-size: 1.1rem;
    font-weight: 700;
}

#content .sitemap .level2 {
    margin-left: 1rem;
}

#content .sitemap .level3 {
    margin-left: 2rem;
}

/* Level 1 */
#content .sitemap .level1 > a::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
    color: #39ff14;
}

/* Level 2 */
#content .sitemap .level2 > a::before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 6px;
    opacity: 0.8;
}

/* Level 3 */
#content .sitemap .level3 > a::before {
    content: "\f111";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-size: 0.5rem;
    margin-right: 6px;
    opacity: 0.6;
}

#content .sitemap ul ul {
    display: none;
    margin-left: 1rem;
    transition: all 0.3s ease;
}

#content .sitemap li.open > ul {
    display: block;
}

#content .sitemap li > a {
    cursor: pointer;
}

#content .sitemap li.hassub > a::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    float: right;
    transition: transform 0.3s ease;
}

#content .sitemap li.open > a::after {
    transform: rotate(180deg);
}

@media (max-width: 767px) {

    #content .sitemap {
        padding: 1.2rem;
    }

    #content .sitemap a {
        padding: 0.6rem 0;
        display: block;
    }

    #content .sitemap .level2 {
        margin-left: 1rem;
    }

    #content .sitemap .level3 {
        margin-left: 1.8rem;
    }

    #content .sitemap li.hassub > a::after {
        font-size: 1rem;
    }
}

@media (min-width: 992px) {
    #content .sitemaplist {
        column-count: 2;
        column-gap: 3rem;
    }
}

@media (min-width: 1400px) {
    #content .sitemaplist {
        column-count: 3;
    }
}

#content .sitemaplist ul {
    break-inside: avoid;
}

/* Sitemap volle Breite */
#content .content:has(.sitemap) {
    max-width: 100% !important;
    width: 100% !important;
}

/* Abstand für alle Sitemap-Links */
#content .sitemap a {
    padding-right: 5px;
}

/* Pfeil nach innen setzen */
#content .sitemap li.hassub > a::after {
    margin-right: 5px;
    transition: transform 0.3s ease;
}

/* Newsletter */
#newsletter .box-newsletter {
    background: linear-gradient(145deg, rgba(0,0,0,0.85), rgba(20,20,20,0.75));
    border: 1px solid rgba(57,255,20,0.25);
    border-radius: 12px;
    padding: 2rem;
    box-shadow:
        0 0 10px rgba(57,255,20,0.25),
        inset 0 0 10px rgba(255,255,255,0.05);

    /* Einblend-Animation */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

#newsletter .box-newsletter.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Light Mode */
html[data-bs-theme="light"] #newsletter .box-newsletter {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(245,245,245,0.85));
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.6);
}

#newsletter .newsletter-badge {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem auto;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(57,255,20,0.35);
    box-shadow:
        0 0 10px rgba(57,255,20,0.35),
        inset 0 0 10px rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #39ff14;
    position: relative;
    overflow: hidden;

    /* Animationen */
    opacity: 0;
    transform: translateY(-20px);
    animation:
        badgeFlyIn 0.8s ease forwards,
        badgePulse 3s ease-in-out infinite;
}

/* Light Mode */
html[data-bs-theme="light"] #newsletter .newsletter-badge {
    background: #f5f5f5;
    border-color: rgba(0,0,0,0.25);
    color: #2a7f10;
}

@keyframes badgeFlyIn {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes badgePulse {
    0% {
        box-shadow:
            0 0 10px rgba(57,255,20,0.35),
            inset 0 0 10px rgba(255,255,255,0.05);
    }
    50% {
        box-shadow:
            0 0 18px rgba(57,255,20,0.55),
            inset 0 0 14px rgba(255,255,255,0.1);
    }
    100% {
        box-shadow:
            0 0 10px rgba(57,255,20,0.35),
            inset 0 0 10px rgba(255,255,255,0.05);
    }
}

#newsletter .newsletter-badge::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(25deg);
    animation: badgeShine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badgeShine {
    0% {
        top: -120%;
        left: -60%;
    }
    50% {
        top: 120%;
        left: 60%;
    }
    100% {
        top: -120%;
        left: -60%;
    }
}

#newsletter .box-newsletter .form-control {
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(57,255,20,0.35);
    color: #e6e6e6;
    border-radius: 8px 0 0 8px;
    padding: 10px 14px;
    transition: 0.25s ease;
}

#newsletter .box-newsletter .form-control:focus {
    background: rgba(0,0,0,0.65);
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.55);
    color: #fff;
}

/* Light Mode */
html[data-bs-theme="light"] #newsletter .box-newsletter .form-control {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

#newsletter .box-newsletter button.btn {
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(57,255,20,0.45);
    color: #39ff14;
    border-radius: 0 8px 8px 0;
    transition: 0.25s ease;
}

#newsletter .box-newsletter button.btn:hover {
    background: rgba(0,0,0,0.75);
    border-color: rgba(57,255,20,0.85);
    box-shadow:
        0 0 10px rgba(57,255,20,0.55),
        0 0 20px rgba(57,255,20,0.35);
}

/* Light Mode */
html[data-bs-theme="light"] #newsletter .box-newsletter button.btn {
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

html[data-bs-theme="light"] #newsletter .box-newsletter button.btn:hover {
    background: #eaeaea;
    border-color: #39ff14;
    box-shadow: 0 0 10px rgba(57,255,20,0.45);
}

@media (max-width: 767px) {
    #newsletter .box-newsletter {
        padding: 1.5rem;
    }

    #newsletter .input-group {
        flex-direction: column;
    }

    #newsletter .form-control {
        border-radius: 8px;
        margin-bottom: 10px;
    }

    #newsletter button.btn {
        border-radius: 8px;
        width: auto;
    }
}

/* Animation Newsletter */
#newsletter .box-newsletter {
    background: linear-gradient(145deg, rgba(0,0,0,0.85), rgba(20,20,20,0.75));
    border: 1px solid rgba(57,255,20,0.25);
    border-radius: 12px;
    padding: 2rem;
    box-shadow:
        0 0 10px rgba(57,255,20,0.25),
        inset 0 0 10px rgba(255,255,255,0.05);
    opacity: 0;
    transform:
        translateY(80px)
        rotateX(-65deg);
    transform-origin: top;
    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

#newsletter .box-newsletter.visible {
    opacity: 1;
    transform:
        translateY(0)
        rotateX(0deg);
}

#newsletter .newsletter-badge {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem auto;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(57,255,20,0.35);
    box-shadow:
        0 0 10px rgba(57,255,20,0.35),
        inset 0 0 10px rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #39ff14;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-15px);
    transition:
        opacity 0.9s ease 0.2s,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

#newsletter .box-newsletter.visible .newsletter-badge {
    opacity: 1;
    transform: translateY(0);
}

#newsletter .newsletter-badge::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(25deg);
    animation: badgeShine 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes badgeShine {
    0%   { top: -120%; left: -60%; }
    50%  { top: 120%;  left: 60%; }
    100% { top: -120%; left: -60%; }
}

@keyframes badgePulse {
    0%   { box-shadow: 0 0 10px rgba(57,255,20,0.35); }
    50%  { box-shadow: 0 0 18px rgba(57,255,20,0.55); }
    100% { box-shadow: 0 0 10px rgba(57,255,20,0.35); }
}

#newsletter .newsletter-badge {
    animation: badgePulse 3s ease-in-out infinite;
}

/* -------------------------------------- */
/* MOBILE OPTIMIERUNG NEWSLETTER          */
/* -------------------------------------- */
@media (max-width: 767px) {
    /* Box kompakter */
    #newsletter .box-newsletter {
        padding: 1.4rem 1.2rem;
        border-radius: 10px;
        transform: translateY(60px) rotateX(-45deg);
    }

    #newsletter .box-newsletter.visible {
        transform: translateY(0) rotateX(0deg);
    }

    /* Badge kleiner + näher am Text */
    #newsletter .newsletter-badge {
        width: 48px;
        height: 48px;
        font-size: 20px;
        margin-bottom: 0.8rem;
        transform: translateY(-10px);
    }

    #newsletter .box-newsletter.visible .newsletter-badge {
        transform: translateY(0);
    }

    /* Shine‑Swipe bleibt, aber etwas langsamer */
    #newsletter .newsletter-badge::after {
        animation-duration: 5s;
    }

    /* Überschrift kleiner */
    #newsletter .box-newsletter .h4 {
        font-size: 18px;
        margin-bottom: 0.8rem;
    }

    /* Beschreibungstext */
    #newsletter .box-newsletter .small {
        font-size: 14px;
        line-height: 1.4;
    }

    /* Input + Button untereinander */
    #newsletter .input-group {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100%;
        gap: 10px;
    }

    #newsletter .form-control {
        width: 100% !important;
        border-radius: 8px !important;
    }

    #newsletter button.btn {
        width: auto !important;
        border-radius: 8px !important;
        margin-top: 10px;
        padding: 16px;
        font-size: 16px;
    }

    /* Abstand unten */
    #newsletter .box-newsletter p.small {
        margin-top: 1rem;
        font-size: 13px;
    }

    .go2top,
    .go2top-ring,
    .go2top-mask {
        display: none !important;
    }
	
	#newsletter img,
	.content img,
	p img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	
	/* Rechts / Links mittig */
	#revCarousel .rightRs,
	#revCarousel .leftRs {
		margin: 0 !important;
	}
	
	/* Links etwas weiter rein */
	#apCarousel .leftRs,
	#wnCarousel .leftRs,
	#topCarousel .leftRs,
	#bsCarousel .leftRs,
	#revCarousel .leftRs {
		left: 5px !important;
	}

	/* Rechts etwas weiter rein */
	#apCarousel .rightRs,
	#wnCarousel .rightRs,
	#topCarousel .rightRs,
	#bsCarousel .rightRs,
	#revCarousel .rightRs {
		right: 5px !important;
	}
	
	.box_best_sellers .h2, 
	.box_reviews .h2,
	.box_whatsnew .h2, 
	.new-products-default .h2,
	.cat_show .h2 {
		font-size: 1.25rem;
	}
	
	#content h1.h3.bg-h {
		font-size: 18px !important;
	}
	
	.box_last_viewed .h2,
	.also_purchased .h3 {
		font-size: 1.15rem;
	}
	
	.copyright, .copyright a,
	.footer-area .footer-copy {
		font-size: 0.5rem !important;
		font-weight: 400 !important;
	}
	
	.fs-5 {
	  font-size: 1.0rem !important;
	}
}

/* Basis Neon Button */
.btn-neon {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(57,255,20,0.45);
    background: rgba(0,0,0,0.55);
    color: #39ff14;
    padding: 10px 16px;
    border-radius: 8px;
    transition: 0.25s ease;
    box-shadow:
        0 0 8px rgba(57,255,20,0.35),
        inset 0 0 6px rgba(255,255,255,0.05);
}

/* Hover Glow */
.btn-neon:hover {
    background: rgba(0,0,0,0.75);
    border-color: rgba(57,255,20,0.85);
    box-shadow:
        0 0 12px rgba(57,255,20,0.55),
        0 0 20px rgba(57,255,20,0.35);
    transform: translateY(-2px);
}

/* Shine Swipe */
.btn-shine::after {
    content: "";
    position: absolute;
    top: -120%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(25deg);
    animation: shineSwipe 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shineSwipe {
    0%   { top: -120%; left: -60%; }
    50%  { top: 120%;  left: 60%; }
    100% { top: -120%; left: -60%; }
}

/* Pfeil-Buttons */
.btn-arrow {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    border-radius: 50%;
}

/* Carousel-Pfeile korrekt positionieren */
#revCarousel .leftRs,
#revCarousel .rightRs {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10;
}

/* Links */
#revCarousel .leftRs {
    left: -20px;
}

/* Rechts */
#revCarousel .rightRs {
    right: -20px;
}

/* Sticky Bottom Navigation */
@media (max-width: 767px) {
    .mobile-sticky-nav,
    .msn-panel {
        display: block;
    }
}

@media (min-width: 768px) {
    .mobile-sticky-nav,
    .msn-panel {
        display: none !important;
    }
}

.mobile-sticky-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 60%,
        rgba(0,0,0,0.25) 100%
    );
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(57,255,20,0.35);
    z-index: 99999;
}

/* Buttons */
.msn-btn a,
.msn-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(57,255,20,0.45);
    background: rgba(0,0,0,0.75);
    color: #39ff14;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
	text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 8px rgba(57,255,20,0.35),
        inset 0 0 6px rgba(255,255,255,0.05);
    transition: 0.25s ease;
}

/* Hover Glow */
.msn-btn:hover {
    background: rgba(0,0,0,0.95);
    border-color: rgba(57,255,20,0.85);
    box-shadow:
        0 0 12px rgba(57,255,20,0.55),
        0 0 20px rgba(57,255,20,0.35);
    transform: translateY(-3px);
}

/* Shine nur diagonal, elliptisch, farbig */
.msn-btn::after {
    content: "";
    position: absolute;
    top: -160%;
    left: -90%;
    width: 70%;
    height: 260%;
    background: radial-gradient(
        ellipse at center,
        rgba(57,255,20,0.55) 0%,
        rgba(57,255,20,0.25) 35%,
        rgba(255,255,255,0.15) 60%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(28deg);
    pointer-events: none;
    animation: msnShine 4s ease-in-out infinite 1s;
}

/* Shine diagonal, nur eine Richtung */
@keyframes msnShine {
    0% {
        top: -160%;
        left: -90%;
    }
    100% {
        top: 160%;
        left: 90%;
    }
}

@media (max-width: 767px) {
    .msn-btn::after {
        animation-duration: 6s !important;
        opacity: 0.75;
    }
}

/* Mittlerer Button schwebend über der Leiste */
.msn-center {
    width: 78px !important;
    height: 78px !important;
    font-size: 32px !important;
    position: relative;
    top: -12px;
    z-index: 20;
    box-shadow:
        0 0 12px rgba(57,255,20,0.55),
        0 0 24px rgba(57,255,20,0.35),
        inset 0 0 10px rgba(255,255,255,0.08);
}

/* Optional: sanfter Hover-Effekt */
.msn-center:hover {
    transform: translateY(-4px) scale(1.05);
}

.msn-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 80%;
    max-width: 360px;
    background: rgba(0,0,0,0.95);
    border: 1px solid rgba(57,255,20,0.35);
    box-shadow: 0 0 20px rgba(57,255,20,0.35);
    z-index: 999999;
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}

/* Links → Rechts */
.left-panel {
    left: 0;
    transform: translateX(-100%);
}
.left-panel.active {
    transform: translateX(0);
}

/* Rechts → Links */
.right-panel {
    right: 0;
    transform: translateX(100%);
}
.right-panel.active {
    transform: translateX(0);
}

/* Oben → Unten */
.top-panel {
    left: 0;
    right: 0;
    height: 70%;
    transform: translateY(-100%);
}
.top-panel.active {
    transform: translateY(0);
}
.msn-panel-header {
    padding: 16px;
    font-size: 20px;
    color: #39ff14;
    border-bottom: 1px solid rgba(57,255,20,0.35);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.msn-panel-header i {
    margin-right: 8px;
}

.msn-close {
    background: none;
    border: none;
    color: #39ff14;
    font-size: 22px;
}

.msn-panel-content {
    padding: 16px;
    overflow-y: auto;
    height: calc(100% - 70px);
}

.msn-panel-content a {
    display: block;
    padding: 12px 0;
    color: #e6ffe6;
    font-size: 16px;
    border-bottom: 1px solid rgba(57,255,20,0.15);
}

.msn-section-title {
    margin-top: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #39ff14;
    opacity: 0.8;
}

.msn-product {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(57,255,20,0.15);
}

.msn-product img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
}

.msn-product-title {
    font-size: 16px;
    color: #fff;
}

.msn-product-price {
    font-size: 14px;
    color: #39ff14;
}

.msn-checkout-btn {
    display: block;
    margin-top: 20px;
    padding: 12px;
    text-align: center;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(57,255,20,0.45);
    color: #39ff14;
    border-radius: 8px;
}

.msn-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    background: rgba(0,0,0,0.95);
    border: 1px solid rgba(57,255,20,0.35);
    box-shadow: 0 0 20px rgba(57,255,20,0.35);
    z-index: 999999;
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
}

.msn-panel {
    bottom: 70px;
}

.mobile-sticky-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    height: 70px;
    z-index: 1000000;
}

.left-panel {
    transform: translateX(-100%);
}
.left-panel.active {
    transform: translateX(0);
}

.right-panel {
    transform: translateX(100%);
}
.right-panel.active {
    transform: translateX(0);
}

.top-panel {
    transform: translateY(-100%);
}
.top-panel.active {
    transform: translateY(0);
}

/* LIGHT MODE PANELS */
html[data-bs-theme="light"] .msn-panel {
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
    color: #222;
}

html[data-bs-theme="light"] .msn-panel-header {
    color: #2a7f10;
    border-bottom: 1px solid rgba(0,0,0,0.15);
}

html[data-bs-theme="light"] .msn-panel-content a {
    color: #222;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

html[data-bs-theme="light"] .msn-product-title {
    color: #000;
}

html[data-bs-theme="light"] .msn-product-price {
    color: #2a7f10;
}

html[data-bs-theme="light"] .msn-checkout-btn {
    background: #f5f5f5;
    border: 1px solid rgba(0,0,0,0.25);
    color: #000;
}

/* DARK MODE Shine */
.msn-btn::after {
    background: radial-gradient(
        ellipse at center,
        rgba(57,255,20,0.55) 0%,
        rgba(57,255,20,0.25) 35%,
        rgba(255,255,255,0.15) 60%,
        rgba(255,255,255,0) 100%
    );
}

/* LIGHT MODE Shine */
html[data-bs-theme="light"] .msn-btn::after {
    background: radial-gradient(
        ellipse at center,
        rgba(57,255,20,0.35) 0%,
        rgba(57,255,20,0.15) 30%,
        rgba(255,255,255,0.25) 60%,
        rgba(255,255,255,0) 100%
    );
}

/* LIGHT MODE Buttons */
html[data-bs-theme="light"] .msn-btn {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.25);
    color: #2a7f10;
    box-shadow:
        0 0 8px rgba(0,0,0,0.15),
        inset 0 0 6px rgba(255,255,255,0.6);
}

html[data-bs-theme="light"] .msn-btn:hover {
    background: #eaeaea;
    border-color: #39ff14;
    box-shadow:
        0 0 12px rgba(57,255,20,0.45),
        0 0 20px rgba(57,255,20,0.25);
}

.mobile-sticky-nav {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 60%,
        rgba(0,0,0,0.25) 100%
    );
}

@media (max-width: 767px) {
    body {
        padding-bottom: 80px;
    }
}

@media (max-width: 991px) {
	.mini-nav {
		padding: 15px;
	}
	.mini-nav-limit {

	}
}

/* Standard: Mobile-Header ausblenden */
.mobile-header,
.mobile-search-btn {
    display: none;
}

/* MOBILE */
@media (max-width: 767px) {
    #logobar .logobar-search,
    #logobar .logobar-icons,
    #logobar #themeToggle {
        display: none !important;
    }

    .mobile-header {
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 10px 14px;
        position: relative;
        z-index: 9999;
    }

    .mobile-logo img {
		max-height: 79px;
		max-width: 250px;
        display: block;
    }

    .mobile-header-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }

    .mobile-search-btn,
    .mobile-toggle-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 2px solid rgba(57,255,20,0.45);
        background: rgba(0,0,0,0.55);
        color: #39ff14;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none !important;
    }

    /* Unterstrich komplett entfernen */
    .mobile-search-btn i {
        text-decoration: none !important;
    }
	
	.mobile-search-btn i {
		font-size: 20px !important;
		line-height: 1 !important;
	}

	.mobile-toggle-btn i {
		font-size: 26px !important;
		line-height: 1 !important;
		padding: 4px !important;
	}
	
	.mobile-search-btn i {
		transform: translateY(1px);
	}

	.mobile-toggle-btn i {
		transform: translateY(-1px);
	}
	
	@keyframes neonPulse {
		0% {
			box-shadow: 0 0 6px rgba(57,255,20,0.4),
						0 0 12px rgba(57,255,20,0.25);
		}
		50% {
			box-shadow: 0 0 10px rgba(57,255,20,0.7),
						0 0 18px rgba(57,255,20,0.45);
		}
		100% {
			box-shadow: 0 0 6px rgba(57,255,20,0.4),
						0 0 12px rgba(57,255,20,0.25);
		}
	}

	.mobile-search-btn {
		animation: neonPulse 2.8s ease-in-out infinite;
	}

	@keyframes logoPulse {
		0% {
			filter: drop-shadow(0 0 6px rgba(57,255,20,0.45))
					drop-shadow(0 0 12px rgba(57,255,20,0.25));
		}
		50% {
			filter: drop-shadow(0 0 10px rgba(57,255,20,0.75))
					drop-shadow(0 0 18px rgba(57,255,20,0.45));
		}
		100% {
			filter: drop-shadow(0 0 6px rgba(57,255,20,0.45))
					drop-shadow(0 0 12px rgba(57,255,20,0.25));
		}
	}

	.mobile-logo img {
		animation: logoPulse 3.5s ease-in-out infinite;
	}

	.mobile-toggle-btn {
		animation: 
			cyberGlow 3s infinite linear,
			neonPulse 2.8s ease-in-out infinite;
	}
	
	@keyframes cyberGlow {
		0%   { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
		33%  { box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; }
		66%  { box-shadow: 0 0 8px #ff00ff, 0 0 16px #ff00ff; }
		100% { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
	}
}

.mobile-logo img {
    filter: drop-shadow(0 0 6px rgba(57,255,20,0.55))
            drop-shadow(0 0 12px rgba(57,255,20,0.35));
}

.mobile-logo {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

@keyframes logoZoomIn {
    0% {
        transform: scale(0.88);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.mobile-logo img {
    animation: logoZoomIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mobile-logo::after {
    content: "";
    position: absolute;
    top: -130%;
    left: -90%;
    width: 25%;
    height: 350%;
	background: radial-gradient(
		ellipse at center,
		rgba(57,255,20,0.0) 0%,
		rgba(57,255,20,0.15) 30%,
		rgba(255,255,255,0.35) 50%,
		rgba(57,255,20,0.15) 70%,
		rgba(57,255,20,0.0) 100%
	);
    transform: rotate(28deg);
    animation: logoColorShine 5.8s ease-in-out infinite;
    pointer-events: none;
}


@keyframes logoColorShine {
    0% {
        top: -120%;
        left: -80%;
    }
    100% {
        top: 120%;
        left: 80%;
    }
}

@keyframes logoPulse {
    0% {
        filter: drop-shadow(0 0 6px rgba(57,255,20,0.45));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(57,255,20,0.75));
    }
    100% {
        filter: drop-shadow(0 0 6px rgba(57,255,20,0.45));
    }
}

.mobile-logo img {
    animation: logoZoomIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               logoPulse 3.5s ease-in-out infinite;
}

.shine-wrapper {
    position: relative;
    overflow: hidden;
}

.shine-wrapper::after {
    animation-delay: calc(-1s * var(--rand));
}

.shine-wrapper::after {
    content: "";
    position: absolute;
    top: -130%;
    left: -90%;
    width: 25%;
    height: 350%;
	background: radial-gradient(
		ellipse at center,
		rgba(57,255,20,0.0) 0%,
		rgba(57,255,20,0.15) 30%,
		rgba(255,255,255,0.35) 50%,
		rgba(57,255,20,0.15) 70%,
		rgba(57,255,20,0.0) 100%
	);
    transform: rotate(28deg);
    animation: miniNavShine 4.8s ease-in-out infinite,
	shineMove 4.8s cubic-bezier(0.15, 0.30, 0.85, 1) infinite;
    pointer-events: none;
}

@keyframes shineMove {
    0%   { top: -140%; left: -100%; }
    100% { top: 140%; left: 100%; }
}

@keyframes miniNavShine {
    0% {
        top: -130%;
        left: -90%;
    }
    100% {
        top: 130%;
        left: 90%;
    }
}

.mini-left.mobile-logo img {
    animation: logoZoomIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               logoPulse 3.5s ease-in-out infinite;
}

@keyframes logoZoomIn {
    0% {
        transform: scale(0.88);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes logoPulse {
    0% {
        filter: drop-shadow(0 0 6px rgba(57,255,20,0.45));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(57,255,20,0.75));
    }
    100% {
        filter: drop-shadow(0 0 6px rgba(57,255,20,0.45));
    }
}

.mini-left.shine-wrapper::after {
    content: "";
    position: absolute;
    top: -130%;
    left: -90%;
    width: 40%;
    height: 260%;
    background: radial-gradient(
        ellipse at center,
        rgba(57,255,20,0.0) 0%,
        rgba(57,255,20,0.18) 25%,
        rgba(255,255,255,0.35) 50%,
        rgba(57,255,20,0.18) 75%,
        rgba(57,255,20,0.0) 100%
    );
    transform: rotate(28deg);
    animation: shineMove 4.8s cubic-bezier(0.15, 0.30, 0.85, 1) infinite;
    animation-delay: calc(-1s * var(--rand));
    pointer-events: none;
}

@keyframes shineMove {
    0%   { top: -130%; left: -90%; }
    100% { top: 130%; left: 90%; }
}

.mini-left .mobile-logo {
    position: relative;
    display: inline-block;
}

.mini-left .mobile-logo,
.mini-left .mobile-logo img {
    animation:
        logoZoomIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        logoPulse 3.8s ease-in-out infinite !important;
}


@keyframes logoZoomIn {
    0% {
        transform: scale(0.88);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes logoPulse {
    0% {
        filter: drop-shadow(0 0 6px rgba(57,255,20,0.45));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(57,255,20,0.75));
    }
    100% {
        filter: drop-shadow(0 0 6px rgba(57,255,20,0.45));
    }
}

@keyframes logoPulseColor {
    0% {
        filter: drop-shadow(0 0 4px rgba(57,255,20,0.45))
                drop-shadow(0 0 8px rgba(57,255,20,0.35));
    }
    25% {
        filter: drop-shadow(0 0 6px rgba(255,255,255,0.55))
                drop-shadow(0 0 12px rgba(255,255,255,0.45));
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(0,255,255,0.55))
                drop-shadow(0 0 14px rgba(0,255,255,0.45));
    }
    75% {
        filter: drop-shadow(0 0 6px rgba(255,255,255,0.55))
                drop-shadow(0 0 12px rgba(255,255,255,0.45));
    }
    100% {
        filter: drop-shadow(0 0 4px rgba(57,255,20,0.45))
                drop-shadow(0 0 8px rgba(57,255,20,0.35));
    }
}

.offcanvas-body select.form-select:hover {
    border-color: #39ff14 !important;
    box-shadow: 0 0 12px rgba(57,255,20,0.45);
}

html[data-bs-theme="light"] .offcanvas-body select.form-select {
    background: rgba(0, 0, 0, 0.65) !important;
    color: #eafff0 !important;
    border: 1px solid rgba(57,255,20,0.45) !important;
}

html[data-bs-theme="dark"] .offcanvas-body select.form-select {
    background: rgba(0, 0, 0, 0.45) !important;
    color: #d8ffe0 !important;
    border: 1px solid rgba(57,255,20,0.35) !important;
}

/* FOOTER – Grunddesign */
#layout_footer.footer-area {
    background-color: transparent !important;
}

.footer-area {
    position: relative;
}

.footer-area {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.10),
        rgba(0,0,0,0.20)
    ) !important;
    color: var(--footer-color) !important;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.35),
        inset 0 -2px 4px rgba(0,0,0,0.45),
        0 0 12px rgba(0,0,0,0.25);
    padding-top: 25px;
    padding-bottom: 15px;
}


.footer-area .footer-heading {
    border-bottom: 0 !important;
    position: relative;
    color: var(--footer-heading) !important;
    font-weight: 700;
    font-size: 1.15rem;
    padding-bottom: 6px;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
	text-shadow: 0 0 6px rgba(57,255,20,0.35);
}

/* Footer – dezenter Chrome-Glow-Streifen oben */
.footer-area::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.45),
        rgba(255,255,255,0.25)
    );
    box-shadow:
        0 0 6px rgba(255,255,255,0.25),
        0 2px 4px rgba(0,0,0,0.35);
    pointer-events: none;
    z-index: 2;
}

.footer-area .footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.35),
        rgba(0,0,0,0.35)
    );
    box-shadow: 0 0 6px rgba(255,255,255,0.25);
}

.footer-area a {
    color: var(--footer-link) !important;
    text-decoration: none !important;
    transition: color .2s ease, text-shadow .2s ease;
}

.footer-area a:hover {
    text-shadow: 0 0 6px rgba(255,255,255,0.35);
}

/* Neon-Hover für alle Footer-Links in allen Boxen */
.footer-area .box-cont a,
.footer-area .box-info a,
.footer-area .box-misc a {
    color: var(--footer-link) !important;
    text-decoration: none !important;
    transition: text-shadow .25s ease, color .25s ease;
}

.footer-area .box-cont a:hover,
.footer-area .box-info a:hover,
.footer-area .box-misc a:hover {
    color: var(--footer-link) !important;
    text-shadow: 0 0 12px rgba(57,255,20,0.75);
}

/* Social Icons – Container */
.footer-area .content_box_social {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* Social Buttons */
.footer-area .content_box_social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6px;
    height: auto;
    border-radius: 12px;
    background: rgba(57,255,20,0.10);
    border: 1px solid rgba(57,255,20,0.20);
    transition: background .3s ease, box-shadow .3s ease, transform .6s ease;
}

/* Icon selbst */
.footer-area .content_box_social a i {
    font-size: 26px;
    opacity: 0.75;
    transform-origin: center;
    text-shadow:
        0 1px 1px rgba(255,255,255,0.6),
        0 -1px 1px rgba(0,0,0,0.35);
    transition: opacity .4s ease, transform .8s ease-in-out;
}

/* Hover: drehen + vergrößern + Neon-Hintergrund */
.footer-area .content_box_social a:hover {
    background: rgba(57,255,20,0.25);
    box-shadow: 0 0 12px rgba(57,255,20,0.45);
    transform: scale(1.15);
}

.footer-area .content_box_social a:hover i {
    opacity: 1;
    transform: rotate(360deg) scale(1.15);
}

.footer-area .content_box_social .btn {
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.25);
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.12),
        rgba(0,0,0,0.25)
    );
    color: var(--footer-color) !important;
    transition: all .25s ease;
}

.footer-area .content_box_social .btn:hover {
    background: rgba(255,255,255,0.20);
    box-shadow: 0 0 10px rgba(255,255,255,0.25);
    color: #000 !important;
}

:root[data-bs-theme="dark"] .footer-area .content_box_social a {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(0,0,0,0.35)
    );
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.15),
        inset 0 -2px 3px rgba(0,0,0,0.45),
        0 1px 2px rgba(0,0,0,0.45);
}

/* Hover im Dark-Mode */
:root[data-bs-theme="dark"] .footer-area .content_box_social a:hover {
    background: rgba(57,255,20,0.25);
    box-shadow:
        0 0 14px rgba(57,255,20,0.55),
        inset 0 1px 2px rgba(255,255,255,0.15),
        inset 0 -2px 3px rgba(0,0,0,0.45);
}

:root[data-bs-theme="light"] .footer-area .content_box_social a {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.65),
        rgba(0,0,0,0.08)
    );
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -2px 3px rgba(0,0,0,0.15),
        0 1px 2px rgba(0,0,0,0.10);
}

/* Hover im Light-Mode */
:root[data-bs-theme="light"] .footer-area .content_box_social a:hover {
    background: rgba(57,255,20,0.25);
    box-shadow:
        0 0 14px rgba(57,255,20,0.55),
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -2px 3px rgba(0,0,0,0.15);
}

:root[data-bs-theme="dark"] .footer-payments span {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(0,0,0,0.35)
    );
    padding: 8px 10px;
	border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.15),
        inset 0 -2px 3px rgba(0,0,0,0.45),
        0 1px 2px rgba(0,0,0,0.45);
}

/* Dark-Mode Payment Buttons – Hover wie Social-Schalter */
:root[data-bs-theme="dark"] .footer-payments span:hover {
    background: rgba(57,255,20,0.25);
    transform: scale(1.15);
    box-shadow:
        0 0 14px rgba(57,255,20,0.55),
        inset 0 1px 2px rgba(255,255,255,0.15),
        inset 0 -2px 3px rgba(0,0,0,0.45);
}

/* WICHTIG: Icon selbst NICHT mehr vergrößern */
.footer-payments img:hover {
    transform: none !important;
}

:root[data-bs-theme="light"] .footer-area .content_box_payment img {
    filter: brightness(0.95);
}

/* Payment-Container */
.footer-payments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Jedes Icon-Element */
.footer-payments span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Bilder */
.footer-payments img {
    height: 25px;
    width: auto;
    filter: none !important;
    opacity: 1 !important;
    image-rendering: auto;
    transition: transform .25s ease, opacity .25s ease;
}

/* Hover */
.footer-payments img:hover {
	text-shadow:
        0 1px 1px rgba(255,255,255,0.25),
        0 -1px 1px rgba(0,0,0,0.45);
    transform: scale(1.10);
}

/* Light-Mode Payment Buttons – Chrome Look */
:root[data-bs-theme="light"] .footer-payments span {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.65),
        rgba(0,0,0,0.08)
    );
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -2px 3px rgba(0,0,0,0.15),
        0 1px 2px rgba(0,0,0,0.10);
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* Hover – exakt wie Social-Schalter */
:root[data-bs-theme="light"] .footer-payments span:hover {
    background: rgba(57,255,20,0.25);
    transform: scale(1.15);
    box-shadow:
        0 0 14px rgba(57,255,20,0.55),
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -2px 3px rgba(0,0,0,0.15);
}

/* Icon selbst NICHT vergrößern */
:root[data-bs-theme="light"] .footer-payments img:hover {
    transform: none !important;
}

/* Hover – leicht vergrößern */
.footer-area .content_box_payment img:hover {
    transform: scale(1.10);
}

/* Kontakt-Box Grundlayout */
/* Kontakt-Box Schriftfarbe fixieren – verhindert Bootstrap-Überschreibung */
.footer-area .box_kon,
.footer-area .box_kon * {
    color: var(--footer-color) !important;
}

.footer-area .box_kon {
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 500;
    line-height: 1.45;
    opacity: 0.95;
    transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

/* Kontakt-Box Zeilen */
.footer-area .box_kon .kon-item {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.footer-area .box_kon .kon-item:last-child {
    margin-bottom: 0;
}

/* Kontakt-Box Links */
.footer-area .box_kon .kon-link {
    color: var(--footer-color);
    text-decoration: none;
}

/* Phosphor Icons – Grundlayout */
.footer-area .box_kon .kon-item i {
    font-size: 20px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}

/* Mini-Hover für Icons */
.footer-area .box_kon .kon-item:hover i {
    transform: scale(1.15);
}

:root[data-bs-theme="light"] .footer-area .box_kon {
    background: linear-gradient(180deg, rgba(255,255,255,0.65), rgba(0,0,0,0.08));
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -2px 3px rgba(0,0,0,0.15),
        0 1px 2px rgba(0,0,0,0.10);
}

/* Light-Mode Icon Chrome-Effekt */
:root[data-bs-theme="light"] .footer-area .box_kon .kon-item i {
    color: var(--footer-color);
    text-shadow:
        0 1px 1px rgba(255,255,255,0.6),
        0 -1px 1px rgba(0,0,0,0.25);
}

/* Light-Mode Hover */
:root[data-bs-theme="light"] .footer-area .box_kon:hover {
    background: rgba(57,255,20,0.20);
    transform: scale(1.03);
    box-shadow:
        0 0 12px rgba(57,255,20,0.45),
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -2px 3px rgba(0,0,0,0.15);
}

:root[data-bs-theme="dark"] .footer-area .box_kon {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.35));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.15),
        inset 0 -2px 3px rgba(0,0,0,0.45),
        0 1px 2px rgba(0,0,0,0.45);
}

/* Dark-Mode Icon Chrome-Effekt */
:root[data-bs-theme="dark"] .footer-area .box_kon .kon-item i {
    color: var(--footer-color);
    text-shadow:
        0 1px 1px rgba(255,255,255,0.25),
        0 -1px 1px rgba(0,0,0,0.55);
}

/* Dark-Mode Hover */
:root[data-bs-theme="dark"] .footer-area .box_kon:hover {
    background: rgba(57,255,20,0.18);
    transform: scale(1.03);
    box-shadow:
        0 0 12px rgba(57,255,20,0.55),
        inset 0 1px 2px rgba(255,255,255,0.15),
        inset 0 -2px 3px rgba(0,0,0,0.45);
}

/* Footer – Metallkante unten */
.footer-area::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.35),
        rgba(0,0,0,0.45),
        rgba(255,255,255,0.25)
    );
    box-shadow:
        0 -1px 2px rgba(0,0,0,0.4),
        0 1px 2px rgba(255,255,255,0.25);
    pointer-events: none;
}

/* Copyright – dezenter Glanz */
.footer-area .footer-copy {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--footer-color) !important;
    opacity: 0.6;
    text-shadow:
        0 0 1px rgba(255,255,255,0.2),
        0 1px 1px rgba(0,0,0,0.35),
        0 -1px 1px rgba(255,255,255,0.1);
}

.footer-area .footer-copy-link,
.copyright:hover a {
    color: var(--footer-link) !important;
    font-weight: 600;
}

.footer-area .mod_copyright {
    margin-top: 5px !important;
    padding-bottom: 5px !important;
}

.copyright {
	margin: -25px 0 0 0 !important;
	min-height: 20px !important;
}

.copyright, .copyright a {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--footer-color) !important;
    opacity: 0.75 !important;
    text-shadow:
        0 0 1px rgba(255,255,255,0.2),
        0 1px 1px rgba(0,0,0,0.35),
        0 -1px 1px rgba(255,255,255,0.1) !important;
}

.cop_magenta {
	color: rgb(177, 52, 126) !important;
}

[data-bs-theme="dark"] .footer-area .content_box_social .btn:hover {
    color: #fff !important;
}

@media (max-width: 767px) {
  .copyright, .copyright a, .footer-area .footer-copy {
    font-size: 0.5rem !important;
    font-weight: 400 !important;
  }
}

.zoom-wrapper {
    display: inline-block;
    overflow: hidden;
    border-radius: 6px;
}

.zoom-wrapper img {
    display: block;
}

.zoom-wrapper img {
    transition: transform .45s cubic-bezier(0.33, 1, 0.68, 1),
                filter .45s cubic-bezier(0.33, 1, 0.68, 1);
}

.zoom-wrapper img.zoom-hover:hover {
    transform: scale(1.25);
    filter: brightness(1.05) contrast(1.01);
}

li.withdraw_link .nav-link {
	font-weight: bold;
    color: #b30000 !important;
    border: 2px solid #b30000;
    padding: 6px 10px;
    border-radius: 4px;
    background-color: #ffe6e6;
	box-shadow: 0 0 6px rgba(204, 0, 0, 0.3);
	transition: background-color .6s cubic-bezier(.4,0,.2,1),
            color .6s cubic-bezier(.4,0,.2,1),
            border-color .6s cubic-bezier(.4,0,.2,1);
}

li.withdraw_link .nav-link:hover {
	background: #cc0000 !important;
    color: #ffffff !important;
}

/* Widerrufslink: Buttons */
.btn-primary {
    background-color: #e91e63;
    border-color: #e91e63;
}

.btn-primary:hover {
    background-color: #c2185b;
    border-color: #c2185b;
}

/* Rechte Sticky Navbar */
.right-sticky-nav {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 99998;
}

/* Buttons */
.right-sticky-nav .rsn-item {
    width: 46px;
    height: 46px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.12),
        rgba(0,0,0,0.25)
    );
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navigation-hover);
    text-decoration: none;
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
    transform: perspective(600px) rotateX(0deg);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    position: relative;
    overflow: hidden;
}

/* Hover – Metall + dezenter Neon-Glow */
.right-sticky-nav .rsn-item:hover {
    transform: perspective(600px) rotateX(6deg) translateX(-6px);
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.30),
        rgba(255,255,255,0.12),
        rgba(0,0,0,0.25)
    );
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.35),
        inset 0 -3px 6px rgba(0,0,0,0.45),
        0 0 10px rgba(57,255,20,0.45),
        0 0 18px rgba(57,255,20,0.25);
}

/* Icons */
.right-sticky-nav i {
    font-size: 24px;
}

/* Nur Desktop sichtbar */
@media (max-width: 667px) {
    .right-sticky-nav {
        display: none;
    }
}

@media (max-width: 667px) {
    .mobil-close {
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
}

.msn-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 85%;
    max-width: 380px;
    background: var(--bs-body-bg);
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform .35s ease;
    overflow-y: auto;
}

.msn-panel.right-panel {
    right: 0;
    left: auto;
    transform: translateX(100%);
}

.msn-panel.top-panel {
    top: 0;
    left: 0;
    right: 0;
    height: 80%;
    width: 100%;
    transform: translateY(-100%);
}

.msn-panel.active {
    transform: translateX(0);
}

.top-panel.active {
    transform: translateY(0);
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: var(--bs-body-bg);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    z-index: 9999;
}

.mobile-bottom-nav a {
    text-decoration: none !important;
}

.bottom-btn {
    flex: 1;
    text-align: center;
    padding: 8px 0;
}

.icon-wrap {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
}

.icon-wrap i {
    font-size: 1.4rem;
    line-height: 28px;
    display: block;
    text-align: center;
}

.icon-wrap .mini-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: red;
    color: white;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 10px;
    line-height: 1;
    z-index: 5;
}

.center-btn {
    transform: translateY(-10px);
    background: var(--bs-body-bg);
    border-radius: 50%;
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    height: 70px;
    padding: 8px 20px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 60%,
        rgba(0,0,0,0.25) 100%
    );

    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(57,255,20,0.35);

    z-index: 99999;
}

.mobile-bottom-nav .bottom-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    border: 1px solid rgba(57,255,20,0.45);

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;

    box-shadow:
        0 0 8px rgba(57,255,20,0.35),
        inset 0 0 6px rgba(255,255,255,0.05);

    transition: 0.25s ease;
}

.mobile-bottom-nav .bottom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-bottom-nav .bottom-btn:hover {
    background: rgba(0,0,0,0.95);
    border-color: rgba(57,255,20,0.85);
    box-shadow:
        0 0 12px rgba(57,255,20,0.55),
        0 0 20px rgba(57,255,20,0.35);
    transform: translateY(-3px);
}

.mobile-bottom-nav .bottom-btn::after {
    content: "";
    position: absolute;
    top: -160%;
    left: -90%;
    width: 70%;
    height: 260%;
    background: radial-gradient(
        ellipse at center,
        rgba(57,255,20,0.55) 0%,
        rgba(57,255,20,0.25) 35%,
        rgba(255,255,255,0.15) 60%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(28deg);
    pointer-events: none;
    animation: neonShine 4s ease-in-out infinite 1s;
}

@keyframes neonShine {
    0% { top: -160%; left: -90%; }
    100% { top: 160%; left: 90%; }
}

.mobile-bottom-nav .bottom-btn i {
    color: #39ff14;
    font-size: 1.4rem;
    text-shadow: 0 0 8px rgba(57,255,20,0.45);
}

.icon-wrap {
    position: relative;
    width: 28px;
    height: 28px;
}

.mini-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #39ff14;
    color: #000;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(57,255,20,0.55);
}

.mobile-bottom-nav .center-btn {
    width: 78px !important;
    height: 78px !important;
    z-index: 20;

    box-shadow:
        0 0 12px rgba(57,255,20,0.55),
        0 0 24px rgba(57,255,20,0.35),
        inset 0 0 10px rgba(255,255,255,0.08);
}

.mobile-bottom-nav .center-btn:hover {
    transform: translateY(-4px) scale(1.05);
}

html[data-bs-theme="light"] .mobile-bottom-nav {
    background: rgba(255,255,255,0.85);
    border-top: 1px solid rgba(0,0,0,0.15);
}

html[data-bs-theme="light"] .bottom-btn {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.25);
    color: #2a7f10;
    box-shadow:
        0 0 8px rgba(0,0,0,0.15),
        inset 0 0 6px rgba(255,255,255,0.6);
}

html[data-bs-theme="light"] .bottom-btn:hover {
    background: #eaeaea;
    border-color: #39ff14;
    box-shadow:
        0 0 12px rgba(57,255,20,0.45),
        0 0 20px rgba(57,255,20,0.25);
}

html[data-bs-theme="light"] .bottom-btn i {
    color: #2a7f10;
}

html[data-bs-theme="light"] .mini-badge {
    background: #d81818;
    color: #fff;
}

/* Nur auf Mobile (Hochkant) → Menü von oben nach unten */
@media (max-width: 767px) and (orientation: portrait) {
	
	#canvas_wish.offcanvas,
	#canvas_cart.offcanvas {
		transform: translateX(100%);
	}
	#canvas_wish.offcanvas.show,
	#canvas_cart.offcanvas.show {
		transform: translateX(0);
	}

	#account.offcanvas,
	#settings.offcanvas {
		transform: translateX(-100%);
	}
	#account.offcanvas.show,
	#settings.offcanvas.show {
		transform: translateX(0);
	}

	#my-menu-panel.offcanvas {
		transform: translateY(-100%);
	}
	#my-menu-panel.offcanvas.show {
		transform: translateY(0);
	}

    /* Startposition: oben außerhalb */
    #my-offcanvas-menu {
        transform: translateY(-100%) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 91vh;
        top: 0;
        bottom: auto;
        transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
    }

    /* Wenn geöffnet → nach unten fahren */
    #my-offcanvas-menu.open {
        transform: translateY(0) !important;
    }
}

.mobile-bottom-nav .bottom-btn {
    flex: 0 0 auto !important;
    width: 54px;
    height: 54px;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-bottom-nav .bottom-btn i {
    font-size: 1.4rem !important;
}

.mobile-bottom-nav .menue-btn {
    flex: 0 0 auto !important;
    width: 78px !important;
    height: 78px !important;
    border-radius: 50% !important;
    padding: 0 !important;
}

.mobile-bottom-nav .menue-btn i {
	font-size: 1.8rem !important;
}

/* Firefox Mobile Fix – nur bis 541px Breite, nur Hochformat */
@media (max-width: 541px) and (orientation: portrait) {
    @-moz-document url-prefix() {
		
        /* WICHTIG: Innenabstand erzwingen, damit Buttons nicht rausfallen */
        .mobile-bottom-nav {
            padding-left: 12px !important;
            padding-right: 12px !important;
            justify-content: space-between !important;
        }

        /* Buttons dürfen NICHT gestreckt werden */
        .mobile-bottom-nav .bottom-btn {
            flex: 0 0 auto !important;
            margin: 0 !important; /* Firefox mag margin nicht am Rand */
        }

        /* Falls Rundung in Firefox nicht perfekt ist */
        .mobile-bottom-nav .bottom-btn {
            border-radius: 50% !important;
        }
    }
}

/* MOBILE HEADER – nur Portrait, nur bis 541px */
@media (max-width: 541px) and (orientation: portrait) {

    /* Mobile-Header sichtbar */
    .mobile-logo-header {
        display: block !important;
        width: 100%;
        padding: 6px 12px;
    }

    /* Logo größer + zentriert */
    .mobile-logo-header .nav-logo img {
        height: 56px !important;
        margin: 0 auto 6px auto;
        display: block;
    }

    /* Suchfeld + Toggle in einer Zeile */
    .mobile-header-row {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    /* Suchfeld */
    .mobile-header-row form,
    .mobile-header-row .search {
        flex: 1;
    }

    /* Toggle */
    .mobile-header-row #themeToggle {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex !important;
        justify-content: center;
        align-items: center;
    }
}

/* Ab 540px wieder normaler Header */
@media (min-width: 542px), (orientation: landscape) {
    .mobile-logo-header {
        display: none !important;
    }
	
	.mobil-close { 
		display: unset !important; 
	} 
	
	.ni-theme-toggle-btn {
		width: 25px !important;
		height: 25px !important;
	}
}

@media (max-width: 1023px) {
	#top {
		display: none !important;
	}
}

@media (max-height: 539px) and (orientation: landscape) { 
	.stickybar { 
		display: none !important; 
	} 
}

@media (max-width: 541px) {
	.mobil-close { 
		display: unset !important; 
	} 
}

/* Shine Swipe über den gesamten Such-Button */
.mobile-header-row .search-button,
.mobile-header-row button[type="submit"],
.mobile-header-row .search-icon-wrapper {
    position: relative;
    overflow: hidden;
}

.mobile-header-row .search-button::after,
.mobile-header-row button[type="submit"]::after,
.mobile-header-row .search-icon-wrapper::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.25) 40%,
        rgba(255,255,255,0.75) 50%,
        rgba(255,255,255,0.25) 60%,
        transparent 100%
    );
    transform: translateX(-120%) rotate(25deg);
    animation: shineSwipeFull 2.8s infinite ease-in-out;
}

@keyframes shineSwipeFull {
    0%   { transform: translateX(-120%) rotate(25deg); }
    60%  { transform: translateX(120%) rotate(25deg); }
    100% { transform: translateX(120%) rotate(25deg); }
}

@keyframes cyberGlow {
    0%   { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
    33%  { box-shadow: 0 0 8px #00eaff, 0 0 16px #00eaff; }
    66%  { box-shadow: 0 0 8px #ff00ff, 0 0 16px #ff00ff; }
    100% { box-shadow: 0 0 8px #39ff14, 0 0 16px #39ff14; }
}

/* Toggle Button – Cyber Glow */
#themeToggle {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    z-index: 10;
}

/* Glow-Ring */
#themeToggle::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    animation: cyberGlow 3.6s linear infinite;
    animation-delay: 0.0s;
}

@media (min-width: 992px) {
    .desktop-header-grid {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "logo search"
            "logo icons";
        column-gap: 20px !important;
        row-gap: 10px !important;
        align-items: center !important;
    }

    .desktop-header-grid .header-logo {
        grid-area: logo !important;
		height: 150px !important;
		max-height: 200px !important;
		max-width: 400px !important;
		min-height: 120px !important;
    }

    .desktop-header-grid .header-search {
        grid-area: search !important;
        max-width: 540px !important;
        justify-self: end !important;
        width: 100% !important;
    }
	
    .desktop-header-grid .header-icons {
        grid-area: icons !important;
		color: #39ff14 !important;
        display: flex !important;
        justify-content: flex-end !important;
		align-items: flex-start !important;
        gap: 15px !important;
		padding-bottom: 40px !important;
        flex-wrap: nowrap !important;
    }

    .desktop-header-grid .header-search .search {
        width: 100% !important;
    }
	
	#toggle_wishlist, #toggle_cart {
		padding: 0px !important;
		align-items: flex-start !important;
		border-bottom: none !important;
	}

	.mini-nav #themeToggle {
		margin-right: 14px;
		margin-left: 10px;
		margin-top: 0px;
	}
	
	#themeToggle {
		margin-right: 14px;
		margin-left: 14px;
		margin-top: 7px;
	}
	
    /* Grundfarbe */
    .header-icons .nav-link,
    .header-icons button,
    .header-icons i,
    .header-icons span {
        color: #39ff14 !important;
        transition: color .2s ease, transform .2s ease;
    }

    /* Hover – dunkleres Neon-Grün */
    .header-icons .nav-link:hover,
    .header-icons button:hover,
    .header-icons .nav-link:hover i,
    .header-icons button:hover i,
    .header-icons .nav-link:hover span,
    .header-icons button:hover span {
        color: #2ecc10 !important;
        transform: scale(1.08);
    }
	
	.mini-logo-wrapper .min-logo {
		padding-left: 15px;
	}

}

/* Nur anzeigen, wenn Höhe größer als 499px */
@media (max-height: 499px) {
    .right-sticky-nav {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .desktop-header-grid {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "logo search"
            "logo icons";
        column-gap: 20px !important;
        row-gap: 10px !important;
        align-items: center !important;
    }

    .desktop-header-grid .header-logo {
        grid-area: logo !important;
		height: 150px !important;
		max-height: 200px !important;
		max-width: 400px !important;
		min-height: 120px !important;
    }

    .desktop-header-grid .header-search {
        grid-area: search !important;
        max-width: 540px !important;
        justify-self: end !important;
        width: 100% !important;
    }
	
    .desktop-header-grid .header-icons {
        grid-area: icons !important;
		color: #39ff14 !important;
        display: flex !important;
        justify-content: flex-end !important;
		align-items: flex-start !important;
        gap: 15px !important;
		padding-bottom: 40px !important;
        flex-wrap: nowrap !important;
    }

    .desktop-header-grid .header-search .search {
        width: 100% !important;
    }
	
	#toggle_wishlist, #toggle_cart {
		padding: 0px !important;
		align-items: flex-start !important;
		border-bottom: none !important;
	}

	.mini-nav #themeToggle {
		margin-right: 14px;
		margin-left: 10px;
		margin-top: 0px;
	}
	
	#themeToggle {
		margin-right: 14px;
		margin-left: 14px;
		margin-top: 0px;
	}
	
    /* Grundfarbe */
    .header-icons .nav-link,
    .header-icons button,
    .header-icons i,
    .header-icons span {
        color: #39ff14 !important;
        transition: color .2s ease, transform .2s ease;
    }

    /* Hover – dunkleres Neon-Grün */
    .header-icons .nav-link:hover,
    .header-icons button:hover,
    .header-icons .nav-link:hover i,
    .header-icons button:hover i,
    .header-icons .nav-link:hover span,
    .header-icons button:hover span {
        color: #2ecc10 !important;
        transform: scale(1.08);
    }
	
	.input-group #cat_search {
		display: none;
	}
	.desktop-header-grid .header-search {
		max-width: 310px !important;
	}
	.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(.ni-search-btn) {
		border-top-left-radius: 0.375rem;
		border-bottom-left-radius: 0.375rem;
	}
	.desktop-header-grid .header-icons {
		padding-right: 3px;
	}
	.nav-logo img {
		padding: 10px;
	}
	.mini-logo {
		padding-top: 5px;
	}
	.mini-right {
		margin-right: -30px;
	}
	.mini-left {
		margin-left: -10px;
	}

}

@media (min-width: 360px) and (max-width: 667px) {
	.mini-nav {
		padding-right: 30px;
    }
    .nav-logo img {
        padding: 0px;
    }
}

@media (min-width: 1275px) and (max-width: 1285px) {
    #content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}