/* Einstiegsseite fuer Social Media (pssst.html). Bewusst eigene Datei und dunkel: Hier ist es
   Nacht, bis das Formular kommt. Erst die Formularkarte bringt die Marke zurueck
   (Papier, Tinte, 2px-Rahmen, harter Versatzschatten aus brand.css).
   Die Tokens sind Werte aus brand.css, brand.css selbst wird nicht geladen, weil es die
   Rechtsseiten umfaerbt. */

@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }

:root {
  --schwarz: #000;
  --papier: #fffdf8;
  --tinte: #18213d;
  --tinte-weich: #45506b;
  --flieder: #7057df;
  --flieder-tief: #49329e;
  --flieder-hell: #b9abf5;
  --sonne: #ffcb4c;
  --koralle: #f47f5c;
  --minze: #bdebe2;
  --grau: #a3a3ad;      /* Fliesstext auf Schwarz, 8:1 */
  --grau-tief: #6e6e78; /* nur fuer die Zaehlworte Eins, Zwei, Drei in grosser Schrift */
  --linie: #2a2a30;
  --kopf: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--schwarz); -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body.ps { margin: 0; background: var(--schwarz); color: var(--papier); font-family: var(--text); font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, svg { display: block; }
h1, h2, p, ul, figure, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sonne); outline-offset: 3px; border-radius: 4px; }
/* Auf der hellen Formularkarte hat Gelb nur 1,5:1. Flieder hat 5:1 (WCAG 1.4.11). */
.ps-liste__innen :focus-visible { outline-color: var(--flieder); }

.ps-skip { position: absolute; left: 16px; top: -100px; z-index: 30; background: var(--papier); color: var(--tinte); padding: 10px 14px; border-radius: 10px; }
.ps-skip:focus { top: 12px; }

/* ---------- Kopfzeile ---------- */
.ps-kopf { position: absolute; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: max(12px, env(safe-area-inset-top)) 16px 12px; pointer-events: none; }
.ps-bewegt .ps-kopf { position: fixed; }
.ps-kopf > * { pointer-events: auto; }
.ps-kopf { transition: opacity .25s; }
.ps-kopf.ist-weg { opacity: 0; visibility: hidden; }
.ps-marke { display: inline-flex; align-items: center; gap: 8px; font: 600 .9375rem/1 var(--kopf); text-decoration: none; min-height: 44px; }
.ps-marke img { width: 28px; height: 28px; border-radius: 8px; }
.ps-kopf__cta { display: inline-flex; align-items: center; min-height: 44px; font: 600 .9375rem/1 var(--kopf); color: var(--papier); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--flieder-hell); transition: opacity .3s; }

/* ---------- Grundzustand ohne Bewegung: alles steht untereinander ---------- */
.ps-buehne { position: relative; padding: 96px 20px 56px; max-width: 720px; margin: 0 auto; text-align: center; }
.ps-auftakt { font: 600 clamp(1.5rem, 6.4vw, 2.75rem)/1.2 var(--kopf); letter-spacing: -.02em; }
.ps-auftakt span { display: block; text-wrap: balance; }
.ps-auftakt span + span { color: var(--grau); }
.ps-film__bild img { width: min(100%, 460px); height: auto; margin: 32px auto 0; }
.ps-film__canvas { display: none; }
.ps-pssst { font: 700 clamp(4.5rem, 21vw, 11rem)/1 var(--kopf); letter-spacing: -.045em; margin-top: 16px; }
.ps-pssst span { display: inline-block; }
.ps-verraten { font: 600 clamp(1.5rem, 6.4vw, 3rem)/1.15 var(--kopf); letter-spacing: -.025em; margin-top: 16px; }
.ps-verraten__wer { font: 400 clamp(1.0625rem, 2.2vw, 1.3125rem)/1.4 var(--text); letter-spacing: 0; color: var(--grau); max-width: 26em; margin: 0 auto 14px; text-wrap: balance; }
.ps-weiter { display: none; }

.ps-zahl { font: 600 clamp(1.0625rem, 2.4vw, 1.375rem)/1 var(--kopf); color: var(--flieder-hell); margin-bottom: 10px; }
.ps-kapitel h2 { font: 700 clamp(2.375rem, 11vw, 5.75rem)/1.03 var(--kopf); letter-spacing: -.035em; text-wrap: balance; }
.ps-unter span { display: block; }
.ps-unter { max-width: 34em; margin: 28px auto 0; color: var(--grau); font-size: clamp(1.0625rem, 2.2vw, 1.3125rem); line-height: 1.45; text-wrap: pretty; }

/* ---------- Eins: die Rechnung ---------- */
.ps-rechnung { --spalte: clamp(44px, 14.5vw, 76px); position: relative; width: calc(var(--spalte) * 5); margin: 32px auto 0; font: 600 calc(var(--spalte) * .92)/1.16 var(--kopf); font-variant-numeric: tabular-nums; }
.ps-rechnung__zeile { display: grid; grid-template-columns: repeat(5, var(--spalte)); justify-content: end; }
.ps-rechnung__zeile > :first-child:not(i) { grid-column: 2; }
.ps-rechnung__zeile i { font-style: normal; color: var(--grau); }
.ps-rechnung__zeile span { text-align: center; transition: color .3s; }
.ps-rechnung__zeile span.ist-dran { color: var(--sonne); }
.ps-rechnung__strich { height: 3px; background: var(--papier); margin: calc(var(--spalte) * .36) 0 8px; }
.ps-hand { width: calc(var(--spalte) * 4); height: calc(var(--spalte) * 1.2); margin-left: auto; overflow: visible; }
.ps-hand path { fill: none; stroke: var(--sonne); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ps-hand .ps-hand__klein { stroke-width: 5; }
.ps-frage { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin-top: 18px; width: min(86vw, 420px); margin-left: 50%; transform: translateX(-50%); padding: 12px 14px 13px; background: #16161a; border: 1px solid var(--linie); border-radius: 18px 18px 18px 4px; font: 500 1rem/1.35 var(--text); letter-spacing: 0; color: var(--papier); }
.ps-frage img { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ---------- Zwei: vom Blatt ins Telefon ---------- */
.ps-szene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 32px; }
.ps-blatt { position: relative; width: min(76vw, 320px); padding: 16px 18px 22px; background: #f4efe3; color: #23232b; border-radius: 3px; text-align: left; overflow: hidden; transform: rotate(-2deg); }
.ps-blatt__kopf { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1.5px solid #23232b; font-size: .75rem; line-height: 1.3; }
.ps-blatt__kopf span:first-child { font: 700 1.0625rem/1.2 var(--kopf); }
.ps-blatt ol { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ps-blatt li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 2px solid transparent; border-radius: 8px; font-size: 1.0625rem; transition: border-color .25s; }
.ps-blatt li.ist-gefunden { border-color: var(--flieder); }
.ps-blatt i { font-style: normal; }
.ps-blatt b { flex: 1; align-self: flex-end; height: 18px; border-bottom: 1.5px dotted #6e6e78; }
.ps-bruch { display: inline-flex; flex-direction: column; text-align: center; line-height: 1.12; font-variant-numeric: tabular-nums; }
.ps-bruch span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 3px 1px; }
.ps-blatt__scan { display: none; }
.ps-telefon { position: relative; width: min(68vw, 300px); padding: 7px; border-radius: 40px; background: #1b1b22; box-shadow: inset 0 0 0 1px #3b3b46; }
.ps-telefon img { width: 100%; height: auto; border-radius: 33px; }
/* Sitzt auf dem Knopf Ging allein der ersten Aufgabe, Masse aus dem Bildschirmfoto. */
.ps-allein { display: none; }
.ps-bewegt .ps-allein { display: block; position: absolute; left: 49.5%; top: 28.2%; width: 42.5%; height: 4.9%; border: 2.5px solid var(--sonne); border-radius: 12px; opacity: 0; }

/* ---------- Drei: geschwaerzter Chat ---------- */
.ps-geheim { width: min(100%, 460px); margin: 32px auto 0; }
.ps-chat { display: flex; flex-direction: column; gap: 8px; }
.ps-blase { position: relative; align-self: flex-start; max-width: 84%; text-align: left; padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: #2a2a30; border: 1px solid #3b3b46; font-size: 1rem; line-height: 1.5; }
.ps-blase--kind { align-self: flex-end; border-radius: 18px 18px 4px 18px; background: var(--flieder-tief); border-color: var(--flieder); }
/* Der Balken liegt ueber der Blase; ohne Bewegung ist er immer zu, der Chat also von Anfang an geschwaerzt. */
/* Zeilenweise wie in einer geschwaerzten Akte: clone gibt jeder Zeile ihren eigenen Balken. */
.ps-blase span { background: linear-gradient(#000, #000) no-repeat left center / calc(var(--balken, 1) * 100%) 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; color: rgba(255, 253, 248, calc(1 - var(--balken, 1) * 1.6)); }
.ps-ergebnis { margin-top: 22px; font: 600 clamp(1.25rem, 5.2vw, 1.625rem)/1.25 var(--kopf); letter-spacing: -.01em; }
.ps-ergebnis strong { font-weight: 700; color: var(--sonne); }

/* ---------- Eins noch: der Kleiderschrank ---------- */
.ps-achja { font: 700 clamp(2.375rem, 11vw, 5.75rem)/1.03 var(--kopf); letter-spacing: -.035em; color: var(--flieder-hell); margin-bottom: 20px; }
.ps-schrank { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-top: 28px; }
.ps-teil img { width: 100%; height: auto; }
.ps-teil figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: .9375rem; }
.ps-teil strong { font: 600 1.0625rem/1.25 var(--kopf); }
.ps-teil__preis { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--sonne); font-weight: 600; font-variant-numeric: tabular-nums; }
.ps-teil__preis i { width: 13px; height: 13px; border-radius: 50%; background: var(--sonne); box-shadow: inset 0 0 0 2.5px #b8860b; }
.ps-teil__preis--zu { color: var(--grau); }
/* Noch im Dunkeln: Die Form ist zu ahnen, mehr nicht. */
.ps-teil--zu img { filter: brightness(.16) saturate(.4); }

/* ---------- Abschluss: Formular, hier kommt die Marke zurueck ---------- */
.ps-liste { padding: 72px 16px 40px; display: flex; flex-direction: column; align-items: center; }
.ps-rest { font: 600 clamp(1.5rem, 6.4vw, 3rem)/1.15 var(--kopf); letter-spacing: -.025em; text-align: center; text-wrap: balance; margin-bottom: 40px; }
.ps-liste__karte { position: relative; width: min(100%, 520px); }
.ps-liste__abby { position: relative; z-index: 2; width: 100%; height: auto; margin-bottom: -3.6%; pointer-events: none; }
.ps-liste__innen { position: relative; z-index: 1; background: var(--papier); color: var(--tinte); border: 2px solid var(--tinte); border-radius: 24px; box-shadow: 6px 6px 0 var(--flieder); padding: 40px 20px 22px; }
.ps-liste__innen h2 { font: 700 clamp(2rem, 8.6vw, 2.75rem)/1.05 var(--kopf); letter-spacing: -.03em; }
.ps-liste__lead { margin-top: 10px; color: var(--tinte-weich); }
.ps-form { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; }
.ps-form[hidden] { display: none; }
.ps-feld { border: 0; display: flex; flex-direction: column; gap: 6px; }
.ps-feld label, .ps-feld legend { font: 600 .9375rem/1.3 var(--kopf); padding: 0; }
.ps-feld legend { margin-bottom: 6px; }
.ps-feld input, .ps-feld select { width: 100%; min-height: 50px; padding: 0 14px; font: 400 1.0625rem var(--text); color: var(--tinte); background: #fff; border: 2px solid var(--tinte); border-radius: 14px; }
.ps-feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tinte) 50%), linear-gradient(-45deg, transparent 50%, var(--tinte) 50%); background-position: right 20px center, right 14px center; background-size: 6px 6px; background-repeat: no-repeat; }
.ps-feld :focus-visible, .ps-geraete input:focus-visible + span, .ps-haken input:focus-visible { outline: 3px solid var(--flieder); outline-offset: 2px; }
.ps-geraete { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-geraete label { position: relative; }
.ps-geraete input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; min-height: 0; cursor: pointer; }
.ps-geraete span { display: flex; align-items: center; justify-content: center; min-height: 50px; border: 2px solid var(--tinte); border-radius: 14px; font: 600 .9375rem var(--kopf); background: #fff; }
.ps-geraete input:checked + span { background: var(--flieder-tief); border-color: var(--flieder-tief); color: #fff; }
/* Im Kontrastmodus verschwinden Hintergrundfarben, die Wahl braucht dann einen Rahmen. */
@media (forced-colors: active) { .ps-geraete input:checked + span { outline: 3px solid CanvasText; outline-offset: 2px; } }
.ps-haken { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.35; cursor: pointer; }
.ps-haken input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--flieder-tief); }
/* Gruenderpreis: freiwilliger Haken in einer eigenen Karte, damit er nicht wie eine Pflichtangabe wirkt. */
.ps-gruender { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: #fff6dc; border: 2px solid var(--tinte); border-radius: 16px; cursor: pointer; }
.ps-gruender input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--flieder-tief); }
.ps-gruender input:focus-visible { outline: 3px solid var(--flieder); outline-offset: 2px; }
/* Angehakt nur ein kraeftiger Rahmen: Ein vollflaechig gelber Kasten las sich wie ein gewaehlter Tarif. */
.ps-gruender:has(input:checked) { border-color: var(--flieder-tief); box-shadow: inset 0 0 0 1px var(--flieder-tief); }
.ps-gruender__text { display: flex; flex-direction: column; gap: 4px; }
.ps-gruender__marke { align-self: flex-start; padding: 2px 8px; border-radius: 8px; background: var(--minze); font: 600 .75rem/1.4 var(--kopf); }
.ps-gruender__titel { font: 700 1rem/1.25 var(--kopf); }
.ps-gruender__preis { font: 600 .9375rem/1.3 var(--kopf); }
.ps-gruender__preis b { font-size: 1.375rem; letter-spacing: -.02em; }
.ps-gruender__klein, .ps-gruender__zusage { font-size: .8125rem; line-height: 1.4; color: var(--tinte-weich); }
.ps-gruender:has(input:checked) .ps-gruender__klein, .ps-gruender:has(input:checked) .ps-gruender__zusage { color: var(--tinte); }
.ps-knopf { min-height: 56px; border: 2px solid var(--tinte); border-radius: 16px; background: var(--flieder-tief); color: #fff; font: 700 1.125rem var(--kopf); box-shadow: 4px 4px 0 var(--tinte); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.ps-knopf:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinte); }
.ps-knopf:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tinte); }
.ps-mail { font: 600 .9375rem/1.35 var(--kopf); }
.ps-hinweis { font-size: .8125rem; line-height: 1.4; color: var(--tinte-weich); }
.ps-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ps-banner { margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--minze); border: 2px solid var(--tinte); }
.ps-banner.is-fehler { background: #fde3da; }
.ps-fakten { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 36px; max-width: 560px; color: var(--grau); font-size: .9375rem; text-align: center; }
/* ---------- Zwischenbitte und Klartext ---------- */
.ps-zwischen { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18svh 20px; text-align: center; }
.ps-zwischen__frage { font: 600 clamp(1.5rem, 6.4vw, 2.5rem)/1.2 var(--kopf); letter-spacing: -.02em; }
.ps-zwischen__knopf { display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border: 2px solid var(--papier); border-radius: 16px; background: var(--flieder-tief); color: #fff; font: 700 1.125rem var(--kopf); text-decoration: none; box-shadow: 4px 4px 0 var(--flieder-hell); }
.ps-zwischen__klein { color: var(--grau); font-size: .9375rem; }
.ps-klar { max-width: 720px; margin: 0 auto; padding: 72px 20px 24px; }
.ps-klar h2 { font: 700 clamp(1.5rem, 6vw, 2.25rem)/1.15 var(--kopf); letter-spacing: -.02em; text-align: center; margin-bottom: 28px; }
.ps-klar__liste { display: grid; gap: 22px; }
.ps-klar h3 { font: 600 1.0625rem/1.3 var(--kopf); margin: 0 0 6px; }
.ps-klar p { color: var(--grau); font-size: .9375rem; line-height: 1.55; }
.ps-klar a { color: var(--papier); }
@media (min-width: 720px) { .ps-klar__liste { grid-template-columns: 1fr 1fr; gap: 28px 36px; } }
.ps-nurEltern { margin-top: 12px; max-width: 30em; color: var(--grau); font-size: .875rem; text-align: center; }

.ps-fuss { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 20px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); color: var(--grau); font-size: .875rem; border-top: 1px solid var(--linie); }
.ps-fuss a { min-height: 32px; display: inline-flex; align-items: center; }

/* ---------- Mit Bewegung: Buehnen werden angeheftet, pssst.js fuehrt ---------- */
.ps-bewegt .ps-film { height: 380svh; }
.ps-bewegt .ps-eins { height: 320svh; }
.ps-bewegt .ps-zwei { height: 300svh; }
.ps-bewegt .ps-drei { height: 280svh; }

.ps-bewegt .ps-buehne { position: sticky; top: 0; height: 100svh; max-width: none; padding: 0 20px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ps-bewegt .ps-buehne--kapitel { justify-content: flex-start; padding-top: max(13svh, 76px); }
.ps-bewegt .ps-buehne--kapitel > * { flex: none; }

/* Film: Abby liegt fest im Bild, die Texte schweben darueber. */
.ps-bewegt .ps-film__bild { display: none; }
.ps-bewegt .ps-film__canvas { display: block; position: absolute; left: 50%; top: 50%; height: 100svh; width: auto; aspect-ratio: 9 / 16; max-width: none; transform: translate(-50%, -50%); }
@media (max-aspect-ratio: 9/16) {
  .ps-bewegt .ps-film__canvas { width: 100vw; height: auto; }
}
.ps-bewegt .ps-auftakt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 28px; text-align: center; z-index: 2; pointer-events: none; }
.ps-bewegt .ps-pssst { position: absolute; left: 0; right: 0; top: max(7svh, 64px); margin: 0; font-size: clamp(5rem, min(24vw, 15svh), 10rem); z-index: 2; }
.ps-bewegt .ps-pssst span { opacity: 0; }
.ps-bewegt .ps-verraten { position: absolute; left: 24px; right: 24px; top: 50%; margin: 0; transform: translateY(-50%); z-index: 3; opacity: 0; text-wrap: balance; }
.ps-bewegt .ps-weiter { display: block; position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); width: 2px; height: 44px; margin-left: -1px; background: var(--linie); overflow: hidden; z-index: 2; }
.ps-bewegt .ps-weiter::after { content: ""; position: absolute; inset: 0; background: var(--papier); animation: ps-rinnt 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
.ps-bewegt .ps-weiter.ist-still { display: none; }
@keyframes ps-rinnt { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

/* Einstieg ohne Scrollen: die zwei Zeilen kommen nacheinander, dann der Hinweis. */
.ps-bewegt [data-ps-zeile1] { animation: ps-kommt 1.1s .35s both; }
.ps-bewegt [data-ps-zeile2] { animation: ps-kommt 1.1s 1.5s both; }
/* Nur backwards: Ein vorwaerts haltender Endzustand wuerde das Ausblenden durch pssst.js ueberstimmen. */
.ps-bewegt .ps-weiter { animation: ps-kommt .9s 2.5s backwards; }
@keyframes ps-kommt { from { opacity: 0; } to { opacity: 1; } }

.ps-bewegt .ps-noch { height: 300svh; }
.ps-bewegt .ps-achja { position: absolute; left: 20px; right: 20px; top: 50%; margin: 0; transform: translateY(-50%); z-index: 2; opacity: 0; text-wrap: balance; }
.ps-bewegt .ps-text--noch { opacity: 0; }
.ps-bewegt .ps-schrank { display: block; position: relative; flex: none; width: min(82vw, 42svh, 400px); aspect-ratio: 1 / 1.16; margin-top: clamp(10px, 2svh, 24px); }
.ps-bewegt .ps-teil { position: absolute; inset: 0; opacity: 0; }
.ps-bewegt .ps-teil figcaption { margin-top: 0; }

/* Kapitel: Startzustaende, pssst.js blendet nach Fortschritt auf. Die Bewegung bleibt klein. */
.ps-bewegt .ps-frage { position: absolute; left: 50%; top: 100%; margin: 14px 0 0; }
.ps-bewegt .ps-rechnung { margin-top: clamp(16px, 3.5svh, 36px); }
.ps-bewegt .ps-unter { position: absolute; left: 24px; right: 24px; bottom: max(5svh, 28px); margin: 0 auto; }
/* Das Telefon laeuft unten aus dem Bild, so bleibt der Blick auf den erkannten Aufgaben. */
.ps-bewegt .ps-zwei .ps-unter { position: static; margin: 14px auto 0; }
.ps-bewegt .ps-szene { display: block; width: 100%; margin-top: clamp(16px, 3svh, 32px); }
.ps-bewegt .ps-blatt { position: absolute; left: 50%; top: 0; width: min(78vw, 42svh, 340px); margin-left: calc(min(78vw, 42svh, 340px) / -2); opacity: 0; will-change: transform, opacity; }
.ps-bewegt .ps-blatt__scan { display: block; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--flieder); opacity: 0; }
.ps-bewegt .ps-telefon { display: block; margin: 0 auto; width: min(76vw, 44svh, 340px); opacity: 0; will-change: transform; }
.ps-bewegt .ps-geheim { margin-top: clamp(16px, 3.5svh, 36px); }

@media (min-width: 900px) {
  .ps-bewegt .ps-buehne--kapitel { padding-top: max(11svh, 84px); }
  .ps-bewegt .ps-unter { bottom: 6svh; }
  .ps-kopf { padding: 14px 28px; }
  .ps-liste { padding-top: 120px; }
  .ps-liste__innen { padding: 44px 36px 28px; }
  .ps-bewegt .ps-rechnung { --spalte: min(76px, 8.5svh); }
}

/* Kurze Handys: Fragezeile ruecken, damit nichts die Unterzeile beruehrt. */
@media (max-height: 700px) {
  .ps-bewegt .ps-buehne--kapitel { padding-top: 62px; }
  .ps-kapitel h2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .ps-bewegt .ps-rechnung { --spalte: 38px; }
  .ps-frage { font-size: .875rem; }
  .ps-unter { font-size: 1rem; }
}

/* iOS vor 15.4 und aeltere In-App-Browser kennen svh nicht und verwerfen die Regeln oben. */
@supports not (height: 1svh) {
  .ps-bewegt .ps-film { height: 380vh; }
  .ps-bewegt .ps-noch { height: 300vh; }
  .ps-bewegt .ps-schrank { width: min(82vw, 42vh, 400px); margin-top: clamp(10px, 2vh, 24px); }
  .ps-bewegt .ps-eins { height: 320vh; }
  .ps-bewegt .ps-zwei { height: 300vh; }
  .ps-bewegt .ps-drei { height: 280vh; }
  .ps-bewegt .ps-buehne { height: 100vh; }
  .ps-bewegt .ps-buehne--kapitel { padding-top: max(13vh, 76px); }
  .ps-bewegt .ps-film__canvas { height: 100vh; }
  .ps-bewegt .ps-pssst { top: max(7vh, 64px); font-size: clamp(5rem, min(24vw, 15vh), 10rem); }
  .ps-bewegt .ps-rechnung { margin-top: clamp(16px, 3.5vh, 36px); }
  .ps-bewegt .ps-unter { bottom: max(5vh, 28px); }
  .ps-bewegt .ps-szene { margin-top: clamp(16px, 3vh, 32px); }
  .ps-bewegt .ps-blatt { width: min(78vw, 42vh, 340px); margin-left: calc(min(78vw, 42vh, 340px) / -2); }
  .ps-bewegt .ps-telefon { width: min(76vw, 44vh, 340px); }
  .ps-bewegt .ps-geheim { margin-top: clamp(16px, 3.5vh, 36px); }
}