/* ==========================================================================
   vidioo – Landingpage im Keynote-Stil
   Quelle der Gestaltung ist das Promo-Video vom 14.10.2026: reines Schwarz
   ohne Lichtschein, SF Pro, Apple-Grau für Nebentext, Verlaufstext nur auf
   Schlüsselwörtern, Einblenden mit 14 px Unschärfe und 24 px Weg.
   SF Pro kommt vom System (Apple-Geräte); gebündelt wird nur Inter als
   Rückfall, weil Apples Lizenz SF Pro auf Webseiten nicht erlaubt.
   Keine Inline-Styles im HTML: die Content-Security-Policy verbietet sie.
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("assets/fonts/Inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "TikTok Sans"; src: url("assets/fonts/TikTokSans-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --bg: #000;
  --text: #F5F5F7;
  --gray: #86868B;
  --gray-dim: #6E6E73;
  --tile: #111113;
  --tile-2: #1C1C1E;
  --line: rgba(255, 255, 255, .14);
  --link: #2997FF;
  --mint: #A9F5D0;
  --grad: linear-gradient(100deg, #BF5AF2 0%, #5E5CE6 45%, #64D2FF 100%);
  --ease: cubic-bezier(.215, .61, .355, 1);       /* power3.out wie im Video */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --gutter: max(22px, env(safe-area-inset-left));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 56px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.47 var(--font-text); letter-spacing: -.022em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: #000; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 6px; }

.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
.headline {
  font: 600 clamp(40px, 6vw, 80px)/1.05 var(--font-display);
  letter-spacing: -.03em; text-align: center; text-wrap: balance;
}
.sub {
  font: 400 clamp(19px, 2vw, 28px)/1.3 var(--font-display);
  letter-spacing: -.012em; color: var(--gray); text-align: center;
  max-width: 34em; margin: 18px auto 0; text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Einblenden wie im Video: Unschärfe 14 px, Weg 24 px, power3.out.
   Die Verzögerung kommt aus data-d und wird per Skript als --d gesetzt.
   -------------------------------------------------------------------------- */
[data-rise] {
  opacity: 0; transform: translateY(24px); filter: blur(14px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-rise].in { opacity: 1; transform: none; filter: blur(0); }
[data-rise].done { filter: none; transition-delay: 0s; }

/* --------------------------------------------------------------------------
   Knöpfe
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 16px 32px; border-radius: 980px;
  background: var(--text); color: #000; font: 600 19px/1 var(--font-text); letter-spacing: -.02em;
  /* Einziger Farbschein der Seite: hebt den Hauptknopf vom Schwarz ab */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 36px -8px rgba(124, 92, 246, .75);
  transition: background-color .2s, transform .2s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { background: #fff; box-shadow: 0 0 0 1px #fff, 0 14px 46px -6px rgba(124, 92, 246, .95); transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 60px; padding: 18px 38px; font-size: 21px; }
.link {
  color: var(--link); font: 500 20px/1 var(--font-text); letter-spacing: -.02em;
  background: none; border: 0; padding: 8px 0; cursor: pointer;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 48px;
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s;
}
.nav.scrolled { border-bottom-color: rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .72); }
.nav-row {
  max-width: 1024px; height: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 28px;
}
.nav-brand { display: flex; align-items: center; gap: 8px; font: 600 19px/1 var(--font-display); letter-spacing: -.03em; }
.nav-brand img { width: 22px; height: 22px; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 12px; letter-spacing: -.01em; }
.nav-links a { color: rgba(245, 245, 247, .8); transition: color .2s; }
.nav-links a:hover { color: #fff; }
.nav-cta { font-size: 14px; padding: 8px 18px; border-radius: 980px; background: var(--text); color: #000; font-weight: 600; box-shadow: 0 4px 18px -6px rgba(124, 92, 246, .8); }
@media (max-width: 600px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
}

.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero mit der einen Scroll-Szene: ein nachgebauter vidioo-Editor.
   Die KI-Änderungen landen sichtbar in Vorschau, Inspector und Zeitleiste;
   gezeigt wird ein echter Editor, kein Chatfenster mit Video daneben.
   -------------------------------------------------------------------------- */
/* 230vh: Am 17.10. wurde die Szene für die Lesbarkeit von 175vh auf 330vh gestreckt,
   am 20.10. war das Michael zu lang („nicht ewig scrollen“). Der Mittelweg hält die
   Eingabe lesbar, die Szene läuft ohnehin weich hinter dem Scrollen her. */
.hero { height: 230vh; }
.hero-sticky { display: flex; flex-direction: column; }
.hero-copy { flex: none; text-align: center; padding: max(76px, 9vh) var(--gutter) 0; will-change: transform, opacity; }
.eyebrow { font: 600 clamp(17px, 1.6vw, 21px)/1 var(--font-display); letter-spacing: -.02em; color: var(--gray); margin-bottom: 12px; }
.hero h1 { font: 600 clamp(44px, 7vw, 96px)/1.02 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
/* Ohne Unterzeile (Michael, 30.10.) folgen die Knöpfe direkt der Überschrift;
   22 px wirkten an der engen Zeilenhöhe der h1 gequetscht. */
.hero-actions { margin-top: 34px; display: flex; gap: 28px; justify-content: center; align-items: center; flex-wrap: wrap; }

.morph-wrap { position: relative; flex: 1; min-height: 0; margin: 60px 0 0; padding: 0 var(--gutter) 64px; display: flex; justify-content: center; }

/* Editorfenster: Vorschau links, Inspector rechts, darunter Sprachfeld und Zeitleiste */
.ed {
  --ed-line: rgba(255, 255, 255, .08);
  position: relative; width: min(100%, 1120px); height: 100%; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(190px, 22%, 260px);
  grid-template-rows: 32px minmax(0, 1fr) auto auto;
  grid-template-areas: "bar bar" "stage insp" "chat insp" "tl tl";
  border-radius: 14px; overflow: hidden; background: #0B0B0C;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 120px -40px rgba(0, 0, 0, .95);
  font-family: var(--font-text); letter-spacing: -.01em;
}
.ed-bar { grid-area: bar; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #161618; border-bottom: 1px solid var(--ed-line); }
.ed-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3A3A3C; }
.ed-bar span { flex: 1; text-align: center; margin-right: 54px; font-size: 12px; color: var(--gray); }
.ed-stage { grid-area: stage; position: relative; min-height: 0; background: #050505; }
.ed-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.morph-cam {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%);
  font: 600 12px/1 var(--font-text); padding: 6px 10px; border-radius: 980px;
  background: rgba(20, 20, 22, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  white-space: nowrap; opacity: 0; pointer-events: none;
}
.morph-caption {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  font-family: "TikTok Sans", var(--font-display); font-weight: 800; color: #fff;
  -webkit-text-stroke: .16em #000; paint-order: stroke fill;
  text-align: center; line-height: 1.16; letter-spacing: -.025em; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.morph-caption em { font-style: normal; color: var(--mint); }

/* Inspector wie in der App: Gruppen, Werte rechtsbündig */
.ed-insp { grid-area: insp; padding: 14px 14px 10px; border-left: 1px solid var(--ed-line); background: #111113; font-size: 13px; overflow: hidden; }
.ei-head { margin: 4px 0 8px; font-size: 11px; font-weight: 600; color: var(--gray-dim); text-transform: uppercase; letter-spacing: .04em; }
.ei-head + .ei-row { margin-top: 0; }
.ei-row + .ei-head { margin-top: 18px; }
.ei-row { position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 9px; margin-top: 6px; border-radius: 8px; background: #1C1C1E; color: var(--gray); }
.ei-row b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* Ein Wert, den die KI gerade geändert hat, leuchtet kurz im Verlauf auf */
.ei-row.hit { box-shadow: 0 0 0 1.5px #7C5CF6; }
.ei-slider { position: relative; flex-basis: 100%; height: 4px; margin: 6px 0 4px; border-radius: 2px; background: #3A3A3C; }
.ei-slider u { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 50%); border-radius: 2px; background: var(--grad); }
.ei-slider s { position: absolute; top: 50%; left: var(--v, 50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

/* Sprachfeld wie AgentComposer: groß, weil die Eingabe hier der Auslöser ist.
   Darüber die Lasche „Hört zu · Pause sendet“ mit Pegel, solange gesprochen wird. */
.ed-chat {
  grid-area: chat; position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 58px;
  margin: 10px 12px; padding: 8px 8px 8px 18px; border-radius: 16px; background: #1C1C1E;
  font-size: clamp(15px, 1.25vw, 18px); box-shadow: 0 0 0 1px var(--ed-line); transition: box-shadow .4s;
}
.ed-chat.talk { box-shadow: 0 0 0 1.5px #7C5CF6, 0 0 40px -6px rgba(124, 92, 246, .55); }
.ec-tab {
  position: absolute; left: 14px; bottom: 100%; display: flex; align-items: center; gap: 10px;
  padding: 7px 12px 6px; border-radius: 10px 10px 0 0; background: #232326; box-shadow: 0 0 0 1px var(--ed-line);
  font-size: 12px; color: var(--gray); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease);
}
.ed-chat.talk .ec-tab { opacity: 1; transform: none; }
.ec-wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.ec-wave i { width: 2px; height: 20%; border-radius: 1px; background: #BF5AF2; animation: lvl .6s ease-in-out infinite alternate; animation-delay: var(--dl); }
@keyframes lvl { from { height: 15%; } to { height: 100%; } }
.ec-text { flex: 1; min-width: 0; color: var(--text); line-height: 1.35; }
.ec-text:not(.has)::before { content: "Sprich einfach …"; color: var(--gray-dim); }
.ec-text .w { opacity: 0; filter: blur(6px); transition: opacity .35s var(--ease), filter .35s var(--ease); }
.ec-text .w.on { opacity: 1; filter: none; }
.ec-mic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #2C2C2E; color: var(--gray); transition: background .3s, color .3s; }
.ed-chat.talk .ec-mic { background: var(--grad); color: #fff; animation: ring 1.4s ease-out infinite; }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(191, 90, 242, .55); } to { box-shadow: 0 0 0 14px rgba(191, 90, 242, 0); } }

/* Verlauf: die gesendete Bitte bleibt als Blase stehen, darunter die Schritte der KI.
   Auf breiten Schirmen links neben dem Short, sonst oben über der Facecam. */
.ed-thread { position: absolute; left: 14px; bottom: 14px; width: 260px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; pointer-events: none; }
.ed-thread.top { left: 10px; right: 10px; top: 10px; bottom: auto; width: auto; }
.ed-thread > * { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.ed-thread > .on { opacity: 1; transform: none; }
.ed-thread.dim > .on { opacity: .45; }
.et-bubble { align-self: flex-start; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: #2D2A4A; color: var(--text); font-size: 14px; line-height: 1.35; }
.et-think, .et-step, .et-undo { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; background: rgba(28, 28, 30, .92); color: var(--text); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.et-think { color: var(--gray); }
.et-think i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #3A3A3C; border-top-color: var(--gray); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.et-think.gone { display: none; }
.et-step b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--grad); color: #fff; font-size: 11px; }
.et-step span { margin-left: auto; color: var(--gray); font-variant-numeric: tabular-nums; white-space: nowrap; }
.et-undo { background: transparent; color: var(--gray); padding: 2px 4px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.et-undo em { font-style: normal; color: var(--link); }

/* Verbindung: ein Puls läuft vom Schritt der KI zu dem, was er geändert hat */
.ed-link { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.ed-link path { fill: none; stroke: url(#lg); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ed-link circle { fill: #fff; opacity: 0; filter: drop-shadow(0 0 6px #BF5AF2); }

/* Werte, die die KI gesetzt hat: nachträglich mit kleinem Etikett, kein Fokus */
.ei-ai { margin-left: auto; margin-right: 2px; font: 600 10px/1 var(--font-text); font-style: normal; color: #BF5AF2; opacity: 0; transition: opacity .4s; }
.ei-row.ai .ei-ai { opacity: 1; }
.ei-row.ai b { animation: glow 1.2s var(--ease); }
@keyframes glow { 0% { color: #fff; text-shadow: 0 0 12px #BF5AF2; } 100% { text-shadow: none; } }

/* Zeitleiste: V1 mit Zoom-Keyframes, Ton, Untertitel */
.ed-tl { grid-area: tl; position: relative; padding: 8px 10px 10px; border-top: 1px solid var(--ed-line); background: #0E0E10; }
.tl-row { display: flex; align-items: center; gap: 8px; height: 26px; }
.tl-row + .tl-row { margin-top: 5px; }
.tl-row > span { width: 40px; flex: none; font-size: 11px; color: var(--gray-dim); }
.tl-lane { position: relative; flex: 1; height: 100%; border-radius: 6px; background: #1C1C1E; }
.tl-clip { background: linear-gradient(90deg, #2C2C3A, #24242E); box-shadow: inset 0 0 0 1px rgba(124, 92, 246, .35); }
.tl-wave { background: #16201C; }
.tl-wave::before { content: ""; position: absolute; inset: 6px 4px; opacity: .55; background: repeating-linear-gradient(90deg, #3E7F67 0 2px, transparent 2px 5px); -webkit-mask: linear-gradient(90deg, #000 0 30%, rgba(0,0,0,.4) 34% 38%, #000 42% 100%); mask: linear-gradient(90deg, #000 0 30%, rgba(0,0,0,.4) 34% 38%, #000 42% 100%); }
.tl-caps { background: transparent; }
.tl-caps i { position: absolute; top: 3px; bottom: 3px; left: var(--x); width: 12%; border-radius: 4px; background: #2A2A2E; transition: background .4s; }
.ed.capbig .tl-caps i { background: #3B3460; }
.tl-kf { position: absolute; top: 50%; left: var(--x); width: 10px; height: 10px; background: #fff; transform: translate(-50%, -50%) rotate(45deg) scale(0); border-radius: 2px; transition: transform .35s var(--ease); }
.ed.kf .tl-kf { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.ed.kf .tl-kf + .tl-kf { transition-delay: .08s; }
.ed.kfhit .tl-kf { box-shadow: 0 0 0 4px rgba(191, 90, 242, .5); }
.ed .tl-kf.grab { box-shadow: 0 0 0 4px rgba(124, 92, 246, .7); background: #E9E3FF; }
/* Grafik-Clip wie in Studio: orange mit dunkler Kopfleiste; die zweite Raute ist sein Trimm-Griff */
.tl-gfx { background: #1C1C1E; }
.tl-zoom { position: absolute; left: 34%; width: 10%; top: 2px; bottom: 2px; display: flex; align-items: flex-end; padding: 0 0 3px 6px; overflow: hidden; white-space: nowrap; font: 600 10px/1 var(--font-text); font-style: normal; color: #fff; background: linear-gradient(#5A311A 0 34%, #AE5C2B 34%); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); opacity: 0; transition: opacity .35s, box-shadow .35s; }
.ed.kfhit .tl-zoom { box-shadow: 0 0 0 2px var(--mint), 0 0 18px rgba(169, 245, 208, .6); }
.tl-gfx .tl-kf:first-of-type { visibility: hidden; }
.tl-gfx .tl-kf + .tl-kf { width: 5px; height: 18px; border-radius: 2px; transform: translate(-50%, -50%) scaleY(0); }
.ed.kf .tl-gfx .tl-kf + .tl-kf { transform: translate(-50%, -50%) scaleY(1); }
.ed.kf .tl-zoom { opacity: 1; }
.tl-head { position: absolute; top: 4px; bottom: 6px; left: 0; width: 2px; background: #fff; pointer-events: none; }
.tl-head::before { content: ""; position: absolute; top: 0; left: -4px; border: 5px solid transparent; border-top-color: #fff; }

.ed-cursor { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }

/* Schmal: Inspector als Leiste unter der Vorschau, nur die Werte, um die es geht */
@media (max-width: 700px) {
  .morph-wrap { margin-top: 56px; padding: 0 12px 60px; }
  .tl-zoom { font-size: 0; }
  .ed { grid-template-columns: minmax(0, 1fr); grid-template-rows: 28px minmax(0, 1fr) auto auto auto; grid-template-areas: "bar" "stage" "insp" "chat" "tl"; border-radius: 12px; }
  .ed-bar span { margin-right: 40px; font-size: 11px; }
  .ed-insp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px 0; border-left: 0; border-top: 1px solid var(--ed-line); font-size: 12px; }
  .ei-head, .ei-extra { display: none; }
  .ei-row { margin: 0; padding: 6px 8px; align-self: start; }
  .ed-chat { margin: 8px 10px; min-height: 48px; padding-left: 14px; font-size: 14px; }
  .ec-mic { width: 34px; height: 34px; }
  .ed-thread { font-size: 12px; gap: 6px; }
  .et-bubble { font-size: 13px; }
  .tl-row { height: 20px; }
  .tl-row + .tl-row { margin-top: 4px; }
}

.morph-label {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  height: 30px; width: min(90vw, 420px); pointer-events: none;
}
.morph-label span {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, 8px); white-space: nowrap;
  font: 500 14px/1 var(--font-text); letter-spacing: -.01em; color: var(--text);
  padding: 8px 14px; border-radius: 980px; background: rgba(28, 28, 30, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.morph-label span.on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Ablauf: drei Schritte wie im Film (Reinziehen, Schneiden, Posten und planen)
   -------------------------------------------------------------------------- */
.flow { padding: clamp(80px, 12vh, 140px) var(--gutter) clamp(40px, 6vh, 80px); }
.step {
  max-width: 1240px; margin: clamp(72px, 12vh, 140px) auto 0;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 72px); align-items: center;
}
.step-text h2, .step-text h3 { font: 600 clamp(40px, 5.4vw, 72px)/1.02 var(--font-display); letter-spacing: -.035em; }
.step-text p { margin-top: 18px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.45; color: var(--gray); text-wrap: pretty; }
.step-text strong { color: var(--text); font-weight: 600; }
.step-text .step-note { font-size: 15px; color: var(--gray-dim); }
.step-import { grid-template-columns: 1fr; text-align: center; }
.step-import .step-text { max-width: 760px; margin: 0 auto; }
.screen { margin: 0; border-radius: clamp(10px, 1.4vw, 20px); overflow: hidden; background: #111; box-shadow: 0 0 0 1px var(--line), 0 60px 120px -40px rgba(0, 0, 0, .9); }
.screen video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 718; object-fit: cover; }
/* Der Post-Clip bringt seine Fenster (Dialog, Kalender) samt Rundung schon mit, auf
   reinem Schwarz wie die Seite. Ein zweiter Rahmen ergäbe ein Fenster im Fenster. */
.screen-post { max-width: 720px; justify-self: center; width: 100%; border-radius: 0; background: transparent; box-shadow: none; }
.screen-post video { aspect-ratio: 960 / 800; }
@media (max-width: 860px) {
  .step { grid-template-columns: 1fr; }
  .step-text { text-align: center; }
}

/* --------------------------------------------------------------------------
   Animation aus einem Satz
   -------------------------------------------------------------------------- */
.describe { padding: clamp(100px, 16vh, 180px) var(--gutter) clamp(80px, 12vh, 140px); }
.statement { font: 600 clamp(46px, 8.4vw, 120px)/1.02 var(--font-display); letter-spacing: -.035em; text-align: center; }
/* Ein Lichtlauf über „baut sie.“, einmal beim Einblenden */
.shimmer { background-image: linear-gradient(100deg, #BF5AF2 0%, #5E5CE6 40%, #fff 50%, #64D2FF 60%, #64D2FF 100%); background-size: 250% 100%; background-position: 100% 0; }
.in .shimmer { transition: background-position 2.2s var(--ease) .5s; background-position: 0 0; }
.data-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px);
  max-width: 1100px; margin: clamp(56px, 9vh, 104px) auto 0;
}
.data-grid > div { border-top: 1px solid var(--line); padding-top: 22px; }
.data-grid dt { font: 600 21px/1.25 var(--font-display); letter-spacing: -.02em; }
.data-grid dd { margin-top: 10px; color: var(--gray); font-size: 16px; line-height: 1.45; }
.tag { display: block; margin-bottom: 8px; font: 600 14px/1 var(--font-text); letter-spacing: -.01em; color: var(--gray); }
@media (max-width: 900px) { .data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } }
@media (max-width: 520px) { .data-grid { grid-template-columns: 1fr; gap: 28px; } }

/* --------------------------------------------------------------------------
   Vom Stream bis zum Post / Fragen
   -------------------------------------------------------------------------- */
.more, .faq { padding: clamp(70px, 10vh, 120px) var(--gutter); }
/* Fragen und Beta-Telefon bilden den Abschluss: kein doppelter Abstand dazwischen */
.faq { padding-bottom: clamp(16px, 3vh, 32px); }
.more-list, .faq-list { max-width: 980px; margin: clamp(36px, 6vh, 64px) auto 0; }
.more-list > div {
  display: grid; grid-template-columns: minmax(120px, 28%) 1fr; gap: 24px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.more-list dt { font: 600 clamp(20px, 1.9vw, 26px)/1.2 var(--font-display); letter-spacing: -.025em; }
.more-list dd { font: 400 clamp(17px, 1.5vw, 20px)/1.4 var(--font-display); color: var(--gray); letter-spacing: -.012em; }
@media (max-width: 600px) { .more-list > div { grid-template-columns: 1fr; gap: 6px; } }
.more-note { max-width: 980px; margin: 28px auto 0; color: var(--gray-dim); font-size: 15px; }

/* Werkzeuge, die die KI bedient: kurze Kacheln statt langer Liste */
.tool-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 44px);
  max-width: 1100px; margin: clamp(40px, 7vh, 72px) auto 0; text-align: left;
}
.tool-grid > div { border-top: 1px solid var(--line); padding: 20px 0 28px; }
.tool-grid dt { font: 600 21px/1.25 var(--font-display); letter-spacing: -.02em; }
.tool-grid dd { margin-top: 8px; color: var(--gray); font-size: 16px; line-height: 1.45; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tool-grid { grid-template-columns: 1fr; } .tool-grid > div { padding-bottom: 18px; } }

.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; font: 600 clamp(19px, 1.9vw, 24px)/1.3 var(--font-display); letter-spacing: -.02em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat,
              linear-gradient(currentColor, currentColor) center / 1.6px 100% no-repeat;
  color: var(--gray); transition: transform .35s var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 26px; max-width: 46em; color: var(--gray); font-size: 17px; line-height: 1.55; }
.faq-list details p a { color: var(--link); }
.faq-list details p a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Preise (VID-835): app.js baut die Karten aus /abo-angebot.php
   -------------------------------------------------------------------------- */
.prices { padding: clamp(70px, 10vh, 120px) var(--gutter) 0; }
.prices-status { max-width: 980px; margin: 28px auto 0; text-align: center; color: var(--gray); font-size: 17px; line-height: 1.5; }
.prices-status a, .price-legal a { color: var(--gray); text-decoration: underline; text-underline-offset: 2px; }
.prices-status a:hover, .price-legal a:hover { color: var(--text); }
.price-list {
  max-width: 980px; margin: clamp(36px, 6vh, 64px) auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px;
}
.price-list[hidden], .price-legal[hidden], .prices-status[hidden] { display: none; }
.price {
  display: flex; flex-direction: column; gap: 10px; padding: 28px;
  border-radius: 22px; background: var(--tile); box-shadow: 0 0 0 1px var(--line);
}
.price-period { font: 600 14px/1.2 var(--font-text); color: var(--gray); letter-spacing: -.01em; }
.price-name { font: 600 24px/1.2 var(--font-display); letter-spacing: -.02em; }
.price-amount { font: 600 clamp(34px, 4vw, 44px)/1.1 var(--font-display); letter-spacing: -.03em; }
.price-amount span { font-size: 19px; font-weight: 500; color: var(--gray); letter-spacing: -.01em; }
.price-sub, .price-hint, .price-features, .price-terms li { color: var(--gray); font-size: 15px; line-height: 1.45; }
.price-trial { color: var(--mint); font-size: 15px; line-height: 1.45; }
.price-hint { color: var(--text); }
.price-terms { list-style: disc; padding-left: 18px; }
.price-terms li + li { margin-top: 4px; }
.price-btn { margin-top: auto; align-self: flex-start; min-height: 48px; padding: 14px 24px; font-size: 17px; }
.price-legal { max-width: 980px; margin: 28px auto 0; color: var(--gray-dim); font-size: 14px; line-height: 1.55; }
.price-legal p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Beta mit 3D-Telefon
   -------------------------------------------------------------------------- */
.beta { padding: 0 var(--gutter) clamp(64px, 10vh, 120px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.phone-stage { position: relative; width: 100%; height: clamp(380px, 58vh, 640px); }
.phone-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.phone-stage.webgl canvas { opacity: 1; }
.phone-fallback {
  position: absolute; left: 50%; top: 4%; height: 88%; aspect-ratio: 1364 / 2912; transform: translateX(-50%);
  padding: 1.1%; border-radius: 9% / 5%;
  background: linear-gradient(160deg, #3A3A3C, #1C1C1E);
  box-shadow: 0 0 0 1.5px #2C2C2E, 0 60px 120px -30px rgba(0, 0, 0, .9);
  transition: opacity .6s;
}
.phone-fallback video { width: 100%; height: 100%; object-fit: cover; border-radius: 8% / 4.5%; }
/* Das Video bleibt im Layout, weil Browser unsichtbar gemachte Videos anhalten. */
.phone-stage.webgl .phone-fallback { opacity: 0; pointer-events: none; }
.beta-line { margin: 6px 0 0; font: 500 clamp(19px, 1.8vw, 24px)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--gray); }

/* Warteliste: Feld und Knopf als eine Pille, auf schmalen Schirmen untereinander */
.waitlist { width: 100%; max-width: 520px; margin-top: 28px; }
.beta-line:has(+ .waitlist) { margin-bottom: 0; }
.wl-row {
  display: flex; gap: 6px; padding: 6px; border-radius: 980px;
  background: var(--tile-2); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .25s;
}
.wl-row:focus-within { box-shadow: 0 0 0 1.5px var(--link); }
.wl-label, .wl-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wl-input {
  flex: 1; min-width: 0; padding: 0 18px; border: 0; background: none; color: var(--text);
  font: 400 18px/1 var(--font-text); letter-spacing: -.012em;
}
.wl-input::placeholder { color: var(--gray-dim); }
.wl-input:focus { outline: none; }
.wl-btn { flex: none; min-height: 48px; padding: 14px 26px; font-size: 17px; }
.wl-btn:disabled { opacity: .6; cursor: progress; transform: none; }
.wl-note { margin-top: 14px; font-size: 14px; color: var(--gray-dim); }
.wl-note a { color: var(--gray); text-decoration: underline; text-underline-offset: 2px; }
.wl-note.ok { color: var(--mint); font-size: 17px; }
.wl-note.err { color: #FF6961; }
.waitlist.sent .wl-row { display: none; }
@media (max-width: 480px) {
  .wl-row { flex-direction: column; border-radius: 22px; }
  .wl-input { min-height: 48px; }
}

/* --------------------------------------------------------------------------
   Film als Dialog
   -------------------------------------------------------------------------- */
.film-dialog {
  width: min(92vw, 1280px); max-width: none; padding: 0; border: 0; border-radius: 22px; overflow: hidden;
  background: #000; color: var(--text); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.film-dialog::backdrop { background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.film-dialog[open] { animation: dlg .5s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: scale(.96); } }
.film-dialog video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.film-close {
  position: absolute; right: 14px; top: 14px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: rgba(40, 40, 42, .78); color: var(--text);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */
.footer { border-top: 1px solid rgba(255, 255, 255, .08); padding: 22px var(--gutter) max(28px, env(safe-area-inset-bottom)); }
.footer-row {
  max-width: 980px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 12px; color: var(--gray-dim);
}
.footer-row a:hover { color: var(--text); }
/* Kündigungs- und Widerrufsbutton (§ 312k, § 356a BGB): auf jeder Seite, in eigener Zeile,
   als Schaltfläche mit Rahmen, mindestens 15 px und 44 px Klickfläche. Gleich für HTML- und PHP-Seiten
   (footer.inc.php): <span class="footer-vertrag"><a class="footer-btn" …>…</a> <a class="footer-btn" …>…</a></span> */
.footer-vertrag { flex-basis: 100%; order: -1; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.footer-vertrag .footer-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .42); border-radius: 980px; background: var(--tile-2);
  color: var(--text); font: 600 15px/1.2 var(--font-text); letter-spacing: -.01em; text-decoration: none;
  transition: background-color .2s, border-color .2s;
}
.footer-vertrag .footer-btn:hover { background: #2C2C2E; border-color: var(--text); color: var(--text); }
@media (max-width: 480px) { .footer-vertrag .footer-btn { flex: 1 1 100%; } }

/* Gemeinsame VOD-Quelle: technisch sichtbar, sonst halten Browser die Wiedergabe an */
#vod { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: .01; pointer-events: none; z-index: -1; }

/* --------------------------------------------------------------------------
   Weniger Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-rise], .morph-label span, .ed-thread > *, .ec-text .w, .tl-kf, .bubble, .diff, .w, .mac, .mac-lid { transition: none !important; filter: none !important; }
  .hl .at-clip u, .hl .at-wave u, .hl .at-zoom em, .hl .at-hook b, .hl .mac-playhead { animation: none !important; }
  .at-clip u, .at-wave u { flex-basis: 0; }
  .ec-wave i, .ed-chat.talk .ec-mic, .et-think i, .ei-row.ai b { animation: none; }
  .ec-wave i { height: 60%; }
  .at-zoom em { transform: rotate(45deg) scale(1); }
  .at-hook b { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Impressum und Datenschutz
   -------------------------------------------------------------------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 120px var(--gutter) 96px; }
.legal h1 { font: 600 clamp(40px, 6vw, 64px)/1.05 var(--font-display); letter-spacing: -.03em; margin-bottom: 48px; }
.legal section { padding: 24px 0; border-top: 1px solid var(--line); }
.legal h2 { font: 600 21px/1.3 var(--font-display); letter-spacing: -.02em; margin-bottom: 12px; }
.legal p, .legal li { color: var(--gray); font-size: 17px; line-height: 1.6; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 10px 0 12px; padding-left: 20px; list-style: disc; }
.legal a { color: var(--link); }
.legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal form { margin: 28px 0; }
.legal .btn { color: #000; text-decoration: none; }
.legal-date { margin-top: 32px; font-size: 14px !important; color: var(--gray-dim) !important; }
/* Rechtsseiten der App: Unterabschnitte je Plattform, Pfade und Scopes. Lange
   Wörter („Nutzungsbedingungen“), Pfade und Scope-Adressen dürfen umbrechen,
   sonst schiebt die Seite auf dem Telefon seitwärts. */
.legal h1 { overflow-wrap: break-word; hyphens: auto; }
.legal h3 { font: 600 17px/1.4 var(--font-display); color: var(--text); margin: 22px 0 8px; }
.legal ol { margin: 10px 0 12px; padding-left: 22px; list-style: decimal; }
.legal li + li { margin-top: 6px; }
.legal p, .legal li { overflow-wrap: break-word; }
.legal code { font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); overflow-wrap: anywhere; }
.legal-lead { font-size: 19px !important; color: var(--text) !important; }
.legal > p + section { margin-top: 28px; }
.footer-row a[aria-current="page"] { color: var(--text); }

/* Formulare „Verträge hier kündigen“ und „Vertrag widerrufen“ (kuendigen.php, widerrufen.php, VID-834) */
.vertrag-form { margin: 28px 0; }
.vertrag-form p + p, .vertrag-form fieldset + p, .vertrag-form p + fieldset, .vertrag-form fieldset + fieldset { margin-top: 18px; }
.vertrag-form fieldset { margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; }
.vertrag-form fieldset p + p { margin-top: 10px; }
.vertrag-form legend { padding: 0 6px; font: 600 17px/1.3 var(--font-display); color: var(--text); }
.vertrag-form label { color: var(--gray); font-size: 17px; line-height: 1.5; }
.vertrag-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), .vertrag-form textarea, .vertrag-form select {
  width: 100%; max-width: 560px; margin-top: 6px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--tile-2); color: var(--text);
  font: 400 17px/1.4 var(--font-text); letter-spacing: -.012em; color-scheme: dark;
}
.vertrag-form input[type="date"] { width: auto; min-width: 180px; }
.vertrag-form textarea { min-height: 110px; resize: vertical; }
.vertrag-form input::placeholder, .vertrag-form textarea::placeholder { color: var(--gray-dim); }
.vertrag-form input:focus, .vertrag-form textarea:focus, .vertrag-form select:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 1px var(--link); }
.vertrag-form input[type="radio"], .vertrag-form input[type="checkbox"] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--link); }
.vertrag-form .btn { margin-top: 8px; }
.vertrag-form .wl-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav-brand + .nav-cta { margin-left: auto; }