/*
  hero.css
  Zurückhaltende, CSS-getriebene Hero-Gestaltung für eine "seriöse"
  Einzelanwaltskanzlei. Kein 3D-Rendering, kein Stockfoto-Anwalt,
  kein Justitia-/Waage-Klischee. Ruhige Flächen, dezenter Scroll-Parallax
  auf reinen Hintergrundformen, siehe docs/hero-implementation.md.
*/

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 7vw, 6rem);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--color-warmwhite) 0%, #f2efe6 100%);
}

.hero-layer {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

/* Ruhige, abstrakte Formen statt Bildmotiv – Anspielung auf Bodensee-Horizont
   und Kanzlei-Grün, keine figürliche/personenbezogene Darstellung. */
.hero-layer--1 {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  right: -12vw;
  top: -14vw;
  background: radial-gradient(circle at 30% 30%, var(--color-sage) 0%, transparent 70%);
  opacity: 0.55;
}

.hero-layer--2 {
  width: 30vw;
  height: 30vw;
  max-width: 420px;
  max-height: 420px;
  left: -8vw;
  bottom: -10vw;
  background: radial-gradient(circle at 60% 40%, var(--color-sandstone) 0%, transparent 72%);
  opacity: 0.6;
}

.hero-layer--3 {
  width: 60vw;
  max-width: 900px;
  height: 2px;
  left: 8vw;
  bottom: 18%;
  background: linear-gradient(90deg, transparent, var(--color-green-accent) 40%, transparent);
  opacity: 0.35;
}

/* Dezentes "§"-Wasserzeichen rechts im Hero-Hintergrund: signalisiert auf
   den ersten Blick "Recht", ohne auf Justitia-/Waage-/Aktenstapel-Klischees
   zurückzugreifen (siehe Dossier-Vorgabe, keine generische Kanzlei-Bildsprache). */
.hero-legal-mark {
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: clamp(14rem, 24vw, 28rem);
  line-height: 1;
  color: var(--color-green-deep);
  opacity: 0.1;
  user-select: none;
  border-radius: 0;
}

.hero-inner {
  position: relative;
  max-width: 760px;
}

.hero h1 {
  margin-bottom: var(--space-3);
  font-size: clamp(2.1rem, 4.4vw, var(--fs-3xl));
  /* Fest auf Schwarz statt --color-accent-dark: die Variable wird im
     Dark-Mode-Block auf ein helles Salbeigrün umgeschaltet, was auf dem
     bewusst hellen Hero-Hintergrund zu schwachem Kontrast führte. */
  color: #000000;
}

.hero-lede {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-bottom: var(--space-4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.9rem;
  color: var(--color-accent-dark);
  font-weight: 600;
}
.hero-trust li {
  padding-left: 1.1rem;
  position: relative;
}
.hero-trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* Entrance-Animation: dezent, einmalig, mit vollständigem Verzicht bei reduced motion */
.hero-inner > * {
  opacity: 0;
  transform: translateY(10px);
  animation: hero-fade-in 700ms ease forwards;
}
.hero-inner > *:nth-child(1) { animation-delay: 60ms; }
.hero-inner > *:nth-child(2) { animation-delay: 140ms; }
.hero-inner > *:nth-child(3) { animation-delay: 220ms; }
.hero-inner > *:nth-child(4) { animation-delay: 300ms; }
.hero-inner > *:nth-child(5) { animation-delay: 380ms; }

@keyframes hero-fade-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-inner > * {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .hero-layer {
    transform: none !important;
  }
}