/* ===========================================================================
   nahsicht.css — die Nahsicht, und zwar die eine.

   Sie stand bis zum 30.08.2026 mitten in fango.css. Dort war sie richtig
   aufgehoben, solange sie nur an der Veranstaltungsseite hing. Seit die
   Konzeptübersicht ihre Screenshots damit aufmacht, hängt sie an zwei Blättern
   — und zwei Abschriften derselben Fläche sind zwei Orte, die dasselbe
   behaupten und irgendwann zweierlei sagen. Dieselbe Begründung, aus der die
   Lampe in lampe.css liegt.

   **Sie kommt nie allein.** Was hier steht, rechnet mit den Farben, Maßen und
   Takten des Hauses; das Blatt, das sie einbindet, bringt sie mit. Gebraucht
   werden: --wand, --linie, --titelfarbe, --text-gedaempft, --primary-hell,
   --grid-gap, --takt-eng, --text-s, --text-l, --kurve-hover. Die drei Takte
   des Weges (--takt-weg, --takt-rueckweg, --kurve-weg) stehen mit Rückfall
   dabei — ein Blatt ohne sie fährt trotzdem im Takt des Hauses.

   Ihr Gegenstück ist assets/js/nahsicht.js. Was dort passiert, steht dort.
   =========================================================================== */

/* ---------- Die Nahsicht ----------
   Die einzige Stelle des Systems, an der ueber Bildschirmfuellung hinaus
   vergroessert wird - Kleingedrucktes auf einem Plakat, ein Pinselstrich auf
   einer Arbeit. Und sie ist kein Modal: kein Radius, kein Schatten, keine
   abgedunkelte Seite dahinter. Sie ist die Wand, vollflaechig, mit dem Bild
   randlos darauf.

   Die Wand ist hier ausdruecklich die *unbelichtete*: das Lichtfeld liegt bei
   z-index -2 und damit darunter. Wer ein Bild ansieht, sieht das Bild - eine
   aufgehellte Flaeche daneben waere ein zweites Motiv. */
.nahsicht{position:fixed;inset:0;z-index:3;display:flex;flex-direction:column;
  background:var(--wand);touch-action:none;overscroll-behavior:contain;
  padding-block:max(var(--takt-eng), env(safe-area-inset-top))
                max(var(--takt-eng), env(safe-area-inset-bottom));
  padding-inline:max(var(--grid-gap), env(safe-area-inset-left))
                 max(var(--grid-gap), env(safe-area-inset-right))}
.nahsicht[hidden]{display:none}

.nahsicht-rahmen{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  /* Groessenbehaelter fuer den Film: er ist der einzige Inhalt dieser Flaeche,
     der ein festes Seitenverhaeltnis hat und deshalb beide Masse gleichzeitig
     kennen muss. Ein Bild regelt das mit max-width/max-height allein. */
  container-type:size}
.nahsicht-bild{max-width:100%;max-height:100%;width:auto;height:auto;
  transform-origin:center center;user-select:none;-webkit-user-drag:none}
/* Ausdruecklich, weil oben `img{display:block}` steht: ohne diese Zeile bliebe
   das Bild hinter dem Film stehen, obwohl `hidden` daran haengt. */
.nahsicht-bild[hidden]{display:none}

/* ---------- Der Film in der Nahsicht ----------
   Dieselbe Wand, dieselbe Bewegung hinein, anderer Inhalt. Ein Film hat ein
   festes Seitenverhaeltnis und keinen Massstab: er wird so gross, wie er in
   die Flaeche passt, und dort bleibt er. Deshalb rechnet die Breite hier
   selbst mit beiden Massen der Flaeche, statt sie einem Zuschnitt zu
   ueberlassen - ein <iframe> kennt kein object-fit.

   `touch-action` wird ausdruecklich zurueckgegeben: die Wand haelt jede Geste
   fest, damit die Hand das Bild fuehren kann. Im Film fuehrt sie nichts, was
   uns gehoert - dort sind Wischen und Tippen die Bedienung des Players. */
.nahsicht-film{position:relative;width:min(100cqw, calc(100cqh * 16 / 9));
  aspect-ratio:16/9;background:var(--wand);touch-action:auto}
.nahsicht-film[hidden]{display:none}
/* Das Standbild von der Wand, waehrend der Player noch laedt. Derselbe
   Beschnitt wie dort - sonst spraenge das Bild in dem Moment um, in dem es
   ankommt. */
.nahsicht-film-stand{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nahsicht-film-player{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Die zwei Wege des Bildes ----------
   Ohne Klasse steht hier kein Uebergang, und das ist die wichtigere Haelfte
   der Regel: waehrend die Hand zieht oder zusammenkneift, ist sie selbst die
   Bewegung. Ein Uebergang machte daraus einen Gummizug, der der Hand
   hinterherhinkt - das Bild klebte nicht mehr am Finger.

   Ein Uebergang kommt nur dort dazu, wo die Hand gerade nichts mehr tut: nach
   einem Tipp und nach einem losgelassenen Wisch. Beide Male gibt die Hand
   einen Befehl, statt zu fuehren, und ein Befehl braucht den Weg, den das
   Fuehren von selbst mitbringt.

   Zwei Dauern, eine Kurve. Der Zoom ist kuerzer, weil er an einer Stelle
   bleibt; das Blatt faehrt weiter und darf laenger fahren. Die Kurve ist die
   des Hauses - eine zweite waere ein zweiter Takt, und davon hat dieses System
   genau einen. nahsicht.js setzt nur die Klassen; Zeit und Kurve stehen hier.

   »Keine Bewegung gewuenscht« schaltet beide ab. nahsicht.js setzt die Klassen
   dann schon gar nicht - der Wert steht sofort, wie vorher. Die Abfrage hier
   ist die zweite Sperre und kostet nichts: waere je ein dritter Weg diese
   Klassen setzen, faende er sie stillgelegt vor. */
@media (prefers-reduced-motion:no-preference){
  .nahsicht-bild.zoomt{transition:transform .22s var(--kurve-hover)}
  .nahsicht-bild.blaettert{transition:transform .28s var(--kurve-hover)}
}

.nahsicht-kopf{flex:none;display:flex;justify-content:flex-end;
  padding-bottom:var(--takt-eng)}
.nahsicht-fuss{flex:none;display:flex;align-items:baseline;gap:var(--grid-gap);
  margin-top:var(--takt-eng);padding-top:var(--takt-eng);
  border-top:1px solid var(--linie)}
.nahsicht-fuss[hidden]{display:none}
/* Die Unterschrift liest man, also steht sie in IBM Plex und in gemischter
   Schreibung - alles andere in dieser Flaeche ist Beschriftung. */
.nahsicht-zeile{flex:1;min-width:0;margin:0;max-width:62ch;
  font-size:var(--text-s);line-height:1.5;color:var(--text-gedaempft)}
.nahsicht-zeile[hidden]{display:none}
.nahsicht-blaettern{flex:none;display:flex;gap:var(--takt-eng);margin-left:auto}

.nahsicht button{background:none;border:0;padding:0;color:var(--titelfarbe);
  font-family:Delight;font-weight:900;font-size:var(--text-s);
  text-transform:uppercase;line-height:1;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center}
.nahsicht button[hidden]{display:none}
.nahsicht-blatt{font-size:var(--text-l)}
/* Der Zoom hat kein Bedienelement - die Hand ist die Bedienung. Der Zeiger sagt
   trotzdem, was moeglich ist: naeher heran, und im vergroesserten Zustand
   schieben. Wo der rote Punkt den Systemzeiger stellt, sagen es die Gesten. */
.nahsicht .nahsicht-bild{cursor:zoom-in}
.nahsicht.nah .nahsicht-bild{cursor:grab}

/* Waehrend die Nahsicht offen ist, bewegt sich nichts dahinter. */
html.nahsicht-offen,html.nahsicht-offen body{overflow:hidden}

/* Die beiden Farben der Bedienung. Sie standen bei den übrigen Hover- und
   Druckregeln der Seite und sind hier hergezogen, weil sie zu dieser Fläche
   gehören und zu keiner anderen. */
@media (hover:hover){
  .nahsicht button:hover{color:var(--primary-hell)}
}
.nahsicht button:active{color:var(--primary-hell)}


/* ---------- Der Weg in die Nahsicht ----------
   Es ist derselbe Weg wie oben, nur innerhalb einer Seite: ein Bild wird von
   der Wand genommen und gross hingehaengt. Dieselbe Kurve, dieselbe Dauer -
   und zurueck der Rueckweg, der kuerzer ist, weil man schon da war.

   Bis hierher stand an dieser Gruppe gar nichts. Sie lief damit in der
   Voreinstellung des Browsers - 0.25s, ease -, waehrend DESIGN.md »dieselbe
   Dauer und dieselbe Kurve wie der Titel« notiert. Zwei Takte im selben Haus,
   und der zweite war keiner, sondern ein Ausfall.

   Die Richtung steht waehrenddessen als `data-nah` am <html> und faellt weg,
   sobald die Bewegung durch ist (nahsicht.js) - derselbe Weg wie bei
   data-sprung. */

/* Waehrend das Bild wandert, wandert sonst nichts.
   Der Veranstaltungstitel traegt seinen Namen fuer den Weg aus der Liste
   hierher. In der Nahsicht hat er keinen Gegenpart - er bekaeme trotzdem eine
   eigene Gruppe und stuende damit als einzige Stelle der Seite 0.42s lang da,
   waehrend der Rest in 0.16s weggeht: ein Titel, der ueber dem wachsenden
   Plakat haengen bleibt. Es ist derselbe Satz wie in weg.js - nur das
   angefasste Ding bewegt sich. Der Name kommt zurueck, sobald das Attribut
   wieder weg ist. */
html[data-nah] .event-titel{view-transition-name:none}

html[data-nah]::view-transition-group(nahsicht){
  animation-timing-function:var(--kurve-weg,cubic-bezier(.16,1,.3,1))}
html[data-nah=auf]::view-transition-group(nahsicht){
  animation-duration:var(--takt-weg,.42s)}
html[data-nah=zu]::view-transition-group(nahsicht){
  animation-duration:var(--takt-rueckweg,.28s)}

/* Das Bild traegt beide Aufnahmen in seinem eigenen Verhaeltnis: `contain`
   statt der Voreinstellung `fill`. Sonst zerrt die Ueberblendung das kleine
   Bild in den Kasten des grossen, waehrend beide noch verschieden gross sind -
   ein Bild, das auf dem Weg die Form wechselt, wird nicht genommen, sondern
   ausgetauscht. `plus-lighter` haelt die Ueberblendung zweier gleicher Bilder
   auf gleicher Helligkeit, statt sie in der Mitte durchhaengen zu lassen; das
   `isolation` darueber ist die Bedingung dafuer, dass sie nur miteinander
   rechnen und nicht mit der Wand dahinter. */
html[data-nah]::view-transition-image-pair(nahsicht){isolation:isolate}
html[data-nah]::view-transition-old(nahsicht),
html[data-nah]::view-transition-new(nahsicht){
  width:100%;height:100%;object-fit:contain;mix-blend-mode:plus-lighter}

/* Die Wand hinter dem Bild wechselt weiter in 0.16s - sie ist auf beiden
   Seiten dieselbe Wand, und was da ueberblendet, ist der Rest der Seite.

   Beim Zurueckkommen ist es umgekehrt: die Seite kommt wieder, und sie soll
   mit dem Bild ankommen und nicht vor ihm. Sonst steht die Haengung schon da,
   waehrend das Blatt noch unterwegs zu seinem Platz darin ist. */
html[data-nah=zu]::view-transition-new(root){
  animation-duration:var(--takt-rueckweg,.28s)}

/* Die Bedienung wartet auf das Bild.
   Schliessen-Beschriftung, Unterschrift und Blaetterpfeile standen bisher
   vollstaendig da, bevor das Plakat angekommen war - eine Beschriftung zu
   etwas, das noch unterwegs ist. Sie kommen jetzt an die Raender, nachdem das
   Bild seinen Platz hat, und gehen beim Schliessen als Erstes: die Fassung
   legt sich um das Bild und nimmt sich vor ihm wieder weg. */
@media (prefers-reduced-motion:no-preference){
  html[data-nah] .nahsicht-kopf{view-transition-name:nahsicht-oben}
  html[data-nah] .nahsicht-fuss{view-transition-name:nahsicht-unten}

  html[data-nah=auf]::view-transition-new(nahsicht-oben),
  html[data-nah=auf]::view-transition-new(nahsicht-unten){
    animation:rand-an .18s var(--kurve-weg,cubic-bezier(.16,1,.3,1))
      calc(var(--takt-weg,.42s) * .7) both}
  /* Jede Zeile kommt von ihrem eigenen Rand herein - die obere von oben, die
     untere von unten. Der Wert steht am Pseudoelement und nicht am Element:
     die Aufnahme erbt von der Wurzel, nicht von dem, was sie abbildet. */
  html[data-nah=auf]::view-transition-new(nahsicht-oben){--rand-weg:-.6rem}
  html[data-nah=auf]::view-transition-new(nahsicht-unten){--rand-weg:.6rem}
  html[data-nah=zu]::view-transition-old(nahsicht-oben),
  html[data-nah=zu]::view-transition-old(nahsicht-unten){
    animation:rand-aus .12s var(--kurve-hover) both}
}

@keyframes rand-an{from{opacity:0;transform:translateY(var(--rand-weg,0))}
  to{opacity:1;transform:none}}
@keyframes rand-aus{to{opacity:0}}


/* ===========================================================================
   Und was ausser Bildern in ihr aufgeht: der Film an der Wand.

   Er steht hier und nicht in fango.css, weil er ohne die Nahsicht nichts ist —
   das Standbild ist die Tür, und dahinter liegt genau diese Fläche. Wer das
   eine einbindet, braucht das andere. Auf den Screenshots der Konzeptübersicht
   hängt derselbe Mechanismus: dort liegt hinter dem Zeichen kein YouTube-Link,
   sondern ein Durchgang durch die Fläche als Datei.
   =========================================================================== */

/* ---------- Der Film an der Wand ----------
   Ein YouTube-Link im Text steht als das da, was er ist: ein Standbild, das an
   der Wand haengt wie ein Plakat. Kein fremder Player, der beim Aufschlagen der
   Seite schon laeuft - und keine Karte, kein Schatten, kein Radius: das Blatt
   ist die Flaeche selbst.

   Das Standbild wird auf 16:9 beschnitten. YouTube liefert den kleineren
   Zuschnitt in 4:3 mit schwarzen Balken oben und unten; der Beschnitt nimmt sie
   weg. Was uebrig bleibt, ist genau das Bild - und es steht in derselben Form
   da wie spaeter der Film.

   Ein Bild an der Wand reagiert nicht darauf, dass jemand hinsieht: hier steht
   deshalb kein Hover. Der Druck antwortet weiter unten, zusammen mit Plakat und
   Haengung. */
.film{margin:var(--takt-block) 0;--film-zeichen:clamp(4.4rem, 9vw, 6.4rem)}
.film-blatt{display:block;position:relative;aspect-ratio:16/9;background:var(--wand)}
.film-standbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Das Abspielzeichen ist ein Loch im Standbild, durch das die Wand zu sehen
   ist, und darauf der rote Punkt des Hauses. Es bringt damit keinen neuen
   Grund mit: Rot auf der Wand ist die eine Paarung, die im ganzen System
   nachgerechnet ist (>= 4,5:1, auch im Lichtkern). Eine Platte unter einem
   Zeichen kennt dieses System sonst nicht - ein Loch ist keine. */
.film-zeichen{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:var(--film-zeichen);height:var(--film-zeichen);border-radius:50%;
  background:var(--wand);display:grid;place-items:center}
.film-zeichen::after{content:"";width:0;height:0;
  /* Ein Dreieck steht optisch links von seiner Mitte, wenn man es geometrisch
     zentriert - der Schwerpunkt liegt weiter links als der Kasten. */
  margin-left:calc(var(--film-zeichen) * .05);
  border-left:calc(var(--film-zeichen) * .30) solid var(--primary-hell);
  border-block:calc(var(--film-zeichen) * .19) solid transparent}
/* Ohne Standbild bleibt die Wand stehen und traegt das Zeichen allein - der
   Film ist geloescht, privat, oder die Leitung war weg. Eine erfundene
   Vorschau waere schlechter als keine. */
.film-ohne-bild .film-blatt{border:1px solid var(--linie)}

.film-blatt:active .film-standbild{opacity:.62}

/* ---------- Der Ton ----------
   Ein Plattendeckel und kein Standbild: quadratisch, weil eine Platte
   quadratisch ist, und schmaler als die Spalte, weil eine Platte in Wandbreite
   ein Plakat waere - und die haengen hier woanders.

   Das Zeichen ist dasselbe Loch mit demselben roten Dreieck wie beim Film. Es
   ist dieselbe Handlung: etwas anfangen zu lassen. Zwei Zeichen fuer eine
   Handlung waeren ein zweites Vokabular. Nur kleiner, weil das Blatt kleiner
   ist - das Zeichen haelt seinen Anteil an der Flaeche.

   Der Player tritt an die Stelle des Deckels und behaelt dessen Kasten: keine
   Bewegung, kein Sprung im Text, der darunter steht. Der SoundCloud-Spieler in
   seiner sichtbaren Fassung braucht eine Mindesthoehe, unter der er seinen
   Deckel wegwirft - darum die 30rem als Boden und nicht als Wunsch. */
.ton{margin:var(--takt-block) 0;--ton-blatt:min(32rem, 100%);
  --film-zeichen:clamp(3.2rem, 6vw, 4.4rem)}
.ton-blatt{display:block;position:relative;width:var(--ton-blatt);
  aspect-ratio:1;background:var(--wand)}
.ton-deckel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ton-zeichen{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:var(--film-zeichen);height:var(--film-zeichen);border-radius:50%;
  background:var(--wand);display:grid;place-items:center}
.ton-zeichen::after{content:"";width:0;height:0;
  margin-left:calc(var(--film-zeichen) * .05);
  border-left:calc(var(--film-zeichen) * .30) solid var(--primary-hell);
  border-block:calc(var(--film-zeichen) * .19) solid transparent}
/* Ohne Deckel bleibt die Wand stehen und traegt das Zeichen allein. Beim Ton
   haeufiger als beim Film: ein Profil ohne Bild ist kein Fehler. */
.ton-ohne-bild .ton-blatt{border:1px solid var(--linie)}
.ton-blatt:active .ton-deckel{opacity:.62}
.ton-player{display:block;width:var(--ton-blatt);aspect-ratio:1;
  min-height:30rem;border:0}