/* Nutzerfoto L1011380.jpg. Kopf und Schriftzug teilen denselben Höhenbezug. */
.hero {
  --portrait-photo-height: clamp(740px, 62vw, 900px);
  --portrait-head-top: 140px;
  --hero-name-size: clamp(54px, 9.4vw, 130px);
}

/* Der Name steht seit dem 22. September 2026 als Wortmarke und nicht mehr als gesetzte
   Schrift. Die Grafik ist auf ihren sichtbaren Rahmen beschnitten, 3308 mal 544 Pixel.

   Die Breite ist in em angegeben, damit die Marke jeder Stufe der bisherigen clamp-Groesse
   genau folgt. 7.035 ist gemessen: so breit war die Tinte des Schriftzugs im Verhaeltnis zur
   Schriftgroesse, bei 1440, 1240, 1024, 880, 430 und 390 Pixeln uebereinstimmend.

   Die Hoehe des h1 bleibt bei 1em, also bei der alten Zeilenhoehe. Sonst verschoebe sich
   alles darunter, und auf Desktopbreiten stimmte die Ausrichtung auf die Kopfmitte nicht
   mehr, die mit --hero-name-size rechnet. Der negative obere Aussenabstand setzt die
   Versalhoehe der Marke genau dorthin, wo die Versalhoehe der Schrift stand. */
.hero-content h1 {
  height: 1em;
}
.hero-content h1 .name-mark {
  display: block;
  width: 7.035em;
  max-width: 100%;
  height: auto;
  margin-top: -0.077em;
}

.hero-portrait--new {
  overflow: hidden;
}

.hero-portrait--new picture {
  position: relative;
}

.hero-portrait--new img {
  position: absolute;
  top: calc(var(--portrait-head-top) - var(--portrait-photo-height) * .305);
  left: clamp(100px, 10vw, 180px);
  width: auto;
  max-width: none;
  height: var(--portrait-photo-height);
  object-fit: contain;
  object-position: center;
  translate: -50% 0;
  transform-origin: center 42%;
  filter: saturate(88%);
  -webkit-mask-image: linear-gradient(to right, #000 72%, transparent 100%);
  mask-image: linear-gradient(to right, #000 72%, transparent 100%);
}

.hero-portrait--new::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--bg-dark), transparent 25%);
}

@media (min-width: 881px) {
  .hero-content {
    /* Haaransatz bei 30,5 %, Kopfmitte bei 41,5 % der Fotohöhe. */
    justify-content: flex-start;
    padding-top: calc(var(--portrait-head-top) + var(--portrait-photo-height) * .11 - var(--hero-name-size) * .5);
    /* Neben dem Gesicht auf mittleren Breiten etwas Luft erhalten. */
    padding-left: calc(var(--gutter) + clamp(0px, (1440px - 100vw) / 4, 88px));
  }

  .hero-content h1 {
    font-size: var(--hero-name-size);
    margin-top: 0;
  }
}

@media (max-width: 880px) {
  /* Seit dem 23. September 2026 steht der Inhalt des Kopfbereichs im Fluss und nicht mehr
     absolut in der Mitte. Mit den fuenf Handlungszeilen vom 22. September war der Block so
     hoch geworden, dass die Zentrierung Name und Kennzeile ueber Gesicht und Hemd schob.
     Jetzt beginnt der Inhalt erst unter dem Portraet: site-background.css blendet das Foto
     zwischen 28 und 44 Prozent der Rahmenhoehe aus, darunter liegt nur noch dunkler Grund.
     Der Kopfbereich ist so hoch wie sein Inhalt, ohne leeren Block unter der letzten Zeile.
     Auf kleinen Telefonen stehen die letzten Handlungszeilen erst nach dem ersten Scrollen
     ganz im Bild, das ist gewollt. */
  .hero {
    --portrait-photo-height: min(118vh, 1000px);
    --portrait-head-top: 68px;
    --portrait-frame-height: max(100vh, 540px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--portrait-frame-height) * .44 + 20px);
    padding-bottom: 48px;
  }

  /* Der Fotorahmen behaelt die Hoehe eines Bildschirms, auch wenn der Kopfbereich hoeher oder
     niedriger wird. Die Maske rechnet in Prozent dieses Rahmens und bleibt so, wo sie war. */
  .hero-portrait--new {
    bottom: auto;
    height: var(--portrait-frame-height);
  }

  .hero-content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
  }

  /* Der negative Abstand ueber dem Namen gehoert zur Desktopfassung. Im Fluss hoebe er den
     Namen wieder in das Portraet hinein. */
  .hero-content h1 {
    margin-top: 0;
  }

  /* Deutlicher Abstand zwischen Kennzeile und Handlungszeilen, und die fuenf Zeilen stehen in
     gleichen Abstaenden. Die Fuge vor der dritten Zeile aus style.css entfaellt hier. */
  .hero-actions {
    margin-top: 56px;
  }
  .hero-actions a:nth-child(3) {
    margin-top: 0;
  }

  .hero-portrait--new img {
    left: 50%;
    width: auto;
    height: var(--portrait-photo-height);
    /* Weiche Kanten links und rechts, seit dem 23. September 2026. Sichtbar werden sie nur dort,
       wo das Foto schmaler ist als der Bildschirm (Tablets, Querformat). Dort brach es vorher mit
       harter Kante ab, gemessen bei 768x1024 ein Helligkeitssprung von 26 auf 50. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);
  }

  .hero-portrait--new::after {
    background: linear-gradient(to bottom, transparent 28%, var(--bg-dark) 44%);
  }
}

/* =============================================================================================
   Zusatz fuer die Startseite auf schmalen Bildschirmen, 23. September 2026, auf Adrians Wunsch.
   Einzeln abzulehnen: dieser Block kann ganz entfallen, der Kopfbereich darueber bleibt davon
   unberuehrt. Diese Datei laedt nur die Startseite, der Block wirkt also nirgends sonst.
   ============================================================================================= */
@media (max-width: 880px) {
  /* Profiltext linksbuendig statt im Blocksatz. Die Silbentrennung bleibt. */
  .about-text .lead {
    text-align: left;
  }

  /* Rubrikenueberschriften kleiner und enger gesperrt. «Talks, Presentations & Events» braucht
     so zwischen 320 und 430 Pixel Breite zwei Zeilen statt drei. */
  .eyebrow,
  #talks-heading {
    font-size: clamp(18px, 5.6vw, 24px);
    letter-spacing: 0.16em;
  }

  /* Die grossen Leerraeume zwischen den Rubriken und in der Agenda etwa halbiert. */
  section.block {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #about {
    padding-top: 28px;
  }
  .oo-head {
    padding-top: 40px;
  }
  #talks .subhead {
    margin-top: 32px;
  }
  #talks .list {
    margin-top: 18px;
  }
}