/* ============================================================
   Hero

   Masse aus Prototyp.dc.html Zeile 1808-1871.

   `container-type: size` macht den Hero zum Bezugsrahmen fuer cqw/cqh.
   Nur so laesst sich der Punktekasten in Ebene 3 auf die Groesse des
   unbeschnittenen Bildes rechnen — ohne JavaScript und ohne zu wissen,
   wie hoch der Hero gerade ist.
   ============================================================ */

.ps-hero {
  --ps-hero-verhaeltnis: 3168 / 1344;
  --ps-hero-bild: 1.7775;   /* Seitenverhaeltnis des Originals */
  /*
     Wie nah das Bild herangeholt wird. Wie bei der Ausrichtung gilt: Der
     Wert aus der Seitenleiste kommt als --ps-hero-zoom-gross herein und
     wird erst hier zugewiesen. Stuende er direkt am Element, koennten die
     Regeln fuer Tablet und Handy weiter unten nie greifen — ein
     Inline-Stil schlaegt jede Media Query.
  */
  --ps-hero-zoom: var(--ps-hero-zoom-gross, 1.33);

  /*
     Die waagerechte Ausrichtung kommt aus zwei Werten, die render.php als
     Inline-Stil setzt. Sie hier zusammenzufuehren ist kein Umweg, sondern
     noetig: Ein Inline-Stil schlaegt jede Media Query. Stuende
     --ps-hero-x direkt am Element, koennte die Regel fuers Handy weiter
     unten nie greifen.
  */
  --ps-hero-x: var(--ps-hero-x-gross, 0.5);
  --ps-hero-y: var(--ps-hero-y-gross, 0.5);

  position: relative;

  /*
     `clip`, nicht `hidden`.

     Ein Kasten mit `overflow: hidden` ist ein Scrollcontainer — auch wenn
     man ihn nicht scrollen kann. Das genuegt dem Browser: Bekommt die
     Kontaktkarte beim Oeffnen den Fokus und ragt sie ueber den Bildrand
     hinaus, scrollt er den Hero seitwaerts, um sie zu zeigen. Bild, Text
     und Bildpunkte rutschen dabei sichtbar nach links.

     Es kam noch schlimmer: Die Regel, die die Karte bei Platzmangel nach
     links kippt, misst nach dem Oeffnen — und nach dem Scrollen passte die
     Karte ja. Sie griff also nie.

     `clip` macht daraus einen Kasten, der beschneidet, ohne Scrollcontainer
     zu sein. Damit kann nichts mehr verrutschen.
  */
  overflow: clip;
  aspect-ratio: var(--ps-hero-verhaeltnis);
  min-height: 420px;

  /*
     Die Breite muss ausdruecklich dastehen.

     `aspect-ratio` rechnet in beide Richtungen. Greift auf schmalen
     Geraeten die `min-height`, leitet der Browser aus der erhoehten Hoehe
     wieder eine Breite ab — 560px mal 3/4 ergaben 420px auf einem 375px
     breiten Bildschirm, und der Hero stand 45px ueber den Rand hinaus.
     Sichtbar wurde das nur daran, dass die Kontaktkarte rechts
     abgeschnitten war; `overflow-x: clip` am Dokument hatte den Ueberlauf
     stillschweigend gekappt.
  */
  width: 100%;
  container-type: size;
  margin-block: 0;
  background: var(--petrol-950);
}

/* ---------- Die gemeinsame Geometrie ----------

   Bild und Punkte liegen im selben Kasten und teilen sich dieselbe Formel.
   Das ist der Kern: Wuerde das Bild ueber `object-fit: cover` sitzen und
   der Punktekasten daneben nachgerechnet, muesste jede Aenderung an einer
   der beiden Stellen in der anderen nachgezogen werden — und ein Zoom auf
   dem Bild verschoebe die Punkte gegenueber den Gesichtern.

   Die Formel bildet `cover` nach: Die groessere der beiden Achsen bestimmt,
   wie weit das Bild ueber den Rahmen hinausragt. Der Zoom multipliziert
   beide. `left`/`translate` mit demselben Prozentwert richten den Kasten
   aus wie `object-position` das Bild.

   Moeglich macht das `container-type: size` auf dem Hero: Erst dadurch
   beziehen sich cqw und cqh auf ihn.
*/

.ps-hero__bild,
.ps-hero__punkte {
  --ps-hero-w: calc(max(100cqw, 100cqh * var(--ps-hero-bild)) * var(--ps-hero-zoom));
  --ps-hero-h: calc(max(100cqh, 100cqw / var(--ps-hero-bild)) * var(--ps-hero-zoom));

  position: absolute;
  width: var(--ps-hero-w);
  height: var(--ps-hero-h);

  /*
     Bewusst ueber `left`/`top` und nicht ueber `translate`: Ein Element mit
     transform wird zum Bezugsrahmen fuer `position: fixed` in seinem
     Inneren. Die Karte am unteren Bildrand auf dem Handy haenge dann am
     Punktekasten statt am Hero — und der ist groesser als das Bild und
     verschoben.

     --ps-hero-x ist deshalb ein Faktor (0 links, 0.5 mittig, 1 rechts) und
     kein Prozentwert: So laesst sich der Ueberstand direkt verrechnen.
  */
  left: calc((100cqw - var(--ps-hero-w)) * var(--ps-hero-x));
  top: calc((100cqh - var(--ps-hero-h)) * var(--ps-hero-y));
}

/* ---------- 1 · Bild ---------- */

.ps-hero__bild { z-index: 0; }

.ps-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  /* Der Kasten hat bereits das Seitenverhaeltnis des Bildes und sitzt
     bereits an der richtigen Stelle — `cover` faengt nur Rundungsreste ab,
     `object-position` waere hier doppelt gemoppelt. */
  object-fit: cover;
}

/* ---------- 2 · Verlauf ----------
   Von links, nicht von unten: Die Schrift steht links, die Personen stehen
   rechts. Ein Verlauf von unten wuerde beide gleich stark verdunkeln. */

.ps-hero__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgb(5 25 31 / 86%) 0%,
    rgb(5 25 31 / 58%) 38%,
    rgb(5 25 31 / 10%) 62%,
    rgb(5 25 31 / 0%) 78%
  );
}

.ps-hero--schleier-stark .ps-hero__schleier {
  background: linear-gradient(
    115deg,
    rgb(5 25 31 / 94%) 0%,
    rgb(5 25 31 / 76%) 44%,
    rgb(5 25 31 / 34%) 68%,
    rgb(5 25 31 / 12%) 88%
  );
}

.ps-hero--schleier-ohne .ps-hero__schleier { display: none; }

/* ---------- 3 · Punkte ---------- */

.ps-hero__punkte {
  z-index: 3;
  pointer-events: none;
}

/* ---------- 4 · Inhalt ---------- */

.ps-hero__inhalt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-width: 1180px;
  margin-inline: auto;
  width: 100%;
  padding: var(--space-9) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  pointer-events: none;
}

.ps-hero .ps-hero__titel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--on-media-strong);
  max-width: 20ch;
  text-wrap: balance;
}

.ps-hero__unterzeile {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--on-media);
  max-width: 760px;
  text-wrap: pretty;
}

.ps-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  pointer-events: auto;
}

.ps-hero__aktion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  background: var(--on-media-strong);
  color: var(--petrol-900);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.ps-hero__aktion:hover {
  background: var(--accent-base);
  color: var(--petrol-950);
}

/* ---------- Schmale Breiten ----------

   Ein 2,36:1-Bild ist auf dem Handy 160px hoch — darauf passt keine
   Ueberschrift. Ab hier wird der Hero hochkant und die Schrift bekommt
   wieder Platz. `min-height` allein genuegt nicht: Ohne festes Verhaeltnis
   verliert der Punktekasten seine Bezugsgroesse.
*/

@media (max-width: 900px) {
  .ps-hero {
    --ps-hero-verhaeltnis: 4 / 3;
    /* 4:3 schneidet von einem 16:9-Bild schon seitlich weg. Bliebe es bei
       1.38, faellt der rechte Bildpunkt aus dem Ausschnitt — nachgemessen
       bei 900 und 768 Pixeln. Etwas kleinere Gesichter sind der bessere
       Tausch gegen einen Ansprechpartner, den es nicht mehr gibt. */
    --ps-hero-zoom: 1.2;
    min-height: 520px;
  }
  .ps-hero__inhalt { padding: var(--space-8) var(--space-4) var(--space-7); }
}

@media (max-width: 600px) {
  .ps-hero {
    --ps-hero-verhaeltnis: 3 / 4;
    --ps-hero-x: var(--ps-hero-x-mobil, 0.5);
    --ps-hero-y: var(--ps-hero-y-mobil, 0.5);
    /*
       Hochkant schneidet das Format schon genug weg — ein zusaetzlicher
       Zoom liesse von der Szene nichts uebrig. Deshalb ab Werk 1.

       Das hat eine Folge, die man kennen muss: Bei 1 deckt das Bild die
       Hoehe des Rahmens genau ab. Senkrecht gibt es dann nichts zu
       verschieben, und der Regler "Auf dem Handy: senkrecht" bleibt ohne
       Wirkung.

       Dafuer gibt es jetzt "Auf dem Handy: heranholen". Ein Wert darueber
       macht das Bild hoeher als den Rahmen — erst dadurch wird der
       senkrechte Regler benutzbar, und die Gesichter lassen sich aus dem
       Textbereich am unteren Rand herausheben.
    */
    --ps-hero-zoom: var(--ps-hero-zoom-mobil, 1);
    min-height: 560px;
  }
  /* Auf dem Handy laeuft der Verlauf von unten: Hochkant steht die Schrift
     unter den Personen, nicht neben ihnen. */
  .ps-hero__schleier {
    background: linear-gradient(
      to top,
      rgb(5 25 31 / 92%) 0%,
      rgb(5 25 31 / 74%) 34%,
      rgb(5 25 31 / 24%) 62%,
      rgb(5 25 31 / 0%) 88%
    );
  }
  .ps-hero__aktion { padding: 14px 24px; }
}

/* ---------- Im Editor ---------- */

/* Ohne Bild waere der Block ein unsichtbarer Kasten. */
.editor-styles-wrapper .ps-hero__bild:not(:has(img)) {
  background: var(--petrol-900);
}