/* ==========================================================================
   corelay - Sektion 5.1: Hero (Startseite)
   --------------------------------------------------------------------------
   Zweispaltiger Einstieg auf --ink-900: links Eyebrow, zweizeilige H1,
   Absatz, vier Merkmale und zwei Buttons, rechts das Geraetemockup mit der
   handschriftlichen Notiz.

   Setzt auf css/tokens.css, css/base.css und css/layout.css auf. Alle
   Selektoren stehen unter dem Praefix .hero, damit nichts kollidiert.
   Der Hero rechnet die Header-Hoehe in sein oberes Padding ein, weil der
   Header transparent darueberliegt.

   Inhalt
     1. Sektionsgeruest und Hintergrundebenen
     2. Zweispaltiges Raster
     3. Textspalte (Eyebrow, Headline, Absatz)
     4. Merkmalzeile
     5. Buttonzeile
     6. Mockup-Spalte
     7. Handschrift-Notiz
     8. Staffelung des Einblendens
     9. Breakpoint 1200px
    10. Breakpoint 1024px
    11. Breakpoint 900px - einspaltig
    12. Breakpoint 700px - Notiz aus
    13. Breakpoint 560px
    14. Breakpoint 380px
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest und Hintergrundebenen
   --------------------------------------------------------------------------
   Die Klasse .section liefert den Standard-Sektionsabstand; der Hero
   ueberschreibt ihn, weil oben zusaetzlich die Header-Hoehe Platz braucht.
   Punktraster (.dot-grid) und Schein (.glow) liegen im ::before bzw. ::after
   der Sektion, die Vignette sitzt auf .hero-veil - sonst wuerden sich
   .dot-grid und .vignette dasselbe ::before teilen.
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  align-items: center;
  /* Header-Hoehe plus eigener Innenabstand */
  padding-top: calc(var(--header-h) + clamp(40px, 5vw, 76px));
  padding-bottom: clamp(56px, 6vw, 92px);
  /* Spezifikation: Hoehe ca. 640px plus Header */
  min-height: calc(640px + var(--header-h));
  /* Position und Groesse des blauen Scheins hinter dem Mockup */
  --glow-x: 68%;
  --glow-y: 0%;
  --glow-size: 860px;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  display: block;
  pointer-events: none;
}


/* --------------------------------------------------------------------------
   2. Zweispaltiges Raster
   -------------------------------------------------------------------------- */

.hero-inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  align-items: center;
  gap: clamp(32px, 4vw, 56px);
}


/* --------------------------------------------------------------------------
   3. Textspalte
   -------------------------------------------------------------------------- */

.hero-text {
  max-width: 620px;
}

.hero-eyebrow {
  color: var(--blue-400);
  margin-bottom: var(--sp-4);
}

.hero-title {
  color: var(--t-on-dark);
  margin-bottom: var(--sp-5);
  /* Der harte Umbruch zwischen den beiden Zeilen kommt aus .ln; innerhalb
     jeder Zeile gleicht das geerbte text-wrap: balance aus css/base.css die
     Zeilenlaengen aus. */
}

.hero-lead {
  max-width: 470px;
  color: var(--t-on-dark-soft);
}


/* --------------------------------------------------------------------------
   4. Merkmalzeile
   --------------------------------------------------------------------------
   Vier Eintraege nebeneinander, mobil umbrechend. Das Haekchen ist ein
   Flaechen-Icon (i-check-circle) in --blue-400, 14px.
   -------------------------------------------------------------------------- */

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: var(--sp-7);
}

.hero-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--t-on-dark-soft);
}

.hero-feature-ico {
  width: 14px;
  height: 14px;
  color: var(--blue-400);
}


/* --------------------------------------------------------------------------
   5. Buttonzeile
   -------------------------------------------------------------------------- */

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}


/* --------------------------------------------------------------------------
   6. Mockup-Spalte
   -------------------------------------------------------------------------- */

.hero-media {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 760px;
}

.hero-mockup {
  width: 100%;
  height: auto;
  margin-left: auto;
}


/* --------------------------------------------------------------------------
   7. Handschrift-Notiz
   --------------------------------------------------------------------------
   Sitzt absolut ueber dem Mockup, leicht nach links gekippt (-6 Grad).
   Der handgezeichnete Pfeil darunter zeigt nach links unten auf die Geraete.
   -------------------------------------------------------------------------- */

.hero-note {
  position: absolute;
  top: 0;
  right: 8px;
  z-index: var(--z-raised);
  text-align: right;
  transform: rotate(-6deg);
  transform-origin: 100% 0;
  pointer-events: none;
}

.hero-note-text {
  color: var(--t-on-dark);
}

/* Erzwingt die zweite Zeile der Notiz auf jeder Breite */
.hero-note-line {
  display: block;
}

.hero-note-arrow {
  width: clamp(48px, 4.4vw, 66px);
  height: auto;
  margin-top: 6px;
  margin-left: 4px;
  opacity: .85;
}


/* --------------------------------------------------------------------------
   8. Staffelung des Einblendens
   --------------------------------------------------------------------------
   js/main.js setzt .is-visible, die Verzoegerung steuert --reveal-delay.
   -------------------------------------------------------------------------- */

.hero-eyebrow { --reveal-delay: 0ms; }
.hero-title { --reveal-delay: 80ms; }
.hero-lead { --reveal-delay: 160ms; }
.hero-features { --reveal-delay: 240ms; }
.hero-actions { --reveal-delay: 320ms; }
.hero-media { --reveal-delay: 160ms; }


/* --------------------------------------------------------------------------
   9. Breakpoint 1200px
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

  .hero {
    --glow-size: 720px;
  }

  .hero-inner {
    grid-template-columns: 1fr 1fr;
  }

  .hero-note {
    right: 0;
  }
}


/* --------------------------------------------------------------------------
   10. Breakpoint 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {

  .hero {
    padding-top: calc(var(--header-h) + 44px);
    min-height: calc(560px + var(--header-h));
    --glow-size: 600px;
    --glow-y: 4%;
  }

  .hero-inner {
    gap: var(--sp-8);
  }

  .hero-features {
    gap: 10px 18px;
  }
}


/* --------------------------------------------------------------------------
   11. Breakpoint 900px - einspaltig, erst Text, dann Mockup
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  .hero {
    display: block;
    min-height: 0;
    padding-top: calc(var(--header-h) + 40px);
    --glow-x: 50%;
    --glow-y: 34%;
    --glow-size: 560px;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-10);
  }

  .hero-text {
    max-width: 640px;
  }

  /* Reihenfolge bleibt Text vor Mockup - hier nur zentriert ausrichten
     und die Einblend-Verzoegerung verkuerzen */
  .hero-media {
    justify-self: center;
    max-width: 620px;
    --reveal-delay: 80ms;
  }

  .hero-mockup {
    margin-inline: auto;
  }
}


/* --------------------------------------------------------------------------
   12. Breakpoint 700px - Handschrift-Notiz aus
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {

  .hero-note {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   13. Breakpoint 560px
   -------------------------------------------------------------------------- */

@media (max-width: 559.98px) {

  .hero {
    padding-top: calc(var(--header-h) + 32px);
    padding-bottom: 56px;
  }

  .hero-inner {
    gap: var(--sp-8);
  }

  .hero-features {
    gap: 10px 16px;
    margin-top: var(--sp-6);
  }

  .hero-actions {
    margin-top: var(--sp-7);
  }
}


/* --------------------------------------------------------------------------
   14. Breakpoint 380px - Buttons in voller Breite
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {

  .hero-features {
    flex-direction: column;
    gap: 8px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .hero-actions .btn {
    width: 100%;
  }
}