/* ==========================================================================
   index.css – Hero-Bereich (nur Startseite)
   ========================================================================== */

.hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-2) 55%, #1a0606 100%);
  color: #fff;
  padding-block: 5rem 4rem;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 82% 50%, rgba(196,24,24,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(74,109,164,0.12) 0%, transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.035)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero__inner { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; }

.hero__label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(196,24,24,0.15); border: 1px solid rgba(196,24,24,0.35);
  color: #FF9090; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 100px;
  margin-bottom: 1rem; width: fit-content;
}

.hero__title { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 1.25rem; }
.hero__title span { color: #FF7070; }

.hero__text { font-size: 1.1rem; color: rgba(255,255,255,0.75); max-width: 540px; margin-bottom: 2rem; line-height: 1.7; }
.hero__text p { margin-bottom: 0; }

.hero__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

.hero__stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 1.25rem; backdrop-filter: blur(4px); transition: background var(--transition), border-color var(--transition); }
.hero__stat:hover { background: rgba(255,255,255,0.1); border-color: rgba(196,24,24,0.4); }
.hero__stat-value { font-size: 2rem; font-weight: 800; color: #FF7070; line-height: 1; margin-bottom: 0.25rem; }
.hero__stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.3; }

.hero__right { position: relative; display: flex; flex-direction: column; gap: 1.5rem; }
.hero__logo-wrap { display: flex; justify-content: center; align-items: center; pointer-events: none; user-select: none; }
.hero__deco-logo { width: clamp(80px, 18vw, 160px); height: auto; opacity: 0.18; filter: drop-shadow(0 0 24px rgba(196,24,24,0.6)) brightness(1.4); animation: heroPulse 4s ease-in-out infinite; }

@keyframes heroPulse {
  0%, 100% { opacity: 0.18; transform: scale(1); }
  50%       { opacity: 0.28; transform: scale(1.04); }
}

.hero__stat { animation: fadeInUp 0.5s ease both; }
.hero__stat:nth-child(1) { animation-delay: 0.25s; }
.hero__stat:nth-child(2) { animation-delay: 0.35s; }
.hero__stat:nth-child(3) { animation-delay: 0.45s; }
.hero__stat:nth-child(4) { animation-delay: 0.55s; }

@media (max-width: 767px) { .hero__logo-wrap { display: none; } }

@media (min-width: 768px) { .hero__inner { grid-template-columns: 1fr 1fr; } }

@media (min-width: 900px) {
  .hero { padding-block: 6rem 5rem; }
  .hero__inner { grid-template-columns: 3fr 2fr; gap: 4rem; }
}

@media (max-width: 480px) {
  .hero { padding-block: 3.5rem 3rem; }
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
}