/* Custom keyframes & helpers (alles andere via Tailwind) */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-gradient {
  background: linear-gradient(120deg, #370617, #6A040F, #9D0208, #E85D04, #F48C06, #FAA307);
  background-size: 300% 300%;
  animation: gradientShift 15s ease infinite;
}

@keyframes glitch {
  0%,100% { transform: translate(0); text-shadow: 0 0 0 transparent; }
  20% { transform: translate(-2px, 1px); text-shadow: 2px 0 #FAA307, -2px 0 #E85D04; }
  40% { transform: translate(2px, -1px); text-shadow: -2px 0 #FAA307, 2px 0 #E85D04; }
  60% { transform: translate(-1px, 2px); text-shadow: 1px 0 #F48C06; }
  80% { transform: translate(1px, -2px); text-shadow: -1px 0 #F48C06; }
}
.glitch:hover { animation: glitch 0.6s linear; }

.cyber-grid {
  background-image:
    linear-gradient(rgba(250,163,7,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,163,7,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}

.diagonal-cut {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.diagonal-cut-rev {
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
}

.fade-in { transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-content.open { max-height: 500px; }

.float-label { position: relative; }
.float-label input, .float-label textarea {
  width: 100%; background: transparent; border: 1px solid #F48C06;
  padding: 18px 12px 6px; color: #FFBA08; outline: none; border-radius: 4px;
}
.float-label label {
  position: absolute; left: 12px; top: 14px; color: #FAA307;
  pointer-events: none; transition: 0.2s ease; font-size: 14px;
}
.float-label input:focus + label,
.float-label input:not(:placeholder-shown) + label,
.float-label textarea:focus + label,
.float-label textarea:not(:placeholder-shown) + label {
  top: 2px; font-size: 10px; color: #E85D04;
}

.cart-drawer { transform: translateX(100%); transition: transform 0.35s ease; }
.cart-drawer.open { transform: translateX(0); }

html { scroll-behavior: smooth; }
body { background: #370617; color: #FFBA08; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #370617; }
::-webkit-scrollbar-thumb { background: linear-gradient(#E85D04, #FAA307); border-radius: 5px; }