/* =========================================================================
   hero.css — Die Buehne als Zweiteiler.
   -------------------------------------------------------------------------
   Aufbau: links Text, rechts die Person.

   Das Medium liegt vollflaechig hinter beidem, nicht in einer eigenen
   Spalte. Grund: es ist EINE fotografische Szene. Steckte man sie in eine
   Spalte, entstuende an der Spaltenkante eine sichtbare Naht zwischen
   Bildgrund und Seitengrund. Vollflaechig gibt es diese Kante nicht — die
   linke Bildhaelfte ist ohnehin leer und hell, genau dafuer ist das Motiv
   gebaut.

   --figur-links  Breite der Textspalte, als Anteil des Rasters.

                  Der Wert ist nach Augenmass gesetzt, nicht gemessen: der
                  Versuch, die Silhouette automatisch zu finden, scheitert
                  an diesem Motiv — das weisse Hemd hebt sich zu wenig vom
                  hellen Raum ab, und die Stadt im Hintergrund liefert
                  dunklere Kanten als die Figur selbst. Geprueft wurde
                  stattdessen am gerenderten Ergebnis: Abstand zwischen
                  der laengsten Textzeile und der Figur.

   VORGESCHICHTE: Eine fruehere Fassung setzte den Titel auf Kniehoehe
   ueber eine ganzfigurige Aufnahme, teils mit mix-blend-mode: multiply.
   Das ist mit diesem Motiv hinfaellig. Damit entfallen auch Bodenschleier
   und Leseband — die brauchte es nur, weil Text auf der dunklen Hose lag.
   ========================================================================= */

.hero {
  --figur-links: 46%;   /* <<< hier wird gedreht */

  position: relative;
  height: 100svh;
  min-height: 34rem;
}

/* --- Buehne ------------------------------------------------------------- */
.hero__buehne {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--grund);
}

/* Das Medium steigt von unten und blendet dabei aus Weiss auf.

   Die Skalierung deckt den Weg ab — ohne sie legt die Verschiebung oben
   eine Kante frei, weil das Bild die Buehne exakt ausfuellt. Sie laeuft
   nur waehrend der Animation und endet bei 1, der Ausschnitt bleibt also
   unangetastet.

   VERWORFEN, damit es nicht wiederkommt: ein Ueberstand im Layout statt
   der Skalierung. Der deckt den Weg zwar auch ab, schneidet dafuer aber
   dauerhaft oben ab — genau den Rand ueber dem Kopf, den das Motiv extra
   mitbringt. */
.hero__medium {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Rechts UND oben verankert.

     Rechts: die Person bleibt bei jedem Zuschnitt an ihrem Platz, die
     leere Flaeche wird links beschnitten — dort, wo ohnehin nur Raum ist.

     Oben: das Motiv bringt Rand ueber dem Kopf mit, und der soll bleiben.
     Gemessen: das Bild hat 1,78 als Seitenverhaeltnis. Ab einem breiteren
     Viewport wird senkrecht beschnitten, und "center" nimmt die Haelfte
     davon von OBEN weg — bei 2560x1080 waeren das 181 px, bei 3440x1440
     schon 248. Genau der Rand ueber dem Kopf. Mit "top" faellt der
     Beschnitt vollstaendig unten an, wo Schreibtisch und Boden sind. */
  object-position: right top;
}

/* --- Aufhellung der Textseite ------------------------------------------
   Liegt zwischen Medium und Inhalt. Nur noetig, solange das Medium links
   nicht ruhig ist — siehe Kommentar am Token. */
.hero__aufhellung {
  position: absolute;
  inset: 0;
  background: var(--textseite-aufhellung);
  pointer-events: none;
}

/* --- Inhalt ------------------------------------------------------------- */
.hero__inhalt {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, var(--figur-links)) 1fr;
  align-items: center;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--raum-5);
  /* Etwas Abstand zur Figur, damit die laengste Titelzeile nicht bis an
     ihre Schulter reicht. */
  padding-inline-end: var(--raum-6);
}

/* Flex statt Block: verhindert, dass die Aussenabstaende der drei Zeilen
   zusammenfallen (margin collapsing) und die Rechnung unten kippt. */
.hero__titel {
  display: flex;
  flex-direction: column;
  /* Traegt jetzt den Zeilenabstand. Vorher kam er aus der Polsterung
     der Maske, die es nicht mehr gibt. */
  gap: 0.28em;

  color: var(--hero-titel);
  font-size: var(--schrift-hero);
  font-weight: var(--gewicht-schwer);
  line-height: var(--zeile-eng);
  letter-spacing: var(--sperrung-eng);
  text-wrap: balance;

  animation: von-oben var(--dauer-auftritt) var(--kurve-weich) both;
  animation-delay: var(--versatz-titel);
}

/* =========================================================================
   Der Auftritt: eine Gegenbewegung
   -------------------------------------------------------------------------
   Die Bedienelemente kommen von OBEN herunter und setzen sich, das
   Medium steigt von UNTEN herauf. Beide Wege sind kurz — es soll auffallen,
   ohne sich zu erklaeren.

   Warum herum: die Schilder werden an der Wand angebracht, der Raum
   dahinter ist schon da. Deshalb faengt das Medium an und die
   Bedienelemente folgen.

   VERWORFENE FASSUNGEN, damit sie nicht versehentlich wiederkommen:
   1. Die Zeile fuhr von unten in eine Maske. Eine waagerechte Kante
      schnitt dabei die Buchstaben ab.
   2. Ein senkrechter Zug von links wie eine Gravur, teils mit Unschaerfe
      dahinter. Die Unschaerfe wirkte verwaschen, der Zug zu mechanisch.
   3. Nur Skalierung aus der Tiefe, ohne Richtung. Sauber, aber ohne
      Aussage — alles kam gleich.
   ========================================================================= */
.hero__satz { display: block; }

.hero__aufdecken { display: block; }

.hero__medium {
  animation: aus-weiss-von-unten var(--dauer-medium) var(--kurve-weich) both;
  animation-delay: var(--versatz-medium);
}

/* Nur die drei Schlusspunkte in Gruen-Tuerkis. Faellt beim ersten Blick
   nicht auf, klammert die drei Aussagen aber zusammen — und ist derselbe
   Ton wie der Geviertstrich in der Wortmarke. */
.hero__punkt { color: var(--hero-punkt); }


/* Kein Untertitel mehr, sondern ein kurzes Intro: mehr Text, kleinere
   Schrift, groesserer Zeilenabstand — es wird gelesen, nicht ueberflogen. */
.hero__intro {
  max-width: var(--breite-text);
  font-size: var(--schrift-m);
  line-height: var(--zeile-fliess);
  color: var(--text-leise);

  animation: von-oben var(--dauer-auftritt) var(--kurve-weich) both;
  animation-delay: var(--versatz-intro);
}

/* Gleich breite Knoepfe wie echte Glasschilder: ein Raster mit
   gleich grossen Spalten. Weil der Container selbst nur so breit wird
   wie noetig, loest 1fr auf die Breite des groessten Knopfes auf —
   beide bekommen also das Mass des laengeren Wortes, ohne feste Zahl. */
.hero__wege {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--raum-4);

  animation: von-oben var(--dauer-auftritt) var(--kurve-weich) both;
  animation-delay: var(--versatz-wege);
}

/* =========================================================================
   Schmale Viewports
   -------------------------------------------------------------------------
   Nebeneinander ist hier nicht moeglich: bei 375 px Breite bliebe fuer den
   Text keine brauchbare Spalte. Der Zweiteiler kippt deshalb von
   nebeneinander auf uebereinander — Person oben, Text darunter auf Weiss.
   ========================================================================= */
@media (max-width: 62rem) {
  .hero {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  /* Die Buehne nimmt, was der Text uebrig laesst — nicht umgekehrt. Eine
     feste Hoehe (46svh) ging bei 375x812 um 7 px ueber den Viewport
     hinaus und erzeugte einen Scrollbalken fuer nichts. So geht es auf
     jeder Bildschirmhoehe auf, und erst wenn der Text mehr braucht als
     uebrig ist, faellt die Buehne auf ihr Mindestmass. */
  .hero__buehne {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-block-size: 38svh;
  }

  /* Der Text steht hier nicht auf dem Medium, sondern darunter auf
     Weiss. Eine Aufhellung waere sinnlos. */
  .hero__aufhellung { display: none; }

  /* Der Ausschnitt zeigt hier rund 57 % der Medienbreite. Bei 72 % saesse
     die Person rechts aussen mit leerer Flaeche daneben; 86 % rueckt sie
     in die Mitte des Ausschnitts. Oben verankert, damit das Gesicht
     sicher im Bild bleibt. */
  .hero__medium { object-position: 86% top; }

  .hero__inhalt {
    position: static;
    display: block;
    flex: 0 0 auto;
    padding-block: var(--raum-7);
  }

  .hero__text { padding-inline-end: 0; }

  /* Mit 17 px Beschriftung passen die beiden Knoepfe hier nicht mehr
     nebeneinander (367 von 335 px). Das Raster kippt auf Zeilen, die
     Knoepfe laufen ueber die volle Breite — auch bequemer zu treffen. */
  .hero__wege {
    grid-auto-flow: row;
    width: 100%;
  }
}

/* DER HOHE WURF IST HIER DIE AUSNAHME (26.08., Formstandard Regel 2).
   Die Voreinstellung jeder Schaltflaeche ist seit heute die flache Stufe,
   weil ein Knopf auf einer Flaeche der Normalfall ist. Vor dem Hero-Motiv
   stimmt der vierlagige Wurf dagegen: Dort schwebt das Glasschild wirklich
   vor einer Wand, und genau dafuer ist er gebaut. */
.hero__wege .schaltflaeche { filter: var(--knopf-abheben); }

/* UND DER GRUND DAZU. Die Voreinstellung jeder Schaltflaeche ist seit dem
   26.08. das Glas fuer helle Flaechen; vor dem Hero-Motiv gilt das andere.
   Dort liegt hinter der Scheibe ein mitteldunkles Foto, und genau darauf
   ist die durchsichtige Toenung berechnet — sie nimmt an, was hinter ihr
   liegt, und wird dadurch gruen. Auf Weisz bliebe sie Cyan. */
.hero__wege .schaltflaeche__rahmen { background-color: var(--glas-auf-grund); }
.hero__wege .schaltflaeche:hover .schaltflaeche__rahmen,
.hero__wege .schaltflaeche:focus-visible .schaltflaeche__rahmen {
  background-color: var(--glas-auf-grund-hover);
}