/* ==========================================================================
   Hero „Wonder, together.“ (neu gesetzt am 12.09.2026)
   Idee: Die beiden Wörter hängen aneinander. Das h von „together“ steht genau
   unter dem n von „Wonder“, der Haken seiner Serife senkrecht unter dem Haken
   des n, und seine Oberlänge setzt genau am Fuß des n an. Rechts daneben
   steht die Einladung.

   Die Maße kommen aus den Glyphen selbst (Fraunces, wght 330, opsz 144,
   SOFT 100, WONK 1, 2000 Einheiten pro Geviert):
   - linke Stammkante n: 170 Einheiten = 0.085em
   - linke Stammkante h: 164 Einheiten = 0.082em (Haken jeweils 135 davor)
   - Oberkante h: 1463 Einheiten = 0.7315em
   Die optische Größe ist fest auf 144 gestellt, damit diese em-Werte bei jeder
   Schriftgröße stimmen. Den Einzug der ersten Zeile hat der Browser mit genau
   diesen Werten ausgemessen (Laufweite und Unterschneidung eingerechnet).
   ========================================================================== */

/* Die Kopfzeile wohnt in css/nav.css. */

.hero {
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 6rem)) clamp(3rem, 2rem + 4vw, 6rem);
}

.hero__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(2.5rem, 1rem + 5vw, 7rem);
  row-gap: var(--space-xl);
  align-items: end;
}

/* Die Wortmarke */
.hero__title {
  /* Abstand Grundlinie zu Grundlinie: Oberkante h (0.7315em) minus ein Hauch,
     damit keine Kantenglättung eine Fuge zeigt. Mehr Überlappung würde den
     Haken des h im Fuß des n verstecken. */
  --lock-lead: 0.726;
  /* Einzug der ersten Zeile, damit die Stämme von n und h übereinanderstehen */
  --lock-indent: 0.473em;

  color: var(--heading);
  font-size: var(--step-display);
  font-weight: 330;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  line-height: var(--lock-lead);
  letter-spacing: -0.022em;
  /* Oberkante = Versalhöhe von „W“, Unterkante = Grundlinie von „together“ */
  text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
  .hero__title {
    padding-top: 0.42em;
  }
}

.hero__line {
  display: block;
  white-space: nowrap;
}

.hero__line--wonder {
  padding-inline-start: var(--lock-indent);
}

/* Die Einladung rechts daneben */
.hero__text {
  display: grid;
  justify-items: start;
  gap: var(--space-m);
  max-width: 34rem;
}

.hero__lede {
  max-width: 31ch;
  color: var(--fg);
  font-size: var(--step-2);
  line-height: 1.4;
}

.hero__lede-promise {
  display: block;
  color: var(--heading);
}

.hero__intro {
  max-width: 44ch;
  color: var(--fg-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-2xs);
}

/* Unter 64rem ist neben der Wortmarke kein Platz mehr für ruhige Zeilen:
   Die Einladung rutscht darunter. */
@media (max-width: 64rem) {
  .hero {
    align-items: end;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 30rem) {
  .hero__title {
    /* Die Wortmarke ist 4,64 Geviert breit und muss auch auf 320 px in die
       Spalte passen: 60 px dort, 72 px ab 375 px. */
    font-size: clamp(3.25rem, -0.65rem + 21.8vw, 4.5rem);
  }

  /* Auf dem Handy wird der Button zur vollen Daumenfläche */
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    justify-self: stretch;
  }

  .hero__actions .link-quiet {
    align-self: flex-start;
    padding-block: 0.5rem; /* größere Tippfläche */
  }
}

/* Intro-Bewegung: nur vorbereitet, wenn JS läuft und Bewegung erwünscht ist.
   Ohne JS oder nach der Sicherheitsfrist steht alles im Endzustand. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.intro-done) .hero__line,
  .js:not(.intro-done) .hero [data-intro] {
    opacity: 0;
  }
}