/* ─── Onimai Glowup XXL – Einheitliches Design für alle Seiten ─── */
:root {
  --oni-pink: #ff6fb5;
  --oni-pink-soft: #ff9fd0;
  --oni-pink-dark: #e0007a;
  --oni-cyan: #7ad7ff;
  --oni-violet: #9f87ff;
  --oni-bg-top: #07030b;
  --oni-bg-mid: #140821;
  --oni-bg-bottom: #250b26;
  --oni-card-dark: #1a0f24;
  --oni-border: #3a223f;
  --oni-text: #fdf0ff;
  --oni-text-soft: rgba(255,255,255,.82);
  --oni-muted: #c9b0d6;
  --oni-accent: #ffe2ff;
  --oni-shadow: 0 18px 60px rgba(0,0,0,.75);
  --oni-glow: 0 0 42px rgba(255,111,181,.75);
  --oni-glow-soft: 0 0 60px rgba(255,111,181,.4);
  --oni-glow-strong: 0 0 80px rgba(255,111,181,.6), 0 0 120px rgba(159,135,255,.3);
  --oni-glow-xxl: 0 0 100px rgba(255,111,181,.5), 0 0 160px rgba(159,135,255,.35), 0 0 200px rgba(122,215,255,.2);
  --oni-glow-mega: 0 0 120px rgba(255,111,181,.55), 0 0 200px rgba(159,135,255,.4), 0 0 280px rgba(122,215,255,.25);
  --oni-glow-halo: 0 0 80px rgba(255,111,181,.4), 0 0 160px rgba(159,135,255,.25);
  --oni-glass: rgba(12,6,22,.88);
  --oni-glass-border: rgba(255,111,181,.2);
  --oni-header-glass: rgba(8,4,16,.85);
  --oni-footer-glass: rgba(6,3,14,.92);
  --oni-success: #7cffb8;
  --oni-warn: #ffd66b;
  --oni-danger: #ff7b7b;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', system-ui, sans-serif; }
html { scroll-behavior: smooth; }

/* ─── XXL Scrollbar (Webkit) ─── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
  background: rgba(8,4,16,.9);
  border-radius: 999px;
  box-shadow: inset 0 0 20px rgba(255,111,181,.08);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,111,181,.4), rgba(159,135,255,.35));
  border-radius: 999px;
  border: 2px solid rgba(8,4,16,.5);
  box-shadow: 0 0 20px rgba(255,111,181,.3);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255,111,181,.65), rgba(159,135,255,.55));
  box-shadow: 0 0 40px rgba(255,111,181,.6), 0 0 60px rgba(159,135,255,.3);
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(255,111,181,.75), rgba(159,135,255,.65));
  box-shadow: 0 0 50px rgba(255,111,181,.7);
}
body {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(ellipse 120% 80% at 10% 0%, rgba(255,111,181,.18) 0%, transparent 45%),
    radial-gradient(ellipse 100% 70% at 90% 100%, rgba(159,135,255,.14) 0%, transparent 45%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(122,215,255,.1) 0%, transparent 55%),
    linear-gradient(160deg, var(--oni-bg-top), var(--oni-bg-mid) 40%, var(--oni-bg-bottom) 100%);
  color: var(--oni-text);
  overflow-x: hidden;
  background-size: 140% 140%;
  animation: oniBgMove 40s ease-in-out infinite alternate;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}
body::before {
  background:
    radial-gradient(ellipse 65% 45% at 5% 15%, rgba(255,111,181,.32), transparent 48%),
    radial-gradient(ellipse 55% 40% at 92% 85%, rgba(159,135,255,.28), transparent 48%);
  animation: oniBgOrb1 18s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(ellipse 45% 35% at 72% 8%, rgba(122,215,255,.2), transparent 48%),
    radial-gradient(ellipse 40% 30% at 18% 92%, rgba(255,111,181,.18), transparent 48%);
  animation: oniBgOrb2 22s ease-in-out infinite alternate;
}
a { color: inherit; text-decoration: none; }

::selection {
  background: rgba(255,111,181,.4);
  color: #fff;
  text-shadow: 0 0 16px rgba(255,111,181,.6), 0 0 32px rgba(159,135,255,.3);
}
::-moz-selection {
  background: rgba(255,111,181,.4);
  color: #fff;
}

@keyframes oniBgMove {
  0% { background-position: 0% 0%; }
  50% { background-position: 50% 80%; }
  100% { background-position: 100% 20%; }
}
@keyframes oniBgOrb1 {
  0% { opacity: .4; transform: translate(0, 0) scale(1); }
  100% { opacity: .75; transform: translate(4%, 6%) scale(1.08); }
}
@keyframes oniBgOrb2 {
  0% { opacity: .25; transform: translate(0, 0) scale(1); }
  100% { opacity: .6; transform: translate(-3%, -5%) scale(1.1); }
}

/* ─── Loader (XXL² Glow + Halo) ─── */
.oni-loader {
  position: fixed; inset: 0; z-index: 999;
  background:
    radial-gradient(ellipse 100% 80% at 20% 0%, rgba(255,111,181,.35), transparent 48%),
    radial-gradient(ellipse 90% 70% at 80% 100%, rgba(159,135,255,.3), transparent 48%),
    radial-gradient(ellipse 65% 55% at 50% 50%, rgba(122,215,255,.15), transparent 62%),
    linear-gradient(160deg, #040208, #0c0414, #18081e);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 2.1rem; text-align: center;
  transition: opacity .85s ease, transform .85s ease, visibility .85s steps(1,end);
}
.oni-loader::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 30%, rgba(255,111,181,.12) 50%, transparent 70%);
  box-shadow: var(--oni-glow-halo);
  animation: oniLoaderHalo 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
body.oni-loaded .oni-loader {
  opacity: 0; transform: scale(1.1); visibility: hidden; pointer-events: none;
}
@keyframes oniLoaderHalo {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

.oni-loader-orb {
  position: relative;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    #fff 0%, #ffd5f7 10%, #ff6fb5 28%, #e0007a 48%,
    rgba(159,135,255,.95) 68%, rgba(122,215,255,.9) 100%);
  background-size: 200% 200%;
  animation: oniLoaderOrbGradient 5s ease infinite, oniFloatOrb 4.5s ease-in-out infinite, oniLoaderBreath 2.8s ease-in-out infinite;
  box-shadow:
    0 0 90px rgba(255,111,181,.98),
    0 0 140px rgba(159,135,255,.65),
    0 0 200px rgba(255,111,181,.45),
    inset 0 0 55px rgba(255,255,255,.22);
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.6);
  z-index: 1;
}
.oni-loader-orb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 45%);
  border-radius: 50%;
}
.oni-loader-orb::after {
  content: "";
  position: absolute;
  inset: -100%;
  background: linear-gradient(105deg,
    transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
  animation: oniShimmerSweep 2.5s ease-in-out infinite;
}
@keyframes oniLoaderOrbGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes oniLoaderBreath {
  0%, 100% { box-shadow: 0 0 85px rgba(255,111,181,.95), 0 0 130px rgba(159,135,255,.55), 0 0 180px rgba(255,111,181,.4), inset 0 0 55px rgba(255,255,255,.2); }
  50% { box-shadow: 0 0 100px rgba(255,111,181,1), 0 0 160px rgba(159,135,255,.75), 0 0 220px rgba(255,111,181,.55), inset 0 0 60px rgba(255,255,255,.28); }
}
@keyframes oniShimmerSweep {
  0% { transform: translateX(-100%) rotate(-15deg); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%) rotate(-15deg); opacity: 0; }
}
@keyframes oniFloatOrb { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }

.oni-loader-ring {
  position: absolute; inset: 16px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.14);
  border-top-color: rgba(255,255,255,.99);
  border-right-color: rgba(255,111,181,.96);
  border-bottom-color: rgba(159,135,255,.65);
  animation: oniSpin 1.9s linear infinite;
  box-shadow: 0 0 50px rgba(255,111,181,.75), 0 0 80px rgba(159,135,255,.35);
}
.oni-loader-ring-inner {
  position: absolute; inset: 38px; border-radius: 50%;
  border: 2px dashed rgba(255,238,255,.96);
  animation: oniSpinRev 3.8s linear infinite;
  opacity: .94;
  box-shadow: 0 0 24px rgba(255,111,181,.55), 0 0 40px rgba(159,135,255,.3);
}
.oni-loader-emoji {
  font-size: 3.75rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 20px rgba(255,111,181,.95)) drop-shadow(0 0 40px rgba(159,135,255,.55));
}
.oni-loader-text-main {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--oni-accent);
  text-shadow:
    0 0 28px rgba(255,111,181,.95),
    0 0 56px rgba(255,111,181,.65),
    0 0 84px rgba(159,135,255,.35);
  animation: oniFadePulse 2s ease-in-out infinite;
  letter-spacing: .035em;
  position: relative;
  z-index: 1;
}
.oni-loader-text-sub {
  font-size: .96rem;
  color: var(--oni-muted);
  max-width: 340px;
  margin: .45rem auto 0;
  text-shadow: 0 0 20px rgba(0,0,0,.7);
  position: relative;
  z-index: 1;
}

@keyframes oniSpin { to { transform: rotate(360deg); } }
@keyframes oniSpinRev { to { transform: rotate(-360deg); } }
@keyframes oniFadePulse { 0%,100%{opacity:1;} 50%{opacity:.65;} }

/* ─── Page Reveal (XXL) ─── */
.oni-page {
  position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column;
  opacity: 0; transform: translateY(24px); filter: blur(10px);
  transition:
    opacity 1s cubic-bezier(.2,.9,.35,1) .2s,
    transform 1s cubic-bezier(.2,.9,.35,1) .2s,
    filter .9s ease .2s;
}
body.oni-loaded .oni-page { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ─── Header (XXL² Glow) ─── */
.oni-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--oni-header-glass);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  border-bottom: 1px solid rgba(255,111,181,.25);
  box-shadow:
    0 8px 48px rgba(0,0,0,.55),
    0 0 80px rgba(255,111,181,.1),
    0 0 120px rgba(159,135,255,.05),
    0 0 0 1px rgba(255,255,255,.06) inset;
}
.oni-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,111,181,.8) 12%,
    rgba(159,135,255,.8) 38%,
    rgba(122,215,255,.8) 62%,
    rgba(255,111,181,.6) 88%,
    transparent 100%);
  opacity: 1;
  animation: oniHeaderShine 4.5s ease-in-out infinite;
  box-shadow: 0 0 28px rgba(255,111,181,.5), 0 0 50px rgba(159,135,255,.25);
}
@keyframes oniHeaderShine {
  0%, 100% { opacity: .65; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.25); }
}

.oni-header-inner {
  max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
}

.oni-brand {
  display: flex; align-items: center; gap: .9rem;
  transition: transform .25s ease;
}
.oni-brand a {
  display: flex; align-items: center; gap: .9rem;
  color: inherit; text-decoration: none;
}
.oni-brand:hover { transform: translateY(-1px); }

.oni-brand-logo {
  width: 50px; height: 50px; border-radius: 16px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.98) 0%,
    #ffd5f7 20%,
    #ff6fb5 45%,
    #e0007a 70%,
    rgba(159,135,255,.95) 100%);
  background-size: 200% 200%;
  animation: oniLogoGradient 5s ease infinite;
  box-shadow:
    0 0 40px rgba(255,111,181,.7),
    0 0 80px rgba(159,135,255,.35),
    0 10px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  border: 1px solid rgba(255,255,255,.45);
  position: relative; overflow: hidden;
  transition: box-shadow .3s, transform .25s;
}
.oni-brand:hover .oni-brand-logo {
  box-shadow:
    0 0 50px rgba(255,111,181,.85),
    0 0 100px rgba(159,135,255,.45),
    0 12px 35px rgba(0,0,0,.5);
  transform: scale(1.05);
}
.oni-brand-logo::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.45) 0%, transparent 50%);
  border-radius: inherit;
}
@keyframes oniLogoGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.oni-brand-text-main {
  font-weight: 800; font-size: 1.18rem; letter-spacing: .035em;
  background: linear-gradient(135deg, #fff 0%, var(--oni-pink-soft) 50%, var(--oni-cyan) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255,111,181,.4)) drop-shadow(0 0 40px rgba(159,135,255,.2));
}
.oni-brand-text-sub {
  font-size: .72rem; color: var(--oni-muted);
  letter-spacing: .02em; margin-top: 1px;
}

.oni-nav {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; justify-content: flex-end;
}
.oni-nav a {
  position: relative; display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .95rem; border-radius: 12px; font-weight: 600; font-size: .82rem;
  color: var(--oni-text-soft); border: 1px solid transparent;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.oni-nav a::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,111,181,.15), rgba(159,135,255,.1));
  opacity: 0; border-radius: inherit;
  transition: opacity .25s;
}
.oni-nav a:hover {
  color: #fff;
  border-color: rgba(255,111,181,.5);
  box-shadow: 0 0 30px rgba(255,111,181,.35), 0 0 50px rgba(159,135,255,.15);
  transform: translateY(-3px);
}
.oni-nav a:hover::before { opacity: 1; }
.oni-nav a.is-active {
  color: #fff;
  border-color: rgba(255,111,181,.65);
  background: linear-gradient(135deg, rgba(255,111,181,.3), rgba(159,135,255,.2));
  box-shadow: 0 0 35px rgba(255,111,181,.5), 0 0 60px rgba(159,135,255,.2);
}
.oni-nav a.is-active::before { opacity: 1; }

.oni-nav-cta {
  background: linear-gradient(135deg, #ff6fb5, var(--oni-violet), var(--oni-cyan)) !important;
  background-size: 200% 200% !important;
  animation: oniNavCtaGradient 4s ease infinite !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  box-shadow:
    0 0 50px rgba(255,111,181,.65),
    0 0 90px rgba(159,135,255,.35),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.oni-nav-cta:hover {
  transform: translateY(-5px) scale(1.04) !important;
  box-shadow:
    0 0 70px rgba(255,111,181,.9),
    0 0 120px rgba(159,135,255,.55),
    var(--oni-glow-mega),
    0 12px 36px rgba(0,0,0,.45) !important;
}
@keyframes oniNavCtaGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ─── Main ─── */
.oni-main { flex: 1; position: relative; z-index: 1; }
.oni-wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.4rem; }
.oni-section { padding: 3rem 1.4rem; }

/* ─── Footer (XXL² Glow) ─── */
.oni-footer {
  position: relative; margin-top: auto; z-index: 10;
  padding: 3rem 1.5rem 1.5rem;
  background: var(--oni-footer-glass);
  backdrop-filter: blur(36px) saturate(1.5);
  -webkit-backdrop-filter: blur(36px) saturate(1.5);
  border-top: 1px solid rgba(255,111,181,.3);
  box-shadow:
    0 -28px 80px rgba(0,0,0,.7),
    0 0 120px rgba(255,111,181,.12),
    0 0 160px rgba(159,135,255,.06),
    0 0 0 1px rgba(255,255,255,.04) inset;
  overflow: hidden;
}
.oni-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,111,181,.85) 8%,
    rgba(159,135,255,.85) 35%,
    rgba(122,215,255,.85) 65%,
    rgba(255,111,181,.65) 92%,
    transparent 100%);
  opacity: 1;
  box-shadow: 0 0 35px rgba(255,111,181,.55), 0 0 60px rgba(159,135,255,.3);
  animation: oniHeaderShine 5.5s ease-in-out infinite;
}
.oni-footer::after {
  content: ""; position: absolute; inset: -50%;
  background: radial-gradient(ellipse 85% 55% at 50% -25%, rgba(255,111,181,.25), transparent 52%);
  pointer-events: none;
}

.oni-footer-inner {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 1.25rem;
}

.oni-footer-brand {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.oni-footer-orb {
  width: 58px; height: 58px; border-radius: 18px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.96) 0%,
    #ffd5f7 16%,
    #ff6fb5 40%,
    var(--oni-violet) 66%,
    var(--oni-cyan) 100%);
  background-size: 200% 200%;
  animation: oniLogoGradient 5s ease infinite, oniFooterOrbBreath 4s ease-in-out infinite;
  box-shadow:
    0 0 50px rgba(255,111,181,.75),
    0 0 100px rgba(159,135,255,.4),
    0 12px 36px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.45);
  border: 1px solid rgba(255,255,255,.45);
  flex-shrink: 0;
  position: relative; overflow: hidden;
  transition: box-shadow .35s, transform .3s;
}
.oni-footer-orb:hover {
  box-shadow: 0 0 70px rgba(255,111,181,.9), 0 0 130px rgba(159,135,255,.5), var(--oni-glow-halo);
  transform: scale(1.1);
  animation: oniLogoGradient 5s ease infinite;
}
@keyframes oniFooterOrbBreath {
  0%, 100% { box-shadow: 0 0 48px rgba(255,111,181,.7), 0 0 95px rgba(159,135,255,.35), 0 12px 36px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.45); }
  50% { box-shadow: 0 0 58px rgba(255,111,181,.85), 0 0 115px rgba(159,135,255,.5), 0 14px 40px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.5); }
}
.oni-footer-orb::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.35) 0%, transparent 50%);
  border-radius: inherit;
}
.oni-footer-brand-text { display: flex; flex-direction: column; gap: 4px; }
.oni-footer-title {
  font-weight: 800; font-size: 1.05rem; letter-spacing: .03em;
  background: linear-gradient(135deg, #fff, var(--oni-pink-soft));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.oni-footer-sub {
  font-size: .8rem; color: var(--oni-text-soft);
  letter-spacing: .02em; line-height: 1.35;
}

.oni-footer-links {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .85rem;
  margin-top: .25rem;
}
.oni-footer-links a {
  color: var(--oni-text-soft);
  position: relative; padding: .25rem 0;
  font-weight: 500;
  transition: color .2s, transform .2s;
}
.oni-footer-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--oni-pink-soft), var(--oni-cyan));
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  border-radius: 1px;
}
.oni-footer-links a:hover {
  color: #fff;
  transform: translateX(5px);
  text-shadow: 0 0 20px rgba(255,111,181,.5);
}
.oni-footer-links a:hover::after { transform: scaleX(1); }

.oni-footer-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: .8rem;
  color: var(--oni-muted); margin-top: .5rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,111,181,.15);
}
.oni-footer strong { color: var(--oni-accent); }

/* ─── Cards & Chips (XXL² Glow) ─── */
.oni-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,111,181,.28), rgba(159,135,255,.18));
  border: 1px solid rgba(255,111,181,.6);
  color: #fff; font-weight: 800; font-size: .88rem;
  box-shadow:
    0 0 30px rgba(255,111,181,.35),
    0 0 60px rgba(159,135,255,.12),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition: box-shadow .35s, transform .3s, border-color .35s;
}
.oni-chip:hover {
  box-shadow:
    0 0 50px rgba(255,111,181,.55),
    0 0 90px rgba(159,135,255,.3),
    inset 0 1px 0 rgba(255,255,255,.22);
  border-color: rgba(255,111,181,.8);
  transform: translateY(-3px);
}

.oni-card,
.oni-card-main,
.oni-menu-card,
.oni-feature-card,
.oni-hero-card {
  position: relative;
  background: var(--oni-glass);
  border: 1px solid var(--oni-glass-border);
  border-radius: 24px;
  box-shadow:
    var(--oni-shadow),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 60px rgba(255,111,181,.12),
    0 0 100px rgba(159,135,255,.06);
  backdrop-filter: blur(20px);
  transition: border-color .35s, box-shadow .4s, transform .35s;
  overflow: hidden;
}
.oni-card::after,
.oni-menu-card::after,
.oni-feature-card::after,
.oni-hero-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,111,181,.06) 0%, transparent 40%, rgba(159,135,255,.04) 100%);
  opacity: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity .35s;
}
.oni-menu-link:hover .oni-menu-card::after,
.oni-card:hover::after,
.oni-feature-card:hover::after,
.oni-hero-card:hover::after { opacity: 1; }
.oni-menu-link:hover .oni-menu-card {
  border-color: rgba(255,111,181,.6);
  background: rgba(12,5,22,.98);
  box-shadow:
    0 32px 80px rgba(0,0,0,.92),
    0 0 70px rgba(255,111,181,.5),
    0 0 120px rgba(159,135,255,.3),
    var(--oni-glow-mega),
    inset 0 1px 0 rgba(255,255,255,.1);
  transform: translateY(-4px);
}
.oni-card:hover,
.oni-hero-card:hover {
  border-color: rgba(255,111,181,.55);
  box-shadow:
    0 32px 80px rgba(0,0,0,.92),
    0 0 60px rgba(255,111,181,.4),
    0 0 100px rgba(159,135,255,.25),
    0 0 140px rgba(255,111,181,.15),
    inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-4px);
}
.oni-card { padding: 1.6rem; }
.oni-card h2 {
  margin: 0 0 .55rem; font-size: 1.4rem;
  color: var(--oni-pink-soft);
  text-shadow:
    0 0 24px rgba(255,111,181,.5),
    0 0 48px rgba(159,135,255,.25);
}
.oni-card h2 i { filter: drop-shadow(0 0 8px rgba(255,111,181,.6)) drop-shadow(0 0 16px rgba(159,135,255,.35)); }
.oni-card p { margin: 0 0 1rem; color: var(--oni-muted); line-height: 1.52; }

/* ─── Cursor Glow + Glitter (XXL²) ─── */
.oni-cursor-glow {
  position: fixed; width: 360px; height: 360px; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,111,181,.5) 0%, transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(159,135,255,.35) 0%, transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(122,215,255,.2) 0%, transparent 52%);
  mix-blend-mode: screen; opacity: 0;
  transform: translate(-50%, -50%); transition: opacity .4s ease;
  filter: blur(0);
  box-shadow: var(--oni-glow-halo);
}
.oni-glitter-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.oni-dot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.99), rgba(255,111,181,.6));
  opacity: .85;
  box-shadow: 0 0 18px rgba(255,111,181,.8), 0 0 36px rgba(255,111,181,.35);
  animation: oniDotFloat 10s ease-in-out infinite;
}
.oni-dot:nth-child(3n) {
  background: radial-gradient(circle, rgba(255,255,255,.96), rgba(122,215,255,.6));
  box-shadow: 0 0 18px rgba(122,215,255,.8), 0 0 36px rgba(122,215,255,.35);
}
.oni-dot:nth-child(5n) {
  background: radial-gradient(circle, rgba(255,255,255,.96), rgba(159,135,255,.6));
  box-shadow: 0 0 18px rgba(159,135,255,.8), 0 0 36px rgba(159,135,255,.35);
}
.oni-dot:nth-child(7n) {
  animation: oniDotTwinkle 7.5s ease-in-out infinite;
}
.oni-dot:nth-child(11n) {
  width: 8px; height: 8px;
  animation: oniDotSparkle 5s ease-in-out infinite;
  box-shadow: 0 0 22px rgba(255,111,181,.9), 0 0 44px rgba(159,135,255,.5);
}
@keyframes oniDotFloat {
  0% { transform: translateY(0) scale(1); opacity: .25; }
  40% { opacity: .95; }
  100% { transform: translateY(-110px) scale(.42); opacity: 0; }
}
@keyframes oniDotTwinkle {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.25); }
}
@keyframes oniDotSparkle {
  0%, 100% { opacity: .4; transform: scale(.9); box-shadow: 0 0 20px rgba(255,111,181,.8), 0 0 40px rgba(159,135,255,.4); }
  50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 28px rgba(255,111,181,1), 0 0 56px rgba(159,135,255,.6); }
}

/* ─── Fade / Reveal Utilities (XXL) ─── */
.fade-in, .fade-up, .fade-soft, .fade-pop {
  opacity: 0; transform: translateY(20px); filter: blur(8px);
  transition:
    opacity .9s cubic-bezier(.2,.9,.35,1),
    transform .9s cubic-bezier(.2,.9,.35,1),
    filter .9s ease;
}
.fade-up { transform: translateY(32px); }
.fade-soft { transform: translateY(16px) scale(.98); }
.fade-pop { transform: translateY(28px) scale(.92); }
body.oni-loaded .fade-in,
body.oni-loaded .fade-up,
body.oni-loaded .fade-soft,
body.oni-loaded .fade-pop {
  opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
}
.fade-delay-1 { transition-delay: .15s; }
.fade-delay-2 { transition-delay: .28s; }
.fade-delay-3 { transition-delay: .42s; }
.fade-delay-4 { transition-delay: .55s; }
.fade-delay-5 { transition-delay: .7s; }

/* ─── Hero Base (XXL²) ─── */
.oni-hero { padding: 3.5rem 1.4rem 2.5rem; }
.oni-hero h1 {
  font-size: 2.5rem; margin: 0 0 .7rem; letter-spacing: .03em;
  text-shadow:
    0 0 50px rgba(255,111,181,.5),
    0 0 90px rgba(159,135,255,.3),
    0 0 130px rgba(255,111,181,.2);
  animation: oniHeroTitleGlow 6s ease-in-out infinite;
}
@keyframes oniHeroTitleGlow {
  0%, 100% { text-shadow: 0 0 48px rgba(255,111,181,.48), 0 0 85px rgba(159,135,255,.28), 0 0 125px rgba(255,111,181,.18); }
  50% { text-shadow: 0 0 55px rgba(255,111,181,.58), 0 0 95px rgba(159,135,255,.35), 0 0 140px rgba(255,111,181,.25); }
}
.oni-hero-sub, .oni-hero p { color: var(--oni-muted); line-height: 1.55; margin: 0 0 1rem; }

/* ─── Buttons (XXL Glow) ─── */
.oni-primary-btn, .oni-secondary-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.5rem; border-radius: 999px; font-weight: 800;
  transition: transform .3s, box-shadow .35s, filter .3s;
  position: relative; overflow: hidden;
}
.oni-primary-btn {
  background: linear-gradient(135deg, #ff6fb5, #e0007a, var(--oni-violet), var(--oni-cyan));
  background-size: 300% 300%;
  animation: oniNavCtaGradient 5s ease infinite;
  color: #fff; border: 1px solid rgba(255,255,255,.45);
  box-shadow:
    0 10px 35px rgba(255,111,181,.55),
    0 0 50px rgba(255,111,181,.35),
    0 0 80px rgba(159,135,255,.2),
    inset 0 1px 0 rgba(255,255,255,.3);
}
.oni-primary-btn:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow:
    0 18px 55px rgba(255,111,181,.75),
    0 0 100px rgba(255,111,181,.55),
    0 0 150px rgba(159,135,255,.4),
    var(--oni-glow-mega);
}
.oni-primary-btn:focus-visible,
.oni-secondary-btn:focus-visible {
  outline: 2px solid rgba(255,111,181,.8);
  outline-offset: 3px;
  box-shadow:
    0 0 40px rgba(255,111,181,.5),
    0 0 80px rgba(159,135,255,.3);
}
.oni-secondary-btn {
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,111,181,.1));
  border: 1px solid rgba(255,111,181,.55);
  color: var(--oni-accent);
  box-shadow:
    0 0 25px rgba(255,111,181,.2),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.oni-secondary-btn:hover {
  background: linear-gradient(135deg, rgba(255,111,181,.28), rgba(159,135,255,.18));
  transform: translateY(-4px);
  box-shadow:
    0 0 55px rgba(255,111,181,.55),
    0 0 90px rgba(159,135,255,.3),
    inset 0 1px 0 rgba(255,255,255,.14);
  border-color: rgba(255,111,181,.8);
}

/* ─── Befehle / Listen / Filter (einheitlich) ─── */
.oni-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  align-items: start;
}
.oni-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.oni-stat {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,111,181,.25);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  box-shadow: 0 0 20px rgba(255,111,181,.08);
  transition: box-shadow .25s, border-color .25s;
}
.oni-stat:hover {
  border-color: rgba(255,111,181,.55);
  box-shadow:
    0 0 50px rgba(255,111,181,.4),
    0 0 80px rgba(159,135,255,.25);
}
.oni-stat .label { color: var(--oni-muted); font-weight: 600; font-size: .9rem; }
.oni-stat .value {
  font-size: 1.4rem; font-weight: 800;
  text-shadow:
    0 0 24px rgba(255,111,181,.5),
    0 0 48px rgba(159,135,255,.28);
}
.oni-filter {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
.oni-filter input {
  padding: .7rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,111,181,.4);
  background: rgba(0,0,0,.4);
  color: #fff;
  min-width: 220px;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.oni-filter input::placeholder { color: rgba(255,255,255,.4); }
.oni-filter input:focus {
  border-color: rgba(255,111,181,.85);
  box-shadow:
    0 0 45px rgba(255,111,181,.5),
    0 0 90px rgba(159,135,255,.3),
    0 0 130px rgba(255,111,181,.2);
}
.oni-filter input:focus-visible {
  outline: 2px solid rgba(255,111,181,.6);
  outline-offset: 2px;
}
.oni-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .85rem;
}
.oni-command {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,111,181,.25);
  background: rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  box-shadow: 0 0 20px rgba(255,111,181,.06);
  transition: box-shadow .25s, border-color .25s, transform .2s;
}
.oni-command:hover {
  border-color: rgba(255,111,181,.5);
  box-shadow:
    0 0 40px rgba(255,111,181,.3),
    0 0 60px rgba(159,135,255,.15);
  transform: translateY(-2px);
}
.oni-command .name { font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.oni-command .count {
  color: var(--oni-pink-soft);
  font-size: .96rem;
  text-shadow: 0 0 16px rgba(255,111,181,.45), 0 0 30px rgba(159,135,255,.2);
}
.oni-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,111,181,.2), rgba(159,135,255,.1));
  border: 1px solid rgba(255,111,181,.45);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  box-shadow: 0 0 15px rgba(255,111,181,.2);
  transition: box-shadow .2s, transform .2s;
}
.oni-pill:hover {
  box-shadow:
    0 0 35px rgba(255,111,181,.45),
    0 0 55px rgba(159,135,255,.2);
  transform: scale(1.05);
}

/* ─── Menu-Grid (Index & ähnliche Seiten) ─── */
.oni-menu-section-title {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--oni-pink-soft);
  text-shadow:
    0 0 40px rgba(255,111,181,.5),
    0 0 70px rgba(159,135,255,.3),
    0 0 100px rgba(255,111,181,.15);
}
.oni-menu-section-title i {
  filter: drop-shadow(0 0 10px rgba(255,111,181,.7)) drop-shadow(0 0 20px rgba(159,135,255,.4));
}
.oni-menu-section-sub {
  color: var(--oni-muted);
  font-size: .95rem;
  margin-bottom: 1.2rem;
  max-width: 640px;
}
.oni-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}
.oni-menu-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.oni-menu-link:hover {
  transform: translateY(-5px);
  box-shadow:
    0 24px 60px rgba(255,111,181,.45),
    0 0 50px rgba(159,135,255,.25);
}
.oni-menu-card {
  padding: 1.4rem;
  border-radius: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.oni-menu-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,111,181,.2), rgba(159,135,255,.1));
  border: 1px solid rgba(255,111,181,.5);
  color: var(--oni-pink-soft);
  box-shadow: 0 0 20px rgba(255,111,181,.2), inset 0 1px 0 rgba(255,255,255,.1);
  transition: box-shadow .25s, transform .25s;
}
.oni-menu-link:hover .oni-menu-icon {
  box-shadow:
    0 0 40px rgba(255,111,181,.6),
    0 0 60px rgba(159,135,255,.3),
    inset 0 1px 0 rgba(255,255,255,.2);
  transform: scale(1.08);
}
.oni-menu-title { font-weight: 700; font-size: 1rem; margin-bottom: .1rem; }
.oni-menu-sub { font-size: .82rem; color: var(--oni-muted); line-height: 1.4; }
.oni-menu-tag {
  margin-top: auto;
  font-size: .8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px dashed rgba(255,111,181,.55);
  background: linear-gradient(135deg, rgba(255,111,181,.12), rgba(159,135,255,.08));
  width: fit-content;
  box-shadow: 0 0 20px rgba(255,111,181,.2);
  transition: box-shadow .25s, transform .2s;
}
.oni-menu-tag:hover {
  box-shadow: 0 0 30px rgba(255,111,181,.4);
  transform: scale(1.03);
}

/* ─── Mini-Stats (Index) ─── */
.oni-mini-stats {
  padding: 1.4rem;
  border-radius: 22px;
  border: 1px solid rgba(255,159,208,.4);
  background: rgba(10,5,18,.94);
  box-shadow:
    0 20px 55px rgba(0,0,0,.85),
    0 0 60px rgba(255,111,181,.15),
    0 0 90px rgba(159,135,255,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  backdrop-filter: blur(16px);
}
.oni-mini-header { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; justify-content: space-between; }
.oni-mini-title { font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; }
.oni-mini-sub { color: var(--oni-muted); font-size: .9rem; }
.oni-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .85rem;
}
.oni-mini-card {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,159,208,.3);
  background: rgba(20,12,32,.9);
  display: flex;
  flex-direction: column;
  gap: .45rem;
  box-shadow: 0 0 25px rgba(255,111,181,.08);
  transition: box-shadow .25s, border-color .25s;
}
.oni-mini-card:hover {
  border-color: rgba(255,111,181,.5);
  box-shadow:
    0 0 45px rgba(255,111,181,.3),
    0 0 65px rgba(159,135,255,.15);
}
.oni-mini-label { font-size: .88rem; color: var(--oni-muted); display: flex; align-items: center; gap: .4rem; }
.oni-mini-value { font-size: 1.5rem; font-weight: 800; }
.oni-mini-bar {
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.oni-mini-bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6fb5, var(--oni-violet), var(--oni-cyan));
  box-shadow:
    0 0 20px rgba(255,111,181,.7),
    0 0 40px rgba(159,135,255,.4),
    0 0 60px rgba(255,111,181,.2);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.oni-mini-hint { font-size: .85rem; color: var(--oni-muted); }

/* ─── Hero (Index-Style) ─── */
.oni-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(255,111,181,.28), rgba(159,135,255,.18));
  border: 1px solid rgba(255,194,224,.65);
  color: var(--oni-accent);
  margin-bottom: .85rem;
  box-shadow:
    0 0 35px rgba(255,111,181,.35),
    0 0 60px rgba(159,135,255,.15),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition: box-shadow .3s, transform .25s;
  text-shadow: 0 0 20px rgba(255,111,181,.4);
}
.oni-hero-badge:hover {
  box-shadow:
    0 0 60px rgba(255,111,181,.55),
    0 0 100px rgba(159,135,255,.35);
  transform: translateY(-3px);
}
.oni-hero-buttons { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .5rem; }
.oni-hero-media-wrap { display: flex; align-items: center; justify-content: center; }
.oni-hero-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 28px 65px rgba(255,111,181,.55),
    0 0 70px rgba(255,111,181,.35),
    0 0 110px rgba(159,135,255,.25),
    0 0 150px rgba(255,111,181,.1),
    inset 0 1px 0 rgba(255,255,255,.12);
  border: 1px solid rgba(255,111,181,.5);
  transition: box-shadow .35s, transform .35s;
}
.oni-hero-media:hover {
  box-shadow:
    0 36px 90px rgba(255,111,181,.75),
    0 0 120px rgba(255,111,181,.55),
    0 0 160px rgba(159,135,255,.4),
    var(--oni-glow-mega);
  transform: scale(1.04);
}
.oni-hero-media img { width: 100%; height: auto; display: block; }
.oni-hero-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .5rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  background: rgba(0,0,0,.75);
  color: var(--oni-accent);
  text-align: center;
}

.oni-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}
@media (max-width: 880px) {
  .oni-hero-layout { grid-template-columns: 1fr; text-align: center; }
  .oni-hero-layout .oni-hero-media-wrap { justify-content: center; }
  .oni-hero-layout .oni-hero-sub { margin-left: auto; margin-right: auto; }
  .oni-hero-layout .oni-hero-buttons { justify-content: center; }
}

.oni-view { padding: 0 1.4rem; }
.oni-main.oni-main-wide { max-width: 1160px; margin-left: auto; margin-right: auto; padding: 2rem 1.4rem 3rem; display: flex; flex-direction: column; gap: 2rem; }

/* ─── XXL² Utility Classes ─── */
.oni-glow-text {
  text-shadow:
    0 0 30px rgba(255,111,181,.5),
    0 0 60px rgba(159,135,255,.3),
    0 0 90px rgba(255,111,181,.2);
}
.oni-glow-card {
  box-shadow:
    var(--oni-shadow),
    0 0 60px rgba(255,111,181,.15),
    0 0 100px rgba(159,135,255,.1),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.oni-glow-card:hover {
  box-shadow:
    0 32px 80px rgba(0,0,0,.92),
    0 0 70px rgba(255,111,181,.45),
    0 0 110px rgba(159,135,255,.3),
    var(--oni-glow-mega),
    inset 0 1px 0 rgba(255,255,255,.1);
}

@media (max-width: 720px) {
  .oni-header-inner { flex-direction: column; align-items: flex-start; padding: .85rem 1rem; }
  .oni-nav { justify-content: flex-start; gap: .4rem; }
  .oni-nav a { padding: .4rem .75rem; font-size: .8rem; }
  .oni-footer { padding: 1.5rem 1rem 1rem; }
  .oni-footer-inner { gap: 1rem; }
  .oni-footer-orb { width: 44px; height: 44px; }
  .oni-footer-links { gap: .4rem 1rem; font-size: .82rem; }
  .oni-hero h1 { font-size: 1.85rem; }
  .oni-hero-grid { grid-template-columns: 1fr; }
}