:root {
  --gradient-background-start: #fff;
  --gradient-background-end: #fff;

  --first-color: 120, 198, 255;
  --second-color: 72, 176, 255;
  --third-color: 100, 220, 255;
  --fourth-color: 200, 180, 255;
  --fifth-color: 180, 140, 255;
  --pointer-color: 140, 100, 255;

  --size: 60vmax;
  --blend: soft-light;
}

/* Reset / Layout */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background-image: linear-gradient(
    40deg,
    var(--gradient-background-start),
    var(--gradient-background-end)
  );
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "Inter", sans-serif;
}

/* Logo */

.logo {
  position: relative;
  z-index: 1;
  height: 85px;
  width: auto;
  animation: fade-in .35s ease-out;
}

/* Background gradients */

.gradients {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
}

.gradient {
  position: absolute;
  width: var(--size);
  height: var(--size);
  top: calc(50% - var(--size)/2);
  left: calc(50% - var(--size)/2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  mix-blend-mode: var(--blend);
}

.gradient.first {
  background-image: radial-gradient(circle,
    rgba(var(--first-color), .8),
    rgba(var(--first-color), 0) 50%);
  animation: rot-a 30s linear infinite;
}

.gradient.second {
  background-image: radial-gradient(circle,
    rgba(var(--second-color), .8),
    rgba(var(--second-color), 0) 50%);
  transform-origin: calc(50% - 400px);
  animation: rot-b 40s linear infinite;
}

.gradient.third {
  background-image: radial-gradient(circle,
    rgba(var(--third-color), .8),
    rgba(var(--third-color), 0) 50%);
  transform-origin: calc(50% + 400px);
  animation: rot-a 50s linear infinite;
}

.gradient.fourth {
  background-image: radial-gradient(circle,
    rgba(var(--fourth-color), .8),
    rgba(var(--fourth-color), 0) 50%);
  transform-origin: calc(50% - 200px);
  animation: rot-b 60s linear infinite;
  opacity: .7;
}

.gradient.fifth {
  background-image: radial-gradient(circle,
    rgba(var(--fifth-color), .8),
    rgba(var(--fifth-color), 0) 50%);
  transform-origin: calc(50% - 800px) calc(50% + 800px);
  animation: rot-a 70s linear infinite;
  opacity: .6;
}

/* Cursor follower */

.gradient.pointer {
  background-image: radial-gradient(circle,
    rgba(var(--pointer-color), .85),
    rgba(var(--pointer-color), 0) 55%);
  opacity: .45;
}

/* Animations */

@keyframes rot-a { to { transform: rotate(360deg); } }
@keyframes rot-b { to { transform: rotate(-360deg); } }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Footer link (no underline) */

.legal-footer {
  position: fixed;
  bottom: 14px;
  right: 16px;
  z-index: 2;
  font-size: 11px;
  color: #ddd;

}

.legal-footer button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none; /* keine Unterstreichung */
}

/* Weißes Overlay + weißes Panel */

.legal-panel {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: #ffffff;  /* Overlay weiß */
  display: none;
  align-items: center;
  justify-content: center;
}

.legal-panel.is-open {
  display: flex;
}

.legal-content {
  max-width: 760px;
  background: #ffffff;  /* Panel weiß */
  color: #111;
  padding: 22px 24px;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  line-height: 1.55;
}

.legal-content h2 { margin-bottom: 10px; }
.legal-content p  { margin-bottom: 10px; }

.legal-content .close {
  margin-top: 6px;
  background: #f3f3f3;
  border: 1px solid #ddd;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}