/* Personenseiten. Eigene Datei, damit site.css und damit der Cache-Buster
   aller bestehenden Seiten unberuehrt bleiben. Farben und Abstaende kommen
   aus den Variablen in site.css. */

.person-main{padding:64px 0 96px}
.person-main .wrap{max-width:1100px}

.person-zurueck{margin:0 0 32px;font-family:var(--font-sans);font-size:.9375rem}
.person-zurueck a{color:var(--text-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.person-zurueck a::before{content:"\2190\00a0"}
.person-zurueck a:hover,.person-zurueck a:focus-visible{color:var(--aubergine);border-bottom-color:var(--gold)}

/* Desktop: links das Foto ueber beide Zeilen, rechts Name oben und Text darunter.
   Handy: Name, darunter Foto, darunter Text. Deshalb ist der Kopf ein eigener
   Block und die Reihenfolge wird ueber Bereiche gesetzt, nicht ueber die
   Reihenfolge im Quelltext. */
.person{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  grid-template-areas:"foto kopf" "foto text";gap:24px 48px;align-items:start}
.person-kopf{grid-area:kopf}
.person-foto{grid-area:foto;align-self:start}
.person-text{grid-area:text}

/* Der Bildbehaelter ist auf jeder Seite gleich gross: feste Spaltenbreite,
   festes Seitenverhaeltnis 4:5, Bild formatfuellend. Das gilt auch fuer den
   Platzhalter, damit Seiten ohne Foto nicht anders aussehen. */
.person-foto picture,.person-kachel-bild picture{display:block}
.person-foto img,.person-foto-leer{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:2px}
.person-foto img{background:var(--offwhite)}
.person-foto-leer{display:grid;place-items:center;background:var(--aubergine);color:var(--text-on-dark)}
.person-foto-leer span{font-family:var(--font-serif);font-size:3rem;letter-spacing:.06em}

.person-kopf h1{margin:8px 0 4px}
.person-rolle{margin:0;font-family:var(--font-sans);color:var(--text-2);font-size:1.0625rem}
.person-text p{max-width:62ch}
.person-text h2{font-size:1.125rem;letter-spacing:.02em;margin:40px 0 12px}
.person-entwurf{color:var(--text-2);font-style:italic}

.person-auftritte{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.person-auftritte li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:16px;align-items:baseline;
  font-family:var(--font-sans);font-size:.9375rem;padding-bottom:10px;border-bottom:1px solid var(--line)}
.person-auftritte li:last-child{border-bottom:0}
.person-auftritte li.ohne-zeit{grid-template-columns:minmax(0,1fr)}
/* Die Uhrzeit stand in Gold auf Offwhite: 1.92:1, weit unter der Schwelle.
   Jetzt das Aubergine des Logos (14.73:1); die Abstufung zum Titel macht
   das Gewicht, nicht mehr die Farbe. */
.person-zeit{color:var(--aubergine);font-weight:500;font-variant-numeric:tabular-nums}
.person-auftritte em{color:var(--text-2);font-style:normal}

.person-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-family:var(--font-sans);font-size:.9375rem}
.person-links a{display:inline-flex;align-items:center;gap:8px;color:var(--aubergine);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px}
.person-links a:hover,.person-links a:focus-visible{border-bottom-color:var(--gold)}
.person-links svg{flex:none;color:var(--text-2)}
.person-links a:hover svg,.person-links a:focus-visible svg{color:var(--aubergine)}
.person-programm{margin-top:40px;font-family:var(--font-sans);font-size:.9375rem}

/* Uebersicht */
.person-liste{list-style:none;margin:40px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:32px 24px}
.person-liste a{display:grid;gap:12px;text-decoration:none;color:inherit}
.person-kachel-bild img,.person-liste .person-foto-leer{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:2px}
.person-liste .person-foto-leer span{font-size:2rem}
.person-kachel-name{font-family:var(--font-serif);font-size:1.125rem;color:var(--aubergine)}
.person-kachel-rolle{font-family:var(--font-sans);font-size:.875rem;color:var(--text-2);margin-top:-6px}
.person-liste a:hover .person-kachel-name,.person-liste a:focus-visible .person-kachel-name{color:var(--aubergine-hover);text-decoration:underline;text-underline-offset:3px}

@media (max-width:760px){
  .person{grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "foto" "text";gap:24px}
  .person-main{padding:40px 0 64px}
  .person-kopf{margin-bottom:-4px}
}