/* =========================================================
   Sides4you – Footer-Credit + Pop-up
   Eigenständiger Baustein: sides4you.css + sides4you.js einbinden,
   dann <button data-s4y-oeffnen> irgendwo platzieren.
   ========================================================= */

.s4y-credit {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; color: inherit; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.s4y-credit b {
  font-weight: 800; letter-spacing: -0.02em; color: #f4f1ff;
  background: linear-gradient(90deg, #a78bfa, #7c3aed, #c084fc, #a78bfa);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: s4y-glanz 6s linear infinite;
}
.s4y-credit .s4y-funke { width: 14px; height: 14px; color: #a78bfa; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.s4y-credit:hover .s4y-funke { transform: rotate(90deg) scale(1.2); }
@keyframes s4y-glanz { to { background-position: 300% 0; } }

/* ---------- Pop-up ---------- */
.s4y {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 16px;
  visibility: hidden; pointer-events: none;
  font-family: "Jakarta", system-ui, -apple-system, sans-serif;
  --v1: #7c3aed; --v2: #a78bfa; --v3: #c084fc; --s4y-text: #f4f1ff;
}
.s4y.offen { visibility: visible; pointer-events: auto; }
.s4y-schleier {
  position: absolute; inset: 0; background: rgba(6, 4, 14, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .45s;
}
.s4y.offen .s4y-schleier { opacity: 1; }

.s4y-box {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(560px, 100%); max-height: calc(100svh - 32px); overflow-y: auto;
  padding: clamp(28px, 5vw, 44px);
  border-radius: 28px; color: var(--s4y-text);
  background: #0d0918;
  border: 1px solid rgba(167, 139, 250, .25);
  box-shadow: 0 40px 120px -30px rgba(124, 58, 237, .7), inset 0 1px 0 rgba(255,255,255,.08);
  opacity: 0; transform: translateY(40px) scale(.96);
  transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.s4y.offen .s4y-box { opacity: 1; transform: none; }

/* Animierter Hintergrund: Aurora + Raster + Korn */
.s4y-hg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.s4y-hg i {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .7;
  animation: s4y-schweben 14s ease-in-out infinite alternate;
}
.s4y-hg i:nth-child(1) { width: 340px; height: 340px; background: var(--v1); top: -140px; left: -80px; }
.s4y-hg i:nth-child(2) { width: 280px; height: 280px; background: #db2777; top: 30%; right: -140px; opacity: .35; animation-duration: 18s; animation-delay: -4s; }
.s4y-hg i:nth-child(3) { width: 300px; height: 300px; background: #4f46e5; bottom: -160px; left: 20%; opacity: .5; animation-duration: 16s; animation-delay: -8s; }
@keyframes s4y-schweben {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 30px) scale(1.15); }
  100% { transform: translate(-30px, 50px) scale(.95); }
}
.s4y-hg::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.s4y-hg::after {
  content: ""; position: absolute; inset: 0; opacity: .12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.s4y-zu {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: var(--s4y-text); cursor: pointer;
  transition: background .3s, transform .4s cubic-bezier(.22,1,.36,1);
}
.s4y-zu:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }
.s4y-zu svg { width: 16px; height: 16px; }

.s4y-marke { font-weight: 800; font-size: 18px; letter-spacing: -0.03em; }
.s4y-marke span { color: var(--v2); }
.s4y-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .3); color: #ddd6fe;
}
.s4y-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); animation: s4y-puls 2s infinite; }
@keyframes s4y-puls { 50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } }
.s4y h2 {
  margin: 16px 0 10px; font-size: clamp(28px, 5vw, 38px); line-height: 1.08; font-weight: 700; letter-spacing: -0.035em; color: #fff;
}
.s4y h2 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--v2), var(--v3), #f0abfc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.s4y-text { font-size: 15px; line-height: 1.6; color: rgba(244, 241, 255, .7); }

.s4y-wege { display: grid; gap: 10px; margin-top: 26px; }
.s4y-weg {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 14px 14px 16px; border-radius: 18px; text-decoration: none;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--s4y-text);
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .3s, background .3s;
  opacity: 0; transform: translateY(14px);
}
.s4y.offen .s4y-weg { opacity: 1; transform: none; transition: opacity .6s .15s, transform .6s cubic-bezier(.22,1,.36,1) .15s, border-color .3s, background .3s; }
.s4y.offen .s4y-weg:nth-child(2) { transition-delay: .22s; }
.s4y.offen .s4y-weg:nth-child(3) { transition-delay: .29s; }
.s4y-weg:hover { border-color: rgba(167, 139, 250, .55); background: rgba(167, 139, 250, .08); transform: translateY(-2px) !important; }
.s4y-weg .s4y-ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(167, 139, 250, .14); color: var(--v2);
}
.s4y-weg .s4y-ico svg { width: 22px; height: 22px; }
.s4y-weg b { display: block; font-size: 16px; font-weight: 700; color: #fff; }
.s4y-weg small { display: block; font-size: 13px; color: rgba(244, 241, 255, .6); margin-top: 1px; }
.s4y-weg .s4y-pfeil { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); flex-shrink: 0; transition: transform .4s cubic-bezier(.22,1,.36,1), background .3s; }
.s4y-weg .s4y-pfeil svg { width: 16px; height: 16px; }
.s4y-weg:hover .s4y-pfeil { transform: rotate(-45deg); background: var(--v1); }

.s4y-weg.haupt {
  background: linear-gradient(135deg, var(--v1), #6d28d9 60%, #9333ea);
  border-color: transparent;
  box-shadow: 0 18px 40px -16px rgba(124, 58, 237, .9);
}
.s4y-weg.haupt .s4y-ico { background: rgba(255,255,255,.18); color: #fff; }
.s4y-weg.haupt small { color: rgba(255,255,255,.8); }
.s4y-weg.haupt .s4y-pfeil { background: #fff; color: var(--v1); }
.s4y-weg.haupt:hover { background: linear-gradient(135deg, #8b5cf6, var(--v1) 60%, #a855f7); }
.s4y-weg.haupt:hover .s4y-pfeil { background: #fff; }

.s4y-status { display: inline-flex; align-items: center; gap: 6px; }
.s4y-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; }
.s4y-status.an::before { background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); }

.s4y-fuss { margin-top: 22px; display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: rgba(244, 241, 255, .5); }
.s4y-fuss span { display: inline-flex; align-items: center; gap: 6px; }
.s4y-fuss svg { width: 14px; height: 14px; color: var(--v2); }

body.s4y-gesperrt { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .s4y-hg i, .s4y-credit b { animation: none; }
}