/* team.css — die seiteneigenen Regeln der About-Seite (S3, 12.09.2026).
 *
 * WARUM ES DIESE DATEI GIBT. Der Auftrag S3 nennt fuer About keine
 * Stildatei: Die Seite sollte allein aus bauteile.css und boxen.css
 * stehen. Gemessen am 12.09.2026 bei 390 px verdeckte das Portraet in
 * Sphaerenform den Namen („Gabriella Hornyá…"): boxen.css senkt unter
 * 900 px den Titelabstand auf 44 px, die Sphaere reicht aber 126 px in die
 * Box. Das ist ein Befund an boxen.css (Bericht S3, Teil 6) — boxen.css
 * gehoert einem anderen Fenster. Bis es dort behoben ist, raeumt diese
 * Datei den Titel unter die Sphaere, so wie produkt.css es fuer die
 * Produktseite tut. Dazu Arpads Regel gegen die automatische Trennung
 * deutscher Ueberschriften (thalassa.css: :lang(de) h1 { hyphens: auto }).
 *
 * Eingegrenzt auf main.team; verlinkt HINTER <!-- chrome:mittel:ende -->,
 * damit der Chrome-Bau sie stehen laesst. Keine eigenen Farbwerte. */

/* Arpad: kein Wort mitten gebrochen. Die Trennstelle steht als &shy; im
   Text („Qualitäts­anspruch"), nicht in einer Silbenregel des Browsers. */
main.team h1 { hyphens: manual; }

/* Das Rollenschild. .moment-tag ist im Konzept `display: inline-flex` — in
   einer Karte, die selbst `flex-direction: column` ist (boxen.css), streckt
   ein Flex-Kind auf die volle Zeile: gemessen 541 px Kapsel um 88 px Text
   (Gegenlesung 12.09.2026). Es sind die zwei Regeln, die ein Flex-Kind
   braucht, um seine Inhaltsbreite zu behalten.
   Dazu der Grund: Auf .box--mist traegt das Schild denselben Ton wie die Box
   (beide --mist) und ist unsichtbar. boxen.css loest denselben Fall fuer
   .box--ink schon so — hier dieselbe Bauart mit der hellen Flaeche des
   Konzepts. */
/* 14 px nach unten: der Abstand, den .box h3 haelt (boxen.css). Das Schild
   steht seit S3 zwischen Name und Biografie — der Auftrag nennt die Folge
   Name/Rolle/Bio. */
main.team .moment-tag { align-self: flex-start; width: auto; margin-bottom: 14px; }
main.team .box--mist .moment-tag { background: var(--white); }

/* Unter 900 px: Titel erst unter der Sphaere — 170 - 44 - 26 = 100 px
   (Geometrie von .box__bild und .box in boxen.css). */
@media (max-width: 900px) {
  main.team .box__bild ~ h3 { margin-top: 100px; }
}
/* Ueber 900 px: Titel neben dem unteren Bogen des Portraets, 440 statt
   480 px — der Kreisrand liegt in der ersten Titelzeile bei 467 px
   (Rechnung in produkt.css). */
main.team .box__bild ~ h3 { max-width: 440px; }