/* s06b · Menschen (Meisterwerk, Nacht-2): Text links an K0, die Lichthalle aus dem Imagefilm als Fenster rechts in voller Höhe (.fenster.halb,
   system.css §18, derselbe Rahmen wie Hero und s07; Standbild mit 14 s Fahrt wie s02/s06). Zwei Namen groß in Serif nebeneinander
   (untereinander unter 700 px), darüber eine goldene Haarlinie, die beide verbindet; sie zieht sich beim Sichtbarwerden von links auf.
   Text hell auf Nacht-2 (hell-text 16,1:1, hell-text-2 12,3:1). Jeder Selektor beginnt mit .s06b. */
.s06b{display:flex;align-items:center}
.s06b .s06b-fenster{--lage:50% 50%}
.js:not(.ruhig) .s06b .s06b-fenster > img{transform:scale(1.06)}
.js:not(.ruhig) .s06b .s06b-fenster.da > img{animation:s06b-fahrt 14s var(--ease-weich) both}
@keyframes s06b-fahrt{from{transform:scale(1.06)}to{transform:scale(1)}}
.s06b .s06b-text{width:calc((100% + 2 * var(--rand)) * (1 - var(--halb)) - var(--rand) - var(--rinne));display:grid;row-gap:var(--r5)}
.s06b .s06b-kopf h2{max-width:16em;color:var(--hell-text)}
.s06b .s06b-paar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--rinne);padding-top:var(--r4)}
.s06b .s06b-paar::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);transform-origin:left}
.js:not(.ruhig) .s06b .s06b-paar::before{transform:scaleX(0);transition:transform .8s var(--ease-weich) .1s}
.js:not(.ruhig) .s06b .s06b-paar:has(.da)::before{transform:none}
.s06b .s06b-name{font-family:var(--serif);font-weight:400;font-size:var(--t-schluss);line-height:var(--zh-h3);letter-spacing:-.016em;color:var(--hell-text)}
.s06b .s06b-rolle{margin-top:var(--r3);color:var(--hell-text-2);max-width:22em}
.s06b .s06b-zeile{color:var(--hell-text);max-width:var(--mass-lead)}

@media (max-width:1099px){
  .s06b{display:block;min-height:0}
  .s06b .s06b-fenster{margin:calc(-1 * var(--abschnitt-y)) calc(-1 * var(--rand)) var(--r6)}
  .s06b .s06b-text{width:auto}
}
@media (max-width:700px){
  .s06b .s06b-text{row-gap:var(--r4)}
  .s06b .s06b-paar{grid-template-columns:minmax(0,1fr);row-gap:var(--r5)}
}