:root{
  --accent-orange: #ff7a18;
  --accent-yellow: #ffd166;
  --accent-pink:   #ff3ea5;

  --text-hero: #0b1020;
  --text-hero-weak: rgba(11,16,32,.75);
  --radius-2xl: 1.25rem;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.08);

  /* Hauptverläufe */
  --g1: color-mix(in oklab, var(--accent-orange) 85%, white 15%);
  --g2: color-mix(in oklab, var(--accent-yellow) 70%, var(--accent-orange) 30%);
  --g3: color-mix(in oklab, var(--accent-pink) 60%, var(--accent-yellow) 40%);
}

/* Container */
.hero .container{ width:min(1100px, 92%); margin-inline:auto; }

/* Hero-Basis */
.hero{
  position:relative;
  overflow:hidden;
  padding:clamp(4rem, 6vw, 7rem) 0;
  border-radius:0 0 var(--radius-2xl) var(--radius-2xl);
  background: linear-gradient(135deg, var(--g1), var(--g3));
  color: var(--text-hero);
  box-shadow: var(--shadow-soft);
  isolation:isolate;
}

/* "stärkerer" Hero */
.hero--strong{
  background: radial-gradient(1000px 600px at 15% 20%, var(--accent-yellow), transparent 70%),
              radial-gradient(800px 500px at 85% 10%, var(--accent-pink), transparent 65%),
              linear-gradient(135deg, var(--accent-orange), var(--accent-pink));
}

/* Hintergrund-Animationen */
.hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.hero__blob{
  position:absolute; width:50vmax; height:50vmax; border-radius:50%;
  filter:blur(60px); opacity:.25; mix-blend-mode:soft-light;
  animation: float 20s ease-in-out infinite;
}
.hero__blob--a{ background: radial-gradient(circle at 30% 30%, var(--accent-pink), transparent 60%); top:-20vmax; left:-10vmax; animation-delay:-6s; }
.hero__blob--b{ background: radial-gradient(circle at 70% 70%, var(--accent-orange), transparent 60%); bottom:-22vmax; right:-8vmax; }

/* Inhalt */
.hero__inner{ position:relative; z-index:1; text-align:center; }
.hero__title{
  font-size:clamp(2.3rem,4.5vw,4rem);
  font-weight:800;
  margin:0 0 .75rem;
  letter-spacing:-.01em;
}
.hero__subtitle{
  font-size:clamp(1.1rem,1.7vw,1.3rem);
  max-width:60ch;
  margin:0 auto 2rem;
  color:var(--text-hero-weak);
}

/* Buttons */
.hero .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.6rem; padding:.9rem 1.1rem;
  border-radius:.85rem; font-weight:600;
  text-decoration:none; transition:.2s ease;
  border:1px solid transparent; box-shadow:0 6px 16px rgba(0,0,0,.06);
}
.hero .btn--primary{
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-pink));
  color:#fff;
}
.hero .btn--primary:hover{ transform:translateY(-2px) scale(1.03); }
.hero .btn--ghost{
  background: rgba(255,255,255,.7);
  border-color: rgba(0,0,0,.06);
  color: var(--text-hero);
}
.hero .btn--ghost:hover{
  background: rgba(255,255,255,.85);
  transform: translateY(-2px);
}

/* Animationen */
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(2vmax,-2vmax,0) scale(1.05); }
}

/* --- Tweaks: Homepage / Splash --- */
.layout--splash .hero {
  /* etwas weniger Luft unter dem Hero */
  margin-bottom: clamp(1.5rem, 2vw, 2.25rem);
}

.layout--splash .feature__wrapper {
  /* harmonisierter Abstand zwischen den Kacheln */
  gap: 1.25rem;
}


@media (prefers-reduced-motion: reduce){
  .hero__blob{ animation:none; }
}
.hero .btn:focus-visible{
  outline: 2px solid currentColor; outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.65);
}