/* Kickerbay Login – Neon + Field Background */
:root{ --kb-radius: 18px; }

*{box-sizing:border-box}
html,body{height:100%}
body.kb-bg{
  min-height:100vh;
  margin:0;
  display:grid;
  place-items:center;
  color:#e6edf3;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "SF Pro Display", sans-serif;
  background: #0a0f17 url("/assets/img/kb_login_bg.png") center/cover no-repeat fixed;
}

.kb-login-card{
  width:min(92vw,420px);
  padding:26px 22px 22px;
  background: rgba(10,12,18,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--kb-radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  border:2px solid transparent;
  position:relative;
}

/* Neon border */
.kb-login-card::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:2px;
  background: linear-gradient(90deg,#22d3ee,#3b82f6,#a78bfa,#f472b6,#f59e0b);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kb-hue 12s linear infinite;
  opacity:.9;
}
@keyframes kb-hue { to { filter:hue-rotate(360deg) } }

/* Neon Logo Wave (text only) */
.kb-logo-neon{
  --_size: 220% 100%;
  font-weight: 900;
  font-size: clamp(28px, 7vw, 38px);
  letter-spacing: .4px;
  margin: 0 0 12px;
  line-height: 1.05;
  text-align:center;
  background: linear-gradient(90deg,#22d3ee,#3b82f6,#a78bfa,#f472b6,#f59e0b,#22d3ee);
  background-size: var(--_size);
  background-position: 0% 50%;
  -webkit-background-clip:text; background-clip:text; color: transparent;
  text-shadow:
    0 0 1px rgba(255,255,255,.9),
    0 0 6px rgba(34,211,238,.8),
    0 0 14px rgba(59,130,246,.7),
    0 0 28px rgba(167,139,250,.6);
  animation: kb-logo-wave 6s linear infinite, kb-logo-pulse 3.8s ease-in-out infinite;
}
@keyframes kb-logo-wave{ to{ background-position: 200% 50%; } }
@keyframes kb-logo-pulse{
  0%,100%{ filter: brightness(1.05) saturate(100%); }
  50%    { filter: brightness(1.25) saturate(115%); }
}

/* Form */
.kb-input{
  width:100%;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#e6edf3;
  border-radius: 12px;
  padding: 12px 14px;
  outline:none;
  margin: 8px 0 10px;
  transition: border-color .2s ease, background .2s ease;
}
.kb-input::placeholder{ color:#9aa7b3 }
.kb-input:focus{ border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.06); }

.kb-btn{
  width:100%;
  border:0; border-radius:12px;
  padding:12px 16px; color:#0a0f17; font-weight:800; cursor:pointer;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  transition: transform .08s ease, filter .2s ease;
  box-shadow: 0 0 10px rgba(59,130,246,.35);
}
.kb-btn:hover{ transform: translateY(-1px); filter: brightness(1.08); }
.kb-btn:active{ transform: translateY(0); }

.kb-links{ display:flex; gap:12px; justify-content:center; margin-top:10px; }
.kb-links a{ color:#93c5fd; font-size:.9rem; text-decoration:none; }
.kb-links a:hover{ text-decoration:underline; }

.kb-note{ text-align:center; color:#9aa7b3; font-size:.85rem; margin-top:10px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .kb-login-card::after, .kb-logo-neon { animation: none !important; }
}

/* === Kickerbay Login – Icon-Animationen für Marquee === */
/* Classes */
.kb-anim-spin{animation:kb-spin 2.8s linear infinite}
.kb-anim-bounce{animation:kb-bounce 1.2s ease-in-out infinite}
.kb-anim-pulse{animation:kb-pulse 1.2s ease-in-out infinite}
.kb-anim-wiggle{animation:kb-wiggle 0.9s ease-in-out infinite}
.kb-anim-heartbeat{animation:kb-heartbeat 1.6s ease-in-out infinite}
.kb-anim-shake{animation:kb-shake 0.8s ease-in-out infinite}
.kb-anim-tada{animation:kb-tada 1s ease-in-out infinite}
.kb-anim-swing{transform-origin: top center;animation:kb-swing 1.6s ease-in-out infinite}
.kb-anim-jello{animation:kb-jello 1.2s ease-in-out infinite}
.kb-anim-flipx{transform-style:preserve-3d;animation:kb-flipx 1.2s linear infinite}
.kb-anim-flipy{transform-style:preserve-3d;animation:kb-flipy 1.2s linear infinite}
.kb-anim-slideleft{animation:kb-slideleft 1.2s ease-in-out infinite}
.kb-anim-slideright{animation:kb-slideright 1.2s ease-in-out infinite}
.kb-anim-slideup{animation:kb-slideup 1.2s ease-in-out infinite}
.kb-anim-slidedown{animation:kb-slidedown 1.2s ease-in-out infinite}

/* Optische Effekte (optional per Setting) */
.kb-anim-shimmer.kb-emoji{
  background:linear-gradient(90deg,#fff,#9cc6ff,#fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:kb-shimmer-bg 1.8s linear infinite; background-size:200% 100%;
}
.kb-anim-shimmer.kb-ball{animation:kb-shimmer 1.8s linear infinite}

.kb-anim-neon.kb-emoji{ text-shadow:0 0 4px #0ff,0 0 8px #0ff,0 0 12px #0ff; animation:kb-neon 1.6s ease-in-out infinite }
.kb-anim-neon.kb-ball{ filter:drop-shadow(0 0 3px #0ff) drop-shadow(0 0 8px #0ff); animation:kb-neon 1.6s ease-in-out infinite }

.kb-anim-colorcycle{ filter:hue-rotate(0deg); animation:kb-hue 2.2s linear infinite } /* nutzt vorhandenes kb-hue */

.kb-anim-rainbow.kb-emoji{
  background:linear-gradient(90deg,#ff0057,#ff9d00,#ffee00,#00e060,#00aaff,#9b00ff,#ff0057);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:kb-rainbow 2.4s linear infinite; background-size:400% 100%;
}
.kb-anim-rainbow.kb-ball{ animation:kb-hue 2.4s linear infinite }

.kb-anim-rainbowtrail{ position:relative }
.kb-anim-rainbowtrail.kb-emoji::after,
.kb-anim-rainbowtrail.kb-ball::after{
  content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:18px; height:6px; border-radius:6px; filter:blur(6px);
  background:linear-gradient(90deg,#ff0057,#ff9d00,#ffee00,#00e060,#00aaff,#9b00ff);
  animation:kb-trail 1.2s linear infinite;
}

/* Keyframes */
@keyframes kb-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes kb-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes kb-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes kb-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}
@keyframes kb-heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.2)}30%{transform:scale(1)}45%{transform:scale(1.15)}60%{transform:scale(1)}}
@keyframes kb-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes kb-tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes kb-swing{20%{transform:rotate(10deg)}40%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@keyframes kb-jello{
  11.1%{transform:skewX(-12.5deg) skewY(-12.5deg)}
  22.2%{transform:skewX(6.25deg)  skewY(6.25deg)}
  33.3%{transform:skewX(-3.125deg) skewY(-3.125deg)}
  44.4%{transform:skewX(1.5625deg)  skewY(1.5625deg)}
  55.5%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}
  66.6%{transform:skewX(0.390625deg) skewY(0.390625deg)}
  77.7%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}
  100%{transform:skewX(0) skewY(0)}
}
@keyframes kb-flipx{from{transform:rotateX(0)}to{transform:rotateX(360deg)}}
@keyframes kb-flipy{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes kb-slideleft{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@keyframes kb-slideright{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes kb-slideup{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes kb-slidedown{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes kb-shimmer{0%{filter:drop-shadow(0 0 2px rgba(255,255,255,.25)) brightness(.9)}50%{filter:drop-shadow(0 0 4px rgba(147,197,253,.65)) brightness(1.2)}100%{filter:drop-shadow(0 0 2px rgba(255,255,255,.25)) brightness(.9)}}
@keyframes kb-shimmer-bg{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes kb-neon{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes kb-rainbow{from{background-position:0% 0}to{background-position:400% 0}}
@keyframes kb-trail{0%{left:-18px;opacity:.25}50%{left:18px;opacity:.5}100%{left:54px;opacity:.25}}

/* SVG-Größe wie im Admin-Preview */
.kb-ball svg{width:16px;height:16px;display:block}