/* Change your brand colors here */
:root{
  --brand-1: #702e78; /* deep violet */
  --brand-2: #964091; /* mid violet */
  --brand-3: #b26fac; /* light violet */
   --neptun-1: #1479BD; /* light violet */
  --text-body: #606060;
  --text-muted: #BBBBBB;
  --bg-page: #ffffff;
    --bg-light: #f0f0f0;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


html, body {
  font-family: 'Poppins', sans-serif!important;
color: #606060;
}
@media (prefers-color-scheme: dark){
  :root{
    --text-body: #e5e7eb;
    --text-muted: #cbd5e1;
    --bg-page: #0b1020;
  }
}


@keyframes float-slow {
  0%   { transform: translateY(0) rotate(-0.2deg); }
  50%  { transform: translateY(-6px) rotate(0.2deg); }
  100% { transform: translateY(0) rotate(-0.2deg); }
}
.animate-float-slow { animation: float-slow 5s ease-in-out infinite; }


.radial-glow-tr {
  position: absolute;
  pointer-events: none;
  /* deutlich größer als der sichtbare Bereich */
  width: 900px;
  height: 900px;
  top: -220px;
  right: -160px;
  border-radius: 9999px;
  background: radial-gradient(
    circle at 70% 25%,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.1) 22%,
    rgba(255,255,255,0.05) 42%,
    rgba(255,255,255,0.03) 58%,
    rgba(255,255,255,0.00) 70%   /* 0% deutlich VOR dem Rand */
  );
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  filter: blur(18px);            /* weicher Saum */
  opacity: .85;
  transition: opacity .3s ease;
}

html, body {
  overflow-x: clip;   /* moderne Variante */
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; } /* Fallback */
}

.input--search::placeholder { color: var(--brand-3); opacity: 1; }
@media (min-width: 1025px) {
.product-grid > :not(:last-child) {
border-right: 1px solid #e5e7eb;
}
}

@media (max-width: 1024px) {
  .product-grid > article:nth-of-type(odd) {
    border-right: 1px solid #e5e7eb;
  }

    .product-grid > article {

    margin-top: 20px;
    }
}

@media (max-width: 640px) {
  .product-grid > article {
    border-right: none !important;

    border-bottom: 1px solid #e5e7eb;
  }
    .product-grid {
    border-bottom: none !important;

  }
}



button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid white !important; /* blaue Fokusfarbe */
  outline-offset: 2px;
}