/* ═══════════════════════════════════════════════════════════
   JAKOB AI — Konzept 2026 („Der Punkt nimmt alles auf")
   Ein Blatt Papier. Ein roter Punkt. Eine Geschichte.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Chakra Petch';
  src: url('../assets/fonts/chakra-petch/chakra-petch-v13-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/space-mono/space-mono-v17-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/space-mono/space-mono-v17-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter/inter-v20-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ink: #1A120D;
  --brown: #75563F;
  --paper: #F1EDE2;
  --card: #FBF8F0;
  --red: #EE1B24;
  --red-text: #C9101C;
  --red-btn: #E0111A;
  --muted: #6F604E;
  --display: 'Chakra Petch', 'Trebuchet MS', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
  --text: 'Inter', system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --loader-dur: 1.6s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--text);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
::selection { background: #F8C3DD; color: var(--ink); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Papierkorn */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 80;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.red { color: var(--red); font-style: normal; }
.cursor {
  display: inline-block;
  animation: blink 1.1s steps(2) infinite;
}
.cursor-ink { color: var(--ink); }
@keyframes blink { 50% { opacity: 0; } }

/* ── Intro ── */
@keyframes loaderDraw {
  0%, 8% { stroke-dashoffset: 31.5px; stroke: #6B4D37; stroke-width: 195px; animation-timing-function: cubic-bezier(.55, 0, .25, 1); }
  62%, 100% { stroke-dashoffset: -68.5px; stroke: #75563F; stroke-width: 155px; }
}
@keyframes loaderDot {
  0%, 58% { transform: scale(0); opacity: 0; }
  61% { opacity: 1; }
  64% { transform: scale(1.22); }
  70% { transform: scale(.94); }
  75%, 100% { transform: scale(1); opacity: 1; }
}
.loader { display: none; }
html.js .loader {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 400;
  background: var(--paper);
}
html.js .loader.hide { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
html.js .loader.run .loader-j { animation: loaderDraw var(--loader-dur) linear 1 both; }
html.js .loader.run .loader-dot {
  transform-box: fill-box; transform-origin: center;
  animation: loaderDot var(--loader-dur) linear 1 both;
}
html.no-loader .loader { display: none !important; }
html.loading { overflow-y: hidden; }

/* ── Cursor: der rote Punkt ── */
.cur {
  display: none;
  position: fixed; top: 0; left: 0;
  /* 480px-Basis, klein skaliert = 14px sichtbar. Wächst der Punkt
     (Szenen-Fang, bis zum stehenden großen Punkt), wird nur die
     Skalierung angehoben — nie über 1, also immer gestochen scharf. */
  width: 480px; height: 480px;
  border-radius: 50%;
  background: var(--red);
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  scale: .029167;
  /* KEINE Bewegungs-Transition: Ort und Größe glättet ein einziger JS-Lerp —
     zwei Glättungen übereinander fühlen sich wie ein Gummiband an.
     Nur die Farbe (rote/beige Welt, Andocken) blendet weich. */
  transition: background .3s ease;
  will-change: translate;
}
html.has-cur .cur { display: block; }
html.has-cur.cur-on .cur { opacity: 1; }
html.cur-hold .cur { opacity: 0 !important; }
@media (hover: hover) and (pointer: fine) {
  html.has-cur body, html.has-cur a, html.has-cur button { cursor: none; }
  /* Ball geparkt (Tor/Seitenende): echten Zeiger zeigen, damit man den
     Button trifft — der rote Ball schwebt daneben, ist aber nicht der
     Klickpunkt in diesem Moment */
  html.has-cur.dot-parked body { cursor: auto; }
  html.has-cur.dot-parked a, html.has-cur.dot-parked button { cursor: pointer; }
}
#dot-morph {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  background: var(--red);
  z-index: 450;
  pointer-events: none;
}

/* ── Logo oben links ── */
.brand {
  position: fixed; top: 18px; left: 20px; z-index: 120;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.brand svg { width: 34px; height: 34px; display: block; }
.brand span {
  font-family: var(--display); font-weight: 600;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brown);
}
html.js .brand {
  opacity: 0;
  translate: 0 -8px;
  transition: opacity .7s ease .35s, translate .8s var(--ease-out) .35s;
}
html.js.intro-done .brand { opacity: 1; translate: 0 0; }
body.no-anim .brand { opacity: 1 !important; translate: 0 0 !important; }

/* ── Akt 1: Hero ── */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  position: relative;
  padding: 80px clamp(20px, 4vw, 48px);
}
.hero-h1 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 8.6vw, 7.4rem);
  line-height: 1.04;
  letter-spacing: .015em;
}
.hh-line { display: block; overflow: hidden; padding-bottom: .06em; }
.hh-in { display: inline-block; }
html.js .hh-in {
  transform: translateY(115%);
  transition: transform 1s var(--ease-out) .15s;
}
html.js .hh-line:nth-child(2) .hh-in { transition-delay: .28s; }
html.js.intro-done .hh-in { transform: none; }
body.no-anim .hh-in { transform: none !important; }
.hero-sub {
  font-family: var(--mono);
  font-size: clamp(.95rem, 1.6vw, 1.2rem);
  color: var(--muted);
  margin-top: 1.8rem;
  min-height: 1.6em;
}
.hero-scroll {
  position: absolute; bottom: 0; left: 50%;
  translate: -50% 0;
  height: 68px; width: 1px;
}
.scroll-line {
  display: block; width: 1px; height: 100%;
  background: linear-gradient(rgba(26, 18, 13, 0), rgba(26, 18, 13, .45));
  transform-origin: top;
  animation: scrollPulse 2.2s var(--ease-out) infinite;
}
@keyframes scrollPulse {
  0% { transform: scaleY(0); }
  55% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── Akt 2+3: Unterlagen fliegen heran, der Punkt nimmt sie auf ── */
.docs { position: relative; }
.docs-pin { position: relative; text-align: center; padding: 3rem clamp(20px, 4vw, 48px); }
.big-dot {
  display: block;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--red);
  margin: 0 auto 2rem;
}
/* Apple-Ordner: Reiter hinten, ein Blatt schaut heraus, Finder-Label */
.doc {
  font-family: var(--mono);
  font-size: clamp(.56rem, .9vw, .68rem);
  letter-spacing: .06em;
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  margin: 6px;
  white-space: nowrap;
}
.doc-folder {
  display: block;
  position: relative;
  width: 78px; height: 56px;
  border-radius: 9px;
  background: linear-gradient(180deg, #F0E1BC, #E1CA96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -1px 0 rgba(26, 18, 13, .07),
    0 18px 32px -16px rgba(26, 18, 13, .45);
}
.doc-folder::before {
  content: '';
  position: absolute; z-index: -1;
  top: -8px; left: 9px;
  width: 34px; height: 16px;
  border-radius: 6px 9px 0 0;
  background: linear-gradient(180deg, #F3E6C6, #E9D4A4);
}
.doc-folder::after {
  content: '';
  position: absolute; z-index: -2;
  top: -5px; right: 9px;
  width: 36px; height: 15px;
  border-radius: 3px;
  background: #FBF8F0;
  box-shadow: 0 0 0 .5px rgba(26, 18, 13, .14);
  rotate: -2.5deg;
}
.doc-name {
  background: rgba(251, 248, 240, .9);
  border-radius: 5px;
  padding: 3px 8px;
  color: var(--ink);
}
.docs-cap {
  font-family: var(--mono);
  font-size: clamp(.95rem, 1.7vw, 1.3rem);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  max-width: 40ch;
  margin: 2.2rem auto 0;
  min-height: 4.2em;
}
/* Film-Modus */
html.js body:not(.no-anim) .docs { height: 560vh; }
html.js body:not(.no-anim) .docs-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding: 0;
  overflow: clip;
  /* Eigene Bühne: darf beim Schlussmoment über dem Punkt liegen */
  z-index: 20;
}
/* Schlussmoment der Docs-Szene: der Punkt tritt HINTER die Bühne,
   damit das Textfeld auf ihm schweben kann (Safari: sticky = Kontext) */
html.cap-float .cur { z-index: 2; }
html.js body:not(.no-anim) .docs-stage { position: absolute; inset: 0; }
html.has-cur .big-dot { display: none !important; }
/* Ohne Cursor (Touch): derselbe Punkt als fixes Element — er bleibt
   nach dem Aufnehmen stehen und stellt sich über den Tor-Button */
html.js body:not(.no-anim) .big-dot {
  position: fixed; left: 50%; top: 50%;
  width: 480px; height: 480px;
  translate: -50% -50%;
  scale: .033;
  margin: 0;
  opacity: 0;
  z-index: 5;
  will-change: translate, scale;
  transition: opacity .4s ease;
}
html.js body:not(.no-anim) .big-dot.stand {
  transition: translate .55s var(--ease-out), scale .55s var(--ease-out), opacity .4s ease;
}
html.js body:not(.no-anim) .doc {
  position: absolute; left: 50%; top: 50%;
  margin: 0;
  opacity: 0;
  will-change: translate, scale, opacity;
}
html.js body:not(.no-anim) .docs-cap {
  position: absolute; left: 50%; bottom: 9vh;
  translate: -50% 0;
  margin: 0;
  width: min(680px, 88vw);
  z-index: 6;
  background: rgba(241, 237, 226, .9);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 14px 22px;
  border-radius: 10px;
}
/* Schlussmoment: EIGENES Textfeld schwebt über dem großen Punkt und
   blendet weich ein, erst wenn der Punkt groß genug ist */
.docs-oncap { display: none; }
html.js body:not(.no-anim) .docs-oncap {
  display: block;
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(350px, 76vw);
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: clamp(.95rem, 1.7vw, 1.3rem);
  font-weight: 700;
  color: var(--paper);
  z-index: 350;
  opacity: 0;
  scale: .94;
  transition: opacity .5s ease, scale .6s var(--ease-out);
  pointer-events: none;
}
html.js body:not(.no-anim) .docs-oncap.show { opacity: 1; scale: 1; }
body.no-anim .doc { opacity: 1 !important; }

/* ── Akt 4: das Tor ── */
.gate {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 2.2rem;
  text-align: center;
  padding: 0 clamp(20px, 4vw, 48px);
}
.gate-btn {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(.95rem, 1.8vw, 1.25rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--red-btn);
  color: #FFF8EF;
  padding: clamp(16px, 2.4vw, 22px) clamp(28px, 4vw, 46px);
  border-radius: 8px;
  box-shadow: 0 24px 60px -24px rgba(225, 53, 42, .6);
  /* Magnet: der Knopf rückt dem Punkt weich entgegen */
  transition: transform .18s var(--ease-out), background .18s, translate .3s var(--ease-out);
}
.gate-btn:hover { background: var(--red-text); transform: translateY(-2px); }
.gate-hint {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
body.unlocked .gate { display: none; }

/* Verriegelte Akte in zwei Stufen: das Tor öffnet die Gliederung,
   „Gliederung bestätigen" öffnet den Rest (ohne JS: alles offen) */
html.js body:not(.unlocked) .locked { display: none; }
html.js body:not(.confirmed) .locked2 { display: none; }
html:not(.js) .gate { display: none; }
.gl-confirm { margin-top: 2.6rem; }
html:not(.js) .gl-confirm, body.no-anim .gl-confirm { display: none; }

/* ── Akt 5: die Gliederung ── */
.gl {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: clamp(4rem, 10vh, 7rem) clamp(20px, 4vw, 48px);
}
.gl-cap {
  font-family: var(--mono);
  font-size: clamp(.9rem, 1.5vw, 1.15rem);
  color: var(--ink);
  max-width: 52ch;
  text-align: center;
  min-height: 3.2em;
  margin-bottom: 2.4rem;
}
.gl-rows { list-style: none; width: min(560px, 100%); }
.gl-row {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: clamp(.85rem, 1.4vw, 1.05rem);
  padding: 13px 10px;
  border-bottom: 1px solid rgba(26, 18, 13, .14);
}
html.js body:not(.no-anim) .gl-row {
  opacity: 0;
  translate: 0 30px;
  scale: .96;
  /* Springt hervor: leichter Überschwinger */
  transition: opacity .35s ease,
    translate .55s cubic-bezier(.26, 1.5, .45, 1),
    scale .55s cubic-bezier(.26, 1.5, .45, 1);
}
html.js body:not(.no-anim) .gl-row.in { opacity: 1; translate: 0 0; scale: 1; }
body.no-anim .gl-row { opacity: 1 !important; translate: 0 0 !important; }
.gl-row.away {
  opacity: 0 !important;
  translate: 24px 0 !important;
  transition: opacity .3s ease, translate .3s ease !important;
}
.gl-grip { color: rgba(26, 18, 13, .35); }
.gl-t { flex: 1; text-align: left; }
.gl-x {
  font-family: var(--mono);
  font-size: 1.15rem;
  line-height: 1;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 4px;
  transition: color .2s, background .2s;
}
.gl-x:hover { color: var(--red-text); background: rgba(238, 27, 36, .08); }
.gl-add {
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--red-text);
  margin-top: 1.2rem;
  padding: 8px 12px;
}
.gl-note {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.6rem;
}

/* ── Akt 6: die Agenten ── */
.agents {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 1.8rem;
  padding: clamp(4rem, 10vh, 7rem) clamp(20px, 4vw, 48px);
  text-align: center;
}
.ag-cap {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  max-width: 20ch;
  text-wrap: balance;
}
.ag-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ag-pill {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(26, 18, 13, .3);
  border-radius: 999px;
  padding: 5px 13px;
  color: var(--muted);
  /* Der aktive Agent wandert — weiche Übergabe */
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.ag-pill.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ag-demo { width: min(520px, 100%); text-align: left; }
.bubble-ai {
  font-size: .82rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 9px;
  padding: 10px 13px;
  margin-bottom: 10px;
  width: fit-content;
}
.ab-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono);
  font-size: .8rem;
  background: var(--card);
  border: 1px solid rgba(26, 18, 13, .15);
  border-radius: 6px;
  padding: 11px 13px;
}
.ab-act { font-weight: 700; white-space: nowrap; }
.ag-sub {
  font-family: var(--mono);
  font-size: clamp(.8rem, 1.2vw, .95rem);
  color: var(--muted);
  max-width: 48ch;
}

/* ── Akt 7: 56 Minuten ── */
.fin {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 1.4rem;
  text-align: center;
  padding: clamp(4rem, 10vh, 7rem) clamp(20px, 4vw, 48px);
}
.fin-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(7rem, 30vw, 26rem);
  line-height: .9;
  color: var(--red-btn);
  font-variant-numeric: tabular-nums;
}
.fin-line {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 3.4vw, 2.4rem);
  max-width: 24ch;
  text-wrap: balance;
}
.fin-exports { display: flex; gap: 10px; margin-top: .6rem; }
.exp-chip {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  padding: 7px 14px;
}
.fin-cta { margin-top: 1.6rem; }
.btn-red {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--red-btn);
  color: #FFF8EF;
  padding: 18px 38px;
  border-radius: 8px;
  transition: transform .18s var(--ease-out), background .18s, translate .3s var(--ease-out);
}
.btn-red:hover { background: var(--red-text); transform: translateY(-2px); }
.fin-mail { margin-top: 1.2rem; }
.fin-mail a {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 18, 13, .3);
  padding-bottom: 2px;
}
.fin-mail a:hover { color: var(--ink); border-color: var(--red-text); }

/* ── Akt 9: die Gründer — clean auf Rot, Bild-Platzhalter + Name ── */
.team {
  min-height: 92vh;
  background: var(--red-btn);
  color: var(--paper);
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: clamp(2.6rem, 7vh, 4.6rem);
  padding: clamp(4rem, 12vh, 8rem) clamp(20px, 4vw, 48px);
  text-align: center;
}
.team-cap {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(241, 237, 226, .8);
}
.team-row {
  display: flex; flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
  justify-content: center;
}
.tm {
  margin: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 1.2rem;
}
/* Runder Foto-Rahmen — etwas kleiner. Silhouette ist Fallback, bis das
   echte Foto (tm-img) geladen ist; fehlt die Datei, entfernt onerror das
   <img> und die Silhouette bleibt sichtbar. */
.tm-photo {
  position: relative;
  width: clamp(122px, 15vw, 168px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #F4EEE1, #E4D8C0);
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .55);
}
.tm-photo::before {
  content: '';
  position: absolute; left: 50%; top: 28%;
  width: 32%; aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(26, 18, 13, .14);
}
.tm-photo::after {
  content: '';
  position: absolute; left: 50%; bottom: -18%;
  width: 70%; aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(26, 18, 13, .14);
}
/* Das echte Foto deckt die Silhouette, sobald geladen */
.tm-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
.tm-name {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(.95rem, 1.7vw, 1.24rem);
  letter-spacing: .02em;
}

/* ── Formblatt D1: Demo-Anfrage ── */
.demo-overlay {
  position: fixed; inset: 0;
  z-index: 280;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(20, 16, 12, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* display:flex würde das hidden-Attribut überschreiben — nie wieder:
   zu ein Overlay, das unsichtbar die ganze Seite abfängt */
.demo-overlay[hidden] { display: none; }
.demo-card {
  position: relative;
  width: min(470px, 100%);
  max-height: 90vh; overflow: auto;
  background: var(--card);
  color: var(--ink);
  border-radius: 12px;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: 0 44px 100px -34px rgba(0, 0, 0, .55);
}
.demo-kicker {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.demo-card h3 {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin: .2em 0 .6em;
}
.demo-card label {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 15px 0 0;
  text-align: left;
}
.demo-card input, .demo-card textarea {
  display: block;
  width: 100%;
  font: 1rem var(--text);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgba(26, 18, 13, .35);
  border-radius: 0;
  padding: 8px 2px;
  margin-top: 2px;
  resize: vertical;
}
.demo-card input:focus, .demo-card textarea:focus {
  outline: none;
  border-bottom-color: var(--red-btn);
}
.demo-invalid input:required:invalid { border-bottom-color: var(--red-btn); }
.demo-send { margin-top: 24px; width: 100%; border: 0; }
.demo-send:disabled { opacity: .6; }
.demo-err {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--red-text);
  margin-top: 12px;
}
.demo-note {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--muted);
  margin-top: 14px;
}
.demo-done {
  font-family: var(--mono);
  font-size: .95rem;
  margin-top: 1em;
}
.demo-x {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--muted);
  padding: 6px 10px;
}
.demo-x:hover { color: var(--red-text); }

/* ── Plankopf ── */
.pk { padding: clamp(24px, 4vh, 40px) clamp(20px, 4vw, 48px); }
/* Der Punkt kehrt heim: Papier-Stempel mit dem J — der Punkt fehlt,
   bis der Cursor-Punkt am Seitenende andockt und das Logo vollendet */
.pk-home {
  display: flex; justify-content: center;
  margin-bottom: clamp(18px, 3.4vh, 34px);
}
.pk-plaque {
  display: inline-block;
  background: var(--paper);
  padding: 14px 20px;
  border-radius: 10px;
  box-shadow: 0 22px 46px -22px rgba(0, 0, 0, .4);
}
.pk-j { display: block; height: 72px; width: auto; }
html.js body:not(.no-anim) .pk-dot-static { display: none; }
/* Mobil: einmal angedockt, wird der Punkt Teil des Stempels (scrollt
   mit der Seite, klebt nicht am Viewport) */
html.js.dot-docked body:not(.no-anim) .pk-dot-static { display: inline; }
/* Angedockt wird der Punkt wieder ROT — er sitzt ja auf Papier */
html.red-world.dot-home .cur { background: var(--red); }

/* Rote Welt: alle Wand-Ebenen aus und die Wand selbst rot — auch beim
   Überscrollen (iOS-Gummiband) blitzt kein Beton mehr durch */
html.red-world .wall { background: var(--red-btn); }
html.red-world .wall-vid, html.red-world .wall-photo, html.red-world .wall-tint,
html.red-world .wall-dust, html.red-world .wall-light { visibility: hidden; }
.pk-grid {
  max-width: 1160px;
  margin-inline: auto;
  border: 1px solid rgba(26, 18, 13, .5);
  display: flex; flex-wrap: wrap;
}
.pk-c {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--mono);
  font-size: .74rem;
  padding: 10px 14px;
  border-right: 1px solid rgba(26, 18, 13, .22);
}
.pk-c:last-child { border-right: 0; }
.pk-c b {
  font-weight: 400;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.pk-c a { text-decoration: none; border-bottom: 1px solid rgba(26, 18, 13, .3); }
.pk-c a:hover { color: var(--red-text); }

/* ── Reveals ── */
html.js body:not(.no-anim) .rv {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .8s ease var(--d, 0s), translate .8s var(--ease-out) var(--d, 0s);
}
html.js body:not(.no-anim) .rv.in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}
@media (max-width: 700px) {
  .brand span { display: none; }
}

/* ── Intro-Tor: der Punkt wächst, ENTER steht drauf ── */
.loader-mark-wrap { position: relative; }
.loader-enter {
  position: fixed;
  left: 50vw; top: 50vh;
  translate: -50% -50%;
  padding: 30px 40px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.loader-enter:focus, .loader-enter:focus-visible { outline: none; }
.loader.ready .loader-enter {
  opacity: 1;
  pointer-events: auto;
  /* Shiny: ein Lichtstreif läuft durch die Buchstaben */
  background: linear-gradient(110deg, #F1EDE2 42%, #FFFFFF 50%, #F1EDE2 58%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shine 2.6s ease-in-out infinite;
}
@keyframes shine {
  0% { background-position: 130% 0; }
  55%, 100% { background-position: -130% 0; }
}
.loader.ready { cursor: pointer; }

/* ── Akt 7: Export ── */
.expo {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 2.4rem;
  text-align: center;
  padding: clamp(4rem, 10vh, 7rem) clamp(20px, 4vw, 48px);
}
.expo-line {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 3.8rem);
}
.expo-line .red { color: var(--red-btn); }
/* Zwei stille Datei-Blätter mit Eselsohr — passend zu den Ordnern */
.expo-files { display: flex; gap: clamp(26px, 4vw, 44px); justify-content: center; }
.file {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
  display: inline-flex; flex-direction: column; align-items: center; gap: 9px;
}
.file-sheet {
  position: relative;
  width: 70px; height: 90px;
  border-radius: 6px;
  background: #FBF8F0;
  box-shadow: 0 18px 34px -18px rgba(26, 18, 13, .45), 0 0 0 .5px rgba(26, 18, 13, .12);
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%);
  display: grid; place-items: center;
}
.file-sheet::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 17px; height: 17px;
  background: linear-gradient(225deg, transparent 50%, #E6DEC9 50%);
}
.file-sheet b {
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--brown);
}
.file-name { color: var(--ink); }

/* ── Akt 7b: die Ansage — bold rot, Zeile für Zeile ── */
.seq { position: relative; }
.seq-pin {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: .1em;
  text-align: center;
  min-height: 70vh;
  padding: 2rem clamp(20px, 4vw, 48px);
}
html.js body:not(.no-anim) .seq { height: 240vh; }
html.js body:not(.no-anim) .seq-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  min-height: 0;
}
.seq-l {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(2.8rem, 10.5vw, 8.6rem);
  line-height: 1.05;
  color: var(--red-btn);
  overflow: hidden;
  padding-bottom: .05em;
}
.seq-in { display: inline-block; }
html.js body:not(.no-anim) .seq-in {
  transform: translateY(112%);
  transition: transform .7s var(--ease-out);
}
html.js body:not(.no-anim) .seq-l.in .seq-in { transform: none; }
body.no-anim .seq-in { transform: none !important; }

/* ── Der Switch: ein rotes Blatt schiebt sich MIT DEM SCROLL über die
   Seite — danach ist Rot die Hauptfarbe ── */
.wipe { display: none; }
html.js body:not(.no-anim) .wipe { display: block; height: 170vh; }
html.js body:not(.no-anim) .wipe-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
}
.wipe-sheet {
  position: absolute; inset: 0;
  background: var(--red-btn);
  translate: 0 102%;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -34px 90px rgba(26, 18, 13, .28);
  will-change: translate;
}
/* Die rote Welt: Finale + Plankopf in Beige auf Rot */
.fin { background: var(--red-btn); color: var(--paper); }
.fin-num { color: var(--paper); }
.fin-line { color: var(--paper); }
.fin .btn-red {
  background: var(--paper);
  color: var(--red-btn);
}
.fin .btn-red:hover { background: #FFFDF7; transform: translateY(-2px); }
.fin-mail a {
  color: rgba(241, 237, 226, .85);
  border-bottom-color: rgba(241, 237, 226, .45);
}
.fin-mail a:hover { color: #fff; border-color: #fff; }
.pk { background: var(--red-btn); color: var(--paper); }
.pk-grid { border-color: rgba(241, 237, 226, .65); }
.pk-c { border-right-color: rgba(241, 237, 226, .3); }
.pk-c b { color: rgba(241, 237, 226, .7); }
.pk-c a { border-bottom-color: rgba(241, 237, 226, .45); }
.pk-c a:hover { color: #fff; }
/* Der eine Punkt: auf Rot wird er beige */
html.red-world .cur { background: var(--paper); }

/* Verriegelung schlägt Wipe-Anzeige (Spezifitäts-Fix): vor dem Bestätigen
   existiert weder der Wisch noch die rote Welt */
html.js body:not(.confirmed) .wipe { display: none !important; }
html.js body:not(.confirmed) .pk { display: none; }

/* Weiches Licht hinter Texten — kein Kasten, immer lesbar */
.veil { background: none; }
.veil-block {
  display: flex; flex-direction: column;
  align-items: center;
  gap: inherit;
}
.veil-rot { background: none; }

/* ── Die Wand: Sichtbeton im Cremelicht, der Film läuft mit dem Scroll ──
   Standbild (erster Frame) als Basis, Video blendet nach der ersten Geste
   ein (Safari lädt sonst nicht), Papier-Schleier hält den Text lesbar. */
.wall {
  position: fixed; inset: 0;
  /* Unter ALLEM Inhalt — auch unter nicht-positionierten Sektionen */
  z-index: -1;
  pointer-events: none;
  overflow: clip;
  background: var(--paper);
}
/* Video liegt UNTER dem Standbild und ist nie opacity:0 — WebKit lädt
   unsichtbare Videos sonst gar nicht erst. Ist es bereit, hebt sich das
   Standbild (identischer erster Frame → kein Sprung). */
.wall-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.wall-photo {
  position: absolute; inset: 0;
  background: url('../assets/beton-frame.webp') center / cover no-repeat;
  transition: opacity .5s ease;
}
.wall-photo.off { opacity: 0; }
body.no-anim .wall-vid, html:not(.js) .wall-vid { display: none; }
.wall-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(241, 237, 226, .6),
    rgba(241, 237, 226, .42) 42%,
    rgba(241, 237, 226, .54));
}
.wall-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Der Lichtkegel: folgt dem Punkt über das Blatt */
.wall-light {
  position: absolute; left: 0; top: 0;
  width: 1400px; height: 1400px;
  background: radial-gradient(closest-side,
    rgba(255, 252, 244, .18),
    rgba(255, 252, 244, .07) 38%,
    rgba(26, 18, 13, .035) 66%,
    transparent 80%);
  will-change: translate;
}
body.no-anim .wall-light, html:not(.js) .wall-light { display: none; }
@media (max-width: 700px) {
  .pb-note, .pb-ticks { display: none; }
}