/* ══ PORTFOLIO-WELT — Aussehen (17.08.2026) ═════════════════════════════
   Station 5 in labor/hero-vanilla4.html: eine eigene, tiefere Welt unter
   den vier Stationen des Circuit-Raums. World-Select wie in einem Spiel:
   vier Karten schweben als Fächer im Raum, darüber (während des Falls)
   der Partikel-Text, dahinter der Himmel aus steigenden Linien.

   ── Was hier bewusst ANDERS ist als in den übrigen Stationen ─────────────
   · Die Sektion hat einen DECKENDEN Grund. Die Regel der Seite („kein
     background, die Welt scheint durch") gilt für den gemeinsamen Raum;
     diese Station IST ein anderer Raum, und die Abgrenzung ist das Ziel.
     Das Circuit-Netz ist für ihren Index abgeschaltet (circuit `aus`).
   · Kein Innen-Scroller (overflow: clip in der Seite): die 3D-Karten
     ragen beim Landen aus dem Kasten, und ein Scrollport machte daraus
     Überlauf, den die Geste dann „scrollen" würde.

   ── Die Uhr ─────────────────────────────────────────────────────────────
   Alles Bewegte an den Karten hängt an ZWEI Zahlen, die welt.mjs jedes
   Bild schreibt: `--pf-land` (0 = in der Tiefe, 1 = gelandet) und
   `--pf-glut` (Horizontglut 0…1). Je Karte `--st` = ihr Anteil am
   Stagger. Keine transition auf diesen Wegen — stationen.css schaltet
   auf einer Station ohne `on` alle transitions ab, und der Rückweg läuft
   genau dann. Transitions gibt es nur für den Hover.

   ── Klassen, die die Engine setzt ──────────────────────────────────────
     .landet    Fall läuft: Fächer ohne Zeiger, Kopf/Zeile ausgeblendet
     .steht     Welt steht (nach Landung bzw. sofort ohne Fall)
     .ohne-gl   WebGL2 fehlt: Canvas ist weg, h2 wird sichtbar
   Die Fall-Klassen der REGIE (`.sturz`, `.hoch` am Behälter) und die
   Keyframes des Abgangs stehen in der Seite, neben st-geht/st-kommt.
──────────────────────────────────────────────────────────────────────── */

/* `.pf-welt` = die gemeinsame Hülle beider Fall-Welten (Portfolio UND
   Fragen, seit 17.08. abends): Grund, Himmel, Horizont, Textplatz, Kopf,
   Stationsraster. `.portfolio` / `.fragen` tragen nur noch ihr Eigenes. */
.pf-welt {
  /* Vorgabewerte — die Engine überschreibt sie pro Bild. Ohne Vorgabe
     stünde jede Karte unsichtbar da, wenn das Modul nicht startet. */
  --pf-land: 1;
  --pf-glut: 1;
  --mx: 0;
  --my: 0;
  --pf-linie: #e4ecee;
  --pf-licht: #ffffff;
  --pf-glut-farbe: #6f7d80;

  position: relative;
  z-index: 1;
  isolation: isolate;
  color: var(--ink);
  /* Der eigene Grund: fast schwarz, unten ein Hauch heller — dort sitzt
     der Horizont des Himmels. Deckend, siehe Kopf. */
  background:
    radial-gradient(120% 70% at 50% 108%, #0b0f11 0%, transparent 60%),
    linear-gradient(180deg, #050506 0%, #060709 100%);
  overflow: clip;
}

/* ── Himmel & Horizont ─────────────────────────────────────────────── */
.pf-himmel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.pf-horizont {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: min(120vw, 1600px);
  height: 34%;
  translate: -50% 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(50% 60% at 50% 100%,
    color-mix(in srgb, var(--pf-glut-farbe) 42%, transparent) 0%,
    color-mix(in srgb, var(--pf-glut-farbe) 14%, transparent) 38%,
    transparent 72%);
  opacity: var(--pf-glut);
}

/* ── Kopf: klein, oben links — die Marke der Station, nicht ihr Titel.
   Den Titel spricht der Partikel-Text; hier bleibt der echte h2 für
   Anzeige und Vorleser. ─────────────────────────────────────────────── */
.pf-kopf {
  position: relative;
  z-index: 2;
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 3rem);
  opacity: clamp(0, (var(--pf-land) - .15) / .5, 1);
}
.pf-kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 .5rem;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--haze) 92%, transparent);
}
.pf-kicker::after {
  content: '';
  flex: 1;
  max-width: 5rem;
  height: 1px;
  background: linear-gradient(to right, var(--linie-hell), transparent);
}
.pf-kopf h2 {
  margin: 0;
  font: 400 clamp(1.35rem, 2.3vw, 1.9rem)/1.1 'Clash Display', 'Space Grotesk', sans-serif;
  letter-spacing: -.018em;
  color: var(--ink);
}

/* Der Platz des Partikel-Textes: welt.mjs misst dieses Rechteck und
   zentriert den Text darin. Im Stationsmodus liegt es in der Bildmitte
   (dort sammelt sich der Text, bevor die Karten landen), im Scrollmodus
   ist es eine echte Zeile über den Karten. */
.pf-textplatz {
  position: relative;
  z-index: 1;
  height: clamp(72px, 12vw, 150px);
  width: 100%;
  pointer-events: none;
}

/* ── Der Raum der Karten ─────────────────────────────────────────────
   `.pf-raum` gibt die Perspektive, `.pf-faecher` neigt sich mit dem
   Zeiger und hält die Karten im 3D-Kontext. Zwei Kästen, weil ein
   Element nicht zugleich `perspective` FÜR seine Kinder liefern und
   selbst gedreht in einer fremden Perspektive stehen kann. */
.pf-raum {
  position: relative;
  z-index: 2;
  width: min(100%, 1320px);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 3vw, 2.4rem);
  perspective: 1500px;
  perspective-origin: 50% 46%;
}
.pf-faecher {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.7rem, 1.5vw, 1.4rem);
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--my) * -1.6deg)) rotateY(calc(var(--mx) * 2.4deg));
  will-change: transform;
}
.portfolio.landet .pf-faecher { pointer-events: none; }
.pf-faecher.hat-hover { cursor: pointer; }

/* ── Eine Karte ─────────────────────────────────────────────────────── */
/* ── EINE KARTE = Platz + Fläche ────────────────────────────────────────
   Seit 17.08. abends ZWEI Kästen: `.pf-karte` (der Knopf) ist der PLATZ —
   Fächerwinkel, Tiefe, Landung, Trefferfläche. `.pf-innen` ist die
   sichtbare Fläche — Rand, Bild, Meta, und ALLES, was der Hover bewegt.

   Warum: bewegte der Hover den Knopf selbst (nach vorn, größer), wanderte
   die Trefferfläche unter dem Zeiger weg — bei den äußeren Karten schiebt
   translateZ unter Perspektive die Karte nach außen, der Zeiger stand
   plötzlich neben ihr, Hover aus, Karte zurück, Hover an … Flackern
   („die reagieren nicht richtig", Jordan). Jetzt bleibt der Platz stehen
   und die Fläche wächst nur; sie ragt über den Platz hinaus, und da sie
   ein Kind ist, hält sie den Hover des Knopfs. */
.pf-karte {
  /* Je Karte per Inline-Style: --ry (Grad), --tz (px), --ty (px), --st (Stagger-Anteil) */
  --ry: 0; --tz: 0; --ty: 0; --st: 0;
  /* Fortschritt DIESER Karte: die Landung läuft von --st bis --st + .79 */
  --l: clamp(0, (var(--pf-land) - var(--st)) / .79, 1);

  position: relative;
  flex: 0 1 clamp(200px, 21vw, 300px);
  min-width: 0;
  display: block;
  /* <button>-Reset: die Karte ist ein Knopf (öffnet den Monitor) */
  appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  border-radius: 18px;
  transform-style: preserve-3d;
  /* Ruhelage: Fächerwinkel und Tiefe; die Landung über transform aus der
     Tiefe. KEINE transition hier — die Landung schreibt jedes Bild. */
  rotate: y calc(var(--ry) * 1deg);
  translate: 0 calc(var(--ty) * 1px) calc(var(--tz) * 1px);
  transform: translate3d(0, calc((1 - var(--l)) * 12vh), calc((1 - var(--l)) * -720px));
  opacity: var(--l);
  will-change: transform, opacity;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pf-karte:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  /* Die Seite setzt global `:focus-visible { border-radius: 999px }` (für
     Pillen) — eine Karte würde damit zur Ellipse. */
  border-radius: 18px;
}
.pf-innen {
  position: relative;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--linie);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 40%, rgba(6, 6, 8, .55) 100%),
    rgba(12, 12, 16, .72);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95);
  overflow: clip;
  isolation: isolate;
  transform-origin: 50% 50%;
  transition: translate .42s var(--ease), scale .42s var(--ease), opacity .42s var(--ease),
              filter .42s var(--ease), border-color .3s var(--ease), box-shadow .42s var(--ease);
}

/* Die holografische Kontur: ein 1-px-Ring aus einem Lichtbogen, mit
   `mask` auf den Rand beschränkt (dieselbe Technik wie .knopf::after in
   der Seite). Ruhig kaum sichtbar, im Hover voll. */
.pf-innen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: conic-gradient(from 210deg,
    transparent 0 12%,
    color-mix(in srgb, var(--pf-licht) 70%, transparent) 26%,
    transparent 40%,
    transparent 58%,
    color-mix(in srgb, var(--pf-linie) 55%, transparent) 72%,
    transparent 86%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .28;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 3;
}
/* Ein weiches Licht, das die Karte im Hover von innen anhebt */
.pf-innen::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .10), transparent 70%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 2;
}

.pf-bild {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: clip;
  background: #0a0a0d;
}
.pf-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  filter: saturate(.8) brightness(.82);
  transition: filter .45s var(--ease), scale .8s var(--ease);
}
/* Verlauf zum Meta hin, damit die Schrift auf jedem Bild steht */
.pf-bild::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 8, 11, .78) 100%);
  pointer-events: none;
}
/* Beispiel-Welten ohne Bild: ein stilles Drahtgitter statt eines Fotos */
.pf-beispiel .pf-bild.pf-draht {
  background:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 24px 100%,
    #0a0a0d;
}

.pf-meta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: .6rem;
  align-items: center;
  padding: .85rem 1rem 1rem;
  translate: 0 0;
  transition: translate .42s var(--ease);
}
.pf-glyph {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  border: 1px solid var(--linie-hell);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.pf-glyph::before {
  content: '';
  width: 8px;
  height: 8px;
  rotate: 45deg;
  border: 1px solid var(--haze);
}
/* Name und Untertitel bleiben je EINE Zeile: seit 18.08. heißen die
   Welten „Fahrschule Meridian" und „Studio Velvet Nails", und zwei
   umgebrochene Karten standen sichtbar höher als ihre Nachbarn. Statt
   Namen zu kürzen: enger setzen und Überlauf mit Ellipse. */
.pf-meta b {
  font: 500 .86rem/1.2 'Clash Display', 'Space Grotesk', sans-serif;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pf-meta > span {
  font-size: .62rem;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* „Beispiel" ist keine Auszeichnung, sondern eine Ehrlichkeit: die Karte
   ist erfunden. Deshalb ein leiser Stempel, nicht ein Badge in Farbe. */
.pf-stempel {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  padding: .28rem .55rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: rgba(8, 8, 11, .55);
  font: 500 .58rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* „Öffnen"-Hinweis rechts im Meta — erscheint erst im Hover/Fokus */
.pf-oeffnen {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  font: 500 .6rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink);
  padding: .45rem .7rem;
  border: 1px solid var(--linie-hell);
  border-radius: 999px;
  opacity: 0;
  translate: 6px 0;
  transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.pf-meta { grid-template-columns: auto minmax(0, 1fr) auto; }
.pf-karte:focus-visible .pf-oeffnen { opacity: 1; translate: 0 0; }

/* ── HOVER: die Karte kommt RICHTIG nach vorn (Jordan, 17.08.) ──────────
   Der Zustand heißt `.ist-hover` und kommt aus welt.mjs, NICHT aus
   `:hover`: der Hit-Test des Browsers auf den 3D-gedrehten, in der Tiefe
   gestaffelten Karten war unzuverlässig („klappt nur bei einem",
   Jordan, 17.08.) — welt.mjs vergleicht den Zeiger mit den projizierten
   Rechtecken der Karten (getBoundingClientRect) und setzt die Klasse
   selbst; `.hat-hover` am Fächer dimmt die Nachbarn.
   Alles Bewegte auf `.pf-innen` (siehe oben): 90 px Vorschub + Skalierung, Bild
   in voller Sättigung und Helligkeit, Lichtring voll, ein Schein hinter
   der Fläche (mit Versatz und Weichheit — kein Zero-Offset-Halo). Die
   Nachbarn treten zurück (dunkler, kleiner), damit die gehoverte Karte
   das Bild besitzt. Der Fächerwinkel bleibt am Platz — die Fläche dreht
   sich beim Hover in die Frontale. */
@media (hover: hover) and (pointer: fine) {
  .pf-karte.ist-hover .pf-innen {
    translate: 0 -4px 90px;
    scale: 1.05;
    rotate: y calc(var(--ry) * -.85deg);
    border-color: color-mix(in srgb, var(--pf-licht) 55%, transparent);
    box-shadow:
      0 60px 110px -30px rgba(0, 0, 0, 1),
      0 24px 70px -20px color-mix(in srgb, var(--pf-linie) 28%, transparent);
  }
  .pf-innen { transition: translate .42s var(--ease), scale .42s var(--ease), rotate .42s var(--ease),
                          opacity .42s var(--ease), filter .42s var(--ease),
                          border-color .3s var(--ease), box-shadow .42s var(--ease); }
  .pf-karte.ist-hover .pf-innen::after  { opacity: 1; }
  .pf-karte.ist-hover .pf-innen::before { opacity: 1; }
  .pf-karte.ist-hover .pf-bild img { filter: saturate(1) brightness(1.06); scale: 1.06; }
  .pf-karte.ist-hover .pf-meta { translate: 0 -3px; }
  .pf-karte.ist-hover .pf-meta > span { color: var(--ink); }
  .pf-karte.ist-hover .pf-oeffnen { opacity: 1; translate: 0 0; }
  .pf-karte.ist-hover .pf-glyph { border-color: var(--pf-licht); }
  .pf-karte.ist-hover .pf-glyph::before { border-color: var(--pf-licht); rotate: 225deg; transition: rotate .5s var(--ease); }
  /* Nachbarn treten zurück — auf der Fläche, nicht am Platz */
  .pf-faecher.hat-hover .pf-karte:not(.ist-hover) .pf-innen {
    opacity: .58;
    scale: .965;
    filter: brightness(.7);
  }
}

/* Die Zeile unter dem Fächer (.pf-fuss / .pf-alle) ist am 18.08.2026
   weggefallen: sie zeigte aus dem Labor auf die alte Live-Seite, und seit
   das Portfolio SELBST auf der Startseite steht, führte sie im Kreis. */

/* ── Ohne WebGL2 ─────────────────────────────────────────────────────── */
.pf-welt.ohne-gl .pf-textplatz { display: none; }

/* ══ STATIONSMODUS ══════════════════════════════════════════════════════
   Die Sektion ist ein Fenster hoch (stationen.css). Zeilen: Kopf · der
   Rest für den Fächer · Fußzeile. Der Textplatz liegt absolut in der
   Bildmitte — er nimmt keinen Platz im Raster. */
html.stationen .pf-welt {
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(.6rem, 1.6svh, 1.2rem);
  padding-bottom: clamp(1.1rem, 3svh, 2rem);
}
html.stationen .pf-textplatz {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  translate: 0 -50%;
  height: clamp(90px, 16vw, 200px);
}
html.stationen .pf-raum {
  display: grid;
  align-content: center;
  min-height: 0;
}
/* Titel schweigt visuell, solange die Welt landet — der Partikel-Text
   spricht. Danach steht die Marke klein oben links. */
html.stationen .pf-welt h2 { color: var(--ink); }
/* Der Kopf der Welt im Stationsmodus: Kicker ÜBER dem Titel, beides klein
   (Jordan, 17.08. abends: „das soll untereinander stehen" — die flache
   Einzeile vom Nachmittag las sich wie ein Satz: „Portfolio Unsere
   Designs"). Die Höhe gehört weiter dem Inhalt: zwei kurze Zeilen mit
   knappem Abstand, kein Kicker-Strich, keine Luft nach unten. */
html.stationen .pf-kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  min-height: 0;
}
html.stationen .pf-kicker { margin: 0; font-size: .6rem; }
html.stationen .pf-kicker::after { display: none; }
html.stationen .pf-kopf h2 { font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: -.01em; }
html.stationen .pf-welt { row-gap: clamp(.4rem, 1.2svh, .9rem); }

/* ══ SCROLLMODUS (≤ 960 px oder reduzierte Bewegung) ═════════════════════
   Sektion im Fluss, Karten als Raster, keine 3D-Neigung — der Partikel-
   Text steht als Titel oben, der h2 wird für Vorleser behalten. */
@media (max-width: 960px), (prefers-reduced-motion: reduce) {
  .pf-welt {
    display: grid;
    row-gap: clamp(1.2rem, 3svh, 2rem);
    padding: clamp(4rem, 10svh, 7rem) clamp(1.1rem, 4vw, 3rem) clamp(3rem, 8svh, 5rem);
    min-height: 100svh;
    align-content: start;
  }
  .pf-welt:not(.ohne-gl) .pf-kopf h2 {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pf-kopf { opacity: 1; padding-inline: 0; }
  .pf-raum { perspective: none; padding-inline: 0; }
  .pf-faecher {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: clamp(.8rem, 3vw, 1.2rem);
    transform: none;
    transform-style: flat;
  }
  .pf-karte {
    --l: 1;
    flex: none;
    rotate: none;
    translate: none;
    transform: none;
    opacity: 1;
    will-change: auto;
    min-height: 44px;
  }
  .pf-innen { translate: none; scale: none; rotate: none; }
  .pf-horizont { opacity: 1; }
}
@media (max-width: 720px) {
  .pf-textplatz { height: clamp(56px, 16vw, 90px); }
}


/* ══ DER MONITOR — die geöffnete Welt ═══════════════════════════════════
   Ein natives <dialog> im Top-Layer. Links das Gerät: Rahmen, Schirm mit
   dem großen Startseitenbild (bei Hover fährt das Bild langsam nach
   unten — man „scrollt" die Seite), darunter die Leiste mit der Adresse
   und ein Standfuß. Rechts die Infos: Kicker, Name, Text, vier Fakten,
   „Seite öffnen" (nur echte Projekte) und Zurück. Der Auftritt kommt aus
   welt.mjs (WAAPI, aus dem Rechteck der Karte heraus); hier stehen nur
   Ruhelage und Hintergrund. */
.pf-monitor {
  --pfm-rand: clamp(1rem, 2.6vw, 2.2rem);
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(94vw, 1180px);
  max-width: none;
  max-height: min(92svh, 860px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
  transform-origin: 50% 50%;
}
.pf-monitor:not([open]) { display: none; }
.pf-monitor::backdrop {
  background: rgba(3, 3, 5, .72);
  -webkit-backdrop-filter: blur(10px) saturate(.9);
          backdrop-filter: blur(10px) saturate(.9);
  animation: pfm-backdrop .45s var(--ease) both;
}
@keyframes pfm-backdrop { from { opacity: 0; } to { opacity: 1; } }

.pfm-rahmen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  align-items: center;
  padding: var(--pfm-rand);
  border: 1px solid var(--linie);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012) 30%, transparent 70%),
    rgba(9, 9, 12, .82);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
          backdrop-filter: blur(24px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 60px 120px -40px rgba(0, 0, 0, 1);
  max-height: min(92svh, 860px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pfm-zu {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: var(--ink);
  font: 300 1.5rem/1 'Space Grotesk', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
@media (hover: hover) { .pfm-zu:hover { background: rgba(255, 255, 255, .12); border-color: var(--linie-hell); } }
.pfm-zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Das Gerät */
.pfm-geraet {
  margin: 0;
  min-width: 0;
  display: grid;
  justify-items: center;
}
.pfm-schirm {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  padding: 6px;
  background: linear-gradient(180deg, #17171c, #0a0a0d);
  border: 1px solid var(--linie-hell);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 40px 90px -30px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(0, 0, 0, .6);
  overflow: clip;
}
.pfm-schirm::before {          /* die Kamera oben in der Blende */
  content: '';
  position: absolute;
  top: 2px; left: 50%;
  width: 4px; height: 4px;
  translate: -50% 0;
  border-radius: 50%;
  background: #2a2a31;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  z-index: 2;
}
.pfm-schirm img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
  object-position: 50% 0%;
  background: #0a0a0d;
  /* Der Blick fährt beim Hover langsam über die Seite — 7 s, dann steht
     er unten. Zurück in .8 s. */
  transition: object-position 7s cubic-bezier(.3, 0, .2, 1);
}
@media (hover: hover) { .pfm-schirm:hover img { object-position: 50% 100%; } }
/* leichter Glanz auf der Scheibe */
.pfm-schirm::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 9px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .07), transparent 38%, transparent 70%, rgba(255, 255, 255, .03));
  pointer-events: none;
}
.pfm-leiste {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .55rem 0 0;
  font: 500 .66rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pfm-leiste i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pf-licht);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--pf-licht) 60%, transparent);
}
.pfm-fuss {                    /* der Standfuß: eine Haarlinie und ein Sockel */
  width: 38%;
  height: 10px;
  margin-top: .35rem;
  border-top: 1px solid var(--linie-hell);
  background: radial-gradient(60% 100% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%);
}

/* Die Infos */
.pfm-info { min-width: 0; display: grid; gap: .9rem; align-content: center; padding-right: 3rem; }
.pfm-kicker {
  margin: 0;
  display: flex; align-items: center; gap: .8rem;
  font: 500 .66rem/1.4 'Space Grotesk', sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.pfm-kicker::after { content: ''; flex: 1; max-width: 4rem; height: 1px; background: linear-gradient(to right, var(--linie-hell), transparent); }
.pfm-kicker .pfm-stempel { padding: .25rem .5rem; border: 1px solid var(--linie); border-radius: 999px; font-size: .56rem; letter-spacing: .2em; }
.pfm-titel {
  margin: 0;
  font: 400 clamp(1.7rem, 3vw, 2.5rem)/1.06 'Clash Display', 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.pfm-text { margin: 0; max-width: 46ch; font-size: .95rem; line-height: 1.6; color: var(--ink-dim); text-wrap: pretty; }
.pfm-fakten {
  margin: .3rem 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .45rem 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linie);
}
.pfm-fakten dt { margin: 0; font: 500 .62rem/1.6 'Space Grotesk', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); opacity: .8; }
.pfm-fakten dd { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink); }
.pfm-aktion { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }
.pfm-link[hidden] { display: none; }
.pfm-zurueck { cursor: pointer; }

/* Auftritt der Info-Spalte: gestaffelt, per Klasse `auf` am Dialog
   (welt.mjs setzt sie ein Bild nach showModal). Transitions statt
   Keyframes, damit das Schließen denselben Weg zurücknimmt. */
.pfm-info > * {
  --k: 0s;
  opacity: 0;
  translate: 0 12px;
  transition: opacity .5s var(--ease) calc(.16s + var(--k)), translate .5s var(--ease) calc(.16s + var(--k));
}
.pfm-info > :nth-child(2) { --k: .06s; }
.pfm-info > :nth-child(3) { --k: .12s; }
.pfm-info > :nth-child(4) { --k: .18s; }
.pfm-info > :nth-child(5) { --k: .24s; }
.pf-monitor.auf .pfm-info > * { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .pfm-info > * { transition: none; opacity: 1; translate: none; }
}

@media (max-width: 860px) {
  .pf-monitor { width: min(100vw - 16px, 720px); max-height: calc(100svh - 16px); }
  .pfm-rahmen { grid-template-columns: 1fr; gap: 1.2rem; max-height: calc(100svh - 16px); padding-top: calc(var(--pfm-rand) + 2.6rem); }
  .pfm-info { padding-right: 0; }
  .pfm-fuss { display: none; }
  .pfm-text { font-size: 1rem; }
  .pfm-aktion .knopf { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-monitor::backdrop { animation: none; }
  .pfm-schirm img { transition: none; }
}