/* NORDIX — Porträt-Variante 1: neben der Headline
   ✅ Von Björn gewählt (Runde 15) — läuft ab hier im Arbeitsstand `final/`.
   p2 und p3 bleiben als Archiv liegen.

   Gesicht und Aussage auf einer Höhe. Das Porträt steht groß rechts, die
   Headline links — beide gleich gewichtig, der Besucher liest den Satz und
   sieht den Menschen, der ihn sagt, in einer Blickbewegung.

   Der Hero bleibt flach aufgebaut (fünf Geschwister, kein verschachtelter
   Textblock), damit die gestaffelte Einblendung der Eröffnung weiter je
   Element greift statt den ganzen Textblock am Stück einzublenden. Die
   Anordnung macht das Raster. */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(250px,25vw,360px);
  grid-template-areas:
    "head  pic"
    "act   pic"
    "ruf   pic"
    "lead  pic";
  column-gap:clamp(30px,5vw,80px);
  align-items:start;
}
.hero h1{grid-area:head}
.hero .heroact{grid-area:act}
/* Die Rufnummer braucht einen eigenen Platz im Raster, direkt unter dem Knopf.
   Ohne Zuweisung fiel sie in die nächste freie Zelle und landete UNTER dem
   Fließtext — weit weg von dem Angebot, zu dem sie die Alternative ist. */
.hero .heroruf{grid-area:ruf}
.hero .heroled{grid-area:lead}

.heropic{
  grid-area:pic;
  justify-self:end;
  align-self:center;
  width:100%;
}

/* Das große Porträt in „Über mich" entfällt hier. Dasselbe Gesicht zweimal
   in voller Größe auf einer Seite schwächt beide Auftritte. */
#mensch .portrait{display:none}

/* ---------- Schmalere Fenster ---------- */
@media(max-width:900px){
  /* ✅ Runde 17, von Björn gewählt (Fassung h2): der Satz zuerst.

     Vorher stand das Porträt hier an erster Stelle — der Gedanke war, dass
     der Gruß nicht hinter drei Textblöcke rutschen soll. Am Gerät gemessen
     stimmte die Rechnung nicht: Bis „Kaputt ist selten das Ende." auftauchte,
     hatte man zwei volle Schirme Porträt hinter sich, und das ist der eine
     Satz, für den die Seite gebaut ist. Auf dem Rechner stehen beide
     nebeneinander und die Frage stellt sich nicht; nur die Umsortierung fürs
     Handy musste sich entscheiden.

     Das Gesicht behält seine volle Größe. Wer bis dorthin liest, soll es
     richtig sehen — es steht jetzt hinter dem Angebot statt davor, nicht
     kleiner als vorher. */
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "act"
      "ruf"
      "pic"
      "lead";
    row-gap:0;
  }
  /* Luft nach oben ist neu und nötig: Die Rufnummer endet direkt über dem
     Bild, und ohne Abstand klebt die Zeile auf der Bildkante. */
  .heropic{justify-self:start;width:min(58%,240px);margin:26px 0}
  .heropic figcaption{margin-top:11px}
  .hero h1{margin-top:0}
}
@media(max-width:480px){
  .heropic{width:min(64%,200px)}
}