/*
 * neon-glow.css — Mein-Miet-Lokal.de
 * Neon-Effekte | Glassmorphism | Animationen
 * Farbpalette: #76FF03 (Neon-Grün) · #9D00FF (Vivid Purple) · #0A0A0A (Deep Black)
 */

/* ─── CSS-Variablen ──────────────────────────────────────────────────────── */
:root {
  --neon-green:  #76FF03;
  --neon-purple: #9D00FF;
  --deep-black:  #0A0A0A;
  --glass-bg:    rgba(255, 255, 255, 0.05);
  --glass-border:rgba(255, 255, 255, 0.10);
  --glow-green:  0 0 10px #76FF03, 0 0 25px rgba(118,255,3,.55), 0 0 50px rgba(118,255,3,.25);
  --glow-purple: 0 0 10px #9D00FF, 0 0 25px rgba(157,0,255,.55), 0 0 50px rgba(157,0,255,.25);
}

/* ─── Glassmorphism Card ─────────────────────────────────────────────────── */
.glass-card {
  background:            var(--glass-bg);
  backdrop-filter:       blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border:                1px solid var(--glass-border);
  border-radius:         16px;
  transition:            border-color .3s, box-shadow .3s;
}

.glass-card:hover {
  border-color: rgba(118, 255, 3, 0.35);
  box-shadow:   0 0 30px rgba(118,255,3,.08);
}

.glass-card.purple:hover {
  border-color: rgba(157, 0, 255, 0.40);
  box-shadow:   0 0 30px rgba(157,0,255,.08);
}

/* ─── Neon-Grün Button ───────────────────────────────────────────────────── */
.btn-neon-green {
  background:    var(--neon-green);
  color:         var(--deep-black);
  font-weight:   700;
  border-radius: 8px;
  border:        none;
  padding:       .75rem 1.75rem;
  cursor:        pointer;
  box-shadow:    var(--glow-green);
  transition:    all .25s ease;
  letter-spacing:.03em;
}

.btn-neon-green:hover {
  background:  #8eff20;
  box-shadow:  0 0 20px #76FF03, 0 0 50px rgba(118,255,3,.7), 0 0 90px rgba(118,255,3,.35);
  transform:   translateY(-2px);
}

.btn-neon-green:active { transform: translateY(0); }

/* ─── Neon-Grün Button (Outline) ─────────────────────────────────────────── */
.btn-neon-outline {
  background:    transparent;
  color:         var(--neon-green);
  font-weight:   700;
  border-radius: 8px;
  border:        2px solid var(--neon-green);
  padding:       .7rem 1.7rem;
  cursor:        pointer;
  box-shadow:    0 0 10px rgba(118,255,3,.3);
  transition:    all .25s ease;
}

.btn-neon-outline:hover {
  background:  rgba(118,255,3,.12);
  box-shadow:  var(--glow-green);
  transform:   translateY(-2px);
}

/* ─── Pulsierender Button (Header "Jetzt Buchen") ────────────────────────── */
@keyframes neonPulse {
  0%, 100% { box-shadow: var(--glow-green); }
  50%       { box-shadow: 0 0 22px #76FF03, 0 0 55px rgba(118,255,3,.80), 0 0 100px rgba(118,255,3,.40); }
}

.btn-pulse { animation: neonPulse 2.2s ease-in-out infinite; }

/* ─── Purple Button ──────────────────────────────────────────────────────── */
.btn-neon-purple {
  background:    var(--neon-purple);
  color:         #fff;
  font-weight:   700;
  border-radius: 8px;
  border:        none;
  padding:       .75rem 1.75rem;
  cursor:        pointer;
  box-shadow:    var(--glow-purple);
  transition:    all .25s ease;
}

.btn-neon-purple:hover {
  background:  #b31aff;
  box-shadow:  0 0 20px #9D00FF, 0 0 50px rgba(157,0,255,.7);
  transform:   translateY(-2px);
}

/* ─── Neon-Text ──────────────────────────────────────────────────────────── */
.text-neon-green  { color: var(--neon-green);  text-shadow: 0 0 8px rgba(118,255,3,.8); }
.text-neon-purple { color: var(--neon-purple); text-shadow: 0 0 8px rgba(157,0,255,.8); }

/* ─── Flicker-Animation (Hero-Headline) ──────────────────────────────────── */
@keyframes flicker {
  0%,19%,21%,23%,25%,54%,56%,100% {
    text-shadow: 0 0 8px #76FF03, 0 0 20px #76FF03, 0 0 40px #76FF03;
  }
  20%,24%,55% { text-shadow: none; }
}
.text-flicker { animation: flicker 5s infinite; }

/* ─── Gradient-Text (Logo / Highlights) ─────────────────────────────────── */
.gradient-text {
  background:             linear-gradient(135deg, var(--neon-green) 0%, var(--neon-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

/* ─── Gradient-Border ────────────────────────────────────────────────────── */
.gradient-border {
  position:      relative;
  border-radius: 16px;
}

.gradient-border::before {
  content:      '';
  position:     absolute;
  inset:        0;
  padding:      2px;
  background:   linear-gradient(135deg, var(--neon-green), var(--neon-purple));
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ─── Hero-Hintergrund (animierter Gradient) ─────────────────────────────── */
@keyframes bgShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

.hero-bg {
  background: linear-gradient(
    135deg,
    #0A0A0A 0%,
    #0d0025 30%,
    #011500 60%,
    #0A0A0A 100%
  );
  background-size: 300% 300%;
  animation: bgShift 12s ease infinite;
}

/* ─── Kalender ───────────────────────────────────────────────────────────── */
.cal-day-available {
  background:  rgba(255,255,255,.06);
  color:       #fff;
  cursor:      pointer;
  border-radius: 6px;
  transition:  all .2s;
}

.cal-day-available:hover {
  background: rgba(118,255,3,.18);
  color:      var(--neon-green);
  box-shadow: 0 0 10px rgba(118,255,3,.3);
}

.cal-day-selected {
  background: var(--neon-green) !important;
  color:      #0A0A0A !important;
  font-weight:700;
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(118,255,3,.85);
}

.cal-day-booked {
  background:      rgba(220,38,38,.15);
  color:           #f87171;
  text-decoration: line-through;
  cursor:          not-allowed;
  border-radius:   6px;
  opacity:         .7;
}

.cal-day-blocked {
  background:  rgba(234,179,8,.12);
  color:       #fbbf24;
  cursor:      not-allowed;
  border-radius: 6px;
  opacity:     .7;
}

.cal-day-disabled {
  color:   #374151;
  cursor:  not-allowed;
  border-radius: 6px;
}

/* ─── Step-Indicator ─────────────────────────────────────────────────────── */
.step-dot {
  width:  36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #374151;
  color:  #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  transition: all .3s;
  position: relative;
  z-index: 1;
}

.step-dot.active {
  border-color: var(--neon-green);
  color:        var(--neon-green);
  box-shadow:   0 0 12px rgba(118,255,3,.6);
}

.step-dot.done {
  background:   var(--neon-green);
  border-color: var(--neon-green);
  color:        #0A0A0A;
}

.step-line {
  flex: 1;
  height: 2px;
  background: #1f2937;
  transition: background .3s;
}

.step-line.done { background: var(--neon-green); }

/* ─── Paket-Cards ────────────────────────────────────────────────────────── */
.pkg-card-selected {
  border-color: var(--neon-green) !important;
  box-shadow:   0 0 30px rgba(118,255,3,.2) !important;
  transform:    scale(1.02);
}

/* ─── Scrollbarer Vertrags-Container ─────────────────────────────────────── */
.contract-scroll {
  max-height:  320px;
  overflow-y:  auto;
  scrollbar-width: thin;
  scrollbar-color:  var(--neon-green) #1f2937;
}

.contract-scroll::-webkit-scrollbar       { width: 6px; }
.contract-scroll::-webkit-scrollbar-track { background: #1f2937; border-radius: 3px; }
.contract-scroll::-webkit-scrollbar-thumb { background: var(--neon-green); border-radius: 3px; }

/* ─── Navigation-Link Hover ──────────────────────────────────────────────── */
.nav-link {
  position:   relative;
  color:      #9ca3af;
  transition: color .25s;
}

.nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--neon-green);
  transition: width .25s;
}

.nav-link:hover { color: var(--neon-green); }
.nav-link:hover::after { width: 100%; }

/* ─── Scan-Line Overlay (optional Hero-Effekt) ───────────────────────────── */
@keyframes scanline {
  from { background-position: 0 0; }
  to   { background-position: 0 100%; }
}

.scanlines {
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,.06) 2px,
    rgba(0,0,0,.06) 4px
  );
}

/* ─── Alert / Toast ──────────────────────────────────────────────────────── */
@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.toast {
  animation: slideDown .3s ease forwards;
  border-radius: 8px;
  padding: .75rem 1.25rem;
  font-weight: 600;
}

.toast-error   { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; }
.toast-success { background: rgba(118,255,3,.12); border: 1px solid rgba(118,255,3,.4);  color: var(--neon-green); }