/* === GRADIENT BOX STYLES (Optimiert & Integriert) === */

/* 1) Basis-Regeln */
.gradient-box {
  display: block; text-decoration: none;
  /* margin: 10px auto; */   /* Entfernt */
  margin-bottom: 20px; /* Vertikaler Abstand */
  /* width: calc(100% - 20px); */ /* Entfernt */
  width: 100%;
  height: var(--h, 45vh);
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  background-color: #eee; /* Platzhalter */
  /* Gradient-Definition per Variable */
  --gradient-definition: linear-gradient(to right, #fff, #000);
  --gradient-opacity: 0.9;
  /* Animation an-/ausschaltbar */
  --gradient-animate: none;
}
.gradient-box::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--gradient-definition);
  opacity: var(--gradient-opacity);
  pointer-events: none;
  background-size: 100% 100%;
  transition: opacity 0.3s ease;
  animation: var(--gradient-animate);
}

/* 2) Moving Background */
.gradient-box .bg-translator {
  position: absolute; inset: 0; z-index: 0; will-change: transform;
}
.gradient-box .moving-background { /* Gilt für das Bild-Div */
  position: absolute; width: 110%; height: 110%; top: -5%; left: -5%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  will-change: transform;
}

/* 3) Inhalts-Container */
.gradient-box > .content {
  position: relative; z-index: 2;
}

/* 4) Gradient-Varianten */
.gradient-box.gradient-1  { --gradient-definition: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%); }
.gradient-box.gradient-2  { --gradient-definition: linear-gradient(90deg, #1CB5E0 0%, #000851 100%); }
.gradient-box.gradient-3  { --gradient-definition: radial-gradient(circle, #e0f2f7 0%, #b0bec5 100%); }
.gradient-box.gradient-4  { --gradient-definition: linear-gradient(135deg, #ff8c00 0%, #ff0080 20%, #ff4500 45%, #40E0D0 60%, #ab47bc 85%, #ff8c00 100%); }
.gradient-box.gradient-5  { --gradient-definition: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); }
.gradient-box.gradient-6  { --gradient-definition: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%); }
.gradient-box.gradient-7  { --gradient-definition: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); }
.gradient-box.gradient-8  { --gradient-definition: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%); }
.gradient-box.gradient-9  { --gradient-definition: linear-gradient(115deg, #d1ff60 0%, #60ffbf 100%); }
.gradient-box.gradient-10 { --gradient-definition: linear-gradient(90deg, rgba(253,146,146,1) 0%, rgba(209,254,212,1) 100%); }

/* 5) Animation nur wenn ausgewählt */
@keyframes gradientWanderDiagonal {
  0%   { background-position:   0%   0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position:   0%   0%; }
}
.gradient-box.animated-gradient::before {
  background-size: 500% 500%;
  --gradient-animate: gradientWanderDiagonal 14s ease infinite;
}