/* ══════════════════════════════════════════════════════════════
   DATEIABLAGE — „Kontext-Gravitation"
   Ein heller Papierraum. Das einzige helle Blatt der v3-Reihe.

   Dramaturgie: Chaos → drei Andock-Ereignisse → Stille → Umdeutung.
   Bewegt wird ausschliesslich EIN Objekttyp: das Dokument.
   Alles andere steht still. Das ist die Regel dieser Seite.

   Kein .v3-scene, kein .v3-list, keine Karten, keine 01/02/03.
══════════════════════════════════════════════════════════════ */

.pap {
  --pap-bg: #f2efe7;
  --pap-sheet: #fbfaf6;
  --pap-ink: #15110c;
  --pap-mut: #6d6558;
  --pap-line: rgba(21, 17, 12, .13);
  --pap-acc: #4f46e5;
  --pap-shadow: 0 1px 2px rgba(21,17,12,.06), 0 8px 24px rgba(21,17,12,.09);
  --pap-ease: cubic-bezier(.22, .9, .24, 1);

  position: relative;
  background: var(--pap-bg);
  color: var(--pap-ink);
  /* Volle Breite, unabhängig vom .pg-main-Limit */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(5.5rem, 11vh, 9rem) 0 0;
  overflow-x: clip;
}
/* Papierfaser: extrem subtil, kein Muster das auffällt */
.pap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.9), transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(21,17,12,.035), transparent 46%);
}

.pap-wrap {
  position: relative;
  width: min(1240px, 90vw);
  margin-inline: auto;
}

/* ── Auftakt: editorial, asymmetrisch ────────────────────────── */
.pap-open { position: relative; padding-bottom: clamp(2rem, 5vh, 4rem); }

.pap-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-heading);
  font-size: .72rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pap-acc);
  margin-bottom: 1.4rem;
}
.pap-eyebrow::before { content: ""; width: 2.6rem; height: 1px; background: currentColor; opacity: .55; }

.pap-h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.02;
  font-size: clamp(2.4rem, 6.6vw, 5.6rem);
  margin: 0;
  max-width: 17ch;
  color: var(--pap-ink);
  text-wrap: balance;
}
.pap-h1 em { font-style: normal; color: var(--pap-acc); }

/* Lead sitzt bewusst rechts versetzt — Asymmetrie statt Mittelachse */
.pap-lead {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0 auto;
  max-width: 46ch;
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.68;
  color: var(--pap-mut);
}
@media (min-width: 900px) {
  .pap-lead { width: 46ch; margin-right: 2vw; }
}
.pap-lead b { color: var(--pap-ink); font-weight: 600; }

/* ── Bühne: hohe Scrollstrecke, klebende Fläche ──────────────── */
.pap-stage { position: relative; height: 560vh; }
.pap-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center;
}

.pap-canvas {
  position: relative;
  width: min(1240px, 92vw);
  margin-inline: auto;
  height: min(74vh, 660px);
}

/* ── Kontext-Spalten: Index, keine Ordner, keine Karten ──────── */
.pap-ctx {
  position: absolute;
  top: 8%;
  left: var(--cx-left);
  width: min(30%, 300px);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .55s var(--pap-ease);
  pointer-events: none;
}
.pap-ctx__kicker {
  display: block;
  font-family: var(--font-heading);
  font-size: .64rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pap-mut);
  margin-bottom: .3rem;
}
.pap-ctx__name {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(.95rem, 1.5vw, 1.18rem); font-weight: 800;
  letter-spacing: -.01em; color: var(--pap-ink);
  line-height: 1.2;
}
.pap-ctx__rule {
  display: block; height: 2px; margin-top: .7rem;
  background: var(--pap-acc);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--pap-ease) .1s;
}
.pap-ctx__count {
  display: block; margin-top: .45rem;
  font-size: .72rem; color: var(--pap-mut); font-variant-numeric: tabular-nums;
}

/* ── Das Dokument: das einzige bewegte Objekt ────────────────── */
.pap-doc {
  position: absolute;
  left: var(--cx); top: var(--cy);
  transform: translate(-50%, -50%) rotate(var(--cr));
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .78rem;
  background: var(--pap-sheet);
  border: 1px solid var(--pap-line);
  border-radius: 3px;
  box-shadow: var(--pap-shadow);
  font-size: clamp(.72rem, 1.05vw, .84rem);
  color: var(--pap-ink);
  white-space: nowrap;
  transition:
    left .95s var(--pap-ease),
    top .95s var(--pap-ease),
    transform .95s var(--pap-ease),
    box-shadow .5s var(--pap-ease),
    opacity .5s var(--pap-ease);
  will-change: left, top, transform;
}
/* Farbmarke links = Dateityp, ersetzt Icons */
.pap-doc::before {
  content: ""; flex: 0 0 auto;
  width: 3px; height: 1.05em; border-radius: 2px;
  background: var(--dt, #9aa0a6);
}
.pap-doc[data-t="pdf"]  { --dt: #c2453c; }
.pap-doc[data-t="doc"]  { --dt: #2b579a; }
.pap-doc[data-t="xls"]  { --dt: #1d7044; }
.pap-doc[data-t="img"]  { --dt: #a4642b; }
.pap-doc[data-t="ppt"]  { --dt: #c4501e; }

/* Angedockt: ruhig, ausgerichtet, flacher Schatten */
.pap-canvas[data-stage] .pap-doc.is-docked {
  left: var(--cx-left);
  top: calc(24% + var(--row) * 2.85rem);
  transform: translate(-50%, 0) rotate(0deg);
  box-shadow: 0 1px 2px rgba(21,17,12,.07);
}

/* Spaltenpositionen */
.pap-ctx[data-col="0"], .pap-doc[data-col="0"] { --cx-left: 17%; }
.pap-ctx[data-col="1"], .pap-doc[data-col="1"] { --cx-left: 50%; }
.pap-ctx[data-col="2"], .pap-doc[data-col="2"] { --cx-left: 83%; }

/* Stufen: Kontexte erscheinen nacheinander */
.pap-canvas[data-stage="1"] .pap-ctx[data-col="0"],
.pap-canvas[data-stage="2"] .pap-ctx[data-col="0"],
.pap-canvas[data-stage="2"] .pap-ctx[data-col="1"],
.pap-canvas[data-stage="3"] .pap-ctx,
.pap-canvas[data-stage="4"] .pap-ctx,
.pap-canvas[data-stage="5"] .pap-ctx { opacity: 1; }

.pap-canvas[data-stage="1"] .pap-ctx[data-col="0"] .pap-ctx__rule,
.pap-canvas[data-stage="2"] .pap-ctx[data-col="0"] .pap-ctx__rule,
.pap-canvas[data-stage="2"] .pap-ctx[data-col="1"] .pap-ctx__rule,
.pap-canvas[data-stage="3"] .pap-ctx__rule,
.pap-canvas[data-stage="4"] .pap-ctx__rule,
.pap-canvas[data-stage="5"] .pap-ctx__rule { transform: scaleX(1); }

/* ── Stufe 4: Rechte. Zum Anfassen, nicht zum Nachlesen. ────── */
.pap-roles {
  width: min(1240px, 92vw); margin: 1.1rem auto 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--pap-ease), transform .5s var(--pap-ease);
}
.pap-roles[hidden] { display: none; }
.pap-roles.is-in { opacity: 1; transform: none; }
.pap-roles__k {
  font-family: var(--font-heading); font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pap-mut);
}
.pap-roles__set { display: flex; flex-wrap: wrap; gap: .4rem; }
.pap-role {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--font-heading); font-weight: 700; font-size: .8rem;
  color: var(--pap-ink); background: transparent;
  border: 1px solid rgba(21,17,12,.22); border-radius: 999px;
  padding: .42rem .9rem;
  transition: background .22s var(--pap-ease), border-color .22s var(--pap-ease), color .22s var(--pap-ease);
}
.pap-role:hover { background: rgba(21,17,12,.06); }
.pap-role.is-on { background: var(--pap-ink); color: var(--pap-sheet); border-color: var(--pap-ink); }
.pap-role:focus-visible { outline: 2px solid var(--pap-acc); outline-offset: 2px; }

/* Kein Zugriff: das Dokument bleibt sichtbar, aber verschlossen —
   „weg" wäre gelogen, es existiert ja weiterhin. */
.pap-doc.is-locked {
  opacity: .18;
  filter: grayscale(1);
}

/* ── Stufe 5: die drei „final" waren nie drei Dateien ────────── */
.pap-doc.is-merged {
  opacity: 0;
  pointer-events: none;
}
.pap-doc.is-target { box-shadow: 0 2px 4px rgba(21,17,12,.1), 0 14px 34px rgba(79,70,229,.22); }

/* Beim Zusammenfallen rückt die übrige Datei auf — nichts wird verdeckt */
.pap-canvas[data-stage="5"] .pap-doc[data-t="ppt"][data-col="1"] {
  top: calc(24% + 1 * 2.85rem);
}

.pap-ver {
  position: absolute;
  left: 50%; top: calc(24% + 2.35 * 2.85rem);
  transform: translate(-50%, 0);
  width: min(30%, 300px);
  padding: .7rem .85rem .8rem;
  background: var(--pap-sheet);
  border: 1px solid var(--pap-line);
  border-left: 2px solid var(--pap-acc);
  border-radius: 3px;
  box-shadow: var(--pap-shadow);
  opacity: 0;
  transition: opacity .5s var(--pap-ease) .35s;
  pointer-events: none;
}
.pap-canvas[data-stage="5"] .pap-ver { opacity: 1; }
.pap-ver__k {
  display: block; font-family: var(--font-heading);
  font-size: .6rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pap-acc); margin-bottom: .5rem;
}
.pap-ver__list { list-style: none; margin: 0; padding: 0; }
.pap-ver__list li {
  display: flex; align-items: baseline; gap: .45rem;
  padding: .26rem 0; font-size: .72rem; color: var(--pap-mut);
  border-top: 1px solid rgba(21,17,12,.07);
}
.pap-ver__list li:first-child { border-top: none; color: var(--pap-ink); }
.pap-ver__list b {
  font-family: var(--font-heading); font-weight: 800; font-size: .74rem;
  color: var(--pap-ink);
}
.pap-ver__list time { margin-left: auto; font-size: .64rem; font-variant-numeric: tabular-nums; }

/* Laufschrift unter der Bühne */
.pap-status {
  margin: 1.4rem auto 0;
  width: min(1240px, 92vw);
  display: flex; align-items: baseline; gap: .8rem;
  font-size: .82rem; color: var(--pap-mut);
  min-height: 1.4em;
}
.pap-status b { color: var(--pap-ink); font-weight: 700; }
.pap-status__dot {
  width: .42rem; height: .42rem; border-radius: 50%;
  background: var(--pap-acc); flex: 0 0 auto;
  transform: translateY(-.15em);
}

/* ── Der Satz. Alleine auf dem Blatt. ────────────────────────── */
.pap-statement {
  padding: clamp(6rem, 16vh, 13rem) 0 clamp(5rem, 12vh, 10rem);
}
.pap-statement p {
  margin: 0;
  width: min(1240px, 90vw); margin-inline: auto;
  font-family: var(--font-heading);
  font-weight: 800; letter-spacing: -.042em; line-height: 1.03;
  font-size: clamp(2rem, 6vw, 5rem);
  max-width: 19ch;
  color: var(--pap-ink);
  text-wrap: balance;
}
.pap-statement span { color: var(--pap-mut); display: block; }

/* ── Prinzipien: redaktioneller Index, keine Karten ──────────── */
.pap-princ { padding-bottom: clamp(4rem, 10vh, 8rem); }
.pap-princ__head {
  font-family: var(--font-heading);
  font-size: .72rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pap-mut);
  padding-bottom: 1rem; border-bottom: 1px solid var(--pap-line);
  margin-bottom: 0;
}
.pap-princ__row {
  display: grid; gap: .5rem 2.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--pap-line);
}
@media (min-width: 820px) {
  .pap-princ__row { grid-template-columns: 15ch 1fr; align-items: baseline; }
  /* Bewusst versetzt: jede zweite Zeile rückt ein */
  .pap-princ__row:nth-child(odd) { padding-left: 6%; }
}
.pap-princ__t {
  margin: 0;
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.05rem, 1.7vw, 1.32rem);
  letter-spacing: -.02em; color: var(--pap-ink);
}
.pap-princ__b {
  margin: 0; color: var(--pap-mut);
  font-size: clamp(.95rem, 1.25vw, 1.04rem); line-height: 1.66;
  max-width: 56ch;
}
.pap-princ__b b { color: var(--pap-ink); font-weight: 600; }

/* ── Technik: bewusst leise, viel Weissraum statt Illustration ─
   Auf diesem Blatt bewegt sich nur das Dokument. Eine Illustration
   hier würde die Regel brechen und den Papierraum zerstören.      */
.pap-tech {
  padding: clamp(1rem, 3vh, 2rem) 0 clamp(6rem, 14vh, 11rem);
  max-width: 62ch;
}
@media (min-width: 900px) { .pap-tech { margin-left: 22%; } }
.pap-tech__kicker {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing: -.03em;
  margin: 0 0 .9rem; color: var(--pap-ink);
}
.pap-tech__body {
  margin: 0 0 1.6rem; color: var(--pap-mut);
  font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.72;
}
.pap-tech__body em { font-style: normal; color: var(--pap-ink); font-weight: 600; }

/* ── Beleg: echtes Artefakt, scharf ──────────────────────────── */
.pap-proof { padding-bottom: clamp(5rem, 12vh, 9rem); }
.pap-proof__grid { display: grid; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .pap-proof__grid { grid-template-columns: 1fr 1.15fr; } }
.pap-proof__t {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem); letter-spacing: -.03em;
  line-height: 1.12; margin: 0 0 .9rem; color: var(--pap-ink);
}
.pap-proof__b { margin: 0 0 1.4rem; color: var(--pap-mut); line-height: 1.66; max-width: 46ch; }
.pap-shot {
  border: 1px solid var(--pap-line); border-radius: 8px; overflow: hidden;
  background: #fff; box-shadow: 0 20px 50px rgba(21,17,12,.13);
}
.pap-shot__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .7rem; border-bottom: 1px solid var(--pap-line);
  background: #f6f4ef;
}
.pap-shot__dot { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(21,17,12,.16); }
.pap-shot__url { margin-left: .5rem; font-size: .68rem; color: var(--pap-mut); }
.pap-shot img { display: block; width: 100%; height: auto; }

/* ── Randnotizen statt Akkordeon (FAQ-Inhalt bleibt, Form nicht) */
.pap-notes { padding-bottom: clamp(5rem, 12vh, 9rem); }
.pap-notes__head {
  font-family: var(--font-heading);
  font-size: .72rem; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--pap-mut); margin-bottom: 1.6rem;
}
.pap-notes__grid { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
@media (min-width: 780px) { .pap-notes__grid { grid-template-columns: repeat(3, 1fr); } }
.pap-note { border-top: 2px solid var(--pap-ink); padding-top: .9rem; }
.pap-note__q {
  margin: 0 0 .5rem; font-family: var(--font-heading);
  font-weight: 800; font-size: 1rem; letter-spacing: -.015em; color: var(--pap-ink);
}
.pap-note__a { margin: 0; color: var(--pap-mut); font-size: .93rem; line-height: 1.62; }

/* ── Abschluss ───────────────────────────────────────────────── */
.pap-end { padding-bottom: clamp(5rem, 12vh, 9rem); }
.pap-end__t {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem); letter-spacing: -.03em;
  margin: 0 0 1.4rem; max-width: 20ch; line-height: 1.1; color: var(--pap-ink);
}
.pap-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--pap-ink); color: var(--pap-sheet);
  font-family: var(--font-heading); font-weight: 700; font-size: .95rem;
  padding: .95rem 1.6rem; border-radius: 999px; text-decoration: none;
  transition: transform .25s var(--pap-ease), background .25s var(--pap-ease);
}
.pap-cta:hover { transform: translateY(-2px); background: var(--pap-acc); }
.pap-cta--ghost {
  background: transparent; color: var(--pap-ink);
  border: 1px solid rgba(21,17,12,.28); margin-left: .6rem;
}
.pap-cta--ghost:hover { background: rgba(21,17,12,.06); color: var(--pap-ink); }
.pap-back { margin: 1.8rem 0 0; font-size: .88rem; color: var(--pap-mut); }
.pap-back a { color: var(--pap-acc); text-underline-offset: 3px; }

/* ══ Mobil: sequentiell statt räumlich ══════════════════════════
   Desktop zeigt drei Kontexte nebeneinander. Mobil erzählt es
   nacheinander: immer nur der aktuelle Kontext ist da.          */
@media (max-width: 820px) {
  .pap-stage { height: 480vh; }
  .pap-canvas { height: min(68vh, 520px); }
  .pap-ctx, .pap-doc { --cx-left: 50% !important; }
  .pap-ctx { width: min(76%, 340px); top: 5%; }
  .pap-canvas[data-stage] .pap-doc.is-docked {
    top: calc(22% + var(--row) * 2.7rem);
  }
  /* Nur die Dokumente des aktuellen Kontexts bleiben sichtbar */
  .pap-canvas[data-stage="1"] .pap-doc[data-col="1"],
  .pap-canvas[data-stage="1"] .pap-doc[data-col="2"],
  .pap-canvas[data-stage="2"] .pap-doc[data-col="0"],
  .pap-canvas[data-stage="2"] .pap-doc[data-col="2"],
  .pap-canvas[data-stage="3"] .pap-doc[data-col="0"],
  .pap-canvas[data-stage="3"] .pap-doc[data-col="1"] { opacity: 0; }
  .pap-canvas[data-stage="2"] .pap-ctx[data-col="0"],
  .pap-canvas[data-stage="3"] .pap-ctx[data-col="0"],
  .pap-canvas[data-stage="3"] .pap-ctx[data-col="1"] { opacity: 0; }
  .pap-ver { left: 50% !important; width: min(78%, 340px); }
  .pap-roles { gap: .5rem; }
  .pap-roles__k { width: 100%; }
}

/* ══ Ohne JS / reduzierte Bewegung: sofort der ruhige Endzustand ══
   Grundzustand im CSS ist bereits „angedockt“ — JS entzieht ihn
   erst und spielt dann das Chaos. Wer kein JS hat, sieht Ordnung. */
@media (prefers-reduced-motion: reduce) {
  .pap-doc { transition: none; }
  .pap-ctx { transition: none; }
  .pap-ctx__rule { transition: none; }
  .pap-stage { height: auto; }
  .pap-sticky { position: static; height: auto; padding: 2rem 0; }
}

/* Randnotizen ist jetzt ein h2 (Heading-Hierarchie), soll aber
   unverändert leise aussehen. */
h2.pap-notes__head{font-size:inherit;font-weight:inherit;letter-spacing:inherit;margin:inherit}

/* Materielle Papierkante und semantische Übergabe desselben Dokuments. */
.pap-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 0 42%,rgba(255,255,255,.34) 48%,transparent 55%);mix-blend-mode:screen;opacity:.18;transform:translateX(-55%);animation:pap-scan 7s ease-in-out infinite}
.pap-doc{background-image:repeating-linear-gradient(0deg,rgba(61,47,30,.018) 0 1px,transparent 1px 4px)}
.pap-continuity{position:relative;padding-left:2.6rem}.pap-continuity::before{content:"ODT";position:absolute;left:.75rem;font-size:.52rem;letter-spacing:.08em;border:1px solid currentColor;border-radius:3px;padding:.1rem .2rem}
@keyframes pap-scan{0%,45%{transform:translateX(-65%)}65%,100%{transform:translateX(65%)}}
@media(prefers-reduced-motion:reduce){.pap-canvas::after{animation:none;transform:none}}