/* ============================================================
   screenpuppets.com — cinematische Landing
   Dunkler, warmer Kino-Look. Fünf klare Vollbild-Stationen
   (Vorhang -> Tischszene -> Werkstatt -> Schreibtisch).
   Palette: OKLCH, vier Tokens. Rost-Akzent (Marken-Kontinuität).
   ============================================================ */

/* ---- Fonts (lokal, kein externer Request) ---- */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-variable-italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('/assets/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Design-Tokens ---- */
:root {
  --bg:      oklch(0.15 0.014 60);   /* dunkles warmes Fast-Schwarz */
  --bg-deep: oklch(0.10 0.012 55);   /* noch tiefer (Footer/Vignette) */
  --ink:     oklch(0.93 0.018 80);   /* warmes Bone/Creme für Text */
  --muted:   oklch(0.68 0.02 65);    /* gedämpftes Warmgrau */
  --accent:  oklch(0.58 0.16 37);    /* Rost-Rot #B83A1F */
  --accent-hi: oklch(0.66 0.16 42);  /* etwas heller für Hover */

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'InterVar', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1160px;
  --pad: clamp(1.25rem, 5vw, 4rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Lenis smooth-scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

a { color: inherit; text-decoration: none; }

/* ============================================================
   BÜHNE — fixierter Hintergrund
   ============================================================ */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg-deep) url('/assets/frames/frame_0120.jpg') center / cover no-repeat;
}
.stage__canvas,
.stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stage__video { display: none; }          /* Standard: Canvas-Scrub (Desktop) */
.stage.is-video .stage__canvas { display: none; }
.stage.is-video .stage__video { display: block; }
.stage.is-static .stage__canvas,
.stage.is-static .stage__video { display: none; }

/* Vignette + sanfter oben/unten-Verlauf für Textlesbarkeit */
.stage__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, oklch(0.10 0.012 55 / 0.55) 100%),
    linear-gradient(to bottom, oklch(0.10 0.012 55 / 0.55) 0%, transparent 22%, transparent 62%, oklch(0.10 0.012 55 / 0.82) 100%);
}
/* Feines Filmkorn */
.stage__grain {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6%,3%); }
  40% { transform: translate(4%,-5%); }
  60% { transform: translate(-3%,5%); }
  80% { transform: translate(5%,2%); }
}

/* ============================================================
   Content-Ebene
   ============================================================ */
.content, .topnav, .footer { position: relative; z-index: 2; }

/* Panels heben Text sanft vom Hintergrund ab */
.panel {
  background: linear-gradient(180deg, oklch(0.12 0.012 55 / 0.30), oklch(0.12 0.012 55 / 0.62));
  border: 1px solid oklch(0.93 0.018 80 / 0.08);
  border-radius: 2px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* ---- Topnav ---- */
/* z-index 3, nicht 2: .content oben teilt sich sonst den Stapelwert mit der Leiste und
   gewinnt als spaeteres Geschwister — die Hero-Section deckte die Links komplett ab und
   schluckte jeden Klick. Die Leiste selbst laesst Zeiger durch (sie reicht ueber die volle
   Breite), nur die Links fangen. */
.topnav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  pointer-events: none;
  padding: clamp(1.1rem, 2.6vw, 1.9rem) var(--pad);
  display: flex;
  justify-content: flex-end;
}
.topnav__links {
  pointer-events: auto;
  display: flex;
  /* Umbruch statt Ueberlauf: mit sechs Eintraegen wird die Leiste 729 px breit und lief
     knapp ueber dem 760er-Breakpoint links aus dem Bild (gemessen: -6 px bei 761 px
     Viewport). flex-end schiebt den Ueberlauf nach links, wo `overflow-x: hidden` ihn
     abschneidet und kein Scrollen ihn zurueckholt. */
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem 0.7rem;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.topnav__links a { transition: color 0.25s ease; }
.topnav__links a:hover { color: var(--ink); }
.topnav__links span { opacity: 0.4; }

/* ---- Hero ---- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 8svh var(--pad) 0;
}
.hero__inner { max-width: min(92vw, 48rem); }
.hero__wordmark {
  font-family: var(--serif);
  font-weight: 340;
  font-style: italic;
  font-size: clamp(2.4rem, 11vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 0.14em 0.7em oklch(0.06 0.01 50 / 0.85);
}
.hero__line {
  margin: 1.25rem auto 0;
  max-width: 58ch;
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  line-height: 1.55;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-shadow: 0 1px 14px oklch(0.06 0.01 50 / 0.9);
}
.hero__mark-sep {
  font-style: normal;
  color: var(--accent);
  padding: 0 0.06em;
  font-weight: 300;
}
.hero__summary {
  margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  color: var(--ink);
  line-height: 1.55;
  text-shadow: 0 1px 12px oklch(0.06 0.01 50 / 0.9);
}
.hero__cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__cue-line {
  width: 1px; height: 42px;
  background: linear-gradient(var(--muted), transparent);
  animation: cue 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* ---- Gemeinsame Section-Typo ---- */
section { padding-block: clamp(5rem, 14vh, 11rem); padding-inline: var(--pad); }
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
}
h2 {
  font-family: var(--serif);
  font-weight: 380;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 1.5rem;
  color: var(--ink);
}

/* ---- Fünf Kapitel: ein Viewport und ein eindeutiger Frame-Anker je Halt ---- */
.chapter {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
}
.travel { min-height: 0; }
.travel--curtain { min-height: 10svh; }
.travel--puppet { min-height: 40svh; }
.travel--workshop { min-height: 170svh; }
.travel--desk { min-height: 120svh; }
.chapter__panel { width: min(100%, 36rem); }
.chapter__count {
  display: block;
  margin: 0 0 0.55rem;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  color: oklch(0.74 0.02 70);
}
.chapter__lead {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  color: var(--muted);
}
.chapter__copy {
  display: grid;
  gap: 1rem;
}
/* Kapitel 2 hat seit dem SEO-Text (de9955fc) vier Absaetze statt einem. Mit der
   normalen Lead-Groesse war die Box ~900 px hoch und ragte auf einem Laptop
   (817 px Fensterhoehe) unten raus: Fortschrittslinie unsichtbar, Text gedraengt.
   Deshalb hier kleiner und breiter als die uebrigen Kapitel (Messung 2026-09-24:
   903 px -> 672 px bei 1440x900). */
.chapter__panel--about h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  margin-bottom: 1rem;
}
.chapter--about { justify-content: center; }
.chapter__panel--about { width: min(100%, 40rem); text-align: center; }
.chapter__panel--about .chapter__lead {
  margin-inline: auto;
  max-width: 52ch;
  font-size: clamp(0.9rem, 1.1vw, 0.98rem);
  line-height: 1.5;
}
.chapter__panel--about .chapter__copy { gap: 0.7rem; }

/* ---- Eigene Portale für Spiel und Bau, jeweils am passenden Ort ---- */
.service--spieler { justify-content: flex-end; }
.service--spieler .service__card { width: min(100%, 38rem); }
.service--bauer { justify-content: flex-start; }
.service__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, 34rem);
  transition: transform 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
}
.service__card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--stop-progress, 0));
  transform-origin: left;
}
.service__card:hover { border-color: oklch(0.93 0.018 80 / 0.26); }
.service__card h2 { margin-bottom: 1rem; }
.service__card .eyebrow { display: block; }
.service__lead {
  display: block;
  max-width: 42ch;
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  color: var(--muted);
}
.service__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 1.8rem;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.service__cta span {
  color: var(--accent);
  transition: transform 0.35s ease;
}
.service__card:hover .service__cta span { transform: translateX(0.35em); }

/* ---- Consulting ---- */
.consulting { justify-content: flex-start; }
/* Scrub: Panel an den Abschnitts-Anfang, Zusatzhöhe darunter als Atempause vor dem
   Formular. Vorher 210svh, weil danach direkt der Footer kam; seit das Beratungs-
   Formular die Länge liefert, wären das 1,43 Bildschirme leerer Schreibtisch — das
   liest sich als Seitenende. 120svh lassen einen halben Bildschirm Ruhe stehen.
   Die Haltepunkte hängen NICHT hieran: das Panel sitzt per flex-start am
   Abschnitts-Anfang, seine Dokumentposition ist von min-height unabhängig. */
.is-scrub .consulting { align-items: flex-start; min-height: 120svh; }
.consulting__inner { width: min(100%, 36rem); }
.consulting__lead { font-size: clamp(1rem, 1.4vw, 1.14rem); color: var(--muted); margin: 0 0 2rem; max-width: 44ch; }
.consulting__btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.95em 1.9em;
  font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  border-radius: 2px;
  transition: background 0.3s ease, transform 0.3s ease;
}
.consulting__btn:hover { background: var(--accent-hi); transform: translateY(-2px); }
.consulting__btn span { transition: transform 0.3s ease; }
.consulting__btn:hover span { transform: translateX(0.35em); }

/* ---- Beratungs-Formular ----
   Bewusst KEINE .chapter und kein [data-stop]: Stationen werden gepinnt, ausgeblendet und
   unterhalb 50 % Deckkraft auf pointer-events:none gesetzt (app.js:170) — ein Formular darin
   verlöre mitten im Tippen die Klickbarkeit. Der Block liegt in der flachen Zone hinter der
   letzten Station, die Kamera steht dort still am Schreibtisch. */
/* Eigene, dichtere Flaeche statt des generischen .panel-Verlaufs (Alpha 0.30–0.62):
   der traegt grosse Serifentypo, aber keine Eingabefelder — ueber dem Schreibtischfoto
   verschwanden Feldkanten und Labels im Bildrauschen. Bewusst nicht deckend, damit das
   Bild an den Raendern weiter durchscheint. */
.contact__panel {
  width: min(100%, 44rem);
  background: linear-gradient(180deg, oklch(0.12 0.012 55 / 0.88), oklch(0.10 0.012 55 / 0.94));
  border-color: oklch(0.93 0.018 80 / 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.contact__lead { font-size: clamp(0.95rem, 1.25vw, 1.08rem); color: var(--muted); margin: 0 0 2.25rem; max-width: 52ch; }

.contact__form { display: flex; flex-direction: column; gap: 1.1rem; }
.contact__row { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.contact__row .contact__field { flex: 1 1 12rem; }
.contact__field { display: flex; flex-direction: column; gap: 0.45rem; margin: 0; }
.contact__field label {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.contact__field label span { color: var(--accent); }
.contact__field input,
.contact__field textarea {
  font: inherit;
  width: 100%;
  color: var(--ink);
  background: oklch(0.08 0.010 55 / 0.92);
  border: 1px solid oklch(0.93 0.018 80 / 0.26);
  border-radius: 2px;
  padding: 0.8em 0.9em;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.contact__field textarea { resize: vertical; min-height: 7.5rem; }
.contact__field input::placeholder { color: oklch(0.68 0.02 65 / 0.55); }
.contact__field input:focus,
.contact__field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: oklch(0.08 0.010 55 / 0.98);
}
/* Natives Kalendersymbol ist dunkel auf dunklem Grund -> aufhellen */
.contact__field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }

.contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 0.9rem; }
/* button erbt die Schrift nicht von selbst */
.contact__submit .consulting__btn { border: 0; cursor: pointer; font-family: var(--sans); }
.contact__note { flex: 1 1 18rem; margin: 0; font-size: 0.82rem; line-height: 1.6; color: var(--muted); }
.contact__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em; }

/* Honeypot — unsichtbar, aber nicht display:none (das überspringen viele Bots gezielt) */
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Scroll-Fortschritt an den gepinnten Stationen ----
   Kein separater Balken: die Panel-Unterkante SELBST füllt sich orange, während man
   durch den Halt scrollt. JS setzt var(--stop-progress) 0->1 pro Frame; das ::after
   liest sie (kein CSS-Transition -> klebt 1:1 am Scroll). Service-Karten nutzen ihr
   vorhandenes ::after (weiter oben), about + Consulting bekommen hier ihres. */
.chapter__panel--about, .consulting__inner { position: relative; }
.chapter__panel--about::after, .consulting__inner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--stop-progress, 0));
  transform-origin: left center;
}

/* ---- Footer ---- */
.footer {
  background: var(--bg-deep);
  border-top: 1px solid oklch(0.93 0.018 80 / 0.08);
  padding: clamp(3rem, 8vh, 5rem) var(--pad) 2.5rem;
}
.footer__cols {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.footer__col h4 {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1rem; font-weight: 600;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 0.55rem; }
.footer__col a { color: var(--muted); font-size: 0.9rem; transition: color 0.25s ease; }
.footer__col a:hover { color: var(--ink); }
.footer__copyright {
  max-width: var(--maxw);
  margin: clamp(2.5rem, 6vh, 4rem) auto 0;
  font-size: 0.76rem; color: oklch(0.55 0.018 65);
}

/* ---- Reveal-Animation (per JS getriggert) ---- */
[data-reveal] { opacity: 0; transform: translateY(22px); }
.is-ready [data-reveal] { will-change: opacity, transform; }
/* Scrub-Modus: JS pinnt die Text-Stationen pro Frame per transform. Eine
   Transform-Transition würde das Pinnen verschmieren und die Positionsmessung
   verfälschen -> hier nur die Border-Transition behalten. */
.is-scrub .service__card { transition: border-color 0.35s ease; }

/* Touch: Stationen haelt der Browser per sticky in der Bildmitte (siehe app.js stickyPin). */
.is-sticky-pin .is-scrub [data-stop] {
  position: sticky;
  top: calc(50svh - var(--stop-h, 0px) / 2);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 760px) {
  .chapter { min-height: 92svh; justify-content: center; }
  .travel { min-height: 0; }
  .hero { min-height: 82svh; justify-content: center; padding-top: 0; }
  .chapter__panel, .consulting__inner { width: 100%; }
  .service--spieler, .service--bauer { justify-content: center; }
  .service__card { width: 100%; }
  .service__lead, .consulting__lead { color: oklch(0.84 0.015 75); }
  .footer__cols { grid-template-columns: 1fr; gap: 1.75rem; }
  .topnav { justify-content: center; }
  .topnav__links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }
  .topnav__links span { display: none; }
  .panel {
    background: linear-gradient(180deg, oklch(0.12 0.012 55 / 0.58), oklch(0.12 0.012 55 / 0.82));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .chapter__panel--about {
    padding-block: 1.5rem;
  }
  .chapter__panel--about h2 {
    margin-bottom: 1rem;
  }
  .chapter__panel--about .chapter__lead {
    font-size: clamp(0.88rem, 3.8vw, 1rem);
    line-height: 1.45;
  }
  .chapter__copy {
    gap: 0.75rem;
  }
}

/* Schmaler Desktop-Bereich (iPad Portrait = 768 px): mit Trennpunkten ist die Leiste
   729 px breit, verfuegbar sind bei 761 px aber nur 685 — es blieb ein einzelner Punkt am
   Zeilenende haengen und „Registrieren" rutschte allein in Zeile zwei. Ohne Trenner sind
   es 646 px und alles passt in eine Zeile. Unter 761 px greift ohnehin das Mobil-Layout,
   das die Punkte ebenfalls ausblendet. */
@media (min-width: 761px) and (max-width: 830px) {
  .topnav__links span { display: none; }
}

/* Touch + sticky: der Abschnitt muss hoch genug sein, damit der Text nach der Bildmitte
   noch den ganzen Halt (0,42 svh) plus Ausblenden (0,18 svh) stehen bleibt, bevor der
   Abschnittsboden ihn hochschiebt. Oben ausrichten: so beginnt der Halt genau in der Mitte. */
.is-sticky-pin .is-scrub .chapter:not(.hero) { min-height: 160svh; align-items: flex-start; }

/* ============================================================
   Reduced Motion — kein Scrub/Grain, statischer Hintergrund
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .stage__grain, .hero__cue-line { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
}