/* ============================================================================
   GRID.DarkWatch, public landing page (and the 404 page, which shares it).

   DESIGN SOURCE. Since BA-655 (TBRU 2026-11-07) the page belongs to the
   sign-in and the dashboard: the graphite colour world, the dial instrument of
   the sign-in as the hero picture, a paper band for the offer. Kept from the
   TOMORIS website (BA-262): Nunito Sans 800 uppercase headlines, a mono eyebrow
   above every h2, pill buttons in brand orange, the 72px line grid behind the
   hero, hairline cards that lift by 1px, mono step numbers.

   COLOURS. The brand orange comes from the package (--tm-brand-3). The values
   the package does not carry are local --lp-* roles; every literal is listed
   in docs/token-luecken.md (parts 6 to 8). Severity colours (fachfarben.css)
   never appear on this page, and neither does the Fusion role --tm-accent-2:
   in the product it marks confirmed findings. The orange of the buttons is the
   TOMORIS brand accent of the website, not a finding.

   MOTION. CSS keyframes, gated by prefers-reduced-motion. The static state is
   the final state; landing.js only arms what is still below the fold. Exactly
   one infinite animation (the status dot, opacity only). Hover lifts by 1px,
   transitions use the package durations.

   No theme attribute on <html>: light and dark follow prefers-color-scheme.
   The palette blocks use the three selectors of the token package, so a theme
   attribute set later would switch both in the same way.
   ========================================================================== */

@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/nunito-sans-v19-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/nunito-sans-v19-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/nunito-sans-v19-latin-800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-v20-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-v20-latin-600.woff2") format("woff2"); }

/* --------------------------------------------------------------- Palette */
/* BA-655 (TBRU 2026-11-07): the page joins the sign-in and the dashboard. The
   values are those of the dashboard colour world "Graphit" (docs/token-luecken.md,
   part 7): paper in light mode, graphite in dark mode, ink as the quiet colour.
   The brand orange stays the one colour of action (buttons, needle tip, accent
   line); the signal role is ink, not blue. */
[data-app="darkwatch"], [data-app="darkwatch"][data-theme="hell"] {
  --lp-bg: #f3f2ef;
  --lp-bg-2: #f8f7f4;
  --lp-surface: #ffffff;
  --lp-ink: #141416;
  --lp-copy: #2e2d2a;
  --lp-muted: #55534e;
  --lp-line: rgba(20,20,22,.09);
  --lp-accent: var(--tm-brand-3);
  --lp-accent-text: #c23a00;
  --lp-btn: #c93c00;
  --lp-btn-hover: #a83200;
  --lp-btn-ink: #ffffff;
  --lp-signal: #141416;
  --lp-grid: rgba(20,20,22,.035);
  --lp-hero: radial-gradient(ellipse 70% 80% at 72% 45%, #ffffff 0%, var(--lp-bg) 70%);
  --lp-shadow: 0 1px 2px rgba(20,20,22,.06), 0 30px 60px -32px rgba(20,20,22,.3);
}
@media (prefers-color-scheme: dark) {
  [data-app="darkwatch"]:not([data-theme="hell"]) {
    --lp-bg: #0b0b0c;
    --lp-bg-2: #131315;
    --lp-surface: #18181b;
    --lp-ink: #f2f1ed;
    --lp-copy: #d2d0ca;
    --lp-muted: #aeaca5;
    --lp-line: rgba(255,255,255,.075);
    --lp-accent: var(--tm-brand-3);
    --lp-accent-text: #ff8d57;
    --lp-btn: #c93c00;
    --lp-btn-hover: #a83200;
    --lp-btn-ink: #ffffff;
    --lp-signal: #f2f1ed;
    --lp-grid: rgba(255,255,255,.035);
    --lp-hero: radial-gradient(ellipse 70% 80% at 72% 45%, #1f1f23 0%, #131315 42%, var(--lp-bg) 100%);
    --lp-shadow: none;
  }
}
[data-app="darkwatch"][data-theme="dunkel"] {
  --lp-bg: #0b0b0c;
  --lp-bg-2: #131315;
  --lp-surface: #18181b;
  --lp-ink: #f2f1ed;
  --lp-copy: #d2d0ca;
  --lp-muted: #aeaca5;
  --lp-line: rgba(255,255,255,.075);
  --lp-accent: var(--tm-brand-3);
  --lp-accent-text: #ff8d57;
  --lp-btn: #c93c00;
  --lp-btn-hover: #a83200;
  --lp-btn-ink: #ffffff;
  --lp-signal: #f2f1ed;
  --lp-grid: rgba(255,255,255,.035);
  --lp-hero: radial-gradient(ellipse 70% 80% at 72% 45%, #1f1f23 0%, #131315 42%, var(--lp-bg) 100%);
  --lp-shadow: none;
}
/* The paper band: the offer reads like a sheet on the desk, in both modes. It
   carries the light values; StartseitenFarbenTests measures it like the modes. */
.papier {
  --lp-bg: #f3f2ef;
  --lp-bg-2: #f8f7f4;
  --lp-surface: #ffffff;
  --lp-ink: #141416;
  --lp-copy: #2e2d2a;
  --lp-muted: #55534e;
  --lp-line: rgba(20,20,22,.09);
  --lp-accent-text: #c23a00;
  --lp-signal: #141416;
  --lp-shadow: 0 1px 2px rgba(20,20,22,.06), 0 30px 60px -32px rgba(20,20,22,.3);
  color-scheme: light;
  background: var(--lp-bg);
  color: var(--lp-copy);
}
:root {
  /* Status inks come from the package and flip with the mode by themselves. */
  --lp-ok: var(--tm-ok-ink);
  --lp-crit: var(--tm-crit-ink);
  /* Form fields need a boundary of at least 3:1 (WCAG 1.4.11); the hairline
     of the cards does not reach that, a mix towards the muted text does. */
  --lp-field-line: color-mix(in srgb, var(--lp-muted) 75%, var(--lp-bg));
  /* Nunito Sans carries the language, IBM Plex Mono the labels and numbers.
     --tm-font-mono is JetBrains Mono and is deliberately not used (#61). */
  --fm: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --lp-ease: cubic-bezier(.2, .8, .2, 1);
  --lp-bar: 76px;
}

/* ------------------------------------------------------------------ Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--lp-bar) + 12px); -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--tm-font);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--lp-bg);
  color: var(--lp-copy);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--lp-accent-text); }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--lp-accent-text); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 10px; z-index: 100;
  background: var(--lp-btn); color: var(--lp-btn-ink); font-weight: 800;
  padding: 12px 20px; border-radius: var(--tm-radius-pill); text-decoration: none;
}
.skip:focus { left: 16px; }

.wrap { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 48px; }

h1, h2, h3 { color: var(--lp-ink); font-weight: 800; }
.h1, .h2 { text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance; }
.h1 { font-size: clamp(2.5rem, 1rem + 5vw, 5.25rem); line-height: .94; letter-spacing: -.025em; }
.h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.25rem); line-height: .98; letter-spacing: -.02em; }
/* Long statements get a smaller size so they stay at three or four lines. */
.h2.is-long, .contact-copy .h2 { font-size: clamp(1.875rem, 1rem + 2vw, 2.75rem); line-height: 1.02; }
h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: 0; }

p { color: var(--lp-copy); }
.lede { font-size: 1.125rem; line-height: 1.6; color: var(--lp-copy); }
.note { font-size: .875rem; line-height: 1.55; color: var(--lp-muted); }
.note a { font-weight: 700; }
.intro { max-width: 420px; font-size: 1.0625rem; line-height: 1.65; color: var(--lp-copy); }

.eyebrow {
  margin-bottom: 18px;
  font-family: var(--fm); font-size: .75rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--lp-accent-text);
}
.accent { color: var(--lp-accent-text); }

/* The status dot: the one infinite animation of the page. It only changes
   opacity, so it survives prefers-reduced-motion. */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tm-ok); flex: none;
  animation: puls 2600ms ease-in-out infinite;
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* --------------------------------------------------------------- Buttons */
/* Pill buttons as on tomoris.com. Hover lifts by 1px like everywhere in this
   service, the brand glow comes from the website. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border: 1px solid transparent; border-radius: var(--tm-radius-pill);
  background: var(--lp-btn); color: var(--lp-btn-ink);
  font-family: inherit; font-size: .9375rem; font-weight: 800; letter-spacing: .06em; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform var(--tm-dur-fast) var(--tm-ease),
              background-color var(--tm-dur-fast) var(--tm-ease),
              border-color var(--tm-dur-fast) var(--tm-ease),
              box-shadow var(--tm-dur-fast) var(--tm-ease),
              color var(--tm-dur-fast) var(--tm-ease);
}
.btn:hover {
  transform: translateY(-1px);
  background: var(--lp-btn-hover);
  box-shadow: 0 18px 44px -14px color-mix(in srgb, var(--tm-brand-3) 60%, transparent);
}
.btn.ghost { background: transparent; border-color: var(--lp-line); color: var(--lp-ink); }
.btn.ghost:hover { background: transparent; border-color: var(--lp-ink); box-shadow: none; }
.btn:disabled { opacity: .6; cursor: default; }

/* One sheen on the main button, once, then never again. */
.btn.haupt::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 42%;
  background: linear-gradient(100deg, transparent,
    color-mix(in srgb, var(--lp-btn-ink) 34%, transparent), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: glanz 900ms var(--lp-ease) 1500ms 1 both;
}
@keyframes glanz { from { left: -60%; } to { left: 130%; } }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- Top bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--lp-bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--lp-line);
  transition: box-shadow var(--tm-dur-fast) var(--tm-ease);
}
.topbar.scrolled { box-shadow: 0 8px 24px -20px rgba(20,20,22,.3); }
@supports not (backdrop-filter: blur(16px)) { .topbar { background: var(--lp-bg); } }

.topbar-bar {
  display: flex; align-items: center; gap: 28px;
  max-width: 1280px; height: var(--lp-bar); margin-inline: auto; padding-inline: 48px;
}

.logo {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  font-weight: 800; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--lp-ink); text-decoration: none;
}
.topbar .logo { margin-right: auto; }
.logo .accent { color: var(--lp-accent-text); }

.nav { display: flex; align-items: center; gap: 30px; }
/* Only the narrow dropdown carries a sign-in link; wider bars show the button. */
.nav .nav-signin { display: none; }
.nav a {
  color: var(--lp-copy); font-size: .875rem; font-weight: 700; text-decoration: none;
  transition: color var(--tm-dur-fast) var(--tm-ease);
}
.nav a:hover { color: var(--lp-ink); }

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 40px; padding: 0 12px;
  border: 1px solid var(--lp-line); border-radius: var(--tm-radius-pill);
  background: transparent; color: var(--lp-ink);
  font-family: var(--fm); font-size: .75rem; letter-spacing: .14em; cursor: pointer;
  transition: border-color var(--tm-dur-fast) var(--tm-ease);
}
.lang:hover { border-color: var(--lp-accent-text); }
.lang[hidden] { display: none; }
.btn-login { min-height: 40px; padding: 0 18px; font-size: .8125rem; }

.navtoggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 44px; height: 40px; padding: 0 12px;
  border: 1px solid var(--lp-line); border-radius: var(--tm-radius-pill);
  background: transparent; color: var(--lp-ink); cursor: pointer;
}
.navtoggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }

/* ------------------------------------------------------------------- Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--lp-hero); }

/* The 72px line grid of tomoris.com, faded out by a radial mask. In a mask the
   colour only carries alpha; #000 means "visible here". */
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--lp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 62% 72% at 68% 45%, #000 28%, transparent 76%);
  mask-image: radial-gradient(ellipse 62% 72% at 68% 45%, #000 28%, transparent 76%);
}

/* The scan line: one sweep over the grid when the page opens, never again. */
.scan-line {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 0;
  pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, transparent calc(100% - 160px),
    color-mix(in srgb, var(--lp-signal) 10%, transparent) calc(100% - 2px),
    color-mix(in srgb, var(--lp-signal) 40%, transparent));
  animation: scan 2400ms var(--lp-ease) 200ms 1 both;
}
@keyframes scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); gap: 64px;
  align-items: center;
  min-height: clamp(600px, calc(100svh - var(--lp-bar)), 820px);
  padding-block: 72px 88px;
}
.hero-copy { min-width: 0; }
.hero-eyebrow { margin-bottom: 28px; font-size: .8125rem; letter-spacing: .18em; }
/* Each sentence rises from its own mask. The padding gives the accents and the
   descenders room without changing the line height. */
.hero-title .line { display: block; overflow: hidden; padding-block: .12em .06em; margin-block: -.12em -.06em; }
.hero-title .line > span { display: inline-block; text-wrap: balance; }
.hero-title .line-accent { color: var(--lp-accent); }
.hero-lede { max-width: 540px; margin-top: 32px; font-size: 1.1875rem; }
.hero-ctas { margin-top: 36px; }
.hero-note { max-width: 520px; margin-top: 22px; }

/* Free leak check in the hero (BA-474 3c). Hidden until landing.js switches it on;
   the attribute must win against any display rule of the card. */
.leakcheck[hidden] { display: none !important; }
.leakcheck {
  max-width: 560px; margin-top: 32px; padding: 20px 22px;
  border: 1px solid var(--lp-line); border-radius: 14px;
  background: var(--lp-surface); box-shadow: var(--lp-shadow);
}
.lc-title { margin: 0 0 16px; font-size: 1.125rem; font-weight: 800; line-height: 1.35; color: var(--lp-ink); }
.lc-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.lc-row .lc-domain { flex: 1 1 220px; min-width: 0; margin-bottom: 0; }
.lc-method { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.lc-method legend { margin-bottom: 8px; padding: 0; font-size: .875rem; color: var(--lp-muted); }
.lc-method .rfcheck { margin: 0 0 6px; }
.lc-alias {
  margin: 2px 0 0 28px; padding: 8px 10px; max-width: calc(100% - 28px);
  border: 1px solid var(--lp-field-line); border-radius: 8px;
  background: var(--lp-bg); color: var(--lp-ink); font-family: var(--fm); font-size: .875rem;
}
.lc-alias:focus-visible { outline: 2px solid var(--lp-accent-text); outline-offset: 2px; }
.lc-lead { margin: 0 0 12px; color: var(--lp-copy); }
.lc-txt {
  margin: 0 0 12px; padding: 10px 12px; overflow-wrap: anywhere;
  border: 1px dashed var(--lp-field-line); border-radius: 8px;
  background: var(--lp-bg); color: var(--lp-ink); font-family: var(--fm); font-size: .875rem;
}
.lc-fine { margin: 12px 0 0; font-size: .8125rem; color: var(--lp-muted); }
.lc-step .cta-row { margin-top: 16px; }
/* The agreement of the sign-up (4a-3): the server's text as it is, in a scroll box. */
.lc-agreement {
  max-height: 240px; overflow: auto; margin: 0 0 14px; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid var(--lp-field-line); border-radius: 10px; background: var(--lp-bg); color: var(--lp-copy); font-size: .875rem;
}
.lc-agreement:focus-visible { outline: 2px solid var(--lp-accent-text); outline-offset: 2px; }
#lcSignup .reqgrid { margin-top: 6px; }
.lc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.lc-stat { padding: 12px 14px; border: 1px solid var(--lp-line); border-radius: 10px; background: var(--lp-bg); }
.lc-stat dt { font-size: .8125rem; color: var(--lp-muted); }
.lc-stat dd { margin: 4px 0 0; font-size: 1.75rem; font-weight: 800; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
/* BA-262: the fifth figure (stealer logs) spans the row instead of standing alone in a column. */
.lc-stat-wide { grid-column: 1 / -1; }
@media (max-width: 420px) {
  .leakcheck { padding: 16px; }
  .lc-stat { padding: 10px 12px; }
  .lc-stat dd { font-size: 1.5rem; }
}

/* The picture (BA-655): the instrument of the sign-in. One lap of the hand is one
   day of DarkWatch, and the three marks on the bezel light up as it passes them:
   watched, found, done. Abstract on purpose, no data. */
.hero-visual { min-width: 0; display: flex; justify-content: center; }
.instrument { width: min(100%, 460px); display: grid; gap: 28px; }
.instrument-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--lp-line);
  font-family: var(--fm); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
}
.lage-label { color: var(--lp-muted); }
.lage-live { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-ok); letter-spacing: .12em; }

.instrument-blatt { position: relative; aspect-ratio: 1; isolation: isolate; }
.zifferblatt { position: relative; z-index: 2; width: 100%; height: auto; overflow: visible; }
/* Warm light under the glass, from the brand orange: the stage is graphite, not black. */
.zb-licht {
  position: absolute; inset: -18%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--tm-brand-3) 16%, transparent) 0%,
    color-mix(in srgb, var(--tm-brand-3) 5%, transparent) 38%, transparent 66%);
}
/* The fan behind the hand: a soft wedge of ink that trails it during the lap. Its end
   state is invisible, so a page without motion shows the plain dial. */
.zb-faecher {
  position: absolute; inset: 3%; z-index: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0deg 286deg,
    color-mix(in srgb, var(--lp-signal) 3%, transparent) 300deg,
    color-mix(in srgb, var(--lp-signal) 16%, transparent) 360deg);
}
.zb-ring { fill: none; stroke: color-mix(in srgb, var(--lp-signal) 16%, transparent); stroke-width: 1; }
.zb-ring-innen, .zb-ring-kern { stroke: var(--lp-line); }
/* The lap drawn on the bezel. Static state: the full ring, quiet. */
.zb-lauf {
  fill: none; stroke: color-mix(in srgb, var(--lp-signal) 42%, transparent); stroke-width: 1.5;
  stroke-dasharray: 100 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 200px 200px;
}
.zb-teilung { fill: none; stroke: var(--lp-muted); stroke-width: 8; stroke-dasharray: 1 16.802; opacity: .5; }
.zb-teilung-gross { stroke: var(--lp-ink); stroke-width: 14; stroke-dasharray: 2 87.011; opacity: .9; }
.zb-skala { transform-origin: 200px 200px; }
.zb-marke { fill: var(--lp-bg); stroke: currentColor; stroke-width: 2; }
.zb-marke.is-watch { color: var(--lp-signal); }
.zb-marke.is-found { color: var(--lp-accent); }
.zb-marke.is-done { color: var(--lp-ok); }
.zb-zeiger { stroke: var(--lp-ink); stroke-width: 1.6; stroke-linecap: round; transform-origin: 200px 200px; }
/* Brand orange, never Fusion: --tm-accent-2 marks confirmed findings in the product. */
.zb-spitze { stroke: var(--tm-brand-3); stroke-width: 2.6; }
.zb-achse { fill: var(--lp-ink); }

.lage-rows { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--lp-line); }
.lage-row { display: grid; align-content: start; gap: 4px; padding: 16px 14px 0; border-left: 1px solid var(--lp-line); }
.lage-row:first-child { padding-left: 0; border-left: 0; }
.lage-punkt { width: 8px; height: 8px; margin-bottom: 6px; border-radius: 50%; border: 2px solid currentColor; }
.lage-row.is-watch .lage-punkt { color: var(--lp-signal); }
.lage-row.is-found .lage-punkt { color: var(--lp-accent); }
.lage-row.is-done .lage-punkt { color: var(--lp-ok); }
.lage-row b { color: var(--lp-ink); font-size: .9375rem; font-weight: 800; line-height: 1.25; }
.lage-row small { color: var(--lp-muted); font-size: .8125rem; line-height: 1.35; }
/* ------------------------------------------------------------- Value band */
.values { background: var(--lp-bg-2); border-block: 1px solid var(--lp-line); }
/* Lines between the items come from the gap over a line-coloured grid. With
   four items there is never an incomplete last row that would leave a hole. */
.values-grid {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--lp-line);
}
.value { display: flex; flex-direction: column; gap: 6px; padding: 30px 28px; background: var(--lp-bg-2); }
.value:first-child { padding-left: 0; }
.value b { display: flex; align-items: center; gap: 10px; color: var(--lp-ink); font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.value b::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--lp-accent); }
.value span { font-size: .9375rem; line-height: 1.55; color: var(--lp-copy); }

/* --------------------------------------------------------------- Sections */
.section { position: relative; padding-block: clamp(64px, 7vw, 108px); }
.band { background: var(--lp-bg-2); border-block: 1px solid var(--lp-line); }
.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 24px 64px; margin-bottom: clamp(40px, 4.4vw, 60px);
}
.section-head > div { flex: 1 1 520px; max-width: 780px; min-width: 0; }
.section-head > .intro { flex: 0 1 380px; }

/* Mono numbers above a hairline, with a short accent segment on it. */
.num {
  position: relative; display: block;
  padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--lp-line);
  font-family: var(--fm); font-size: .9375rem; letter-spacing: .16em; color: var(--lp-accent-text);
}
.num::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 48px; height: 2px;
  background: var(--lp-accent); transform-origin: left;
}

.how { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.how-step h3, .process-step h3 { font-size: 1.375rem; margin-bottom: 12px; }
.how-step p, .process-step p { font-size: 1rem; line-height: 1.7; }
.how-note {
  margin-top: 18px; padding: 14px 16px;
  border-left: 2px solid var(--lp-signal); border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--lp-signal) 7%, transparent);
  color: var(--lp-ink); font-size: .9375rem;
}

.process { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
/* BA-655: the deadlines are the message of #reaktion, so they are read first, as figures. */
#reaktion .num {
  font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3.25rem); font-weight: 600; letter-spacing: -.02em;
  line-height: 1; color: var(--lp-ink); font-variant-numeric: tabular-nums;
}
#reaktion .process-step:first-child .num { color: var(--lp-accent-text); }

/* ------------------------------------------------------------------ Cards */
.cards { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--tm-radius-card); padding: 28px;
  transition: transform var(--tm-dur-fast) var(--tm-ease),
              border-color var(--tm-dur-fast) var(--tm-ease),
              box-shadow var(--tm-dur-fast) var(--tm-ease);
}
.card:hover { transform: translateY(-1px); border-color: var(--lp-signal); box-shadow: var(--lp-shadow); }
.card-icon { width: 28px; height: 28px; margin-bottom: 28px; color: var(--lp-accent-text); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .9375rem; line-height: 1.65; }
.cards-3 { margin-top: 16px; }

/* Package comparison (BA-474, PR 3b): the cards above with a price line and a feature list. */
.card .paket-price { margin-bottom: 6px; font-size: 1.5rem; font-weight: 800; color: var(--lp-ink); }
/* BA-572: prices come from the Commerce catalog. Until it answers the price line is a link to the
   price list in body size; the yearly price is a quiet second line under it. */
.card .paket-price a { font-size: 1rem; font-weight: 700; color: var(--lp-accent-text); }
.card .paket-year { margin: -2px 0 8px; font-size: .875rem; color: var(--lp-muted); }
.paket-list { list-style: none; margin-top: 18px; display: grid; gap: 8px; font-size: .9375rem; line-height: 1.5; }
.paket-list li { position: relative; padding-left: 18px; }
.paket-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 2px; background: var(--lp-accent); }
.pakete-note, .reaktion-note { margin-top: 24px; }
.pakete-cta { margin-top: 24px; }
/* BA-262: the free start and the guarantees. A quiet band in the colours of the cards above:
   a line and the list marker, no fill, no hover, no colour of its own. */
.pakete-zusage {
  margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px;
  padding: 24px 28px; border: 1px solid var(--lp-line); border-radius: var(--tm-radius-card);
}
.pakete-zusage h3 { font-size: 1rem; }
.pakete-zusage .paket-list { margin-top: 12px; }
.pakete-zusage .note { margin-top: 12px; }
@media (max-width: 900px) { .pakete-zusage { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

/* ------------------------------------------------------- Data flow (privacy) */
.flow {
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1.15fr) 56px minmax(0, 1fr);
  padding: 28px; border: 1px solid var(--lp-line); border-radius: var(--tm-radius-card);
  background: var(--lp-bg-2);
}
.flow-node {
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px; border: 1px solid var(--lp-line); border-radius: 10px; background: var(--lp-surface);
}
.flow-reduce { border-color: color-mix(in srgb, var(--lp-signal) 50%, transparent); }
.flow-store { border-color: color-mix(in srgb, var(--lp-ok) 50%, transparent); }
.flow-label {
  display: block; margin-bottom: 14px;
  font-family: var(--fm); font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lp-muted);
}
.flow-node ul { list-style: none; display: grid; gap: 9px; }
.flow-node li { display: flex; align-items: center; gap: 10px; color: var(--lp-ink); font-size: .9375rem; font-weight: 700; }
.flow-node li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lp-signal); }
.flow-store li::before { background: var(--lp-ok); }
.flow-source .is-secret {
  color: var(--lp-crit);
  text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: currentColor;
}
.flow-source .is-secret::before { background: var(--lp-crit); }
.flow-reduce > p { color: var(--lp-ink); font-weight: 700; font-size: .9375rem; }
.flow-bin { margin-top: auto; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--lp-crit) 50%, transparent); }
.flow-reduce > p + .flow-bin { margin-top: 18px; }
.flow-bin-label {
  display: block; margin-bottom: 6px;
  font-family: var(--fm); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lp-crit);
}
.flow-bin-items { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.flow-bin-items s { color: var(--lp-muted); font-size: .875rem; text-decoration-thickness: 2px; }
.flow-link { position: relative; align-self: center; height: 2px; margin-inline: 10px; background: var(--lp-signal); transform-origin: left; }
.flow-link::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 9px; height: 9px;
  border-top: 2px solid var(--lp-signal); border-right: 2px solid var(--lp-signal);
  transform: translateY(-50%) rotate(45deg);
}

/* ------------------------------------------------------ Honest expectations */
.honest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.honest-col { padding: 32px; border: 1px solid var(--lp-line); border-radius: var(--tm-radius-card); background: var(--lp-surface); }
.honest-label { margin-bottom: 22px; font-family: var(--fm); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.is-yes .honest-label { color: var(--lp-ok); }
.is-no .honest-label { color: var(--lp-muted); }
.honest ul { list-style: none; display: grid; gap: 16px; }
.honest li { position: relative; padding-left: 34px; color: var(--lp-ink); font-size: 1.0625rem; font-weight: 700; line-height: 1.45; }
.honest li::before { content: ""; position: absolute; left: 2px; }
.is-yes li::before {
  top: .3em; width: 14px; height: 8px;
  border-left: 2px solid var(--lp-ok); border-bottom: 2px solid var(--lp-ok); transform: rotate(-45deg);
}
.is-no li::before { top: .7em; width: 14px; height: 2px; background: var(--lp-muted); }

/* ---------------------------------------------------------------- Contact */
.contact { isolation: isolate; overflow: hidden; background: var(--lp-hero); border-top: 1px solid var(--lp-line); }
.contact .hero-grid {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 30% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 30% 40%, #000 20%, transparent 75%);
}
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 64px; align-items: start; }
.contact-copy .lede { max-width: 520px; margin-top: 28px; }
.contact-copy .note { margin-top: 22px; }
.contact-card {
  padding: 32px; border: 1px solid var(--lp-line); border-radius: var(--tm-radius-card);
  background: var(--lp-surface); box-shadow: var(--lp-shadow);
}

.hidden { display: none !important; }

/* ------------------------------------- Free check and DarkWatch Free (BA-683) */
/* The website check of tomoris.com, run by DarkWatch, and the free plan. No
   severity colours here either: a result speaks through the grade and the shape
   of its mark (filled: fine, half: a hint, square: a gap, ring: information).
   The orange stays the colour of action. */
.kostenlos[hidden], .frei-banner[hidden], .ks-result[hidden], .ks-turnstile[hidden] { display: none !important; }
.ks-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.ks-copy .lede { margin-top: 14px; }
.ks-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 24px; }
.ks-field { flex: 1 1 260px; min-width: 0; }
.ks-turnstile { flex: 1 1 100%; min-height: 65px; }
.ks-note { margin-top: 14px; }
.ks-result { padding: 22px; border: 1px solid var(--lp-line); border-radius: 14px; background: var(--lp-surface); box-shadow: var(--lp-shadow); min-width: 0; }
.ks-head { display: flex; gap: 18px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--lp-line); }
.ks-head-text { min-width: 0; }
.ks-grade { flex: 0 0 auto; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--lp-ink); color: var(--lp-ink); font-family: "Nunito Sans", system-ui, sans-serif; font-weight: 800; font-size: 1.625rem; line-height: 1; }
.ks-grade.is-ok { background: var(--lp-ink); color: var(--lp-bg); }
.ks-grade.is-bad { border-style: double; border-width: 4px; }
.ks-grade.is-info { border-style: dashed; }
.ks-subject { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .875rem; color: var(--lp-muted); overflow-wrap: anywhere; }
.ks-summary { margin-top: 4px; font-size: 1rem; font-weight: 700; color: var(--lp-ink); line-height: 1.45; }
.ks-rows { list-style: none; margin: 6px 0 0; display: grid; }
.ks-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--lp-line); }
.ks-row:last-child { border-bottom: 0; }
.ks-row b { display: block; font-size: .9375rem; color: var(--lp-ink); }
.ks-row small { display: block; margin-top: 2px; font-size: .8125rem; line-height: 1.5; color: var(--lp-muted); overflow-wrap: anywhere; }
.ks-dot { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--lp-ink); border: 1.5px solid var(--lp-ink); }
.ks-row.is-warn .ks-dot { background: linear-gradient(90deg, var(--lp-ink) 50%, transparent 50%); }
.ks-row.is-fail .ks-dot { border-radius: 2px; }
.ks-row.is-info .ks-dot { background: transparent; border-color: var(--lp-muted); }
.ks-more { font-size: .8125rem; font-weight: 700; color: var(--lp-accent-text); white-space: nowrap; text-decoration: none; }
.ks-more:hover { text-decoration: underline; }
.ks-cta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--lp-line); display: grid; gap: 12px; justify-items: start; }
.ks-cta-lead { font-size: .9375rem; line-height: 1.6; color: var(--lp-copy); }

.pakete-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card.frei { border-color: var(--lp-ink); display: flex; flex-direction: column; }
.card.frei .paket-btn { margin-top: auto; align-self: flex-start; }
.paket-badge { align-self: flex-start; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px; background: var(--lp-ink); color: var(--lp-bg); font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: .6875rem; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.card .paket-slots, .ks-cta .paket-slots { margin-top: 14px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; font-size: .8125rem; line-height: 1.45; color: var(--lp-ink); }
.ks-cta .paket-slots { margin-top: 0; }
.paket-slots::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--lp-accent); vertical-align: 1px; }
.paket-slots.is-full::before { background: transparent; border: 1.5px solid var(--lp-muted); }
.card .paket-anker { margin: 14px 0 18px; font-size: .8125rem; line-height: 1.55; }

.su-plan { margin: 4px 0 6px; padding: 0; border: 0; display: grid; gap: 8px; }
.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; }

.frei-banner { position: relative; z-index: 5; margin-top: 72px; background: var(--lp-ink); color: var(--lp-bg); }
.frei-banner-inner { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.frei-banner p { font-weight: 700; color: var(--lp-bg); }

@media (max-width: 900px) {
  .ks-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .ks-result { padding: 16px; }
  .ks-head { gap: 14px; }
  .ks-grade { width: 56px; height: 56px; font-size: 1.375rem; }
  .ks-row { grid-template-columns: 12px minmax(0, 1fr); }
  .ks-more { grid-column: 2; }
  .ks-form .btn { flex: 1 1 100%; }
}
.reqgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.rf { display: block; margin-bottom: 16px; }
.rf > span {
  display: block; margin-bottom: 8px;
  font-family: var(--fm); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lp-muted);
}
.rf input, .rf textarea, .codeline input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--lp-field-line); border-radius: 10px;
  background: var(--lp-bg); color: var(--lp-ink);
  font-family: inherit; font-size: 1rem;
  transition: border-color var(--tm-dur-fast) var(--tm-ease);
}
.rf textarea { resize: vertical; min-height: 96px; }
.rf input:focus, .rf textarea:focus, .codeline input:focus { outline: none; border-color: var(--lp-signal); }
/* Keyboard focus on fields. The rule above removes the outline for the mouse
   click; for the keyboard a 1px border is not a focus ring, and the general
   :focus-visible rule loses against '.rf input:focus' on specificity. */
.rf input:focus-visible, .rf textarea:focus-visible, .codeline input:focus-visible {
  outline: 2px solid var(--lp-accent-text); outline-offset: 2px;
}
.rf input::placeholder, .rf textarea::placeholder, .codeline input::placeholder { color: var(--lp-muted); }

.rfcheck { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 22px; font-size: .9375rem; color: var(--lp-copy); cursor: pointer; }
.rfcheck input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--lp-btn); }

/* Honeypot: not display:none, some bots skip hidden fields on purpose. */
.rfhoney { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rfnote { min-height: 22px; margin-top: 14px; font-size: .875rem; color: var(--lp-muted); }
.rfnote.ok { color: var(--lp-ok); }
.rfnote.bad { color: var(--lp-crit); }

#confirmForm .lede { margin-bottom: 18px; font-size: 1rem; }
.codeline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.codeline input { max-width: 200px; font-family: var(--fm); font-size: 1.375rem; letter-spacing: .28em; text-align: center; }
.codeline input:disabled { opacity: .6; }

/* ----------------------------------------------------------------- Footer */
.site-footer { border-top: 1px solid var(--lp-line); background: var(--lp-bg); padding-block: 40px; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.foot-brand .logo { font-size: .9375rem; }
.powered { margin-top: 8px; font-size: .8125rem; letter-spacing: .04em; color: var(--lp-muted); }
.powered strong { color: var(--lp-ink); font-weight: 800; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { color: var(--lp-copy); font-size: .875rem; font-weight: 700; text-decoration: none; transition: color var(--tm-dur-fast) var(--tm-ease); }
.foot-links a:hover { color: var(--lp-ink); }
.copy { font-size: .8125rem; color: var(--lp-muted); }

/* ----------------------------------------------------------------- Motion */
/* Everything below only adds movement on top of the finished page. */
@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow { animation: auf 800ms var(--lp-ease) 60ms both; }
  .hero-title .line > span { animation: steigen 1050ms var(--lp-ease) 200ms both; }
  .hero-title .line + .line > span { animation-delay: 380ms; }
  .hero-lede { animation: auf 900ms var(--lp-ease) 650ms both; }
  .hero-ctas { animation: auf 900ms var(--lp-ease) 800ms both; }
  .hero-note { animation: auf 900ms var(--lp-ease) 950ms both; }
  .hero-visual { animation: auf 1000ms var(--lp-ease) 450ms both; }

  /* One lap of the hand (BA-655). The fan trails it and fades, the lap is drawn on the
     bezel, and each mark lights up as the hand passes it; its row lights with it. The
     delays follow the easing of the lap: a third at about 40 %, two thirds at about 60 %. */
  .zb-zeiger { animation: zeiger 3000ms cubic-bezier(.55, .05, .25, 1) 500ms both; }
  .zb-faecher { animation: faecher 3000ms cubic-bezier(.55, .05, .25, 1) 500ms both; }
  .zb-lauf { animation: lauf 3000ms cubic-bezier(.55, .05, .25, 1) 500ms both; }
  .zb-marke { animation: marke 700ms var(--lp-ease) both; }
  .zb-marke.is-watch, .lage-row.is-watch { animation-delay: 1700ms; }
  .zb-marke.is-found, .lage-row.is-found { animation-delay: 2300ms; }
  .zb-marke.is-done, .lage-row.is-done { animation-delay: 3450ms; }
  .lage-row { animation: aufleuchten 700ms var(--lp-ease) both; }
  .zb-licht { animation: licht 2600ms var(--lp-ease) 300ms both; }

  /* Driven by the scroll position, not by time: the bezel turns a little while the page
     moves, and a hairline in brand orange under the top bar shows how far one has read.
     Browsers without scroll timelines keep the still page. */
  @supports (animation-timeline: scroll()) {
    .zb-skala { animation: skala linear both; animation-timeline: scroll(root); }
    .topbar::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--lp-accent); transform-origin: left; transform: scaleX(0);
      animation: lesen linear both; animation-timeline: scroll(root);
    }
  }
  /* Reveal, armed by landing.js only for elements below the fold. */
  .lp-motion .rv-armed { opacity: 0; translate: 0 28px; }
  .rv-in { animation: auf 800ms var(--lp-ease) calc(var(--i, 0) * 90ms) both; }
  .rv-in .num::after, .rv-in.num::after { animation: ziehen 900ms var(--lp-ease) calc(var(--i, 0) * 90ms + 250ms) both; }

  /* Headlines below the fold rise word by word from a mask. */
  h2.split:is([data-reveal="armed"], [data-reveal="in"]) .w {
    overflow: hidden; vertical-align: top; padding-block: .16em .08em; margin-block: -.16em -.08em;
  }
  h2.split:is([data-reveal="armed"], [data-reveal="in"]) .w > span { display: inline-block; }
  h2.split[data-reveal="armed"] .w > span { transform: translateY(115%); }
  h2.split[data-reveal="in"] .w > span { animation: steigen 900ms var(--lp-ease) calc(var(--i, 0) * 80ms) both; }

  /* The data flow plays once when it arrives: the secrets are struck out, the
     links draw, the bin and the stored attributes appear. */
  .flow.rv-in .flow-link { animation: ziehen 600ms var(--lp-ease) both; }
  .flow.rv-in .flow-link:nth-of-type(1) { animation-delay: 500ms; }
  .flow.rv-in .flow-link:nth-of-type(2) { animation-delay: 1500ms; }
  .flow.rv-in .is-secret { animation: streichen 700ms var(--lp-ease) 900ms both; }
  .flow.rv-in .flow-bin { animation: auf 700ms var(--lp-ease) 1150ms both; }
  .flow.rv-in .flow-store li { animation: auf 600ms var(--lp-ease) both; }
  .flow.rv-in .flow-store li:nth-child(1) { animation-delay: 1900ms; }
  .flow.rv-in .flow-store li:nth-child(2) { animation-delay: 2000ms; }
  .flow.rv-in .flow-store li:nth-child(3) { animation-delay: 2100ms; }
  .flow.rv-in .flow-store li:nth-child(4) { animation-delay: 2200ms; }
}
.w { display: inline-block; }

@keyframes auf { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes steigen { from { transform: translateY(110%); } to { transform: none; } }
@keyframes aufleuchten { from { opacity: .28; } to { opacity: 1; } }
@keyframes zeiger { from { transform: rotate(-360deg); } to { transform: rotate(0deg); } }
@keyframes faecher {
  0%   { transform: rotate(-360deg); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: rotate(0deg); opacity: 0; }
}
@keyframes lauf { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes marke {
  0%   { fill: var(--lp-bg); r: 6px; }
  45%  { fill: currentColor; r: 9px; }
  100% { fill: var(--lp-bg); r: 6px; }
}
@keyframes licht { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes skala { from { transform: rotate(0deg); } to { transform: rotate(120deg); } }
@keyframes lesen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ziehen { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes streichen {
  from { color: var(--lp-ink); text-decoration-color: transparent; }
  to   { color: var(--lp-crit); text-decoration-color: currentColor; }
}

/* ------------------------------------------------------------- Breakpoints */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value, .value:first-child { padding: 26px 24px; }
}

@media (max-width: 960px) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 8px 20px 18px; background: var(--lp-bg); border-bottom: 1px solid var(--lp-line);
  }
  .topbar.open .nav { display: flex; }
  .nav a { padding: 13px 0; border-top: 1px solid var(--lp-line); font-size: 1rem; }
  .nav a:first-child { border-top: 0; }
  .navtoggle { display: flex; }
}

@media (max-width: 900px) {
  :root { --lp-bar: 64px; }
  .wrap, .topbar-bar { padding-inline: 20px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 48px; min-height: 0; padding-block: 48px 64px; }
  .hero-grid {
    -webkit-mask-image: radial-gradient(ellipse 90% 40% at 70% 70%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 40% at 70% 70%, #000 30%, transparent 100%);
  }
  .how { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cards-3 { grid-template-columns: minmax(0, 1fr); }
  .honest { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .flow { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .flow-link { justify-self: center; width: 2px; height: 34px; margin: 10px 0; transform-origin: top; }
  .flow-link::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  @keyframes ziehen-y { from { scale: 1 0; } to { scale: 1 1; } }
  .flow.rv-in .flow-link { animation-name: ziehen-y; }
}

@media (max-width: 600px) {
  .topbar-bar { gap: 10px; }
  .topbar-actions { gap: 6px; }
  .logo { gap: 8px; font-size: .8125rem; letter-spacing: .03em; }
  .lang { min-width: 40px; padding: 0 10px; }
  .navtoggle { width: 40px; padding: 0 11px; }
  .btn-login { padding: 0 14px; }
  .h2 { font-size: clamp(1.75rem, 1rem + 4.2vw, 2.25rem); }
  .hero-eyebrow { letter-spacing: .12em; }
  .hero-lede { font-size: 1.0625rem; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .lage { padding: 4px 18px 20px; }
  .values-grid { grid-template-columns: minmax(0, 1fr); }
  .value, .value:first-child { padding: 22px 0; }
  .cards, .process { grid-template-columns: minmax(0, 1fr); }
  .card, .honest-col, .contact-card { padding: 24px; }
  .reqgrid { grid-template-columns: minmax(0, 1fr); }
  .contact-card .cta-row .btn { flex: 1 1 100%; }
}

/* On small phones the sign-in button leaves the bar and moves into the menu; the
   hero repeats it right below the headline. */
@media (max-width: 480px) {
  .topbar-actions .btn-login { display: none; }
  .nav .nav-signin { display: block; }
}

/* ----------------------------------------------------- Reduced motion */
/* Everything except opacity changes is switched off: scan line, sheen, rise,
   reveal, row sequence, hover lift, smooth scrolling. The status dot stays,
   because it only changes opacity. An element that landing.js armed before the
   preference changed is shown at once. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* display:none alone is not enough: the animation would stay on the element
     and every measuring tool would read it as running. */
  .scan-line { display: none; animation: none; }
  .btn.haupt::after { display: none; animation: none; }
  .lp-motion .rv-armed { opacity: 1; translate: none; }
  .rv-in, .hero-title .line > span, h2.split .w > span, .lage-row, .zb-zeiger, .zb-faecher, .zb-lauf,
  .zb-marke, .zb-licht, .zb-skala, .topbar::after,
  .hero-eyebrow, .hero-lede, .hero-ctas, .hero-note, .hero-visual { animation: none; }
  .topbar::after { display: none; }
  h2.split[data-reveal] .w > span { transform: none; }
  /* Transitions stay, but without movement: colour and opacity are not motion. */
  .btn, .card, .nav a, .topbar, .lang { transition-property: background-color, border-color, color, opacity, box-shadow; }
  .btn:hover, .card:hover { transform: none; }
}