/* ==========================================================================
   apollo consulting — Hero „Sonnenaufgang"

   Portiert aus der Design-Vorlage
   (material/design-vorlage/design_handoff_hero/reference/hero.css).
   Uebernommen sind Layerstack, Timings und Geometrie; Farben und Schriften
   ziehen aus css/tokens.css statt aus Hex-Werten.

   Abweichungen von der Vorlage, jeweils mit Grund:
     - Der Hero traegt zusaetzlich Marketing-Headline und Subline. Die H1 ist
       die kurze Zeile; die Marketing-Headline steht NEBEN der H1, nicht als
       Ueberschrift (Vorgabe „KUNDE-BESTÄTIGEN" Punkt 3 der Masterdatei).
     - Das Google-Badge der Vorlage ist NICHT gebaut. apollo consulting hat
       laut eigener Analyse (analyse/SEO-GEO-Analyse_Apollo-Consulting.md,
       Z. 110) null Google-Rezensionen; die „4,9 / 120+" der Vorlage sind ein
       Platzhalter. Entscheidung Adrian 09.08.2026: weglassen, bis Volker
       echte Bewertungen hat — der Platz kommt solange dem Rest zugute.
     - Bild als <picture> statt background-image: nur so laesst sich das
       LCP-Element preloaden, in AVIF/WebP ausliefern und per srcset an die
       Viewport-Breite anpassen.
     - Nav kommt aus dem Seiten-Template (Burger, Dropdown), nicht aus der
       Vorlage.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;             /* svh, nicht vh: sonst springt es auf iOS */
  width: 100%;
  overflow: hidden;
  isolation: isolate;             /* kapselt die mix-blend-mode-Layer */
  background: #05070b;            /* Basisgrund unter dem Foto, nur hier */
  display: flex;
  flex-direction: column;
}

/* ── Hintergrund-Layerstack (Reihenfolge ist zwingend) ───────────────────── */

.hero__layer { position: absolute; pointer-events: none; }

/* 1 · Erd-Foto */
.hero__earth {
  inset: -8%;
  transform: scale(1.14);
  transform-origin: 50% 55%;
  will-change: transform;
}
.hero__earth img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* 2 · Sonnen-Glow */
.hero__sun {
  left: 0; top: 34%; width: 46%; height: 42%;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 32% 55%,
      rgba(255,176,74,.55) 0%, rgba(255,140,40,.18) 34%, transparent 62%);
  animation: acSun 8s ease-in-out infinite;
}

/* 3 · Marken-Tint: legt den Blau-Grün-Verlauf der Marke ueber das Foto */
.hero__tint {
  inset: 0;
  mix-blend-mode: soft-light;
  background: linear-gradient(120deg,
      rgba(62,86,152,.5) 0%, rgba(0,105,157,.34) 46%, rgba(116,185,89,.3) 100%);
}

/* 4-6 · Abdunklung. NICHT optional — ohne sie traegt die weisse Typo nicht. */
.hero__vignette-top {
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(5,7,11,.92) 0%, rgba(5,7,11,.72) 22%, rgba(5,7,11,.12) 46%, transparent 62%);
}
.hero__scrim {
  inset: 0;
  background: radial-gradient(70% 48% at 50% 42%,
      rgba(5,7,11,.62) 0%, rgba(5,7,11,.28) 42%, transparent 72%);
}
.hero__vignette-bottom {
  left: 0; right: 0; bottom: 0; height: 46vh;
  background: linear-gradient(to top, #05070b 0%, rgba(5,7,11,.6) 46%, transparent 100%);
}

/* 7 · Marken-Hairline als Abschluss zum naechsten Block */
.hero__hairline {
  left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--ac-gradient);
  z-index: 11;
}

@keyframes acSun {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.12); }
}
@keyframes acRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Vordergrund ─────────────────────────────────────────────────────────── */

.hero__inner {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  flex: 1;
  min-height: 100svh;
  padding-top: 104px;             /* Platz fuer den absolut gesetzten Header */
}

.hero__content {
  flex: 1;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  width: 100%; max-width: 1260px; margin-inline: auto;
  padding: var(--space-2) clamp(20px, 4vw, 56px) 4vh;
  will-change: transform, opacity;
}

/* Hook — die Signaturfigur der Marke, als Kicker gesetzt */
.hero__kicker {
  display: inline-block; margin: 0 0 var(--space-4);
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: 0.8125rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ac-lime);
  opacity: 0; animation: acRise .6s var(--ease-out) forwards;
}

/* H1 — kurz, traegt das Focus-Keyword.
   Bewusst kleiner als in der Vorlage (dort bis 108 px): der Apollo-Hero traegt
   zusaetzlich Marketing-Headline und Subline. Mit 108 px blieb fuer den Rest
   kein ruhiger Platz mehr. */
.hero__title {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--fw-extra);
  font-size: clamp(2.5rem, 5.8vw, 5.25rem);
  line-height: 1.0; letter-spacing: var(--ls-display);
  color: var(--ac-white);
  text-shadow: 0 4px 40px rgba(0,0,0,.5);
  text-wrap: balance;
  max-width: 100%;
  opacity: 0; animation: acRise .8s var(--ease-out) .1s forwards;
}

/* Marketing-Headline — NEBEN der H1, bewusst KEIN Ueberschriften-Tag */
.hero__claim {
  margin: var(--space-4) auto 0; max-width: 54ch;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.125rem, 1.9vw, 1.5rem);
  line-height: 1.25;
  color: var(--text-on-dark);
  text-shadow: 0 2px 22px rgba(0,0,0,.7);
  text-wrap: balance;
  opacity: 0; animation: acRise .8s var(--ease-out) .18s forwards;
}

.hero__sub {
  margin: var(--space-4) auto 0; max-width: 82ch;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6;
  color: rgba(255,255,255,.88);
  text-shadow: 0 2px 22px rgba(0,0,0,.7);
  text-wrap: pretty;
  opacity: 0; animation: acRise .8s var(--ease-out) .26s forwards;
}

.hero__cta-row {
  margin-top: var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  opacity: 0; animation: acRise .8s var(--ease-out) .34s forwards;
}
.hero__cta-note { margin: 0; font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); }

/* Trust-Chips statt Google-Badge */
.hero__trust {
  margin: var(--space-5) 0 0; padding: 0;
  opacity: 0; animation: acRise .8s var(--ease-out) .42s forwards;
}

/* Auszeichnungs-Leiste am unteren Rand */
.hero__awards {
  position: relative; z-index: 10;
  box-sizing: border-box;
  width: 100%; max-width: 1360px; margin-inline: auto;
  padding: var(--space-3) clamp(20px, 4vw, 56px) var(--space-7);
  opacity: 0; animation: acRise .8s var(--ease-out) .5s forwards;
}
.hero__awards .awards-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 3vw, 28px); flex-wrap: wrap;
}
.hero__awards .awards-label {
  margin: 0;
  font-family: var(--font-heading); font-size: var(--fs-overline);
  font-weight: var(--fw-semibold); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.hero__awards .awards-logos { gap: clamp(18px, 3vw, 34px); }
.hero__awards .awards-logos img { height: 104px; }

/* ── Hero-Anschluss: Hero-Text + Outcome-Bullets, gleicher dunkler Grund ─── */

.hero-follow {
  background: #05070b;
  color: var(--text-on-dark);
  padding-block: var(--section-pad) var(--section-pad);
}
.hero-follow .hero-follow-intro { max-width: 76ch; }
.hero-follow p { color: var(--text-on-dark); font-size: var(--fs-body-lg); }

/* Ab 1100 px mehr Luft: dort ist Platz, und die Ebenen sollen atmen.
   Unter 1100 px bleibt es bewusst dicht, damit alles in den ersten
   Bildschirm passt. */
@media (min-width: 1100px) {
  .hero__kicker { margin-bottom: var(--space-6); }
  .hero__claim  { margin-top: var(--space-6); }
  .hero__sub    { margin-top: var(--space-6); }
  .hero__cta-row { margin-top: var(--space-7); gap: var(--space-4); }
  .hero__trust  { margin-top: var(--space-6); }
  .hero__title  { font-size: clamp(3.25rem, 5.4vw, 5.25rem); white-space: nowrap; }
  .hero__claim  { max-width: 68ch; font-size: clamp(1.25rem, 1.8vw, 1.625rem); }
  .hero__sub    { max-width: 88ch; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero__sun { width: 80%; height: 36%; top: 38%; }
  .hero__sub { font-size: 1.0625rem; }
  .hero__awards .awards-logos img { height: 78px; }
}
@media (max-width: 600px) {
  .hero__inner { padding-top: 88px; }
  .hero__kicker { font-size: 0.6875rem; letter-spacing: .16em; }
  .hero__title { font-size: clamp(2.125rem, 9.5vw, 3rem); }
  .hero__claim { font-size: 1.0625rem; }
  .hero__sub { font-size: 1rem; }
  .hero__awards .awards-logos img { height: 62px; }
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero__sun { animation: none; opacity: .7; }
  .hero__kicker, .hero__title, .hero__claim, .hero__sub,
  .hero__cta-row, .hero__trust, .hero__awards {
    animation: none; opacity: 1;
  }
  .hero__earth { transform: scale(1.14) !important; }
  .hero__content { transform: none !important; opacity: 1 !important; }
}

/* ── Auszeichnungs-Siegel: der Effekt ────────────────────────────────────────
   Vier Ebenen, alle ueber transform/opacity — kein Layout, kein Paint-Thrash:
     1 Halo in Markenfarbe hinter dem Siegel, atmet langsam mit
     2 langsames Schweben, je Siegel versetzt (--award-i)
     3 Licht-Sweep ueber das Metall, alle 7 s, gestaffelt
     4 Maus-Tilt ueber js/hero-parallax.js (data-plx-mouse / data-plx-rot)
   Bei prefers-reduced-motion steht alles still, die Siegel bleiben sichtbar. */

.award {
  position: relative;
  display: inline-block;
  isolation: isolate;
  animation: awardFloat 6s ease-in-out infinite;
  animation-delay: calc(var(--award-i, 0) * -2s);
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-slow) var(--ease-out);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

/* 1 · Halo */
.award::before {
  content: '';
  position: absolute; inset: -22% -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
      rgba(116,185,89,.42) 0%, rgba(26,145,154,.22) 42%, transparent 70%);
  filter: blur(14px);
  opacity: .75;
  animation: awardHalo 6s ease-in-out infinite;
  animation-delay: calc(var(--award-i, 0) * -2s);
  pointer-events: none;
}

/* 3 · Licht-Sweep ueber das Siegel */
.award::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(105deg,
      transparent 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.85) 51%,
      rgba(255,255,255,.55) 54%, transparent 64%);
  background-size: 260% 100%;
  background-position: 160% 0;
  mix-blend-mode: screen;
  animation: awardSweep 7s ease-in-out infinite;
  animation-delay: calc(var(--award-i, 0) * 1.1s + 1.5s);
  pointer-events: none;
  /* Der Sweep laeuft nur ueber die Siegelflaeche, nicht ueber das Rechteck */
  -webkit-mask-image: url('/assets/auszeichnungen/ki-innovator.png');
  mask-image: none;
  -webkit-mask-size: 0;   /* Maske pro Siegel unten gesetzt */
}
.award:nth-child(1)::after { -webkit-mask-image: url('/assets/auszeichnungen/german-ceo-excellence.png'); }
.award:nth-child(2)::after { -webkit-mask-image: url('/assets/auszeichnungen/unternehmen-der-zukunft.png'); }
.award:nth-child(3)::after { -webkit-mask-image: url('/assets/auszeichnungen/ki-innovator.png'); }
.award::after {
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

@media (hover: hover) {
  .award:hover {
    transform: translateY(-6px) scale(1.05);
    filter: drop-shadow(0 18px 34px rgba(0,0,0,.6));
  }
  .award:hover::before { opacity: 1; }
}

@keyframes awardFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes awardHalo {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.1); }
}
@keyframes awardSweep {
  0%, 62%  { background-position: 160% 0; }
  86%, 100% { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .award, .award::before, .award::after { animation: none; }
  .award::after { opacity: 0; }
  .award:hover { transform: none; }
}