/* ─────────────────────────────────────────────────────────────
   xolox prelaunch teaser — one visual world: a screen waking up
   in a dark room. Deliberately single-theme (brand navy is the
   ground, orange the only accent). Tokens mirror
   docs/brand/brand-manual.md and the founder-approved mockup
   docs/design/2026-08-18-prelaunch-site-mockup.html.

   One shared stylesheet across index.html / kontakt.html /
   impressum.html (spec §3, Exception 1 — no per-page CSS copies,
   this file may exceed the repo's 300-line rule by design).
   ───────────────────────────────────────────────────────────── */

/* ── Fonts — self-hosted WOFF2 (spec D1, GDPR) ──────────────────
   The mockup loaded Sora/Plus Jakarta Sans/JetBrains Mono from
   fonts.googleapis.com. That CDN transmits visitor IPs to Google
   without consent, which conflicts with this site's own imprint
   promise of "no analytics, no third-party cookies". We vendor
   the six WOFF2 files instead (assets/fonts/, OFL-licensed,
   licence texts shipped alongside per OFL distribution terms).
   Decision taken, not deferred — no Google Fonts link anywhere
   in this package. */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/sora-v17-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-v12-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-v12-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-v12-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}

:root {
  --ink:        #000033;
  --ink-deep:   #000022;
  --navy-light: #1a1a4d;
  --glow:       #f97316;
  --glow-soft:  #ffb877;
  --paper:      #eef1f8;
  --mute:       #969ec2;
  --line:       rgba(255,255,255,.10);
  --line-soft:  rgba(255,255,255,.055);
  --surface:    rgba(255,255,255,.038);
  --danger:     #f87171;
  --danger-soft:#fecaca;
  --ease:       cubic-bezier(.4,0,.2,1);
  --shell:      1180px;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* Ambient room light behind everything. */
body::before {
  content: '';
  position: fixed;
  inset: -20vh -10vw;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46vw 40vh at 22% 18%, rgba(249,115,22,.16), transparent 62%),
    radial-gradient(52vw 44vh at 82% 12%, rgba(120,120,255,.11), transparent 66%),
    radial-gradient(70vw 60vh at 50% 108%, rgba(0,0,34,.9), transparent 70%);
  animation: drift 34s var(--ease) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; position: relative; z-index: 1; }

a { color: var(--glow-soft); text-underline-offset: 3px; }
a:hover { color: var(--glow); }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 4px; }

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--glow);
  margin: 0;
}

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.2rem 0 .2rem;
}
/* XOLOX lockup — the mark PNG is the leading letter, "OLOX" completes
   the word, baseline-aligned. Values copied verbatim from public-site/
   src/components/layout/PublicNav.module.css so this site matches the
   public site and the logged-in app sidebar (word font-size = mark
   height x 1.34). Founder-rejected once — do not change these numbers. */
.mark { display: inline-flex; align-items: baseline; gap: .05rem; text-decoration: none; }
.mark img {
  height: 1.9rem; width: auto; display: block;
  filter: drop-shadow(0 0 12px rgba(249,115,22,.28)) drop-shadow(0 0 30px rgba(125,155,255,.16));
}
.mark span {
  font-family: 'Sora', sans-serif; font-weight: 700; color: #eef1ff;
  font-size: 2.55rem; line-height: 1; letter-spacing: -.039em; margin-left: .015em;
}
/* Small screens: scale mark and word by the same factor so the 1.34
   ratio — and therefore the lockup — stays identical to the public site. */
@media (max-width: 560px) {
  .mark img  { height: 1.45rem; }
  .mark span { font-size: 1.94rem; }
}

.lang { display: flex; gap: .1rem; align-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .12em; }
.lang button {
  background: none; border: 0; padding: .35rem .5rem; cursor: pointer;
  color: var(--mute); font: inherit; letter-spacing: inherit; border-radius: 4px;
  transition: color .22s var(--ease);
}
.lang button:hover { color: var(--paper); }
.lang button[aria-current="true"] { color: var(--glow); }
.lang i { color: var(--line); font-style: normal; }

/* ── Home: teaser hero ───────────────────────────────────── */
main { flex: 1 0 auto; }
/* Teaser page only: on viewports taller than the hero needs, distribute the
   slack above AND below the composition instead of dumping it all into one
   dead band above the footer (the founder rejected that gap twice). Content
   pages keep the normal top-aligned flow. */
.teaser main { display: flex; flex-direction: column; justify-content: center; }

.hero { padding: clamp(1rem, 2.6vw, 1.9rem) 0 clamp(1rem, 2vw, 1.9rem); }

.panel {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(168deg, rgba(249,115,22,.09), transparent 42%),
    linear-gradient(0deg, rgba(26,26,77,.55), rgba(0,0,34,.2));
  padding: clamp(1.6rem, 4.2vw, 3.9rem) clamp(1.4rem, 4vw, 3.2rem) clamp(1.5rem, 3.8vw, 3.5rem);
  overflow: hidden;
  box-shadow:
    0 0 90px rgba(249,115,22,.10),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -60px 90px -60px rgba(249,115,22,.10);
  animation: power-on .85s var(--ease) .15s both;
}
.panel::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.panel::before {
  content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--glow-soft), transparent);
  box-shadow: 0 0 24px 3px rgba(249,115,22,.6);
  transform: scaleX(0); transform-origin: center;
  animation: ignite .5s var(--ease) both, fade-line .4s var(--ease) .75s forwards;
}
@keyframes ignite   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade-line{ to   { opacity: 0; } }
@keyframes power-on {
  from { clip-path: inset(50% 0 50% 0); opacity: .4; }
  to   { clip-path: inset(0 0 0 0);     opacity: 1; }
}

.panel-inner > * { animation: rise .7s var(--ease) both; }
.panel-inner > :nth-child(1) { animation-delay: .78s; }
.panel-inner > :nth-child(2) { animation-delay: .90s; }
.panel-inner > :nth-child(3) { animation-delay: 1.02s; }
.panel-inner > :nth-child(4) { animation-delay: 1.16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

h1 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  /* Compact gate (spec §4.1): sized so index.html FILLS 1440x900 without
     scrolling — the founder rejected both a scrolling page and a page with a
     dead band above the footer, so the target is "fits and fills", not "small". */
  font-size: clamp(2.3rem, 7.9vw, 5.6rem);
  line-height: .95; letter-spacing: -.045em;
  margin: .7rem 0 0; text-wrap: balance; max-width: 14ch;
}
h1 em { font-style: normal; color: var(--glow); }

.lead {
  margin: 1.2rem 0 0; max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--mute);
}
.lead strong { color: var(--paper); font-weight: 500; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 600 .92rem/1 'Plus Jakarta Sans', sans-serif;
  padding: .95rem 1.5rem; border-radius: 8px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.btn-primary { background: var(--glow); color: #1c1005; }
.btn-primary:hover { color: #1c1005; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(249,115,22,.28); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost { border-color: var(--line); color: var(--paper); background: transparent; }
.btn-ghost:hover { color: var(--paper); border-color: rgba(255,255,255,.28); background: var(--surface); }

/* Three parallel aspects, not a sequence — quiet strip under the hero. */
.whispers {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--line-soft);
  margin-bottom: clamp(1rem, 2.4vw, 1.9rem);
}
.whisper { padding: clamp(1rem, 2.6vw, 2.2rem) clamp(1.2rem, 2.4vw, 2.2rem); border-left: 1px solid var(--line-soft); }
.whisper:first-child { border-left: 0; padding-left: 0; }
.whisper h3 {
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--glow); margin: 0 0 .6rem;
}
.whisper p { margin: 0; color: var(--mute); font-size: .9rem; max-width: 32ch; }
@media (max-width: 700px) {
  .whisper { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--line-soft); }
  .whisper:first-child { border-top: 0; }
}

/* ── Sub-pages ───────────────────────────────────────────── */
.page { padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(2.4rem, 5vw, 3.5rem); }
.back {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); text-decoration: none; margin-bottom: 1.5rem;
}
.back:hover { color: var(--paper); }

h2 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -.035em; line-height: 1.05;
  margin: .8rem 0 .7rem; text-wrap: balance; max-width: 18ch;
}
.page-sub { color: var(--mute); margin: 0 0 2rem; max-width: 52ch; font-size: 1.02rem; }

.cols {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* ── Form ────────────────────────────────────────────────── */
form { display: grid; gap: 1rem; max-width: 560px; }
.row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }

label { display: grid; gap: .45rem; font-size: .82rem; font-weight: 600; color: var(--paper); }

input[type="text"], input[type="email"], textarea {
  font: 400 .95rem/1.5 'Plus Jakarta Sans', sans-serif;
  color: var(--paper);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
input::placeholder, textarea::placeholder { color: #6f77a0; }
input:focus, textarea:focus {
  outline: none; border-color: var(--glow);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
textarea { resize: vertical; min-height: 140px; }

/* Field-level validation errors (WP-P re-render, spec §7.5 / §9.3). */
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
}
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(248,113,113,.18);
}
.field-error {
  color: var(--danger-soft);
  font-size: .78rem;
  margin: -.2rem 0 0;
}

.consent { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start;
  font-size: .82rem; font-weight: 400; color: var(--mute); }
.consent input { accent-color: var(--glow); width: 1rem; height: 1rem; margin-top: .22rem; }

/* Honeypot: visually and programmatically hidden, unreachable by
   keyboard (tabindex="-1" on the field itself in the markup). */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.captcha {
  border: 1px dashed var(--line); border-radius: 8px;
  padding: .9rem 1rem; display: flex; align-items: center; gap: .8rem;
  background: rgba(255,255,255,.02);
}
.captcha .box {
  width: 22px; height: 22px; border-radius: 5px; flex: none;
  border: 2px solid var(--glow); position: relative;
}
.captcha .box::after {
  content: ''; position: absolute; inset: 3px; border-radius: 2px;
  background: var(--glow); opacity: .25;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: .2; } 50% { opacity: .75; } }
.captcha p { margin: 0; font-size: .8rem; color: var(--mute); }
.captcha strong { color: var(--paper); display: block; font-size: .85rem; font-weight: 600; }

/* Arithmetic-fallback captcha (spec §7.3) renders a labelled input
   into #captcha-slot instead of the Turnstile widget. */
.captcha-arith { display: grid; gap: .5rem; }
.captcha-arith label { font-size: .82rem; }
.captcha-arith input { max-width: 10ch; }

/* Graceful-degradation / unconfigured notice (spec §7.2, §7.4). */
.notice {
  border: 1px dashed var(--line); border-radius: 8px;
  padding: .9rem 1rem; font-size: .85rem; color: var(--mute);
  background: rgba(255,255,255,.02);
}

.form-note { font-size: .78rem; color: var(--mute); margin: 0; }

/* Status / notice blocks. Base = success (mockup #sent). Modifiers
   add the error/rate-limit palette (>=4.5:1 on navy — verified). */
.status {
  border-radius: 8px; padding: .9rem 1rem; font-size: .88rem; margin-bottom: 1.4rem;
  border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.08); color: #b9f3cd;
  max-width: 560px;
}
.status[hidden] { display: none; }
.status-error {
  border-color: rgba(248,113,113,.35);
  background: rgba(248,113,113,.08);
  color: var(--danger-soft);
}
.status-error ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* Aside card next to the form */
.aside {
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: var(--surface); padding: clamp(1.4rem, 2.6vw, 2rem);
}
.aside h3 {
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--glow); margin: 0 0 .8rem;
}
.aside p { margin: 0 0 1.2rem; color: var(--mute); font-size: .92rem; }
.aside p:last-child { margin-bottom: 0; }

/* ── Imprint ─────────────────────────────────────────────── */
.legal { font-size: .93rem; max-width: 62ch; margin-top: 1.8rem; }
.legal h3 {
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--glow); margin: 1.7rem 0 .5rem;
}
.legal h3:first-of-type { margin-top: 0; }
.legal p { margin: 0; color: var(--mute); }
.legal p strong { color: var(--paper); font-weight: 600; }
.legal dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; margin: 0; }
.legal dt { color: var(--mute); font-size: .82rem; }
.legal dd { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: .82rem; color: var(--paper); }

/* ── Footer ──────────────────────────────────────────────── */
footer {
  flex: none;
  border-top: 1px solid var(--line-soft);
  margin-top: auto;
  padding: 1.3rem 0 1.7rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem;
  align-items: center; justify-content: space-between;
  font-size: .8rem; color: var(--mute);
}
/* Was an inline style="margin:0" on the mockup's footer <p> — tokenised
   here so the shipped pages carry zero inline style attributes (CSP §8.5). */
footer p { margin: 0; }
footer nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
footer a { color: var(--mute); text-decoration: none; }
footer a:hover { color: var(--paper); }

/* ── i18n visibility ─────────────────────────────────────── */
[data-lang] { display: none; }
html[lang="de"] [data-lang="de"],
html[lang="en"] [data-lang="en"] { display: revert; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .panel { clip-path: none; opacity: 1; }
  .panel::before { display: none; }
  .panel-inner > * { opacity: 1; transform: none; }
}