/* ===== Papers: die Bibliothek, aus deren Buch die Szene aufsteigt =====
   Ein Bild (Originalmotiv), randlos von Bildschirmkante zu Bildschirmkante.
   Darauf: Aufschrift "Projektor" auf der Saeule, Schein ueber dem Buch, aufsteigende Funken.
   Beim ersten Hineinscrollen (.is-in) leuchtet das Buch auf und ein Schwall Funken steigt auf;
   danach (.is-done) atmet der Schein ruhig und ab und zu steigt ein Funke. */
html:has(.pp-lib) { overflow-x: clip; }
.pp-lib {
  --bx: 50%; --by: 74%; --bw: 12.3%;            /* Buch: Mitte und Breite */
  --lx: 50%; --ly: 80%; --ls: 1cqw;     /* Aufschrift: Mitte und Schriftgroesse */
  position: relative;
  z-index: 1;
  width: 100vw;
  margin: 56px 0 0 calc(50% - 50vw);
}
.pl-stage {
  position: relative; aspect-ratio: 1536 / 1024;
  overflow: hidden; isolation: isolate;
  container-type: inline-size;
}
.pl-pic, .pl-pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-stage > * { position: absolute; pointer-events: none; }

/* ---------- Aufschrift auf der Saeule, wie eingemeisselt ---------- */
.pl-label {
  left: var(--lx); top: var(--ly); translate: -50% -50%;
  font-family: 'EB Garamond', Georgia, serif; font-weight: 500;
  font-size: var(--ls); line-height: 1; letter-spacing: .32em; text-transform: uppercase;
  padding-left: .32em;                          /* gleicht den Buchstabenabstand am Ende aus */
  white-space: nowrap;
  color: rgba(118,96,128,.82);
  text-shadow: 0 .06em 0 rgba(255,255,255,.75), 0 -.04em 0 rgba(90,70,100,.18);
}

/* ---------- Schein ueber dem Buch ---------- */
.pl-bookglow {
  left: var(--bx); top: var(--by); width: calc(var(--bw) * 1.9); aspect-ratio: 2.2;
  translate: -50% -55%;
  background: radial-gradient(closest-side, rgba(255,250,230,.95), rgba(255,226,170,.55) 38%, rgba(220,200,255,.22) 66%, rgba(220,200,255,0) 100%);
  mix-blend-mode: screen;
  opacity: .55;
  animation: plBook 6s ease-in-out infinite;
}
@keyframes plBook{ 0%,100%{ opacity: .45; transform: scale(.97); } 50%{ opacity: .8; transform: scale(1.04); } }

/* ---------- Funken, die aus dem Buch aufsteigen ---------- */
.pl-rise { inset: 0; }
.pl-rise i {
  position: absolute; left: calc(var(--bx) + var(--rx)); top: var(--by);
  width: var(--rs); height: var(--rs); border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, rgba(255,236,190,.9) 45%, rgba(255,220,170,0) 75%);
  opacity: 0;
}
@keyframes plRise{
  0%   { opacity: 0; transform: translate(0,0) scale(.6); }
  15%  { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--rw), -2400%) scale(1.1); }
}
/* ohne Skript (oder vor dem ersten Blick nicht scharf geschaltet): ruhig weiter */
.pp-lib:not(.pl-armed) .pl-rise i,
.pp-lib.is-done .pl-rise i { animation: plRise calc(var(--rt) * 2.2) ease-out calc(var(--rd) * 3) infinite; }

/* ================= erster Blick ================= */
.pp-lib.pl-armed .pl-bookglow { opacity: 0; animation: none; }
.pp-lib.is-in .pl-bookglow { animation: plBookIn 1.6s ease-out .2s both, plBook 6s ease-in-out 1.8s infinite; }
@keyframes plBookIn{ 0%{ opacity: 0; transform: scale(.4); } 55%{ opacity: 1; transform: scale(1.15); } 100%{ opacity: .6; transform: scale(1); } }
.pp-lib.is-in .pl-rise i { animation: plRise var(--rt) cubic-bezier(.2,.6,.3,1) calc(.6s + var(--rd) * .7) 1 both; }
.pp-lib.is-in.is-done .pl-rise i { animation: plRise calc(var(--rt) * 2.2) ease-out calc(var(--rd) * 3) infinite; }

/* ================= Hochformat ================= */
@media (orientation: portrait) {
  .pp-lib { --by: 72.7%; --bw: 26%; --lx: 50%; --ly: 76.3%; --ls: 1.95cqw; }
  .pl-stage { aspect-ratio: 793 / 1983; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-rise { display: none; }
  .pl-bookglow { animation: none; opacity: .5; }
}

/* ================= Uebergaenge =================
   Text und Bild stehen in einem gemeinsamen Rahmen (.pp-lib-scene) auf dem Nachtblau der Seite.
   Oben: ein statischer Verlauf vom exakten Nachtblau ins Transparente liegt ueber dem Bild. Er greift
   flach ueber die ganze Breite (dort ist nur Architektur ueber dem Rand der Projektion) und tiefer an
   den Seiten, wo die Boegen stehen; die Projektion in der Mitte bleibt scharf und ganz sichtbar.
   Unten geht der Boden der Bibliothek in die Farbe der Fusszeile ueber, die ohne Abstand anschliesst. */
main:has(> .pp-lib-scene:last-child) { padding-bottom: 0; }
.pp-lib-scene { position: relative; }
.pp-lib-scene::before {
  /* Nachtblau der Seite, randlos ueber die ganze Breite; die Sterne des Kopfbereichs laufen oben weich aus */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--c-navy-rgb) / 0) 0, var(--c-navy) 160px);
}
.pl-stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  pointer-events: none; z-index: 3;
  background: linear-gradient(180deg,
    rgba(196,198,232,0) 0%, rgba(196,198,232,.08) 18%, rgba(196,198,232,.24) 36%,
    rgba(196,198,232,.48) 55%, rgba(196,198,232,.74) 74%, rgba(196,198,232,.93) 90%, #C4C6E8 100%);
}
@media (orientation: portrait) {
  /* Hochformat: ueber der Projektion liegen Boegen und Galerien, der Verlauf darf tiefer greifen */
  .pl-stage::after { height: 9%; }
}


/* ================= Himmel ohne Dach =================
   Die Bibliothek hat kein Dach: ihr Himmel ist der Nachthimmel der Seite (im Bild oben exakt
   #0A1A4F). Ueber dem Bild laufen die Pfeiler und Boegen der obersten Bildzeile senkrecht weiter
   und verschwinden nach oben immer mehr (.pl-ext, Bild mit Alpha, im Himmel durchsichtig).
   Der Text steht in diesem Himmel zwischen den weitergefuehrten Pfeilern; seine Breite richtet sich
   nach dem Abstand der Pfeiler. Er bleibt im normalen Fluss und liegt ueber dem Bild. */
.pp-lib-scene::before {
  /* der Seitenhimmel geht ab dem Text in das exakte Navy ueber, mit dem der Himmel im Bild beginnt
     (Unterschied nur wenige Farbstufen, ueber 120 px verteilt: unsichtbar, aber ohne Stufe) */
  background: linear-gradient(180deg, rgb(var(--c-navy-rgb) / 0) 0, var(--c-navy) 120px);
}
.pp-lib-text { position: relative; z-index: 2; }
.pl-ext {
  position: absolute; left: 0; bottom: 100%; width: 100%; aspect-ratio: 1536 / 512;
  pointer-events: none; z-index: 0;
}
.pl-ext img { display: block; width: 100%; height: 100%; }
.pl-stage { z-index: 1; }
@media (orientation: landscape) {
  /* Der Text ist schmaler als der Himmel der Bibliothek und reicht dafuer tiefer in ihn hinein:
     das Bild rueckt um gut ein Viertel seiner Hoehe unter den Text. Darueber mehr freier Himmel,
     damit die ausklingenden Pfeiler unter Titel und Mond bleiben.
     Himmel im Bild: 21,6-78,4 % der Breite oben, 27,6-72,4 % bei einem Viertel der Bildhoehe. */
  .pp-lib { margin-top: calc(-1 * 100vw * 1024 / 1536 * .265); }
  .pp-lib-text {
    max-width: min(540px, 36vw);
    margin: clamp(120px, 16vw, 340px) auto 0;
  }
}
@media (orientation: portrait) {
  /* Hochformat: der Himmel zwischen den Pfeilern ist schmaler als der Text; die Pfeiler steigen
     unter dem Text auf und sind dort, wo der Text steht, schon fast verschwunden */
  .pp-lib { margin-top: clamp(70px, 24vw, 190px); }
  .pl-ext { aspect-ratio: 793 / 436; }
}
/* ---------- ein Sternenhimmel fuer Seite, Erweiterung und Bild ----------
   papers-sky.js verteilt Sterne in derselben Dichte, Form, Farbe und mit demselben Funkeln wie die
   Sterne im Kopfbereich (.nstar: cremefarbene Raute, Animation tw). Ueber dem Bild liegen sie in
   .pl-field hinter den weitergefuehrten Pfeilern, im Bild in .pl-sky, beschnitten auf den Himmel. */
.pl-field {
  position: absolute; top: 0; left: 50%; width: 100vw; translate: -50% 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 120px); mask-image: linear-gradient(180deg, transparent 0, #000 120px);
}
.pl-sky {
  inset: 0; z-index: 1;
  -webkit-mask: url(../img/papers-skymask-h.png) 0 0 / 100% 100% no-repeat; mask: url(../img/papers-skymask-h.png) 0 0 / 100% 100% no-repeat;
}
@media (orientation: portrait) {
  .pl-sky { -webkit-mask-image: url(../img/papers-skymask-v.png); mask-image: url(../img/papers-skymask-v.png); }
}
.pl-field i, .pl-sky i {
  position: absolute; width: var(--s); height: var(--s); translate: -50% -50%; rotate: 45deg;
  background: var(--c-cream);
  animation: tw var(--td, 3.4s) ease-in-out var(--dl, 0s) infinite;
}
@media (max-width: 720px) {
  .pl-field i, .pl-sky i { animation-name: plTwM; filter: drop-shadow(0 0 2px rgba(255,250,240,.5)); }
  @keyframes plTwM { 0%,100% { opacity: .52; } 50% { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { .pl-field i, .pl-sky i { animation: none; } }
/* Titel und Mond liegen vor der Erweiterung */
main > .subhero { position: relative; z-index: 3; }

/* ===== Neue Bibliothek im Pinselstil (Okt. 2026) =====
   Die Bibliothek ist jetzt ein Lesesaal mit grossem Bogenfenster zum Meer im Abendlicht; vier
   Menschen sitzen im Gespraech um ein aufgeschlagenes Buch auf einem runden Sockel. Das Bild hat
   seinen eigenen, gemalten Himmel: Die Fortsetzung der Pfeiler (.pl-ext) und die Sterne im
   Bildhimmel (.pl-sky) gehoeren zum alten Nachtbild und entfallen. Der Text steht ueber dem Bild,
   das oben weich aus dem Nachtblau der Seite aufblendet. Buch, Schein und Aufschrift sitzen auf
   dem neuen Sockel. */
.pp-lib {
  --bx: 49.8%; --by: 68.6%; --bw: 16%;
  --lx: 49.8%; --ly: 75.6%; --ls: 1.05cqw;
}
.pl-stage {
  aspect-ratio: 1536 / 1024;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 6%, #000 18%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 6%, #000 18%);
}
.pl-label {
  color: rgba(251,248,238,.86);
  text-shadow: 0 .05em .3em rgba(40,40,140,.35);
}
.pl-ext,
.pl-sky { display: none; }
@media (orientation: landscape) {
  .pp-lib { margin-top: clamp(8px, 2vw, 40px); }
  .pp-lib-text {
    max-width: min(620px, 60vw);
    margin: clamp(32px, 4vw, 72px) auto 0;
  }
}
@media (orientation: portrait) {
  .pp-lib { --bx: 50.4%; --by: 74%; --bw: 40%; --lx: 50.4%; --ly: 78.6%; --ls: 1.85cqw; margin-top: clamp(16px, 6vw, 48px); }
  .pl-stage {
    aspect-ratio: 1024 / 1536;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 4%, #000 12%);
    mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 4%, #000 12%);
  }
}

/* ===== Papers am Tag: Lavendel statt Nachtblau (Okt. 2026) =====
   Die Seite steht jetzt im Tageslicht wie Founding Colloquium und Podcast: lavendelfarbener
   Himmel mit leise funkelnden Sternen, Schrift in Nachtblau, Akzente in Rost. Der Mond oben und
   der nachtblaue Verlauf hinter dem Text entfallen; das Bild blendet oben in den Lavendel auf. */
html:has(.pp-lib),
body:has(.pp-lib) { background: var(--c-lavender); }
.poster-wrap {
  background: linear-gradient(180deg, #B9BCE6 0%, var(--c-lavender) 60%, var(--c-lavender) 100%);
}
.poster-wrap .poster { display: none; }
.poster-wrap::after { display: none; }
.pp-lib-scene::before { background: none; }
.page-label { color: var(--c-rust); }
.page-title {
  color: var(--c-navy);
  text-shadow: none;
}
.panel p { color: rgb(var(--c-navy-rgb) / .82) !important; }
.panel .lead-p { color: var(--c-navy) !important; }
.panel p.muted { color: rgb(var(--c-navy-rgb) / .62) !important; }
.panel p.muted.coral-line { color: var(--c-rust) !important; }
.panel em { color: var(--c-rust) !important; }
.sphere-coral { color: var(--c-rust); }
/* Sterne auf Lavendel: weiss mit leisem Schein, wie auf der Colloquium-Seite */
.pl-field i { background: #FFFFFF; filter: drop-shadow(0 0 2px rgba(255,255,255,.7)); }