/* ===========================================================================
   LEVIORA · Hero — die Feder liegt im Hintergrund und bewegt sich mit
   ---------------------------------------------------------------------------
   Kein Video, kein Scroll-Band: der Hero ist einen Bildschirm hoch, Text und
   Schaltflaechen stehen sofort da. Dahinter liegt die Marken-Feder auf einem
   warmen Goldschein.

   Die Bewegung ist auf drei voneinander unabhaengige Kanaele verteilt, damit
   sich nichts gegenseitig ueberschreibt:

     translate  (CSS)  · die feste Platzierung der Feder
     transform  (JS)   · die langsame Gegenbewegung beim Scrollen
     transform  (CSS)  · das ruhige Schweben — liegt auf dem inneren <img>

   Bewegt werden ausschliesslich transform und opacity. Kein Layout, kein
   Reflow, keine Ladezeit im kritischen Pfad.
   ========================================================================= */

/* Der Hero ist eine Scrollstrecke, auf der eine Platte klebt. Die Platte ist
   das, was man sieht: ein Bildschirm mit Feder, Wortmarke und Text. Die Zugabe
   darunter ist reine Scrollstrecke — waehrend sie durchlaeuft, steht der Text
   still und laesst sich lesen.

   Ohne sie war der vollstaendige Hero-Text nur zwischen 7 und 124 px
   Scrollhoehe zu sehen. Ein Wisch mit dem Trackpad sind 300 bis 800 px: der
   Text war weg, bevor jemand ihn lesen konnte. */
.hero {
  --hero-zugabe: 75svh;
  position: relative;
  background: var(--cream);
  /* Der Hero reicht unter den durchsichtigen Kopf: die Flaeche beginnt oben
     am Bildschirmrand. Ohne JavaScript bleibt der Rueckfallwert 0px. */
  margin-top: calc(-1 * var(--header-h, 0px));
}
/* Die Zugabe muss *Inhalt* sein, kein Padding: eine klebende Platte darf sich
   nur innerhalb des Inhaltsbereichs ihres Elternteils bewegen. Als
   padding-bottom hatte sie null Spielraum und klebte deshalb nie. */
.hero::after {
  content: ""; display: block; height: var(--hero-zugabe);
}

.hero__platte {
  position: sticky;
  /* Passt die Platte auf den Bildschirm, klebt sie oben. Ist sie hoeher — auf
     schmalen Handys ist sie das —, klebt sie mit der Unterkante, sonst blieben
     die Schaltflaechen unter dem Fensterrand unerreichbar. Die Hoehe meldet
     hero.js; ohne JavaScript ist der Rueckfall 100svh, also top: 0. */
  top: min(0px, calc(100svh - var(--platte-h, 100svh)));
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream);
  padding-top: calc(var(--header-h, 0px) + clamp(1.5rem, 5vh, 3.5rem));
  padding-bottom: clamp(2.5rem, 8vh, 5rem);
}

/* ---- Hintergrund: Schein und Feder --------------------------------------- */

.hero__buehne {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}

/* Zwei sehr weiche Goldscheine. Sie geben der Creme-Flaeche Tiefe, ohne dass
   eine Kante entsteht — deshalb laufen beide bis auf null aus. */
.hero__schein {
  position: absolute; inset: -25%;
  background:
    radial-gradient(closest-side at 68% 38%, rgba(221,158,29,.15), rgba(221,158,29,0) 74%),
    radial-gradient(closest-side at 26% 78%, rgba(232,200,119,.12), rgba(232,200,119,0) 72%);
}

/* Zwischen Feder und Text liegt eine sehr weiche Cremeflaeche. Sie hebt genau
   dort an, wo Worte stehen, und laeuft nach aussen auf null aus — die Feder
   zieht dadurch sichtbar *hinter* dem Text vorbei, statt mit ihm zu ringen.
   Ohne sie faellt die goldene Zulassungszeile ueber der dunkelsten Stelle der
   Feder auf 4,0:1 und damit unter die geforderten 4,5:1. Nachgerechnet mit den
   echten Pixeln der Bilddatei, nicht geschaetzt. */
.hero__ruhe {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 38% 50% at 50% 52%,
    rgba(251, 248, 241, .90)   0%,
    rgba(251, 248, 241, .86)  58%,
    rgba(251, 248, 241, .42)  82%,
    rgba(251, 248, 241, 0)   100%);
}

.hero__feder {
  position: absolute;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.hero__feder img { display: block; width: 100%; height: auto; }

/* Auf breiten Schirmen steht die Feder rechts neben der Textspalte und laeuft
   oben wie rechts aus dem Bild. Angeschnitten wirkt sie gross, ohne Platz zu
   kosten. */
.hero__feder--haupt {
  right: -1%; top: -12%;
  width: clamp(300px, 40vw, 620px);
  opacity: .34;
}

/* Das ruhige Schweben. Liegt auf dem <img>, damit die Scroll-Bewegung des
   Elternelements unangetastet bleibt. Sehr langsam und sehr klein: die Feder
   soll leben, nicht auffallen. */
@keyframes federSchweben {
  0%, 100% { transform: translate3d(0, -9px, 0) rotate(-1.1deg); }
  50%      { transform: translate3d(0,  9px, 0) rotate( 1.1deg); }
}
.hero__feder--haupt img {
  animation: federSchweben 13s cubic-bezier(.45, 0, .55, 1) infinite;
}

/* ---- Der Text ------------------------------------------------------------ */

.hero__inner { position: relative; text-align: center; }
.hero__inner > * { margin-inline: auto; }
.hero .kicker { justify-content: center; }
.hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.14;
  margin-block: var(--s-5);
  max-width: 20ch;
}
/* Ab hier traegt die Breite zwei volle Zeilen: der Umbruch steht dann allein
   im <br>, nicht zusaetzlich an der Spaltenkante. Aus drei Zeilen werden zwei. */
@media (min-width: 861px) {
  .hero h1 { max-width: none; }
}
.hero .lead {
  font-size: clamp(1.02rem, 2.1vw, 1.15rem); line-height: 1.62;
  max-width: 40rem;
}
.hero .btn-row { justify-content: center; margin-top: var(--s-6); }
.hero .hero__trust { justify-content: center; margin-top: var(--s-5); }

/* Ein ruhiges Aufblenden beim Laden — einmal, in Leserichtung. Nicht an den
   Scroll gekoppelt: wer die Seite oeffnet, soll lesen koennen, nicht scrollen
   muessen. */
@keyframes heroAuf {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
/* Der Hero-Text wartet, solange die Wortmarke steht. Uebergaenge statt
   Keyframes: sie lassen sich mitten in der Bewegung umkehren, ohne zu springen. */
.js .hero__inner > * {
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: var(--stufe, 0s);
}
.js.lv-auftritt .hero__inner > * {
  opacity: 0; transform: translate3d(0, 14px, 0); transition-delay: 0s;
}
.js .hero__inner > :nth-child(1) { --stufe: 0s;    }
.js .hero__inner > :nth-child(2) { --stufe: .028s; }
.js .hero__inner > :nth-child(3) { --stufe: .056s; }
.js .hero__inner > :nth-child(4) { --stufe: .084s; }
.js .hero__inner > :nth-child(5) { --stufe: .112s; }
.js .hero__inner > :nth-child(6) { --stufe: .140s; }
.js .hero__inner > :nth-child(7) { --stufe: .168s; }
.js .hero__inner > :nth-child(8) { --stufe: .196s; }

/* ---- Der Auftritt: die Wortmarke haelt, bis jemand scrollt --------------- */

/* Echte Schrift, kein Bild: scharf auf jedem Schirm, lesbar fuer Suchmaschinen.
   Ohne JavaScript und bei „Bewegung reduzieren" bleibt sie unsichtbar — im Kopf
   steht das Logo ohnehin, und der Text steht dann sofort da. */
/* max-width zuruecknehmen: base.css deckelt jedes <p> auf die Lesebreite
   (--measure, hier 48rem). Fuer eine Flaeche, die den ganzen Hero fuellen soll,
   ist das falsch — die Wortmarke sass dadurch 300 px zu weit links. */
/* Die Auftritts-Ebene ist genau einen Bildschirm hoch — nicht so hoch wie der
   Hero. Auf dem Handy ist der Hero naemlich hoeher als das Fenster (der Text
   darunter braucht Platz, auch wenn er noch unsichtbar ist); der Hinweis stand
   dadurch 24 px unterhalb der Fensterkante, also nirgends. */
.hero__auftritt {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: 100vh; height: 100svh;
  pointer-events: none;
}

.hero__marke {
  position: absolute; inset: 0; z-index: 2; margin: 0; max-width: none;
  display: grid; place-content: center;
  padding-inline: var(--gutter); text-align: center;
  pointer-events: none; opacity: 0;
  transform: scale(1.04) translate3d(0, -10px, 0);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js.lv-auftritt .hero__marke { opacity: 1; transform: none; }

/* Auf breiten Schirmen steht die Wortmarke links, die Feder rechts: so stehen
   beide frei, und der Cremeschein hinter der Schrift muss der Feder nichts
   wegnehmen. Auf schmalen Schirmen ist dafuer kein Platz — dort liegt die
   Marke mittig vor der Feder, und der Schein traegt die Lesbarkeit. */
@media (min-width: 861px) {
  .hero__marke { justify-content: start; padding-inline-start: clamp(2rem, 8vw, 9rem); }
}

.hero__marke-inner {
  position: relative; display: grid; justify-items: center; gap: .5em;
}
/* Ein sehr weicher Cremeschein hinter den drei Zeilen. Er ist der Grund, warum
   die Feder daneben in vollem Gold stehen darf: die kleine goldene Unterzeile
   faellt sonst auf 2,3:1 — unlesbar. Nachgerechnet mit den echten Bildpixeln. */
.hero__marke-inner::before {
  content: ""; position: absolute; z-index: -1;
  inset: -130% -26%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(251, 248, 241, .94)   0%,
    rgba(251, 248, 241, .88)  46%,
    rgba(251, 248, 241, .40)  74%,
    rgba(251, 248, 241, 0)   100%);
}

.hero__marke-wort {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.9rem, 9vw, 6.5rem); line-height: 1;
  letter-spacing: .115em; color: var(--ink);
  text-indent: .115em;            /* die Sperrung hinter dem letzten Buchstaben ausgleichen */
}
.hero__marke-sub {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(.92rem, 1.9vw, 1.05rem); letter-spacing: .3em;
  text-transform: uppercase; color: var(--gold-deep); text-indent: .3em;
}
.hero__marke-claim {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(.95rem, 2.1vw, 1.35rem); color: var(--graphite);
  margin-top: .1em;
}
.hero__marke-claim::before {
  content: ""; display: block; width: 46px; height: 1px; margin: 0 auto .7em;
  background: var(--gold);
}

/* Der Hinweis sagt, was zu tun ist — ohne ihn wartet die Marke stumm. */
.hero__cue {
  position: absolute; z-index: 2; left: 50%; translate: -50% 0;
  bottom: clamp(1.4rem, 4vw, 2.6rem); margin: 0; max-width: none;
  display: grid; justify-items: center; gap: .45rem;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
  pointer-events: none; opacity: 0;
  transition: opacity .6s var(--ease);
}
.js.lv-auftritt .hero__cue { opacity: 1; }
.hero__cue svg { width: 18px; height: 18px; animation: cueWink 2.4s var(--ease) infinite; }
@keyframes cueWink {
  0%, 100% { transform: translate3d(0, -3px, 0); }
  50%      { transform: translate3d(0,  3px, 0); }
}

/* Solange die Marke steht, gehoert der Bildschirm der Feder: volles Gold, eine
   Spur groesser, und die Ruheflaeche darueber ist aus. Beim Scrollen tritt sie
   in einer knappen Sekunde zurueck — das ist der ganze Uebergang. */
.hero__feder--haupt { transition: opacity .9s var(--ease), scale .9s var(--ease); }
.hero__ruhe { transition: opacity .9s var(--ease); }
.js.lv-auftritt .hero__feder--haupt { opacity: .92; scale: 1.05; }
.js.lv-auftritt .hero__ruhe { opacity: 0; }

/* ---- Schmale Schirme ------------------------------------------------------ */

/* Hier fuellt der Text die Breite. Die Feder rueckt dahinter und wird zum
   ruhigen Wasserzeichen — gross genug, um erkennbar zu bleiben, hell genug,
   dass jeder Buchstabe darauf lesbar ist. */
@media (max-width: 860px) {
  .hero__feder--haupt {
    right: auto; top: 47%; left: 50%;
    translate: -50% -50%;
    width: min(104vw, 500px);
    opacity: .18;
  }
  .js.lv-auftritt .hero__feder--haupt { opacity: .82; scale: 1.04; }
  /* Hier liegt die Feder mittig hinter der Schrift statt daneben — der Schein
     braucht deshalb mehr Weg nach aussen, sonst faellt die goldene Unterzeile
     auf 4,15:1. */
  .hero__marke-inner::before { inset: -130% -62%; }
  .hero__ruhe { display: none; }
  /* Der Hinweis rueckt ueber die feste Aktionsleiste. */
  .hero__cue { bottom: calc(4.9rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 620px) {
  .hero .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn-row .btn { width: 100%; }
}

/* Auf dem Handy ist die Platte hoeher als der Bildschirm — der Text passt dann
   nicht auf einmal ins Bild, und die klebende Platte muss mit der Unterkante
   haften statt oben. Je enger der Satz hier sitzt, desto mehr davon ist auf
   einmal zu sehen. Gekuerzt wird nur Luft, kein Inhalt: rund 120 px.
   Dazu Platz fuer die feste Aktionsleiste, damit die Kapazitaetszeile nicht
   dahinter verschwindet. */
@media (max-width: 767px) {
  .hero__platte {
    padding-top: calc(var(--header-h, 0px) + clamp(.75rem, 2.2vh, 1.5rem));
    padding-bottom: calc(clamp(1rem, 3vh, 1.75rem) + 64px);
  }
  .hero h1 { margin-block: 1rem; line-height: 1.1; }
  .hero .lead { line-height: 1.55; }
  .hero .btn-row { margin-top: 1.25rem; }
  .hero .hero__trust { margin-top: .9rem; }
  .hero__frei { margin-top: .8rem; }
  /* Der Kicker brach auf zwei Zeilen um — eine Spur enger gesperrt passt er
     in eine, und das spart eine ganze Zeile. */
  .hero .kicker { letter-spacing: .09em; font-size: .82rem; }
}

/* ---- Bewegung abbestellt -------------------------------------------------- */

/* Alles steht still: kein Schweben, kein Mitlaufen beim Scrollen. Die Feder
   bleibt sichtbar — sie ist Gestaltung, keine Animation. Zeichengleich prueft
   hero.js dieselbe Bedingung und schreibt dann gar nichts. */
@media (prefers-reduced-motion: reduce) {
  .hero__feder--haupt img { animation: none; }
  .hero__cue svg { animation: none; }
  .js .hero__inner > * { transition: none; }
}