/* =====================================================================
   poster.css — Das Blaupausen-Plakat an der Wand.
   Hängt in der Wandebene (perspektivisch mitverzerrt), links außerhalb
   des Hero-Ausschnitts. Alle Maße in vh, damit es mit der Szene wächst;
   Schrift skaliert über die Grundgröße auf .poster.
   ===================================================================== */

.poster {
  position: absolute;
  left: 50%;                       /* = 50vw Welt; margin-left schiebt auf --poster-x */
  bottom: 20vh;                    /* Mitte des Blatts etwa auf Augenhöhe (Wand reicht 12vh unter die Platte) */
  width: 140vh;
  height: 90vh;
  margin-left: calc(-70vh + var(--poster-x, -77vw) - 50vw);
  /* Das Blatt ist für 140 x 90 vh gesetzt und wird als Ganzes auf 100 x 64 vh
     verkleinert — so bleiben alle Maße im Innern stimmig. */
  transform: rotate(-.6deg) scale(.714);
  transform-origin: 50% 50%;
  font-size: 1.55vh;
  color: #dbe7f7;
  font-family: var(--wf-mono);
  box-shadow:
    0 2vh 6vh rgba(0, 0, 0, .55),
    0 .4vh 1vh rgba(0, 0, 0, .45);
  pointer-events: none;
}

/* Abdunklung, solange der Hero-Text darüber liegt; camera.js setzt --dim */
.poster-dim {
  position: absolute;
  inset: -1.5vh;
  z-index: 4;
  background: #05080f;
  opacity: var(--dim, 0);
}

/* Klebestreifen */
.poster .tape {
  position: absolute;
  width: 9vh; height: 2.6vh;
  background: rgba(232, 222, 170, .55);
  box-shadow: inset 0 0 .6vh rgba(255, 255, 255, .5), 0 .2vh .4vh rgba(0, 0, 0, .25);
  z-index: 3;
}
.poster .tape.tl { left: -2.5vh; top: -1vh;  transform: rotate(-38deg); }
.poster .tape.tr { right: -2.5vh; top: -1vh; transform: rotate(38deg); }
.poster .tape.bl { left: -2.5vh; bottom: -1vh;  transform: rotate(38deg); }
.poster .tape.br { right: -2.5vh; bottom: -1vh; transform: rotate(-38deg); }

/* Das Blatt: Ammoniakdruck-Blau mit Raster, Papierkorn, Knickfalten */
.bp {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    /* Knickfalten */
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.07) 49.85%, rgba(0,0,0,.14) 50.1%, transparent 50.4%),
    linear-gradient(180deg, transparent 49.7%, rgba(255,255,255,.06) 49.85%, rgba(0,0,0,.12) 50.1%, transparent 50.4%),
    /* Feinraster und Hauptraster */
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 2vh),
    repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 2vh),
    repeating-linear-gradient(90deg, rgba(255,255,255,.11) 0 1px, transparent 1px 10vh),
    repeating-linear-gradient(180deg, rgba(255,255,255,.11) 0 1px, transparent 1px 10vh),
    /* ungleichmäßige Belichtung */
    radial-gradient(ellipse 80% 70% at 40% 35%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, #1d4a8c 0%, #163c78 55%, #0f2c5c 100%);
}
.bp::after {                       /* Papierkorn */
  content: "";
  position: absolute; inset: 0;
  background: var(--noise) 0 0 / 30vh 30vh;
  opacity: .12;
}
/* Doppelter Rahmen wie auf technischen Zeichnungen */
.bp-frame {
  position: absolute;
  inset: 2.2vh;
  border: 1px solid rgba(220, 235, 255, .75);
  outline: 1px solid rgba(220, 235, 255, .35);
  outline-offset: .5vh;
}

/* ---- Raster der Inhalte -------------------------------------------- */
.bp-head {
  position: absolute;
  left: 4.4vh; right: 4.4vh; top: 4vh;
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid rgba(220,235,255,.7);
  padding-bottom: 1vh;
}
.bp-head h1 {
  margin: 0;
  font: 700 4.6vh/1 var(--wf-display);
  letter-spacing: .06em;
  color: #eef4ff;
}
.bp-head h1 small {
  display: block;
  margin-top: .8vh;
  font: 400 1.5vh/1 var(--wf-mono);
  letter-spacing: .34em;
  color: rgba(220,235,255,.85);
}
.bp-head .meta { text-align: right; font-size: 1.4vh; line-height: 1.6; letter-spacing: .12em; color: rgba(220,235,255,.85); }

.bp-col { position: absolute; top: 14vh; }
.bp-col.l { left: 4.4vh; width: 44vh; }
.bp-col.m { left: 52vh; width: 46vh; }
.bp-col.r { left: 102vh; right: 4.4vh; }

.bp h2 {
  margin: 0 0 1.2vh;
  font: 400 1.5vh/1 var(--wf-mono);
  letter-spacing: .3em;
  color: rgba(220,235,255,.9);
  border-bottom: 1px dashed rgba(220,235,255,.5);
  padding-bottom: .7vh;
}
.bp ul { margin: 0; padding: 0; list-style: none; font-size: 1.55vh; line-height: 1.75; }
.bp ul li::before { content: "▸ "; color: rgba(220,235,255,.6); }
.bp .note { font-size: 1.35vh; line-height: 1.6; color: rgba(220,235,255,.8); margin: 1.2vh 0 0; }

.bp svg { display: block; width: 100%; height: auto; overflow: visible; }
.bp svg text { font-family: "JetBrains Mono", "Lucida Console", monospace; fill: #e6effc; }
.bp svg .ln { fill: none; stroke: #dbe7f7; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.bp svg .dim { fill: none; stroke: rgba(220,235,255,.75); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.bp svg .fill { fill: rgba(220,235,255,.12); stroke: #dbe7f7; stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* Markenzeichen als technische Zeichnung: Maske in Linienblau + Bemaßung */
.bp-mark {
  position: relative;
  height: 20vh;
  margin: 1vh 0 1.5vh;
}
.bp-mark .wf-mark {
  position: absolute; left: 4vh; top: 1.5vh; width: 34vh; height: 17vh;
  background: rgba(220,235,255,.16);
}
.bp-mark .wf-mark.line {
  background: none;
  -webkit-mask: none; mask: none;
  border: 1px solid rgba(220,235,255,.65);
  border-radius: 2.4vh;
}

/* Titelblock rechts unten */
.bp-title {
  position: absolute;
  right: 4.4vh; bottom: 4.4vh;
  width: 36vh;
  border: 1px solid rgba(220,235,255,.8);
  font-size: 1.3vh;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.bp-title div { padding: .6vh 1vh; border-bottom: 1px solid rgba(220,235,255,.45); border-right: 1px solid rgba(220,235,255,.45); }
.bp-title div:nth-child(2n) { border-right: 0; }
.bp-title div:nth-last-child(-n+2) { border-bottom: 0; }
.bp-title b { display: block; font-weight: 400; letter-spacing: .2em; font-size: 1.1vh; color: rgba(220,235,255,.65); }
.bp-title .wide { grid-column: 1 / -1; font: 700 2vh/1.2 var(--wf-display); letter-spacing: .08em; padding: 1vh; }

/* Bedienungsanleitung: drei Schritte mit Sinnbildern, die zugleich Schalter sind */
.bp-manual { margin: 0; padding: 0; list-style: none; }
.bp-manual li + li { margin-top: 1.1vh; }
.bp-step {
  display: grid;
  grid-template-columns: 11vh 1fr 3vh;
  align-items: center;
  gap: 1.6vh;
  width: 100%;
  padding: 1vh 1.2vh;
  border: 1px dashed rgba(220,235,255,.45);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  pointer-events: auto;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}
.bp-step.static { cursor: default; }
.bp-step:not(.static):hover { background: rgba(220,235,255,.08); border-color: rgba(220,235,255,.8); }
.bp-step svg { width: 11vh; height: 6.9vh; }
.bp-step-text { font-size: 1.8vh; letter-spacing: .18em; line-height: 1.3; }
.bp-step-text b { display: inline-block; width: 3.2vh; font-weight: 400; color: rgba(220,235,255,.6); }
.bp-step-text small { display: block; margin-top: .5vh; padding-left: 3.2vh; font-size: 1.35vh; letter-spacing: .08em; color: rgba(220,235,255,.75); }
.bp-check {
  width: 2.2vh; height: 2.2vh;
  border: 1px solid rgba(220,235,255,.8);
  position: relative;
}
.bp-check::after {
  content: "";
  position: absolute; left: .45vh; top: .1vh;
  width: .8vh; height: 1.3vh;
  border: solid #ffb27a; border-width: 0 .25vh .25vh 0;
  transform: rotate(40deg);
  opacity: 0;
  transition: opacity .2s;
}
.bp-step.on .bp-check::after { opacity: 1; }
/* Eingeschaltet: das Sinnbild leuchtet in Glut */
.bp-step.on svg .ln, .bp-step.on svg .fill { stroke: #ffb27a; }
.bp-step.on svg .fill { fill: rgba(255,178,122,.35); }
.bp-step.on { border-style: solid; border-color: rgba(255,178,122,.7); }

/* Kleines Whitepaper unter der Anleitung, im Ton eines Patentvermerks */
.bp-paper {
  margin-top: 2.2vh;
  padding: 1.2vh 1.4vh;
  border: 1px solid rgba(220,235,255,.5);
  background: rgba(255,255,255,.03);
}
.bp-paper h3 {
  margin: 0 0 .7vh;
  font: 400 1.25vh/1.3 var(--wf-mono);
  letter-spacing: .26em;
  color: rgba(220,235,255,.9);
}
.bp-paper p { margin: 0; font-size: 1.3vh; line-height: 1.55; color: rgba(220,235,255,.82); }
.bp-paper-foot { margin-top: .6vh !important; font-size: 1.15vh !important; letter-spacing: .14em; color: rgba(220,235,255,.6) !important; }

/* Stempel */
.bp-stamp {
  position: absolute;
  left: 14vh; bottom: 7vh;
  padding: .8vh 1.6vh;
  border: .35vh double rgba(255, 120, 90, .75);
  color: rgba(255, 130, 100, .85);
  font: 700 2.2vh/1 var(--wf-display);
  letter-spacing: .3em;
  transform: rotate(-11deg);
}

/* Scroll-Hinweis, gezeichnet wie ein Vermerk auf dem Blatt */
.bp-hint {
  position: absolute;
  left: 50%; bottom: 3.2vh;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 1.4vh;
  font-size: 1.5vh;
  letter-spacing: .3em;
  color: #eef4ff;
  white-space: nowrap;
}
.bp-hint svg { width: 2.4vh; height: 3.6vh; fill: none; stroke: #eef4ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: bp-hint 1.3s ease-in-out infinite; }
@keyframes bp-hint { 0%, 100% { transform: translateY(-.5vh); } 50% { transform: translateY(.6vh); } }

/* Der Raumboden unter allem — nur ein dunkler Grund, damit unter der
   Wand kein Nichts klafft, wenn die Kamera zum Plakat schwenkt. */
.ground {
  position: absolute;
  left: -140vw; width: 380vw;
  top: calc(var(--FLOOR) + 10vh); height: 400vh;
  transform-origin: 50% 0;
  transform: translateZ(calc(-1 * var(--D))) rotateX(90deg);
  background: linear-gradient(180deg, #100f0f 0%, #070708 40%, #030304 100%);
}

@media (prefers-reduced-motion: reduce) {
  .bp-hint svg { animation: none; }
}