/* ------------------------------------------------------------------
   Locally landing page — light, warm, lively.
   No external fonts, no images, no third-party assets — everything on
   this page renders from this file + inline SVG. (That's on-message.)
------------------------------------------------------------------- */

:root {
  --bg: #f5efe4;
  --bg-soft: #ede5d6;
  --card: #fffcf6;
  --ink: #211f1a;
  --ink-2: #5d594f;
  --ink-3: #6b6558; /* 5.1:1 on --bg (was #7a7466, 4.06:1 — below WCAG AA for small text) */
  --line: rgba(33, 31, 26, 0.09);
  --line-strong: rgba(33, 31, 26, 0.16);
  --green: #0e9f6e;
  --green-ink: #0a7a54;
  --green-tint: #e8f5ee;
  --red: #e5484d;
  --amber: #d9971e;
  --shadow-sm: 0 1px 2px rgba(33, 31, 26, 0.05);
  --shadow-md: 0 2px 6px rgba(33, 31, 26, 0.05), 0 16px 40px rgba(33, 31, 26, 0.09);
  --shadow-lg: 0 4px 10px rgba(33, 31, 26, 0.06), 0 28px 70px rgba(33, 31, 26, 0.13);
  --font-serif: ui-serif, "New York", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo,
    "JetBrains Mono", Consolas, monospace;
  --radius: 14px;
  --section-bg: var(--bg);
}

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

html {
  color-scheme: only light;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(14, 159, 110, 0.22); }

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

:focus-visible {
  outline: 2px solid rgba(10, 122, 84, 0.8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The nav floats over the page (fixed pill, ~72 px incl. its gap): anchor jumps and keyboard
   focus both stop below it (scroll-padding covers focus scrolling, which scroll-margin does not). */
html { scroll-padding-top: 96px; }

code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
}

.mono { font-family: var(--font-mono); }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow { max-width: 780px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 570;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
}
.btn-primary:hover {
  background: #000;
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  border-color: rgba(33, 31, 26, 0.34);
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-md);
}

.btn-arrow { font-size: 12.5px; opacity: 0.6; }

/* ---------- platform actions ---------- */

.platform-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px;
}
.platform-actions-center { justify-content: center; }
.platform-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 246px;
}
.btn-platform {
  justify-content: center;
  min-width: 246px;
  min-height: 58px;
  padding: 14px 22px;
}
.platform-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 17px;
  color: var(--ink-3);
  font-size: 10.5px;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.platform-status .status-dot { margin-right: 0; }
.app-store-badge {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 246px;
  min-height: 58px;
  padding: 8px 18px;
  border: 1px solid #71746f;
  border-radius: 14px;
  background: #777a75;
  color: #fff;
  font-family: var(--font-sans);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.app-store-badge:disabled {
  cursor: not-allowed;
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.apple-mark {
  width: 27px;
  height: 27px;
  flex: none;
  fill: currentColor;
}
.store-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}
.store-copy small {
  margin-bottom: 3px;
  font-size: 8.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.store-copy strong {
  font-size: 20px;
  font-weight: 590;
  letter-spacing: -0.02em;
}
.hero-privacy-link {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 550;
}
.hero-privacy-link a:hover { color: var(--green-ink); }

/* ---------- nav: see "nav: floating glass pill" further down (redesign B3, 04.10.2026) ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16.5px;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  gap: 24px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.nav-links a { transition: color 0.15s ease; }
.nav-links a:hover { color: var(--ink); }

/* ---------- eyebrow / section heads ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.eyebrow-num { color: var(--green-ink); letter-spacing: 0.08em; }
.eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(14, 159, 110, 0.16);
}
.eyebrow-center { justify-content: center; }

.section { padding: 108px 0; --section-bg: var(--bg); }
.section-alt {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  --section-bg: var(--bg-soft);
}

.section-head { max-width: 680px; margin-bottom: 54px; }
.section-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2, .waitlist h2 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1.12;
  text-wrap: balance;
}
.section-copy {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* ---------- hero ---------- */

.hero-sub {
  font-size: clamp(22px, 2.35vw, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.hero-copy {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
  list-style: none;
}
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  box-shadow: var(--shadow-sm);
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 7px;
}

/* ---------- hero mosaic assets load lazily (app.js) ---------- */

.hero-trust-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 17px;
  margin: 28px auto 0;
  text-align: center;
}
.hero-trust-rail .hero-privacy-link,
.hero-trust-rail .wl-note,
.hero-trust-rail .badges { margin-top: 0; }

/* ---------- hero demo ---------- */

.window {
  background: var(--card);
  border: 1px solid rgba(33, 31, 26, 0.13);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  text-align: left;
}

.win-head {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #f6f3ec;
}
.dots { display: flex; gap: 7px; position: relative; z-index: 1; }
.dots i {
  width: 11.5px; height: 11.5px;
  border-radius: 50%;
}
.dots i:nth-child(1) { background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }
.win-title {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
  pointer-events: none;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--ink);
}
/* blinks four times when its step card comes into view (under five seconds: WCAG 2.2.2), then stays */
@media (prefers-reduced-motion: no-preference) {
  :where(.step.in) .caret { animation: blink 1.1s steps(2, start) 4; }
}
@keyframes blink { 50% { opacity: 0; } }

/* keycaps */
kbd {
  display: inline-block;
  min-width: 28px;
  padding: 4px 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid rgba(33, 31, 26, 0.22);
  border-bottom-width: 3px;
  border-radius: 7px;
  transition: transform 0.12s ease, border-bottom-width 0.12s ease, background 0.12s ease;
}
kbd.pressed {
  transform: translateY(1.5px);
  border-bottom-width: 1px;
  background: var(--bg-soft);
  color: var(--ink);
}
kbd[hidden] { display: none; }

/* the overlay pill */

.rec-dot {
  flex: none;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--red);
}
@keyframes recpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.3); }
  50% { box-shadow: 0 0 0 5px rgba(229, 72, 77, 0.12); }
}

.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  flex: none;
}
.wave i {
  width: 2.5px;
  height: 3px;
  border-radius: 2px;
  background: #b9b3a3;
}
@keyframes wavebar {
  from { height: 3px; }
  to { height: var(--h, 16px); }
}
.wave-static i { background: var(--green); opacity: 0.75; }

.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(14, 159, 110, 0.15);
  vertical-align: 1px;
}

/* ---------- flow ribbon ---------- */

.section-ribbon { padding: 100px 0 72px; overflow: hidden; }
.section-ribbon .section-head { margin-bottom: 10px; }

.ribbon-wrap {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ribbon-svg {
  display: block;
  width: 1400px;
  height: auto;
  margin-left: calc(50% - 700px);
  /* fade at the drawing's own edges too: on screens wider than 1400 px the band used to end in a hard cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

#ribbonInPath, #ribbonOutPath { fill: none; stroke: none; }

.ribbon-band {
  stroke: var(--ink);
  stroke-width: 46;
  stroke-linecap: round;
  fill: none;
}

.ribbon-raw {
  font-family: var(--font-sans);
  font-size: 19px;
  font-style: italic;
  letter-spacing: 0.01em;
  fill: #a89f8a;
}

.ribbon-clean {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 640;
  letter-spacing: 0.01em;
  fill: #faf8f3;
}

.ribbon-pill {
  position: absolute;
  left: 50%;
  top: 61.2%; /* path meeting point (y=232) within the 30–360 viewBox */
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 21px;
  background: var(--card);
  border: 1px solid rgba(33, 31, 26, 0.14);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
}
.ribbon-pill .wave i { background: var(--green); }
/* Endless motion runs only once app.js has set up the pause buttons (html.motion-ok, only when the page was
   loaded with motion allowed) — not on html.js, which the head script sets even if app.js never loads. */
:where(html.motion-ok) .ribbon-pill .wave i {
  animation: wavebar 0.8s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
:where(html.motion-ok) .ribbon-pill .rec-dot { animation: recpulse 1.3s ease-in-out infinite; }

.ribbon-cap {
  margin-top: 4px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
  padding: 0 24px;
}

/* ---------- app marquee ---------- */

.apps-marquee-wrap { padding: 44px 0 52px; }

.marquee-cap {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 16px;
}

.apps-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
}
/* endless motion only once app.js has set up the pause buttons (WCAG 2.2.2, see html.motion-ok above) */
@media (prefers-reduced-motion: no-preference) {
  :where(html.motion-ok) .marquee-track { animation: marquee 38s linear infinite; }
  :where(html.motion-ok) .apps-marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes marquee {
  to { transform: translateX(calc(-50% - 6px)); }
}

.m-group { display: flex; gap: 12px; }

.m-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 520;
  color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.m-chip i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c, var(--ink-3));
}

/* ---------- video section ---------- */

.video-frame {
  position: relative; /* anchors the absolute Listen button to the frame */
  max-width: 920px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  background: #151410; /* fixed dark: in the green theme --ink is cream and flashed as light bars */
}
.video-frame video { display: block; width: 100%; height: auto; }

.video-sound {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(33, 31, 26, 0.14);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 570;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.video-sound:hover { transform: translateY(-1.5px); box-shadow: var(--shadow-lg); }
.video-sound svg {
  width: 17px; height: 17px;
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 0;
}
.video-sound svg .vs-waves {
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.35;
}
.video-sound.on svg .vs-waves { opacity: 1; stroke: var(--green-ink); }
.video-sound.on { color: var(--green-ink); border-color: rgba(14, 159, 110, 0.4); }

/* ---------- flow steps ---------- */

.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.step {
  position: relative;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.step-num {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 12px;
  color: var(--ink-3);
}
.step-visual {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.step h3 { font-size: 16px; font-weight: 640; margin-bottom: 6px; letter-spacing: -0.01em; }
.step p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

.step-chip {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--green-ink);
  border: 1px solid rgba(14, 159, 110, 0.3);
  background: var(--green-tint);
  border-radius: 14px;
  padding: 5px 11px;
  margin-right: 22px; /* keep clear of the step number */
}
.step-insert {
  font-size: 13px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 9px;
  padding: 7px 11px;
  max-width: calc(100% - 26px); /* keep clear of the step number; the sample sentence wraps */
}
.step-insert .caret { margin-right: -4px; } /* the caret never wraps onto a line of its own */

/* ---------- pipeline diagram ---------- */

.pipeline-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}

.machine {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1.5px dashed rgba(10, 122, 84, 0.45);
  border-radius: 20px;
  padding: 30px 14px 16px;
  background: rgba(14, 159, 110, 0.045);
}
.machine-tag {
  position: absolute;
  top: -9px;
  left: 20px;
  padding: 0 8px;
  background: var(--section-bg);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-ink);
  font-weight: 600;
}

.pipe {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.node {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 11px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.node-label { font-size: 12px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.node-cap { font-size: 11px; line-height: 1.4; color: var(--ink-3); }

/* the green pulse travels once node to node when the diagram comes into view — under five seconds
   of motion, so it needs no pause button (WCAG 2.2.2) */
@media (prefers-reduced-motion: no-preference) {
  :where(.pipeline-wrap.in) .pipe .node { animation: nodepulse 4.8s ease-in-out 1; }
  .pipe div.node:nth-of-type(1) { animation-delay: 0.6s; }
  .pipe div.node:nth-of-type(2) { animation-delay: 1.1s; }
  .pipe div.node:nth-of-type(3) { animation-delay: 1.6s; }
  .pipe div.node:nth-of-type(4) { animation-delay: 2.1s; }
  .pipe div.node:nth-of-type(5) { animation-delay: 2.6s; }
  .pipe div.node:nth-of-type(6) { animation-delay: 3.1s; }
}
@keyframes nodepulse {
  0%, 14%, 100% { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
  7% { border-color: rgba(14, 159, 110, 0.65); box-shadow: 0 0 0 4px rgba(14, 159, 110, 0.14), var(--shadow-sm); }
}

.node-opt { position: relative; border-style: dashed; }
.node-tag {
  position: absolute;
  top: -8px;
  right: 10px;
  padding: 0 6px;
  background: var(--section-bg);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-text);
  font-weight: 600;
}

.pipe-arrow {
  align-self: center;
  flex: none;
  color: var(--ink-3);
  font-size: 12px;
}

.cut {
  flex: none;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 5px;
}
.cut-line {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  border-top: 2px dashed rgba(229, 72, 77, 0.55);
}
.cut-mark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 5px;
  background: var(--section-bg);
  color: var(--red);
  font-size: 14px;
  line-height: 1;
}
.cut-cap {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-text);
  white-space: nowrap;
}

.cloud-node {
  flex: none;
  width: 150px;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.cloud-node .node-label { color: var(--ink-2); }

/* ---------- receipts ---------- */

.receipts { margin-top: 56px; }
.receipts-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.receipt-list { border-top: 1px solid var(--line); }
.receipt-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.receipt-row dt {
  font-size: 12.5px;
  color: var(--green-ink);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding-top: 2px;
}
.receipt-row dd { font-size: 15px; color: var(--ink-2); }

/* ---------- apps grid ---------- */

.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.app-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.app-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
  background: #fbf9f4;
}
.app-head .mono { font-size: 12px; color: var(--ink-2); letter-spacing: 0.03em; font-weight: 500; }
.app-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c, var(--ink-3));
}
.app-body {
  padding: 15px 16px 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  min-height: 88px;
}
.app-code { font-size: 12.5px; color: var(--ink-2); }
.app-foot { padding: 0 16px 14px; }
.app-chip {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---------- settings mockup ---------- */

.settings-wrap {
  display: grid;
  grid-template-columns: 1fr 264px;
  gap: 28px;
  align-items: start;
}

.settings {
  display: grid;
  grid-template-columns: 172px 1fr;
  min-height: 430px;
}

.settings-side {
  border-right: 1px solid var(--line);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #f8f5ee;
}
.settings-side span {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.settings-side .active {
  background: var(--card);
  color: var(--ink);
  font-weight: 560;
  box-shadow: var(--shadow-sm);
}

.settings-main { padding: 6px 22px 18px; }

.set-group { padding: 14px 0 6px; }
.set-group + .set-group { border-top: 1px solid var(--line); }
.set-group-title {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
  font-weight: 600;
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
}
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-label { font-size: 14px; font-weight: 520; }
.set-label small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-3);
  margin-top: 2px;
  max-width: 300px;
}

.select, .input {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.chev {
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(45deg) translate(-1px, -1px);
}

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2.5px;
  background: #ece8dc;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
}
.segmented span { padding: 4px 11px; border-radius: 7px; }
.segmented .seg-active {
  background: var(--card);
  color: var(--ink);
  font-weight: 560;
  box-shadow: var(--shadow-sm);
}

.set-row-status { justify-content: flex-end; padding-top: 2px; }
.conn { font-size: 12px; color: var(--green-ink); font-weight: 500; }

.settings-notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-notes li {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.settings-notes li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.settings-notes h3 { font-size: 14.5px; font-weight: 640; margin-bottom: 4px; }
.settings-notes p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* ---------- features ---------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-ic {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--tint, var(--green-tint));
  margin-bottom: 14px;
}
.feature-ic svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: var(--tint-ink, var(--green-ink));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feature h3 { font-size: 16px; font-weight: 640; margin-bottom: 6px; letter-spacing: -0.01em; }
.feature p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* who it's for (#audience): Berufsgruppen + Fakten-Leiste */
.audience-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  list-style: none;
}
.audience-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 560;
  box-shadow: var(--shadow-sm);
}
.audience-facts li::before { content: "✓"; color: var(--green-ink); font-weight: 750; }

/* ---------- platform download cards ---------- */

.platform-download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.platform-download-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.platform-download-card-ios {
  background:
    radial-gradient(420px 210px at 100% 0%, rgba(14, 159, 110, 0.13), transparent 70%),
    var(--card);
  border-color: rgba(14, 159, 110, 0.28);
}
.platform-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}
.platform-card-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.availability {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 620;
}
.availability .status-dot { width: 6px; height: 6px; }
.availability-testflight {
  border-color: rgba(14, 159, 110, 0.24);
  background: var(--green-tint);
  color: var(--green-ink);
}
.platform-download-card h3 {
  font-family: var(--font-serif);
  font-size: clamp(27px, 3.2vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.platform-download-card > p {
  margin-top: 15px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.65;
}
.platform-facts {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  list-style: none;
  color: var(--ink-2);
  font-size: 14px;
}
.platform-facts li {
  position: relative;
  padding-left: 20px;
}
.platform-facts li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green-ink);
  font-weight: 750;
}
.platform-card-action { margin-top: auto; padding-top: 28px; }
.platform-card-action .wl-note { text-align: left; }
.platform-card-action .platform-buy { margin-top: 18px; }
.nobr { white-space: nowrap; }
.final-platform-actions { margin-top: 28px; }

/* ---------- faq ---------- */

.faq { max-width: 732px; border-top: 1px solid var(--line); }

.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  /* Block statt Flex: Frage mit eingebettetem Produktnamen (<span>) zerfiel sonst in drei Flex-Teile, und lange deutsche
     Wörter schoben das Plus über den Rand (waagerechter Bildlauf auf dem Handy, Befund 04.10.). */
  position: relative;
  display: block;
  padding: 20px 34px 20px 0;
  font-size: 16.5px;
  font-weight: 590;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa p {
  padding-bottom: 20px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 64ch;
}
.qa[open] > p { animation: faqopen 0.3s ease; }
@keyframes faqopen {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}
.qa-plus {
  position: absolute;
  right: 0; top: 50%;
  margin-top: -8px;
  width: 16px; height: 16px;
}
.qa-plus::before, .qa-plus::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 1.5px;
  background: var(--ink-3);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.qa-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa-plus::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

/* ---------- waitlist ---------- */

.waitlist { text-align: center; }
.wl-card {
  background:
    radial-gradient(560px 260px at 20% 0%, rgba(14, 159, 110, 0.12), transparent 65%),
    radial-gradient(560px 260px at 85% 10%, rgba(233, 151, 63, 0.1), transparent 65%),
    var(--card);
  border: 1px solid rgba(14, 159, 110, 0.25);
  border-radius: 28px;
  padding: 64px 44px;
  box-shadow: var(--shadow-md);
}
.waitlist .section-copy { max-width: 480px; margin-left: auto; margin-right: auto; }

.wl-note {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 44px;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-fine {
  margin-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ---------- scroll reveal (JS + motion-ok only) ---------- */

/* reveal-ready is set by app.js when its observer runs: if the script fails to load,
   nothing below the hero stays hidden. */
@media (prefers-reduced-motion: no-preference) {
  html.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  html.reveal-ready .reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
  .hero-copy { margin-left: auto; margin-right: auto; }
  .hero-privacy-link { text-align: center; }
}

@media (max-width: 980px) {
  .flow-grid { grid-template-columns: repeat(2, 1fr); }
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .settings-wrap { grid-template-columns: 1fr; }
  .settings-notes { flex-direction: row; }
  .settings-notes li { flex: 1; }
}

@media (max-width: 1080px) {
  .pipeline-wrap { flex-direction: column; align-items: stretch; gap: 0; }
  .pipe { flex-direction: column; gap: 6px; }
  .pipe-arrow { transform: rotate(90deg); padding: 2px 0; }
  .cut {
    width: auto;
    height: 66px;
    flex-direction: row;
    justify-content: center;
    gap: 14px;
    padding: 4px 0;
  }
  .cut-line {
    width: 0;
    height: 100%;
    border-top: none;
    border-left: 2px dashed rgba(229, 72, 77, 0.55);
  }
  .cloud-node { width: auto; }
}

@media (max-width: 760px) {
  .section { padding: 76px 0; }
  .platform-download-grid { grid-template-columns: 1fr; }
  .apps-marquee-wrap { padding: 36px 0 42px; }
  .settings { grid-template-columns: 1fr; min-height: 0; }
  .settings-side {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 8px;
  }
  .settings-side span { white-space: nowrap; font-size: 12.5px; }
  .set-row { flex-wrap: wrap; }
  .settings-notes { flex-direction: column; }
  .receipt-row { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
  .footer-top, .footer-fine { flex-direction: column; align-items: flex-start; }
  .wl-card { padding: 48px 24px; }
}

@media (max-width: 560px) {
  .flow-grid { grid-template-columns: 1fr; }
  .apps-grid { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .hero-ctas { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
  .platform-actions { flex-direction: column; align-items: stretch; }
  .platform-action { width: 100%; min-width: 0; }
  .btn-platform, .app-store-badge { width: 100%; min-width: 0; }
  .devices-points li { grid-template-columns: 1fr; gap: 3px; }
  .platform-download-card { padding: 27px 22px; }
  .platform-card-topline { align-items: flex-start; flex-direction: column; gap: 8px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Brand wordmark (assets/outspoken-logo.png) --- */
.brand-logo-picture{display:block;line-height:0}
.brand-logo{height:26px;width:auto;display:block}

/* --- Download CTA in logo colors: ink button, green text --- */
.btn-download{background:#211f1a;border-color:#211f1a;color:#0fae78}
.btn-download:hover{background:#000;border-color:#000;color:#16c98a}

/* Green theme: switched by the theme button in the nav (data-theme="green",
   founder request 24.09.2026) or forced by an active dark-mode extension. */
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) {
  color-scheme: dark;
  --bg: #0e241b;
  --bg-soft: #122c22;
  --card: #16332a;
  --ink: #f3efe6;
  --ink-2: #d6cfc2;
  --ink-3: #a3ada4;
  --line: rgba(243, 239, 230, 0.12);
  --line-strong: rgba(243, 239, 230, 0.22);
  --green: #43d69a;
  --green-ink: #6ee7b7;
  --green-tint: rgba(67, 214, 154, 0.14);
  --red: #ff6b72;
  --amber: #f0b84a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.26), 0 16px 38px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.3), 0 28px 70px rgba(0, 0, 0, 0.45);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) body {
  background:
    radial-gradient(900px 420px at 50% -18%, rgba(67, 214, 154, 0.12), transparent 68%),
    var(--bg);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) ::selection {
  background: rgba(67, 214, 154, 0.28);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) :focus-visible {
  outline-color: rgba(110, 231, 183, 0.85);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .brand-logo,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .hero-logo {
  content: url("assets/outspoken-logo-dark.png?v=1");
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) code,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .step-insert,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .app-chip {
  background: var(--bg-soft);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .btn-primary {
  background: var(--ink);
  color: var(--bg);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .btn-primary:hover {
  background: #fff8ec;
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .btn-ghost {
  background: rgba(22, 51, 42, 0.9);
  border-color: var(--line-strong);
  color: var(--ink);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .btn-ghost:hover {
  border-color: rgba(243, 239, 230, 0.34);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .badge,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .m-chip,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .step,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .node,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .app-card,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .feature,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .settings-notes li {
  background: var(--card);
  border-color: var(--line);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .window {
  background: #16211c;
  border-color: var(--line);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .win-head,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .app-head {
  background: #141d18;
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) kbd,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .select,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .input,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .wl-form input {
  background: var(--card);
  border-color: var(--line-strong);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) kbd.pressed {
  background: #203128;
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .pill,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .video-sound {
  background: rgba(20, 29, 24, 0.9);
  border-color: var(--line-strong);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .wave i {
  background: #5f6a60;
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .ribbon-band {
  stroke: var(--ink);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .ribbon-raw {
  fill: #9f988d;
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .ribbon-clean {
  fill: var(--bg);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .ribbon-pill {
  background: var(--card);
  border-color: var(--line);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .machine {
  background: rgba(67, 214, 154, 0.08);
  border-color: rgba(110, 231, 183, 0.42);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .segmented {
  background: #111a16;
  border-color: var(--line);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .step-chip {
  background: var(--green-tint);
  border-color: rgba(110, 231, 183, 0.32);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .settings-side {
  background: #121b16;
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .settings-side .active,
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .segmented .seg-active {
  background: var(--card);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .feature-ic {
  background: var(--tint, var(--green-tint));
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .wl-card {
  background:
    radial-gradient(560px 260px at 20% 0%, rgba(67, 214, 154, 0.14), transparent 65%),
    radial-gradient(560px 260px at 85% 10%, rgba(240, 184, 74, 0.1), transparent 65%),
    var(--card);
  border-color: rgba(110, 231, 183, 0.28);
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .btn-download {
  background: #0b0a08;
  border-color: rgba(67, 214, 154, 0.55);
  color: #43d69a;
}

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .btn-download:hover {
  background: #000;
  border-color: #43d69a;
  color: #6ee7b7;
}

/* ---------- any-device showcase (dark band, phone demo) ---------- */

.section-devices {
  position: relative;
  overflow: hidden;
  --section-bg: #101814;
  background: linear-gradient(180deg, #141c16, #0f1712 55%, #101814);
  padding: 124px 0 138px;
  color: #faf8f3;
}

.devices-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}

.dev-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.dev-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid rgba(250, 248, 243, 0.22);
  border-radius: 999px;
  background: rgba(250, 248, 243, 0.05);
  font-size: 13.5px;
  font-weight: 520;
}
.dev-chip .badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(14, 159, 110, 0.25);
}
.dev-chip-live { border-color: rgba(14, 159, 110, 0.55); }
.dev-soon {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.55);
}

.devices-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.8vw, 56px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: #f6efdd;
  text-wrap: balance;
  max-width: 13ch;
}
.devices-sub {
  margin-top: 18px;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(250, 248, 243, 0.74);
}
.devices-points {
  max-width: 50ch;
  margin-top: 25px;
  border-top: 1px solid rgba(250, 248, 243, 0.14);
  list-style: none;
}
.devices-points li {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(250, 248, 243, 0.14);
}
.devices-points strong {
  color: #f6efdd;
  font-size: 13.5px;
  font-weight: 650;
}
.devices-points span {
  color: rgba(250, 248, 243, 0.64);
  font-size: 12.5px;
  line-height: 1.5;
}
.devices-ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.devices-ctas .platform-status { color: rgba(250, 248, 243, 0.58); }
.app-store-badge-dark {
  border-color: rgba(250, 248, 243, 0.26);
  background: #555b57;
}
/* D3 (Founder 04.10.): the download button keeps the end card's look (ink, green text) — on the dark band with the
   green edge the green theme uses, so it does not sink into the background */
.section-devices .btn-download { background: #0b0a08; border-color: rgba(67, 214, 154, 0.55); color: #43d69a; }
.section-devices .btn-download:hover { background: #000; border-color: #43d69a; color: #6ee7b7; }
.btn-light { background: #f6efdd; color: #16130c; }
.btn-light:hover {
  background: #fffdf6;
  transform: translateY(-1.5px);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

.devices-phone { position: relative; z-index: 2; }
.phone-shell {
  width: clamp(240px, 26vw, 312px);
  padding: 9px;
  border-radius: 48px;
  background: #060606;
  box-shadow:
    0 0 0 2px rgba(246, 239, 221, 0.85),
    0 34px 90px rgba(0, 0, 0, 0.55);
}

/* App tiles drifting along an arc behind the content */
.dev-arc { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dev-tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 52px);
  height: var(--s, 52px);
  display: grid;
  place-items: center;
  background: var(--c, #444);
  border-radius: 24%;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
  transform: rotate(var(--r, 0deg));
  opacity: 0.94;
}
.dev-tile svg {
  width: 48%;
  height: 48%;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dev-tile-light svg { stroke: #26231c; }

:where(html.motion-ok) .dev-tile { animation: tileFloat 5.4s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -0.7s); }
@keyframes tileFloat {
  from { transform: rotate(var(--r, 0deg)) translateY(-5px); }
  to   { transform: rotate(var(--r, 0deg)) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  :where(html.motion-ok) .dev-tile { animation: none; }
}
/* Without travelling tiles (reduced motion, no JS) the lower arc would sit behind the small status lines under
   the download buttons: show only the tiles around the phone (Opus check 04.10.) */
html:not(.motion-ok) .dev-arc .dev-tile:nth-child(-n+7) { display: none; }

@media (max-width: 900px) {
  .section-devices { padding: 96px 0; }
  .devices-grid { grid-template-columns: 1fr; }
  .devices-phone { justify-self: center; }
  .phone-shell { width: clamp(230px, 62vw, 290px); }
  .dev-arc { display: none; }
  .devices-title { max-width: none; }
}

/* Tiles travel along the arc like a conveyor. Fixed 1600px canvas
   bottom-anchored and centered in the band — same center-crop trick as the
   flow ribbon. Browsers without offset-path (and reduced-motion users) keep
   the static --x/--y scatter above. */
@media (prefers-reduced-motion: no-preference) {
  @supports (offset-path: path("M 0 0 H 1")) {
    :where(html.motion-ok) .dev-arc {
      inset: auto;
      left: 50%;
      bottom: 0;
      width: 1600px;
      height: 680px;
      margin-left: -800px;
    }
    :where(html.motion-ok) .dev-tile {
      left: 0;
      top: 0;
      offset-path: path("M -140 470 C 60 600, 300 660, 560 610 C 780 568, 920 500, 1060 400 C 1200 300, 1300 210, 1420 130 C 1480 90, 1540 60, 1660 10");
      offset-rotate: 0deg;
      animation: tileTravel 34s linear infinite;
      animation-delay: calc(var(--i, 0) * -2.8333s);
    }
    @keyframes tileTravel {
      from { offset-distance: 0%; }
      to   { offset-distance: 100%; }
    }
  }
}

/* ---------- live pill overlaid on the intro video ---------- */
/* The site's own animated recording pill, laid over the clip's pill area.
   Positioned in % of the 16:9 frame so it scales with the video. */

.video-pill {
  position: absolute;
  left: 35%;
  top: 84.5%;
  width: 28%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(33, 31, 26, 0.12);
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(33, 31, 26, 0.22);
}
.video-pill .wave i { background: var(--green); }
:where(html.motion-ok) .video-pill .wave i {
  animation: wavebar 0.8s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
:where(html.motion-ok) .video-pill .rec-dot { animation: recpulse 1.3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .video-pill .wave i { animation: none; height: var(--h, 10px); }
  .video-pill .rec-dot { animation: none; }
}

/* ---------- typed dictation overlay on the intro clips ---------- */
/* The card bodies in the videos are blank; real HTML text types into
   them in sync with the spoken audio (word timings in app.js).
   Geometry is per clip, in container-query units of the 16:9 frame. */

.video-frame { container-type: inline-size; }

.video-type {
  position: absolute;
  display: none;
  font-family: var(--font-sans);
  color: #1f1f21;
  text-align: left;
}
html.js .video-type.on { display: block; }

.video-type .vt-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--green);
}
:where(html.motion-ok) .video-type .vt-caret { animation: caretblink 1.05s steps(1) infinite; }
@keyframes caretblink { 50% { opacity: 0; } }

.video-type.vt-woman { left: 55.4%; top: 36.4%; width: 36%; font-size: 1.5cqw; line-height: 1.29; }
.video-type.vt-mlap  { left: 63.2%; top: 34.6%; width: 29.5%; font-size: 1.3cqw; line-height: 1.29; }
.video-type.vt-mpho  { left: 66%;   top: 46.1%; width: 19.1%; font-size: 1.5cqw;  line-height: 1.34; }

@media (prefers-reduced-motion: reduce) {
  .video-type .vt-caret { display: none; }
}

/* ---------- devices phone: animated HTML conversation ---------- */
/* Replaces the baked video: bubbles pop in, the reply types itself while
   the panel records. Sizes in cqw so everything scales with the shell. */

.phone-screen {
  aspect-ratio: 9 / 16;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 40px;
  background: linear-gradient(#161618, #0f0f11);
  color: #f2f2f4;
  font-family: var(--font-sans);
}

.pc-head {
  padding: 6.5cqw 0 3.5cqw;
  text-align: center;
  background: #1b1b1e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pc-avatar {
  width: 17cqw;
  height: 17cqw;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 1.6cqw;
}
.pc-name { font-size: 4.2cqw; color: #d7d7dc; }

.pc-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding: 5cqw 4.5cqw;
}
.pc-bubble {
  max-width: 80%;
  padding: 3.2cqw 4.2cqw;
  border-radius: 5.5cqw;
  font-size: 4.4cqw;
  line-height: 1.35;
}
.pc-in  { align-self: flex-start; background: #2a2a2c; border-bottom-left-radius: 1.6cqw; }
.pc-out { align-self: flex-end;   background: #3a3a3d; border-bottom-right-radius: 1.6cqw; }
html.js .pc-bubble {
  opacity: 0;
  transform: translateY(9px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
html.js .pc-bubble.in { opacity: 1; transform: none; }

.pc-reply { position: relative; padding-right: 12cqw; min-width: 34cqw; min-height: 11cqw; }
.pc-caret {
  display: none;
  width: 2px;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--green);
}
:where(html.motion-ok) .pc-caret { animation: caretblink 1.05s steps(1) infinite; }
html.js .pc-reply:not(.done) .pc-caret { display: inline-block; }
.pc-send {
  position: absolute;
  right: 1.8cqw;
  bottom: 1.8cqw;
  width: 8cqw;
  height: 8cqw;
  border-radius: 50%;
  background: var(--green);
  display: grid;
  place-items: center;
}
.pc-send svg { width: 55%; height: 55%; }
html.js .pc-send {
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
html.js .pc-send.show { opacity: 1; transform: none; }

.pc-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  padding: 4.5cqw;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #151518;
}
.pc-x, .pc-mic {
  width: 9cqw;
  height: 9cqw;
  flex: none;
  border-radius: 50%;
  background: #2c2c2f;
  color: #e8e8ec;
  font-size: 3.6cqw;
  display: grid;
  place-items: center;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.pc-mic svg { width: 58%; height: 58%; }
.pc-panel .wave { flex: 1; justify-content: center; height: 8cqw; }
.pc-panel .wave i { background: #3d6b58; }
.pc-panel.rec .wave i { background: var(--green); }
:where(html.motion-ok) .pc-panel.rec .wave i {
  animation: wavebar 0.8s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
.pc-panel.rec .pc-mic {
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(14, 159, 110, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .pc-panel.rec .wave i { animation: none; }
  .pc-caret { animation: none; }
}

/* Typed overlays for the ES/FR/IT clips */
.video-type.vt-es { left: 70.6%; top: 27.2%; width: 20.6%; font-size: 1.56cqw; line-height: 1.33; }
.video-type.vt-fr { left: 62.4%; top: 50.4%; width: 26%;   font-size: 1.46cqw; line-height: 1.32; }
.video-type.vt-it { left: 64.1%; top: 47.1%; width: 24.8%; font-size: 1.67cqw; line-height: 1.34; }

/* ---------- hero carousel: the original films, swipeable ---------- */

.hero-carousel-wrap { position: relative; margin-top: 54px; }

.hero-carousel {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px calc((100% - min(920px, 90vw)) / 2) 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hero-carousel::-webkit-scrollbar { display: none; }

.hc-slide {
  flex: 0 0 min(920px, 90vw);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
html.js .hc-slide { opacity: 0.55; transition: opacity 0.45s ease; }
html.js .hc-slide.is-active { opacity: 1; }

.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 3;
  transition: transform 0.18s ease, background 0.18s ease;
}
.hc-arrow:hover { background: #fff; transform: translateY(calc(-50% - 1.5px)); }
.hc-prev { left: max(14px, calc((100% - 1080px) / 2 - 23px)); }
.hc-next { right: max(14px, calc((100% - 1080px) / 2 - 23px)); }

.hc-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.hc-sound { position: static; }

@media (max-width: 700px) {
  .hc-arrow { display: none; }
  .hero-carousel { gap: 12px; }
}

/* ---------- explainer film section ---------- */
.film-frame {
  max-width: 980px;
  margin: 34px auto 0;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(33, 31, 26, 0.16), 0 4px 18px rgba(33, 31, 26, 0.08);
}
.film-frame video { display: block; width: 100%; height: auto; }
@media (max-width: 700px) {
  .film-frame { border-radius: 16px; margin-top: 24px; }
}

/* film in the hero + clips as own section */
.hero-film-wrap { padding: 0 20px; margin-top: 54px; }
#clips .hero-carousel-wrap { margin-top: 38px; }

/* VoiceLock hero banner (0.10.0) */
.voicelock-banner {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  border-radius: 14px;
  margin: 18px auto 26px;
}

/* ---------- theme button: light <-> green (founder request 24.09.2026) ----------
   Button shape: see "nav: floating glass pill" (B3); the icons swap here. */
/* Moon = "switch to green" (like a dark-mode icon), sun = "back to cream". */
.theme-icon {
  grid-area: 1 / 1;
  width: 19px;
  height: 19px;
  transition: transform 0.35s ease, opacity 0.25s ease;
}
.theme-moon { fill: #0e9f6e; }
.theme-sun {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0;
  transform: rotate(-60deg) scale(0.6);
}
html[data-theme="green"] .theme-moon { opacity: 0; transform: rotate(60deg) scale(0.6); }
html[data-theme="green"] .theme-sun { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .theme-icon { transition: none; } }

/* Green theme: parts that carry fixed light colours outside the theme block */
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .hc-arrow {
  background: rgba(22, 51, 42, 0.94);
  border-color: var(--line-strong);
  color: var(--ink);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .hc-arrow:hover { background: var(--card); }
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .section-devices {
  --section-bg: #0a1c14;
  background: linear-gradient(180deg, #0c2018, #08170f 55%, #0a1c14);
}

/* ---------- footer: legal links (privacy / legal notice, 29.09.2026) ---------- */
.footer-legal a { text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--ink); }

/* ---------- phones: nav and footer fit the screen (02.10.2026) ----------
   Measured at 390 px: the nav button ran 14-26 px past the edge and the
   footer links pushed "FAQ/Fragen" off-screen (sideways scroll). */
.footer .nav-links { flex-wrap: wrap; row-gap: 10px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; }
@media (max-width: 760px) {
  .footer .nav-links { column-gap: 20px; }
}
/* Long file path in the privacy receipts kept phones <= 375 px scrolling sideways. */
.receipt-row dd code { white-space: normal; overflow-wrap: anywhere; }

/* ---------- subpages: buy, thanks, terms, cancel, privacy, legal (02.10.2026) ----------
   Same nav, footer, colours and fonts as the home page; only page bodies differ.
   All paths in these pages are absolute (/styles.css, /assets/…). */

/* Kurze Seiten füllen den Bildschirm: Fusszeile unten, Hintergrund ohne Nahtstelle (grünes Schema) */
body[data-page] {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body[data-page] > main { flex: 1 0 auto; }

.page-hero {
  /* + 72 px: the nav floats over the page since B3 (it used to take 62 px of the flow) */
  padding: calc(clamp(46px, 6vw, 78px) + 72px) 0 clamp(26px, 3.4vw, 40px);
  background:
    radial-gradient(760px 340px at 12% -22%, rgba(14, 159, 110, 0.1), transparent 62%),
    radial-gradient(760px 340px at 88% -18%, rgba(233, 151, 63, 0.1), transparent 62%);
}
.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5.4vw, 58px);
  font-weight: 620;
  letter-spacing: -0.017em;
  line-height: 1.07;
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.page-lead {
  margin-top: 16px;
  max-width: 62ch;
  text-wrap: pretty;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
}
.page-meta {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--ink-3);
}
.page-body { padding: 10px 0 104px; }
.page-narrow { max-width: 720px; }

.page-section { margin-top: 56px; }
.page-section-first,
.doc > :first-child { margin-top: 0; }
.page-section .page-notice { margin-bottom: 0; }
.page-section > h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 620;
  letter-spacing: -0.012em;
  line-height: 1.15;
}
.page-section > p {
  margin-top: 12px;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}
.page-body a.text-link,
.page-section > p a,
.doc a,
.page-notice p a,
.page-lead a,
.page-fine a {
  color: var(--green-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.page-body a.text-link:hover,
.page-section > p a:hover,
.doc a:hover,
.page-notice p a:hover,
.page-lead a:hover,
.page-fine a:hover { text-decoration-thickness: 2px; }

.page-fine {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* notices (purchase / cancellation results) */
.page-notice {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 0 0 26px;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.page-notice[hidden] { display: none; }
.page-notice-ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--green-tint);
  color: var(--green-ink);
}
.page-notice-ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-notice-title {
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
}
.page-notice p { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.page-notice .page-notice-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.page-notice-good { border-color: rgba(14, 159, 110, 0.32); background: linear-gradient(0deg, var(--green-tint), var(--green-tint)), var(--card); }
.page-notice-warn { border-color: rgba(217, 151, 30, 0.42); background: #fbf2de; }
.page-notice-warn .page-notice-ic { background: rgba(217, 151, 30, 0.16); color: #96610f; }

/* buy page */
.buy-form { margin-top: 30px; }
.btn-buy {
  width: 100%;
  justify-content: center;
  min-height: 58px;
  padding: 16px 22px;
  font-size: 16px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
.btn-buy:disabled,
.form-actions .btn:disabled { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }
.trial-card .btn-platform { width: 100%; min-width: 0; }
.trial-card > p { font-size: 15px; }
.page-data {
  margin-top: 20px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-soft);
}
.page-data h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 620;
  letter-spacing: -0.01em;
}
.page-data p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 70ch; }
.page-data p a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }

/* buy page: two plans (monthly / yearly), both prices in Outspoken green, feature table */
.plan-req {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 0 0 20px;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.plan-req-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 4px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ink);
}
.plan-req-title svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--green-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan-req ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.plan-req li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.4;
}
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
.plan-grid .platform-download-card { min-height: 0; }
.plan-card .platform-card-topline { min-height: 30px; }
.plan-card-best {
  background:
    radial-gradient(460px 230px at 100% 0%, rgba(14, 159, 110, 0.13), transparent 70%),
    var(--card);
  border-color: rgba(14, 159, 110, 0.42);
  box-shadow: var(--shadow-md);
}
.plan-name {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.3vw, 26px);
  font-weight: 620;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.plan-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 16px;
}
.plan-price strong {
  font-family: var(--font-serif);
  font-size: clamp(40px, 4.4vw, 50px);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--green);
  font-variant-numeric: lining-nums;
}
.plan-price span { font-size: 16px; color: var(--ink-2); }
.plan-note { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
/* rough EUR/USD amounts under the CHF price (Founder 06.10.2026; filled by app.js / pages.js from /kurse.json) */
.plan-fx { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.plan-fx span { font-variant-numeric: tabular-nums; }
.plan-card .platform-facts { margin-top: 18px; gap: 9px; font-size: 14px; line-height: 1.55; }
.plan-card .buy-form { margin-top: auto; padding-top: 26px; }
.plan-fine { text-align: center; margin: 18px auto 0; max-width: 64ch; }
.plan-more { text-align: center; margin-top: 12px; font-size: 14.5px; font-weight: 600; }
.plan-more a { color: var(--green-text); text-decoration: none; }
.plan-more a:hover { text-decoration: underline; }
.plan-more .btn-arrow { margin-left: 5px; }
.plan-features { margin-top: 64px; }
.plan-features > p { margin-top: 10px; }
.plan-table-wrap {
  margin-top: 26px;
  overflow-x: auto;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.plan-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.plan-table thead th {
  padding: 18px 12px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-2);
}
.plan-table thead th:first-child { text-align: left; padding-left: 24px; }
.plan-table th[scope="row"] {
  padding: 13px 14px 13px 24px;
  text-align: left;
  font-weight: 400;
  vertical-align: top;
}
.plan-table td {
  width: 21%;
  padding: 13px 12px;
  text-align: center;
  vertical-align: middle;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}
.plan-table td:last-child:not(.plan-both) { background: rgba(14, 159, 110, 0.045); }
.plan-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.plan-table tbody + tbody tr:first-child > * { border-top: 1px solid var(--line-strong); }
.plan-table .plan-group > th {
  padding: 22px 24px 8px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.plan-table .plan-group + tr > * { border-top: 0; }
.plan-feature { display: block; font-weight: 620; color: var(--ink); line-height: 1.4; }
.plan-feature-desc { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.plan-check {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-ink);
}
.plan-check svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plan-table td.plan-both { text-align: center; color: var(--ink-2); }
.plan-cell-price {
  display: block;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--green-ink);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
/* nur Jahreslizenz (03.10.): Testphasen-Karte neben dem Plan, Tabelle mit einer Spalte */
.plan-grid .trial-card h3 { font-size: clamp(22px, 2.3vw, 26px); line-height: 1.2; }
.plan-grid .trial-card > p { margin-top: 12px; }
.plan-table-single td { width: 30%; }
.plan-table-single td:last-child:not(.plan-both) { background: none; }
.plan-features + .page-data { margin-top: 56px; }

/* thanks page */
.order-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 26px;
}
.order-box[hidden] { display: none; }
.order-label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.order-code {
  display: inline-block;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
}
.page-steps {
  list-style: none;
  counter-reset: page-step;
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.page-steps li {
  counter-increment: page-step;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.page-steps li::before {
  content: counter(page-step);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(14, 159, 110, 0.26);
  border-radius: 50%;
  background: var(--green-tint);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-ink);
}

/* cancel page */
.cancel-view[hidden],
.cancel-form[hidden] { display: none; }
.cancel-card { max-width: 640px; }
.cancel-card > p { margin-top: 0; }
.field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 620;
  color: var(--ink);
}
.field-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field-input { text-overflow: ellipsis; }
.field-input::placeholder { color: var(--ink-3); opacity: 0.75; }
.field-input:focus {
  outline: none;
  border-color: rgba(14, 159, 110, 0.65);
  box-shadow: 0 0 0 3px rgba(14, 159, 110, 0.16);
}
.field-help { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.form-actions .btn { min-height: 52px; padding: 14px 24px; justify-content: center; }

/* legal documents */
.doc { max-width: 740px; }
.doc > h2 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin: 50px 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(23px, 2.6vw, 28px);
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.doc > h3 { margin: 28px 0 8px; font-size: 16.5px; font-weight: 650; letter-spacing: -0.005em; }
.doc p,
.doc li { font-size: 16px; line-height: 1.7; color: var(--ink-2); overflow-wrap: break-word; }
.doc p + p { margin-top: 12px; }
.doc ul { margin-top: 10px; padding-left: 22px; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--green-ink); }
.doc strong { color: var(--ink); font-weight: 650; }
.doc-summary {
  margin-top: 6px;
  padding: 24px 28px;
  border: 1px solid rgba(14, 159, 110, 0.26);
  border-radius: 20px;
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(14, 159, 110, 0.1), transparent 70%),
    var(--card);
  box-shadow: var(--shadow-sm);
}
.doc-summary-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-ink);
}
.doc-summary ul { margin-top: 10px; }

@media (max-width: 860px) {
  .plan-grid, .buy-lower { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .plan-req { padding: 14px 16px; }
  .plan-req ul { gap: 6px; }
  .plan-req li { font-size: 13px; padding: 5px 10px; }
  .plan-features { margin-top: 52px; }
  .plan-table-wrap { border-radius: 18px; }
  .plan-table { font-size: 14px; }
  .plan-table thead th { padding: 14px 4px; font-size: 10px; letter-spacing: 0.02em; }
  .plan-table thead th:first-child { padding-left: 14px; }
  .plan-table th[scope="row"] { padding: 12px 8px 12px 14px; }
  .plan-table td { width: 21%; padding: 12px 5px; font-size: 12.5px; }
  .plan-table .plan-group > th { padding: 18px 14px 6px; }
  .plan-feature-desc { font-size: 12.5px; }
  .plan-cell-price { font-size: 16px; }
  .page-notice { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 18px 16px; }
  .page-notice-ic { width: 30px; height: 30px; border-radius: 9px; }
  .page-notice-ic svg { width: 17px; height: 17px; }
  .field-input { font-size: 16px; letter-spacing: 0; padding: 13px 14px; }
  .page-data { padding: 22px 20px; }
  .doc-summary { padding: 20px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .page-steps li { padding: 14px; gap: 12px; }
}

/* green theme for the subpages */
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .page-hero {
  background:
    radial-gradient(760px 340px at 12% -22%, rgba(67, 214, 154, 0.16), transparent 62%),
    radial-gradient(760px 340px at 88% -18%, rgba(240, 184, 74, 0.09), transparent 62%);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .doc-summary {
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(67, 214, 154, 0.12), transparent 70%),
    var(--card);
  border-color: rgba(110, 231, 183, 0.28);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .page-notice-good {
  border-color: rgba(110, 231, 183, 0.34);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .page-notice-warn {
  background: rgba(240, 184, 74, 0.1);
  border-color: rgba(240, 184, 74, 0.38);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .page-notice-warn .page-notice-ic {
  background: rgba(240, 184, 74, 0.16);
  color: #f0b84a;
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .page-data { background: var(--bg-soft); }
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .plan-card-best {
  background:
    radial-gradient(460px 230px at 100% 0%, rgba(67, 214, 154, 0.14), transparent 70%),
    var(--card);
  border-color: rgba(110, 231, 183, 0.34);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .plan-table td:last-child:not(.plan-both) {
  background: rgba(67, 214, 154, 0.06);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .plan-table-single td:last-child:not(.plan-both) {
  background: none;
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .field-input { background: var(--bg-soft); }
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .field-input:focus {
  border-color: rgba(110, 231, 183, 0.7);
  box-shadow: 0 0 0 3px rgba(67, 214, 154, 0.18);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .order-code { background: var(--bg-soft); }

/* ==================================================================
   Redesign B3 (founder 04.10.2026): floating glass nav from mockup A and
   the «Kino» hero — 15 photos crossfade on the right, live dictation card.
   Only «Buy Outspoken» is green, deliberately without a shine effect.
   ================================================================== */

:root {
  --bg-rgb: 245, 239, 228;
  --mint: #43d69a;
  --glow: rgba(14, 159, 110, 0.38);
  --glass: rgba(255, 252, 246, 0.66);
  --glass-strong: rgba(255, 252, 246, 0.88);
  --glass-edge: rgba(255, 255, 255, 0.75);
  --glass-hi: rgba(255, 255, 255, 0.7);
  --chip: rgba(255, 255, 255, 0.55);
  --float-1: rgba(33, 31, 26, 0.1);
  --float-2: rgba(33, 31, 26, 0.16);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) {
  --bg-rgb: 14, 36, 27;
  --glow: rgba(67, 214, 154, 0.3);
  --glass: rgba(16, 40, 31, 0.86);
  --glass-strong: rgba(22, 51, 42, 0.92);
  --glass-edge: rgba(243, 239, 230, 0.12);
  --glass-hi: rgba(243, 239, 230, 0.07);
  --chip: rgba(243, 239, 230, 0.06);
  --float-1: rgba(0, 0, 0, 0.26);
  --float-2: rgba(0, 0, 0, 0.36);
}

/* ---------- nav: floating glass pill ---------- */

.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 50;
  width: min(1180px, calc(100% - 32px));
  transform: translateX(-50%);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px var(--float-1);
  transition: top 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.nav.scrolled {
  top: 9px;
  background: var(--glass-strong);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 16px 44px var(--float-2);
}
.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 22px;
}
.nav .brand { flex: none; }
.nav .brand-logo { height: 25px; }
.nav-panel {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.nav .nav-links {
  position: relative;
  gap: 2px;
  margin-left: 10px;
  font-size: 14px;
  font-weight: 560;
  color: var(--ink-2);
}
.nav .nav-links a {
  position: relative;
  z-index: 1;
  padding: 10px 14px;
  border-radius: 999px;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav .nav-links a:hover,
.nav .nav-links a.active { color: var(--green-ink); }
/* the section you are in: a small glowing dot under its link */
.nav .nav-links a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px 3px var(--glow);
}
/* green pill that glides to the link under the pointer (app.js / pages.js) */
.nav-hl {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--green-tint);
  box-shadow: inset 0 0 0 1px rgba(14, 159, 110, 0.2), 0 0 18px rgba(14, 159, 110, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}
.nav .nav-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.theme-toggle,
.nav-menu-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--chip);
  color: var(--green-ink);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.theme-toggle:hover,
.nav-menu-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--green-tint), 0 0 16px var(--glow);
}
.theme-icon { width: 18px; height: 18px; }
.lang-switch {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--ink-2);
  transition: color 0.2s ease, box-shadow 0.25s ease;
}
.lang-switch:hover {
  color: var(--green-ink);
  box-shadow: 0 0 0 4px var(--green-tint);
}
.nav-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 12px 20px;
  border-radius: 999px;
  /* deep enough for white text: >= 4.5:1 at the lightest point (WCAG AA), still the brand green */
  background: linear-gradient(135deg, #0a8459 0%, #0a7a54 50%, #08694a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 1px rgba(10, 122, 84, 0.4), 0 8px 22px var(--glow);
  color: #fff;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.nav-buy:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(10, 122, 84, 0.4), 0 12px 32px var(--glow),
    0 0 0 6px rgba(14, 159, 110, 0.13);
}
/* Founder 06.10.2026: in the green colour scheme the pill stays cream-beige like in day mode («otherwise everything green is too
   much»); links, buttons, phone menu and logo inside it use the day colours. Only the nav gets the day values. Not under the Dark
   Reader extension: it darkens the pill again, so the dark logo would vanish (Opus 06.10.) — there the nav stays as before. */
html[data-theme="green"]:not([data-darkreader-mode]):not([data-darkreader-scheme]) .nav {
  color-scheme: light;
  --ink: #211f1a;
  --ink-2: #5d594f;
  --ink-3: #6b6558;
  --line: rgba(33, 31, 26, 0.09);
  --line-strong: rgba(33, 31, 26, 0.16);
  --card: #fffcf6;
  --green: #0e9f6e;
  --green-ink: #086b49; /* 5.1:1 on the cream pill (#0a7a54 only 4.2:1 there, Opus 06.10.) */
  --green-tint: #e8f5ee;
  --glow: rgba(14, 159, 110, 0.38);
  --chip: rgba(255, 255, 255, 0.55);
  --glass: rgba(245, 239, 228, 0.94);
  --glass-strong: rgba(245, 239, 228, 0.98);
  --glass-edge: rgba(255, 255, 255, 0.55);
  --glass-hi: rgba(255, 255, 255, 0.7);
}
html[data-theme="green"]:not([data-darkreader-mode]):not([data-darkreader-scheme]) .nav .brand-logo {
  content: url("assets/outspoken-logo.png?v=2");
}
/* the green scheme draws every focus ring mint — on the cream pill that is invisible (1.2:1, GLM/Sol/Opus 06.10.) */
html[data-theme="green"]:not([data-darkreader-mode]):not([data-darkreader-scheme]) .nav :focus-visible {
  outline-color: var(--green-ink);
}
/* «Einsatzbereiche» is longer than «Für wen»: between the phone menu (≤ 1040 px) and ~1180 px the German bar did not fit and «EN»
   slid under «Kostenlos testen» (Sol/Opus 06.10., measured 59 px at 1041 px) — tighter links in exactly that range */
@media (min-width: 1041px) and (max-width: 1180px) {
  .nav .nav-links { margin-left: 4px; }
  .nav .nav-links a { padding: 10px 8px; }
}
/* reading progress along the bottom edge of the pill */
.nav-progress {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), var(--mint));
  box-shadow: 0 0 10px var(--glow);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.nav-menu-btn { display: none; color: var(--ink); }
.nav-menu-lines {
  position: relative;
  display: block;
  width: 16px;
  height: 10px;
}
.nav-menu-lines i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top 0.3s ease, transform 0.3s ease;
}
.nav-menu-lines i:first-child { top: 0; }
.nav-menu-lines i:last-child { top: 8px; }
.nav.open .nav-menu-lines i:first-child { top: 4px; transform: rotate(45deg); }
.nav.open .nav-menu-lines i:last-child { top: 4px; transform: rotate(-45deg); }

/* Below 1040 px the link row no longer fits (DE is the longer one): links, colour theme and
   language move into a drop-down under the pill; brand, «Buy» and the menu button stay. */
@media (max-width: 1040px) {
  .nav-inner { gap: 8px; padding: 7px 7px 7px 16px; }
  .nav-menu-btn { display: inline-grid; }
  .nav-buy { margin-left: auto; padding: 10px 15px; font-size: 13.5px; }
  .nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(360px, 100%);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: var(--card);
    box-shadow: 0 24px 60px var(--float-2);
  }
  .nav.open .nav-panel { display: flex; animation: navDrop 0.22s ease-out; }
  .nav .nav-links { flex-direction: column; gap: 2px; margin-left: 0; font-size: 16px; }
  .nav .nav-links a { padding: 13px 16px; }
  .nav .nav-links a:hover { background: var(--green-tint); }
  .nav .nav-links a.active::after { top: 50%; right: 18px; bottom: auto; left: auto; margin: -2.5px 0 0; }
  .nav-hl { display: none; }
  .nav .nav-tools { gap: 8px; margin-left: 0; padding: 10px 6px 2px; border-top: 1px solid var(--line); }
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 420px) {
  .nav .brand-logo { height: 21px; }
  .nav-buy { padding: 9px 13px; font-size: 13px; }
  .nav-menu-btn { width: 38px; height: 38px; }
}
/* very narrow phones: «Buy» stays reachable as «Price» in the menu */
@media (max-width: 359px) {
  .nav-buy { display: none; }
  .nav-menu-btn { margin-left: auto; }
}

/* ---------- hero «Kino» ---------- */

.hero-b3 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}
.hero-film {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -2;
  width: 56%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}
/* The incoming photo fades in on top; the outgoing one stays opaque underneath (no dip to
   the page colour) and keeps its slow zoom running until it is covered. */
.hero-slide { position: absolute; inset: 0; opacity: 0; }
.hero-slide.is-on { z-index: 2; opacity: 1; transition: opacity 1.6s ease; }
.hero-slide.is-leaving { z-index: 1; opacity: 1; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.04);
}
@media (prefers-reduced-motion: no-preference) {
  :where(.hero-b3.is-live) .hero-slide.is-on img,
  :where(.hero-b3.is-live) .hero-slide.is-leaving img { animation: heroKenBurns 7s ease-out forwards; }
}
@keyframes heroKenBurns {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.14) translate(-1.5%, -1%); }
}
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(var(--bg-rgb)) 0%, rgb(var(--bg-rgb)) 45%, rgba(var(--bg-rgb), 0.82) 48.5%,
      rgba(var(--bg-rgb), 0.25) 58%, rgba(var(--bg-rgb), 0) 68%),
    linear-gradient(0deg, rgb(var(--bg-rgb)) 0%, rgba(var(--bg-rgb), 0.9) 5%, rgba(var(--bg-rgb), 0) 22%);
}
.hero-inner {
  position: relative;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 130px 0 90px;
}
/* 46vw keeps the text on the solid part of the veil on narrower desktops */
.hero-text { max-width: min(680px, 46vw); }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  /* 11 px / 0.08em: the German line ends before the photo edge also at 1440-1920 px (contrast) */
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--green-ink);
  white-space: nowrap;
}
.hero-eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--mint));
  box-shadow: 0 0 8px var(--glow);
}
.hero-h1 {
  margin-top: 22px;
  font-family: var(--font-serif);
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.028em;
}
.hero-h1-a,
.hero-h1-b { display: block; white-space: nowrap; }
.hero-h1-b { color: var(--green-ink); }
.hero-b3 .hero-sub {
  margin-top: 24px;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 560;
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
}
.hero-b3 .hero-copy {
  max-width: 30em; /* line ends stay on the solid part of the veil, also at 1440-1920 px */
  margin: 14px 0 0;
  font-size: clamp(16px, 1.3vw, 17.5px);
  line-height: 1.65;
}
.hero-b3 .hero-ctas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  max-width: none;
  margin: 30px 0 0;
}
.hero-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 26px;
  border-radius: 999px;
  background: var(--ink);
  box-shadow: 0 10px 26px rgba(33, 31, 26, 0.22);
  color: var(--bg);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.hero-dl:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(33, 31, 26, 0.28), 0 0 0 5px rgba(33, 31, 26, 0.08);
}
.hero-dl .btn-arrow { font-size: 15px; opacity: 0.9; }
.hero-store {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-family: var(--font-sans);
  text-align: left;
  cursor: default;
}
.hero-store .apple-mark { width: 22px; height: 22px; }
.hero-store .store-copy small {
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-store .store-copy strong { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.hero-meta {
  margin-top: 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-rise {
    opacity: 0;
    transform: translateY(18px);
    animation: heroRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--d, 0s) forwards;
  }
}
@keyframes heroRise { to { opacity: 1; transform: none; } }

/* caption + position dots, bottom right on the photos */
.hero-film-ui {
  position: absolute;
  right: max(24px, calc((100% - 1240px) / 2));
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-cap {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px var(--float-1);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.2;
  color: var(--ink-2);
}
.hero-dots { display: flex; gap: 5px; }
.hero-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 252, 246, 0.7);
  box-shadow: 0 0 0 1px rgba(33, 31, 26, 0.12);
  transition: width 0.4s ease, background 0.4s ease;
}
.hero-dots i.on {
  width: 20px;
  border-radius: 4px;
  background: var(--green);
  box-shadow: 0 0 10px var(--glow);
}

/* live dictation card */
.hero-live {
  position: absolute;
  right: max(32px, calc((100% - 1240px) / 2 + 8px));
  bottom: 96px;
  z-index: 3;
  width: 330px;
  padding: 16px 18px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 26px 60px var(--float-2), 0 0 0 6px rgba(14, 159, 110, 0.08);
  will-change: transform;
}
.hero-live-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--green-ink);
}
.hero-live-rec {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px 3px var(--glow);
}
.hero-live-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 16px;
  margin-left: auto;
}
.hero-live-wave i { width: 3px; border-radius: 2px; background: var(--green); }
.hero-live-wave i:nth-child(1) { height: 6px; animation-delay: -0.2s; }
.hero-live-wave i:nth-child(2) { height: 13px; animation-delay: -0.5s; }
.hero-live-wave i:nth-child(3) { height: 9px; animation-delay: -0.1s; }
.hero-live-wave i:nth-child(4) { height: 15px; animation-delay: -0.7s; }
.hero-live-wave i:nth-child(5) { height: 7px; animation-delay: -0.3s; }
.hero-live-text {
  min-height: 68px;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.hero-live-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--green);
}
.hero-live small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}
/* endless motion only while app.js runs — that is when the pause button works (WCAG 2.2.2) */
@media (prefers-reduced-motion: no-preference) {
  .hero-b3.is-live .hero-live-rec { animation: heroBreath 1.6s ease-in-out infinite; }
  .hero-b3.is-live .hero-live-wave i { animation-name: heroWave; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
  .hero-b3.is-live .hero-live-caret { animation: heroBlink 1s steps(1) infinite; }
}
@keyframes heroBreath { 50% { box-shadow: 0 0 3px 1px rgba(14, 159, 110, 0.3); opacity: 0.7; } }
@keyframes heroWave { 50% { transform: scaleY(0.35); } }
@keyframes heroBlink { 50% { opacity: 0; } }

/* film, trust rail and app marquee follow right under the hero */
.hero-after { padding-top: 8px; }

html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .hero-dl {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .hero-dl:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36), 0 0 0 5px rgba(243, 239, 230, 0.1);
}

@media (max-width: 1280px) {
  .hero-eyebrow { white-space: normal; }
}
/* phones and small tablets: photos on top, text below, card under the text */
@media (max-width: 860px) {
  .hero-b3 { display: block; min-height: 0; padding-bottom: 12px; overflow: visible; }
  .hero-film {
    position: relative;
    width: 100%;
    height: min(62vh, 480px);
    transform: none !important;
  }
  .hero-slide img { object-position: 50% 25%; }
  .hero-veil {
    bottom: auto;
    height: min(62vh, 480px);
    background:
      linear-gradient(0deg, rgb(var(--bg-rgb)) 0%, rgba(var(--bg-rgb), 0.75) 14%, rgba(var(--bg-rgb), 0) 40%),
      linear-gradient(180deg, rgba(var(--bg-rgb), 0.6) 0%, rgba(var(--bg-rgb), 0) 22%);
  }
  .hero-film-ui { top: calc(min(62vh, 480px) - 64px); right: 14px; bottom: auto; }
  .hero-inner { width: calc(100% - 36px); padding: 6px 0 20px; }
  .hero-text { max-width: none; }
  .hero-h1 { font-size: clamp(34px, 11vw, 44px); }
  .hero-b3 .hero-ctas > * { flex: 1 1 100%; justify-content: center; }
  .hero-live {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 36px);
    margin: 22px auto 0;
    transform: none !important;
  }
}

/* Print (terms, privacy …): a fixed nav repeats on every printed page and covers text, the photo
   film and live card are screen-only. */
@media print {
  .nav,
  .hero-film,
  .hero-veil,
  .hero-film-ui,
  .hero-live { display: none; }
  .page-hero { padding-top: clamp(46px, 6vw, 78px); }
  .hero-b3 { display: block; min-height: 0; }
  .hero-inner { padding: 24px 0; }
  .hero-text { max-width: none; }
}

/* Without JavaScript (no "js" class from the inline head script) the menu button cannot open the
   list: show the links, colour theme and language right inside the pill instead. */
@media (max-width: 1040px) {
  html:not(.js) .nav { border-radius: 26px; }
  html:not(.js) .nav-inner { flex-wrap: wrap; }
  html:not(.js) .nav-menu-btn { display: none; }
  html:not(.js) .nav-panel {
    position: static;
    order: 3;
    display: flex;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    padding: 2px 0 4px;
    border: 0;
    background: none;
    box-shadow: none;
  }
  html:not(.js) .nav .nav-links { flex-direction: row; flex-wrap: wrap; font-size: 14px; }
  html:not(.js) .nav .nav-links a { padding: 8px 10px; }
  html:not(.js) .nav .nav-tools { padding: 0; border-top: 0; }
}

/* Low windows (phone held sideways): the drop-down scrolls inside itself instead of running off-screen. */
@media (max-width: 1040px) {
  html.js .nav-panel {
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  @supports (height: 100dvh) {
    html.js .nav-panel { max-height: calc(100dvh - 96px); }
  }
}

/* One pause for everything that moves (WCAG 2.2.2). Every pause button on the page switches the same
   state (html.motion-paused, set by app.js): hero photos and live card, the films, the app band, the
   ribbon, the phone demo and the floating tiles stop together and start again together. */
.motion-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px var(--float-1);
  color: var(--ink-2);
  cursor: pointer;
  transition: box-shadow 0.25s ease, color 0.2s ease;
}
.motion-btn:hover { color: var(--green-ink); box-shadow: 0 0 0 4px var(--green-tint), 0 8px 20px var(--float-1); }
.motion-ic { grid-area: 1 / 1; width: 13px; height: 13px; fill: currentColor; }
.motion-ic-go,
html.motion-paused .motion-ic-stop { display: none; }
html.motion-paused .motion-ic-go { display: block; }
html.motion-paused :is(.hero-slide img, .hero-live-rec, .hero-live-wave i, .hero-live-caret, .marquee-track, .rec-dot,
  .wave i, .caret, .vt-caret, .pc-caret, .dev-tile, .pipe .node) { animation-play-state: paused; }

/* films: same look as «Listen» next to it */
.hc-pause {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(33, 31, 26, 0.14);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}
.hc-pause .motion-ic { width: 14px; height: 14px; }
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .hc-pause {
  background: rgba(20, 29, 24, 0.9);
  border-color: var(--line-strong);
}
/* app band and ribbon: the button follows the caption */
.marquee-cap,
.ribbon-cap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.marquee-cap { padding: 0 24px; }
.marquee-pause,
.ribbon-pause { width: 26px; height: 26px; }
.marquee-pause .motion-ic,
.ribbon-pause .motion-ic { width: 11px; height: 11px; }
/* devices band: under the phone */
.phone-pause { display: grid; margin: 22px auto 0; }
.motion-btn[hidden] { display: none; }

/* Without JavaScript the pill wraps to several rows on phones: keep it in the page flow instead of floating
   over the title (measured 04.10.: a fixed pill covered subpage titles by 28-41 px). */
@media (max-width: 1040px) {
  html:not(.js) .nav {
    position: relative;
    top: auto;
    left: auto;
    margin: 16px auto 0;
    transform: none;
  }
  html:not(.js) .page-hero { padding-top: clamp(46px, 6vw, 78px); }
}

/* Caption, dots and pause button on narrow phones: never wider than the photo (the pause button
   keeps its size; the caption shortens with an ellipsis before anything is cut off). */
.hero-film-ui { max-width: calc(100% - 28px); }
.hero-pause,
.hero-dots { flex: none; }
.hero-cap {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .hero-film-ui { gap: 8px; }
  .hero-dots { gap: 4px; }
  .hero-dots i { width: 5px; height: 5px; }
  .hero-dots i.on { width: 14px; }
}
@media (max-width: 359px) {
  .hero-dots { display: none; }
}

/* ==================================================================
   Sofort-Fixes aus der Fehlersuche (04.10.2026, Behebungsplan)
   ================================================================== */

/* colour tokens for small coloured text (WCAG AA on cream and on --bg-soft) */
:root {
  --amber-text: #8a5f0d;
  --red-text: #b23a3e;
  --green-text: #086b49;
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) {
  --amber-text: #f0b84a;
  --red-text: #ff8a8f;
  --green-text: var(--green-ink);
}
.section-alt .eyebrow-num { color: var(--green-text); }
/* keyboard focus stays visible on the dark devices band */
.section-devices :focus-visible { outline-color: #6ee7b7; }

/* rules that lost to the cascade */
@media (max-width: 760px) {
  .devices-points li { grid-template-columns: 1fr; gap: 3px; }
}
.cancel-card .field-help { margin-top: 12px; }
.doc .doc-summary-title { font-size: 11.5px; line-height: 1.4; color: var(--green-ink); }
.btn-ghost.btn-download {
  background: var(--card);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost.btn-download:hover { background: var(--card); border-color: rgba(33, 31, 26, 0.34); color: var(--ink); }

/* Print: everything visible, light colours, no shadows, no moving media */
@media print {
  :root,
  html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) {
    color-scheme: light;
    --bg: #fff;
    --bg-soft: #f6f2ea;
    --card: #fff;
    --ink: #211f1a;
    --ink-2: #3d3a33;
    --ink-3: #5a554a;
    --line: rgba(33, 31, 26, 0.16);
    --line-strong: rgba(33, 31, 26, 0.26);
    --green: #0a7a54;
    --green-ink: #0a7a54;
    --green-tint: #e8f5ee;
    --green-text: #086b49;
    --amber-text: #8a5f0d;
    --red-text: #b23a3e;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }
  html body { background: #fff; }
  html.reveal-ready .reveal { opacity: 1; transform: none; }
  *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
  .hero-film-wrap,
  .hero-carousel-wrap,
  .apps-marquee-wrap,
  .section-ribbon .ribbon-wrap,
  .devices-phone,
  .motion-btn,
  video { display: none; }
  /* dark bands and dark-theme panels print on white, also with «background graphics» switched on */
  .section-devices,
  .section-devices *,
  html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) body * {
    background-color: transparent !important;
    background-image: none !important;
  }
  .section-devices { color: var(--ink); }
  .hero-dl, .btn-primary, .btn-download, .app-store-badge, .hero-store {
    background: none !important;
    color: var(--ink) !important;
    border: 1px solid var(--line-strong) !important;
  }
  .app-store-badge *, .hero-store * { color: var(--ink) !important; }
  .section-devices :is(h2, h3, p, li, strong, span, .devices-sub, .devices-title) { color: var(--ink); }
  .brand-logo,
  html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .brand-logo { content: url("assets/outspoken-logo.png?v=2"); }
}

/* One content edge on desktop (D4, Founder 04.10.): the logo in the floating pill, the hero text and every
   left-aligned section start on the same line — 1240 px of content, at least 39 px from the window edge,
   which is where the logo sits inside the pill when the pill is at its narrowest (16 px pill margin +
   1 px border + 22 px padding; on wide screens the pill is 1286 px = 1240 + 2 × 23). */
@media (min-width: 1041px) {
  .nav { width: min(1286px, calc(100% - 32px)); }
  .hero-inner { width: min(1240px, calc(100% - 78px)); }
  .container { max-width: 1318px; padding: 0 39px; }
  .container.container-narrow { max-width: 810px; }
  .hero-live { right: max(47px, calc((100% - 1240px) / 2 + 8px)); } /* 8 px inside the content edge */
}
/* The logo PNG starts with a transparent margin (109 of its 1488 px width): shift the picture so the visible
   «O» stands on the edge, at every logo height (Opus check 04.10.: it stood 9–10 px to the right). */
.brand-logo { translate: -7.33% 0; }


/* =====================================================================================================
   BAU NACH MOCKUP B «schlicht» (Founder-Freigaben 05./06.10.2026; design/mockups-0510, Marken B0–B7 und R1–R11)
   Teil 1 aus mockup.css (ohne die Variante-A-Bereiche), Teil 2 aus mockup-b.css (ohne das Mockup-Werkzeug).
   ===================================================================================================== */
/* =====================================================================================================
   Mockup «Stufe 1 + 2», Fassung 2 (05.10.2026) — legt sich über das ECHTE styles.css (v43).
   Abschnitte 1–9 sind die Bauanleitung: genau diese Regeln wandern später ins echte styles.css.
   Abschnitt M (mk-…) ist nur Mockup-Werkzeug (Leiste, Marken, Freigabe) und wird NICHT gebaut.
   Knöpfe: unverändert nach dem Briefing (126 Punkte, D3). Nur «Film ansehen» ist neu und trägt den Stil der Schlusskarte.
   ===================================================================================================== */

/* ---------- 1 · Weiches Scrollen (Lenis) — S1.1 -------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
html.motion-paused { scroll-behavior: auto; }   /* «Alle Animationen anhalten» hält auch das Gleiten zu Ankern an (GLM-Prüfung 06.10.) */
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }

/* ---------- 2 · Erkennungsform «Sprechblase» (Founder 05.10.: «Sprechblase hier verwenden») — S2.1 ----- */
:root {
  --shape-r: clamp(32px, 4.4vw, 64px);          /* drei grosse Rundungen */
  --shape-t: clamp(8px, 0.8vw, 12px);           /* die kleine Ecke unten links (Sprechblasen-Spitze): Bilder, Film */
  --shape-tb: clamp(14px, 1.6vw, 24px);         /* dieselbe Ecke bei grossen Blöcken */
  --shape: var(--shape-r) var(--shape-r) var(--shape-r) var(--shape-t);
  --shape-block: var(--shape-r) var(--shape-r) var(--shape-r) var(--shape-tb);
  --block-gap: 28px;
}
.shape { border-radius: var(--shape); }



/* ---------- 5 · Scroll-Moment «Ablauf bleibt stehen» — S2.5 ---------------------------------------------- */
.flow-pin { display: none; }
@media (min-width: 901px) {
  html.motion-ok .flow-pin { display: block; }
  html.motion-ok .flow-fallback { display: none; }
}
.flow-pin-track { position: relative; height: 400vh; margin-top: -8px; }      /* 300 vh festgehalten: Schritte 1–3 je ≈ 56 vh, Schritt 4 (Text wird geschrieben) ≈ 133 vh */
.flow-pin-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: 84px; }
.flow-pin-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.flow-rail { --p: 0; position: relative; list-style: none; padding-left: 58px; }
.flow-rail::before, .flow-rail::after { content: ""; position: absolute; z-index: 0; left: 17px; top: 18px; width: 2px; border-radius: 2px; }
.flow-rail::before { bottom: 18px; background: var(--line-strong); }
.flow-rail::after { height: calc((100% - 36px) * var(--p)); background: var(--green); }
.flow-rail li { position: relative; z-index: 1; padding: 14px 0 16px; opacity: 0.58; transition: opacity 0.4s ease; }
.flow-rail li.is-active { opacity: 1; }
.flow-rail li.is-done { opacity: 0.75; }
.fr-num {
  position: absolute;
  left: -58px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg);
  font-size: 13px;
  color: var(--ink-2);
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.flow-rail li.is-done .fr-num { border-color: var(--green); color: var(--green-ink); }
.flow-rail li.is-active .fr-num { background: var(--green); border-color: var(--green); color: #052d1f; transform: scale(1.12); }
.flow-rail h3 { font-family: var(--font-serif); font-size: clamp(24px, 2.5vw, 34px); font-weight: 630; line-height: 1.12; letter-spacing: -0.018em; margin: 0; }
.flow-rail p { max-height: 0; overflow: hidden; margin-top: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--ink-2); max-width: 34em; transition: max-height 0.5s ease, margin-top 0.4s ease; }
.flow-rail li.is-active p { max-height: 8em; margin-top: 10px; }

.flow-stage {
  position: relative;
  aspect-ratio: 5 / 4.3;
  min-height: 380px;
  max-height: calc(100vh - 150px);
  width: 100%;
  background: radial-gradient(120% 90% at 85% 0%, #1b4a38 0%, #0f2d21 55%, #0a2017 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: #f3efe6;
  container-type: inline-size;
}
.fs-window { position: absolute; left: 50%; top: 8%; width: 82%; translate: -50% 0; background: #fffcf6; color: #211f1a; border-radius: 14px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42); overflow: hidden; }
.fs-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #efe9dc; border-bottom: 1px solid rgba(33, 31, 26, 0.08); }
.fs-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d8d1c2; }
.fs-bar i:nth-child(1) { background: #ff5f57; }
.fs-bar i:nth-child(2) { background: #febc2e; }
.fs-bar i:nth-child(3) { background: #28c840; }
.fs-title { margin-left: 10px; font-size: 12.5px; color: #6b6558; }
.fs-fields div { display: flex; gap: 14px; padding: 9px 16px; border-bottom: 1px solid rgba(33, 31, 26, 0.08); font-size: 13.5px; }
.fs-fields b { width: 54px; font-weight: 500; color: #8a8374; }
.fs-body { min-height: 104px; padding: 18px 16px 56px; font-size: clamp(15px, 3.7cqw, 20px); line-height: 1.5; }
.fs-typed { display: inline-block; clip-path: inset(0 100% 0 0); }
.fs-body .caret { opacity: 0; background: #211f1a; }
.fs-raw {
  position: absolute;
  left: 7%;
  bottom: 31%;
  max-width: 64%;
  padding: 13px 20px;
  border-radius: 24px 24px 24px 6px;
  background: rgba(243, 239, 230, 0.13);
  border: 1px solid rgba(243, 239, 230, 0.26);
  color: #e4ddcf;
  font-size: clamp(13px, 3.1cqw, 16px);
  font-style: italic;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
}
.fs-raw span { display: inline-block; clip-path: inset(0 100% 0 0); }
.fs-chip { position: absolute; left: 7%; right: 7%; bottom: 19%; padding: 8px 14px; border-radius: 14px; border: 1px solid rgba(110, 231, 183, 0.4); background: rgba(67, 214, 154, 0.14); color: #6ee7b7; font-size: 11.5px; line-height: 1.5; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.fs-dock { position: absolute; inset: auto 0 6% 0; display: flex; justify-content: center; }
.fs-pill { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; background: #060a08; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(18px) scale(0.96); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.fs-pill .rec-dot { background: #ff6b72; }
.fs-pill .wave i { background: #43d69a; height: 4px; }
.fs-key { position: absolute; right: 5.5%; bottom: 7.5%; min-width: 0; padding: 9px 18px; font-size: clamp(12px, 2.6cqw, 15px); background: #16332a; color: #f3efe6; border-color: rgba(243, 239, 230, 0.3); transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.3s ease, border-bottom-width 0.2s ease; }
.flow-stage[data-step="1"] .fs-pill, .flow-stage[data-step="2"] .fs-pill, .flow-stage[data-step="3"] .fs-pill { opacity: 1; transform: none; }
.flow-stage[data-step="1"] .fs-key, .flow-stage[data-step="2"] .fs-key { transform: translateY(2px); border-bottom-width: 1px; background: #43d69a; color: #052d1f; box-shadow: 0 0 0 7px rgba(67, 214, 154, 0.22); }
.flow-stage[data-step="2"] .fs-raw, .flow-stage[data-step="3"] .fs-raw { opacity: 1; transform: none; }
.flow-stage[data-step="3"] .fs-raw { opacity: 0.55; filter: blur(0.4px); }
.flow-stage[data-step="2"] .fs-raw span { animation: fsType 2.6s steps(48, end) 0.15s forwards; }
.flow-stage[data-step="3"] .fs-raw span { clip-path: inset(0 0 0 0); }
.flow-stage[data-step="3"] .fs-chip { opacity: 1; transform: none; }
.flow-stage[data-step="4"] .fs-typed { animation: fsType 1.3s steps(33, end) 0.25s forwards; }
.flow-stage[data-step="4"] .fs-body .caret { opacity: 1; animation: blink 1.1s steps(2, start) 5; }
:where(html.motion-ok) .flow-stage[data-step="2"] .fs-pill .wave i { animation: wavebar 0.8s ease-in-out infinite alternate; animation-delay: var(--d, 0s); height: var(--h, 12px); }
.flow-stage[data-step="1"] .fs-pill .wave i { height: 5px; }
.flow-stage[data-step="3"] .fs-pill .wave i { height: 4px; opacity: 0.5; }
@keyframes fsType { to { clip-path: inset(0 0 0 0); } }

/* ---------- 6 · Farbblöcke — S2.2 / S2.3 / S2.4 / S2.8 -------------------------------------------------- */
.section-block { padding: var(--block-gap) 0; background: transparent; border: 0; }
.block {
  position: relative;
  width: min(1400px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(56px, 8vw, 128px) clamp(22px, 6vw, 96px);
  border-radius: var(--shape-block);
  overflow: clip;                /* clip statt hidden: sonst wird der Block zum Scroll-Container und «sticky» in ihm tot */
  background: var(--bg);
  color: var(--ink);
}
.block-inner { position: relative; max-width: 1240px; margin: 0 auto; }

/* Jeder Block setzt ALLE Farb-Token neu — auch die der Beschriftungen im Datenfluss-Diagramm (--section-bg, --red-text, …) */
/* «Nacht»: hell = Tiefgrün, grün = Papier (umgekehrt) */
.block[data-tone="night"] {
  --bg: #0e241b; --bg-soft: #122c22; --card: #16332a; --ink: #f3efe6; --ink-2: #d6cfc2; --ink-3: #a3ada4;
  --line: rgba(243, 239, 230, 0.12); --line-strong: rgba(243, 239, 230, 0.22);
  --green: #43d69a; --green-ink: #6ee7b7; --green-tint: rgba(67, 214, 154, 0.14);
  --section-bg: #0e241b; --green-text: #6ee7b7; --red-text: #ff8a8f; --amber-text: #f0b84a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.26), 0 16px 38px rgba(0, 0, 0, 0.34);
  background: radial-gradient(900px 460px at 82% -12%, rgba(67, 214, 154, 0.2), transparent 70%), #0e241b;
}
html[data-theme="green"] .block[data-tone="night"] {
  --bg: #f3efe6; --bg-soft: #ebe4d5; --card: #fffcf6; --ink: #211f1a; --ink-2: #4d493f; --ink-3: #5f594c;
  --line: rgba(33, 31, 26, 0.09); --line-strong: rgba(33, 31, 26, 0.17);
  --green: #0e9f6e; --green-ink: #0a7a54; --green-tint: #e8f5ee;
  --section-bg: #f3efe6; --green-text: #086b49; --red-text: #b23a3e; --amber-text: #8a5f0d;
  --shadow-sm: 0 1px 2px rgba(33, 31, 26, 0.05); --shadow-md: 0 2px 6px rgba(33, 31, 26, 0.05), 0 16px 40px rgba(33, 31, 26, 0.09);
  background: radial-gradient(900px 460px at 82% -12%, rgba(14, 159, 110, 0.12), transparent 70%), #f3efe6;
}

/* Regeln des grünen Schemas dürfen nicht in Blöcke mit hellen Tönen durchschlagen */
html[data-theme="green"] .block[data-tone="night"] .btn-ghost,
html[data-theme="green"] .block[data-tone="signal"] .btn-ghost { background: var(--card); color: var(--ink); }
html[data-theme="green"] .block[data-tone="night"] .machine { background: rgba(14, 159, 110, 0.07); border-color: rgba(10, 122, 84, 0.4); }
html[data-theme="green"] .block[data-tone="night"] .wave i { background: #b9b3a3; }

.section-head .statement, .statement { font-family: var(--font-serif); font-weight: 640; font-size: clamp(40px, 6.4vw, 92px); line-height: 1; letter-spacing: -0.032em; text-wrap: balance; max-width: 14em; }
.statement .w { transition: opacity 0.25s linear; }
.statement.is-scrub .w { opacity: var(--o, 0.2); }
.statement-head { max-width: none; margin-bottom: clamp(36px, 5vw, 72px); }
.statement-head .eyebrow-num { color: var(--green-ink); }
.privacy-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; margin-bottom: clamp(52px, 6vw, 96px); }
.privacy-key { position: sticky; top: 130px; }
.pk-line { font-family: var(--font-serif); font-size: clamp(30px, 3.6vw, 52px); font-weight: 630; line-height: 1.1; letter-spacing: -0.022em; color: var(--ink); text-wrap: balance; }
@media (max-width: 900px) { .privacy-split { grid-template-columns: 1fr; } .privacy-key { position: static; } }
.privacy-lines { list-style: none; max-width: none; margin: 0; border-top: 1px solid var(--line-strong); }
.privacy-lines li { padding: 18px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); }
.privacy-lines li code { font-size: 0.82em; }
.privacy-lines li.pl-big { padding: 26px 0; font-family: var(--font-serif); font-size: clamp(26px, 3vw, 40px); font-weight: 620; line-height: 1.18; letter-spacing: -0.016em; color: var(--green-ink); }
.block .pipeline-wrap { margin-top: 0; }
.block .receipts { margin-top: clamp(48px, 6vw, 88px); }
.block .receipts-title { font-size: 13px; }

.vl { color: var(--green-ink); }                                                              /* «VoiceLock» im Text grün (Founder 05.10.) */




/* ---------- 9 · Kleinigkeiten, die der Umbau braucht --------------------------------------------------- */
@media (min-width: 901px) { html.motion-ok #flow.section { padding-bottom: 0; } }      /* nur wo die festgehaltene Bühne steht; die vier Karten (Handy, ohne Bewegung) behalten den normalen Abstand */

/* =====================================================================================================
   Mockup Variante B «schlicht» (Fassung 3, 05.10.2026) — legt sich nach mockup.css (in B OHNE die A-Bereiche /*@A … */) über das ECHTE styles.css (v43).
   Founder 05.10.: «die Seite sieht etwas überfüllt aus … die Originalseite war einfacher und schlichter … ein schöner Fade-in von links
   und einmal von rechts … baue die neue Version nicht als Ersatz sondern als Variante, damit ich wählen kann».
   B = die heutige Seite + wenige ruhige Zusätze: weiches Scrollen (mockup.js), Film-Abschnitt mit ECHTEM Film und Endkarte (F),
   Einblenden von links und rechts (E), festgehaltener Ablauf (mockup.css), EIN abgesetzter Farbblock (Datenschutz), «VoiceLock» grün.
   Schrift, Abstände, Geräte-Band, Preis, VoiceLock: unverändert aus styles.css — die A-Regeln dafür werden im Bau von B gar nicht erst geladen.
   M ist Mockup-Werkzeug und wird NICHT gebaut.
   ===================================================================================================== */

/* ---------- P · Der eine abgesetzte Block (Datenschutz): Aussage ruhiger als in A (bis 66 statt 92 px) ----------------- */
html:root .section-head .statement,
html:root .statement { font-size: clamp(34px, 4.8vw, 66px); line-height: 1.04; }
html:root .pk-line { font-size: clamp(26px, 3vw, 42px); }
html:root .privacy-lines li { font-size: clamp(16px, 1.35vw, 18px); }
html:root .privacy-lines li.pl-big { font-size: clamp(22px, 2.4vw, 32px); }
html:root .block { padding-block: clamp(48px, 6vw, 96px); }

/* ---------- O · Seitwärts verschobene Elemente dürfen nie eine waagerechte Bildlaufleiste erzeugen -------- */
html:root .section { overflow-x: clip; }

/* ---------- F · Film-Abschnitt mit ECHTEM Film — S1.2 / S1.3 --------------------------------------------- */
/* Aufbau: Rahmen (Sprechblase) = Bildfläche (16:9) + Steuerleiste DARUNTER. Die Leiste liegt nie auf dem Bild: Untertitel, Endkarte und Bildinhalt
   bleiben frei, und die Schrift der Leiste steht immer auf dunklem Grund (Kontrast). */
html:root .film-section { padding: clamp(56px, 7vw, 104px) 0 clamp(32px, 4vw, 64px); }
html:root .film-section .section-head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.film-wrap { --fp-h: 54px; position: relative; container-type: inline-size; max-width: 1040px; margin: 0 auto; }
html:root .film-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  border-radius: var(--shape);
  background: #101a15;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.film-frame:focus { outline: none; }
.film-stage { position: relative; aspect-ratio: 16 / 9; background: #f3efe6; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #f3efe6; }
.film-frame .film-video { height: 100%; }   /* schlägt die alte Regel .film-frame video { height: auto } — im Vollbild sonst oben angeschlagen (Opus-Prüfung 06.10.) */
.film-endcard { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.7s ease; }
.film-frame[data-state="end"] .film-endcard { opacity: 1; }
/* «Film ansehen»: der einzige neue Knopf — im Stil der Schlusskarte (schwarz, grüne Schrift), gross */
.film-play { position: absolute; left: 50%; bottom: 9%; translate: -50% 0; z-index: 3; gap: 12px; padding: 14px 28px 14px 22px; font-size: 17px; line-height: 1.15; text-align: left; }
.film-play svg { flex: none; width: 24px; height: 24px; fill: currentColor; }
.film-play small { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.film-play[data-fail] small { display: block !important; }
.film-frame:not([data-state="idle"]) .film-play { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .film-play, html:not(.js) .fp-bar { display: none; }      /* ohne Skript: native Leiste des Browsers */
/* Steuerleiste (eine Zeile): Abspielen · Zeit · Position · Untertitel · Ton · Vollbild */
.fp-bar { flex: none; display: flex; align-items: center; gap: 6px; min-height: var(--fp-h); padding: 4px clamp(26px, 4.2vw, 50px) 4px clamp(10px, 1.8vw, 20px); background: #101a15; color: #fff; }
.fp-seek { position: relative; flex: 1 1 auto; min-width: 70px; height: 28px; margin: 0 8px; cursor: pointer; }
.fp-seek input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fp-track { position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); overflow: hidden; pointer-events: none; transition: height 0.15s ease, top 0.15s ease; }
.fp-track i { display: block; height: 100%; width: 0; background: #fff; }
.fp-seek:hover .fp-track, .fp-seek:focus-within .fp-track { top: 11px; height: 6px; }
.fp-seek input:focus-visible ~ .fp-track { outline: 2px solid #fff; outline-offset: 3px; }
.fp-time { flex: none; min-width: 5.4em; color: #fff; font-size: 12.5px; letter-spacing: 0.02em; white-space: nowrap; }
.fp-btn { all: unset; box-sizing: border-box; display: grid; place-items: center; flex: none; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px; cursor: pointer; color: #fff; }
.fp-btn:hover { background: rgba(255, 255, 255, 0.16); }
.fp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.fp-btn[hidden] { display: none; }
.fp-btn svg { width: 22px; height: 22px; fill: #fff; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fp-btn .ic-play, .fp-btn .ic-muted { display: none; }
.film-frame[data-paused="true"] .fp-btn .ic-pause { display: none; }
.film-frame[data-paused="true"] .fp-btn .ic-play { display: block; }
#fpMute[aria-pressed="true"] .ic-sound { display: none; }
#fpMute[aria-pressed="true"] .ic-muted { display: block; }
.fp-cc { min-width: 0; height: 26px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.75); border-radius: 5px; font-size: 11px; }
.fp-cc[aria-pressed="false"] { opacity: 0.5; }
.fp-gap { flex: 1; }
/* Endknöpfe: bestehende Knöpfe (D3), erst am Ende sichtbar UND erreichbar (visibility statt nur opacity → keine unsichtbaren Tab-Stops); sie liegen auf der Bildfläche, über der Leiste */
.film-end { position: absolute; inset: auto 0 var(--fp-h); z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 3% 5.5%; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px); transition: opacity 0.6s ease 0.35s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s, visibility 0s linear 0.95s; }
.film-frame[data-state="end"] + .film-end { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0.35s, 0.35s, 0.35s; }
.film-end .btn { padding: 12px 20px; font-size: 14.5px; }
.film-end .btn-ghost span[aria-hidden] { margin-right: 6px; font-size: 16px; line-height: 1; }
.film-note { margin-top: 14px; font-size: 12px; letter-spacing: 0.04em; color: var(--ink-3); text-align: center; }
/* Untertitel-Einblendung aus film-vtt.js (nur Mockup, wenn die Spur nicht lädt); Lage nach den line:-Werten der VTT */
.film-cc { position: absolute; left: 50%; bottom: 7%; z-index: 1; max-width: 86%; translate: -50% 0; padding: 0.28em 0.7em; border-radius: 6px; background: rgba(0, 0, 0, 0.74); color: #fff; font: 500 clamp(14px, 2.4cqw, 24px)/1.35 var(--font-sans); text-align: center; white-space: pre-line; pointer-events: none; }
.film-cc[data-top] { top: var(--cc-top); bottom: auto; }
.film-cc:empty { display: none; }
/* Vollbild: Bild füllt, Leiste unten */
.film-frame:fullscreen { border-radius: 0; box-shadow: none; background: #000; }
.film-frame:fullscreen .film-stage { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; background: #000; }
.film-frame:fullscreen .film-video { object-fit: contain; background: #000; }
.film-frame:fullscreen .film-endcard { object-fit: contain; }
/* schmal (Handy, schmales Fenster): Position oben über volle Breite, Knöpfe darunter; Endknöpfe stehen unter dem Rahmen statt auf der Karte */
@container (max-width: 560px) {
  .fp-bar { flex-wrap: wrap; row-gap: 0; padding: 6px 18px 6px 8px; }
  .fp-seek { order: -1; flex: 1 0 100%; margin: 0 0 2px 10px; width: calc(100% - 10px); }
  .fp-time { min-width: 0; }
}
@container (max-width: 569px) {
  .film-end { position: static; display: none; visibility: visible; flex-wrap: wrap; padding: 16px 0 0; opacity: 1; transform: none; pointer-events: auto; transition: none; }
  .film-frame[data-state="end"] + .film-end { display: flex; }
  .film-end .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 560px) {
  .film-play { bottom: 6%; padding: 10px 18px 10px 14px; font-size: 14.5px; gap: 9px; }
  .film-play svg { width: 20px; height: 20px; }
  .film-play small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .film-endcard, .film-end, .fp-track { transition: none; }
}

/* ---------- E · Einblenden von links und rechts im Wechsel (reveal-lr.js setzt data-from / --rd) ------------ */
@media (prefers-reduced-motion: no-preference) {
  html:root { --rs: 64px; }
  html.reveal-ready[data-reveal="lr"] .reveal {
    opacity: 0;
    transform: translate3d(var(--rx, 0px), var(--ry, 18px), 0);
    transition: opacity 0.8s ease var(--rd, 0s), transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0s);
  }
  html.reveal-ready[data-reveal="lr"] .reveal[data-from="left"] { --rx: calc(var(--rs) * -1); --ry: 0px; }
  html.reveal-ready[data-reveal="lr"] .reveal[data-from="right"] { --rx: var(--rs); --ry: 0px; }
  html.reveal-ready[data-reveal="lr"] .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 960px) { html:root { --rs: 36px; } }
@media (prefers-reduced-motion: no-preference) and (max-width: 560px) { html:root { --rs: 22px; } }
/* Druck: alles sichtbar (Bau-Falle: diese Regel muss die obige schlagen, sonst bleibt nicht Eingeblendetes im Ausdruck unsichtbar) */
@media print { html.reveal-ready[data-reveal="lr"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Ablauf als vier Karten wie heute (Schalter in der Leiste; im Bau wird nur EINE der beiden Fassungen gebaut) */
@media (min-width: 901px) {
}

/* ---------- R · Rückmeldung Founder 05.10. (Vormittag) -------------------------------------------------------------------- */
/* R2 · Sparte 08: Überschrift zweifarbig wie der Hero («Outspoken –» Tinte, «für Mac und iPhone.» Grün) */
.h-akzent { display: block; color: var(--green-ink); }     /* zweite Zeile, wie «Keep it private.» im Hero */

/* R3 · Sparte 07 als Funktionsliste im Stil der Kaufseite (gleiche Tabelle .plan-table aus styles.css) */
.feature-table-wrap { max-width: 980px; margin-top: 0; }
.feature-table th[scope="row"] { width: auto; }
.feature-table td { width: 120px; }

/* Die Outspoken-Pille wie in der Mac-App (PillLayout.swift: 300 × 52, Kapsel). Zeile 1: Status + Zeit; Zeile 2: Kappe (VoiceLock-Schild
   oder roter Status-Punkt) + Welle + Stopp. Dieselbe Pille im App-Karussell (R5) und bei den VoiceLock-Beispielen (R6). */
.osp { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 5px; height: 52px; padding: 0 16px 0 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 26px; background: rgba(13, 13, 18, 0.9); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); color: #fff; }
.osp-row1 { display: flex; align-items: center; gap: 8px; padding-left: 26px; font: 500 11.5px/1.15 var(--font-sans); color: rgba(255, 255, 255, 0.95); }
.osp-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.osp-time { flex: none; font-size: 11px; color: rgba(255, 255, 255, 0.8); }
.osp-row2 { display: flex; align-items: center; gap: 10px; }
.osp-cap { flex: none; display: grid; place-items: center; width: 16px; height: 16px; }
.osp-dot { width: 9px; height: 9px; border-radius: 50%; background: #e6474d; }
.osp-wave { flex: 1; display: flex; align-items: center; gap: 2px; min-width: 0; height: 20px; overflow: hidden; }
.osp-wave i { flex: 1; min-width: 2px; max-width: 3.5px; height: var(--h, 12px); border-radius: 2px; background: rgba(255, 255, 255, 0.92); transition: background 0.2s ease; }
.osp-stop { flex: none; width: 13px; height: 13px; border-radius: 3px; background: #f25959; }
html.motion-paused .osp-wave i { animation-play-state: paused; }

/* R5 · Sparte 05: App-Fenster zum Durchwischen */
.aw-carousel { --aw-w: min(560px, 84vw); --aw-h: clamp(300px, 32vw, 370px); --aw-gap: clamp(16px, 2.4vw, 28px); position: relative; margin-top: 4px; }
/* Embla Carousel (Founder 05.10. Abend): das Sichtfenster reicht über die ganze Breite, die Spur bewegt Embla per transform. Jedes Fenster trägt
   links und rechts den halben Abstand — so stellt Embla («align: center») genau das Fenster in die Mitte, auf jeder Breite */
/* Breite gekappt auf 2880 px: darüber reichen sechs Fenster nicht mehr für «endlos» (Embla schaltet loop dann still ab — Opus-Prüfung R9) */
.aw-viewport { width: min(100vw, 2880px); margin-inline: calc(50% - min(50vw, 1440px)); padding-block: 10px 8px; overflow: hidden; }
@media (min-width: 2881px) { .is-embla .aw-viewport { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } }
.aw-viewport:focus-visible { outline: 2px solid var(--green-ink); outline-offset: -2px; }
/* transition: none — styles.css setzt bei «reduzierter Bewegung» für ALLE Eigenschaften eine Überblendung von 0,01 ms; sonst misst Embla
   beim Start noch den Innenabstand der Rückfall-Spur (die Überblendung hat gerade erst begonnen) und das vordere Fenster stünde daneben */
.aw-track { display: flex; touch-action: pan-y pinch-zoom; transition: none !important; }
/* Kein transform auf dem Dia selbst: beim Endlos-Blättern verschiebt Embla die Dias per transform (ein eigenes transform samt Übergang
   liesse sie quer übers Bild fliegen) — die Verkleinerung der Nachbarn sitzt deshalb am Fenster darin */
.aw { position: relative; box-sizing: border-box; flex: 0 0 calc(var(--aw-w) + var(--aw-gap)); min-width: 0; margin: 0; padding-inline: calc(var(--aw-gap) / 2); transition: opacity 0.45s ease; }
/* Rückfall ohne Skript oder ohne Embla: native waagerechte Spur mit Einrasten */
.aw-carousel:not(.is-embla) .aw-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.aw-carousel:not(.is-embla) .aw-track { width: max-content; padding-inline: calc(min(50vw, 1440px) - var(--aw-w) / 2 - var(--aw-gap) / 2); }
.aw-carousel:not(.is-embla) .aw { scroll-snap-align: center; }
/* Abdunkeln der Nachbarn nur mit Embla; ein seitliches Fenster ist anklickbar (holt es nach vorn) */
.is-embla .aw { opacity: 0.5; cursor: pointer; }
.is-embla .aw.is-active { opacity: 1; cursor: inherit; }
.is-embla .aw-win { transform: scale(0.94); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-embla .aw.is-active .aw-win { transform: none; }
.is-embla .aw-viewport { cursor: grab; -webkit-user-select: none; user-select: none; }
.is-embla .aw-viewport.is-dragging, .is-embla .aw-viewport.is-dragging .aw { cursor: grabbing; }
.aw-win { position: relative; display: flex; flex-direction: column; height: var(--aw-h); overflow: hidden; border: 1px solid rgba(33, 31, 26, 0.1); border-radius: 14px; background: #fbfaf7; color: #1f1d19; font: 14.5px/1.55 var(--font-sans); box-shadow: 0 30px 60px rgba(33, 31, 26, 0.16), 0 4px 14px rgba(33, 31, 26, 0.08); }
.aw-bar { flex: none; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px; background: #efebe3; border-bottom: 1px solid rgba(33, 31, 26, 0.08); }
.aw-traffic { display: inline-flex; gap: 6px; }
.aw-traffic i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.aw-traffic i:nth-child(2) { background: #febc2e; }
.aw-traffic i:nth-child(3) { background: #28c840; }
.aw-title { font-size: 12.5px; color: #5f594d; }
.aw-text { margin: 0; overflow-wrap: anywhere; }
.aw-body { flex: 1; padding: 16px 18px; }
.aw-mail-fields > div { display: flex; gap: 12px; padding: 8px 18px; border-bottom: 1px solid rgba(33, 31, 26, 0.07); font-size: 13px; }
.aw-mail-fields b { width: 62px; color: #6b6457; font-weight: 500; }
.aw-bar-word { background: #2b579a; border-color: #2b579a; }
.aw-bar-word .aw-title, .aw-bar-dark .aw-title { color: rgba(255, 255, 255, 0.88); }
.aw-ribbon { flex: none; display: flex; gap: 18px; padding: 8px 18px 0; background: #f3f2f1; border-bottom: 1px solid #e1dfdd; font-size: 12px; color: #444; }
.aw-ribbon span { padding-bottom: 7px; }
.aw-ribbon .on { color: #2b579a; border-bottom: 2px solid #2b579a; }
.aw-page-bg { flex: 1; min-height: 0; padding: 18px 28px 0; background: #e9e7e4; overflow: hidden; }
.aw-page { height: 100%; padding: 26px 30px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); font-size: 14px; }
.aw-bar-dark { background: #2b2b40; border-color: #2b2b40; }
.aw-teams-main, .aw-slack-main { flex: 1; display: flex; min-height: 0; }
.aw-rail { flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 54px; padding: 14px 0; background: #33344a; }
.aw-rail i { width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); }
.aw-rail i.on { background: #7b83eb; }
.aw-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #f5f5f5; }
.aw-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #e1dfdd; background: #fff; font-size: 13.5px; }
.aw-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c); color: #fff; font: 600 12px/1 var(--font-sans); }
.aw-chat-space { flex: 1; }
/* unten Platz für die Pille, die auf der unteren Fensterkante sitzt (26 px ragen ins Fenster) */
.aw-compose { margin: 12px 14px 40px; padding: 12px 14px; min-height: 66px; border: 1px solid #d6d4d2; border-radius: 8px; background: #fff; font-size: 14px; }
.aw-compose-teams { border-bottom: 2px solid #6264a7; }
.aw-wa-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #f0f2f5; border-bottom: 1px solid #e3e3e3; font-size: 13.5px; }
.aw-wa-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 14px 40px; background: #efeae2; }
.aw-compose-wa { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 0; padding: 10px 10px 10px 16px; border: 0; border-radius: 22px; }
.aw-compose-wa .aw-text { flex: 1; }
.aw-send { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #25a35a; }
.aw-slack-side { flex: none; display: flex; flex-direction: column; gap: 6px; width: 150px; padding: 12px 10px; background: #3f0e40; color: rgba(255, 255, 255, 0.72); font-size: 13px; }
.aw-slack-side b { margin-bottom: 8px; color: #fff; }
.aw-slack-side span { padding: 2px 6px; border-radius: 6px; }
.aw-slack-side .on { background: #1164a3; color: #fff; }
.aw-compose-slack { border-color: #b9b9b9; }
.aw-bar-safari { min-height: 50px; padding-block: 9px; }
.aw-url { flex: 1; display: flex; justify-content: center; min-width: 0; }
.aw-url .aw-text { width: 74%; min-height: 30px; padding: 5px 14px; border: 1px solid #d9d4ca; border-radius: 8px; background: #fff; font-size: 13.5px; line-height: 1.35; }
.aw-safari-page { flex: 1; padding: 28px 36px; background: #fbfaf7; font-size: 13px; color: #5f594d; }
.aw-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 12px; }
.aw-tiles i { aspect-ratio: 1; border-radius: 12px; background: #ebe6dc; }
/* Diktat im vorderen Fenster wie die App: erst «Ich höre zu…» (Feld leer), dann steht der Text in einem Zug da */
.aw .aw-text { transition: color 0.35s ease; }
html.js .aw.is-listening .aw-text { color: transparent; }
/* die Outspoken-Pille auf der unteren Fensterkante (wie die echte am unteren Bildschirmrand) */
.aw-pill { position: absolute; left: 50%; top: calc(var(--aw-h) - 26px); z-index: 2; width: min(300px, calc(100% - 28px)); opacity: 0; translate: -50% 6px; transition: opacity 0.3s ease, translate 0.3s ease; pointer-events: none; }
.aw.is-active:is(.is-listening, .is-done) .aw-pill { opacity: 1; translate: -50% 0; }
.aw-pill .osp-wave i { background: #59d973; }
html.motion-ok .aw.is-listening .aw-pill .osp-wave i { animation: wavebar 0.8s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.awp-done { display: none; }
.aw.is-done .awp-live { display: none; }
.aw.is-done .awp-done { display: inline; color: #59d973; }
/* Ziel-App neben dem Status, wie die App seit 02.10. (OverlayPanel.targetLabelText: gedimmt, 10,5 pt) */
.awp-target { flex: none; max-width: 40%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10.5px; color: rgba(255, 255, 255, 0.72); }
/* nach dem Einfügen (OverlayPanel.showInserted): Punkt grün, Zeit, Ziel und Stopp weg, Welle ruhig */
.aw.is-done .aw-pill .osp-dot { background: #0d9e6e; }
.aw.is-done .aw-pill :is(.osp-time, .awp-target, .osp-stop) { visibility: hidden; }
.aw.is-done .aw-pill .osp-wave { opacity: 0.3; }
.aw figcaption { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 44px; }
.aw-app { font-weight: 640; font-size: 15px; color: var(--ink); }
.aw-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.aw-arrow { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); }
.aw-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aw-arrow:hover { border-color: var(--green); color: var(--green-ink); }
.aw-arrow:focus-visible, .aw-pause:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.aw-dots { display: flex; }
/* Punkte zum Anklicken: sichtbar 7 px rund (aktiv 20 px), Trefferfläche 14 × 27 px */
.aw-dots i { position: relative; width: 14px; height: 27px; cursor: pointer; transition: width 0.3s ease; }
.aw-dots i::before { content: ""; position: absolute; inset: 10px 3.5px; border-radius: 4px; background: var(--ink-3); opacity: 0.45; transition: background-color 0.3s ease, opacity 0.3s ease; }
.aw-dots i.on { width: 27px; }
.aw-dots i.on::before { background: var(--green-ink); opacity: 1; }
.aw-pause { margin-left: 4px; }
/* ohne Embla blättert man in der Spur selbst (Wischen, Rollbalken); Pfeile und Punkte täten nichts */
.aw-carousel:not(.is-embla) .aw-nav { display: none; }
@media (max-width: 600px) { .aw-url .aw-text { width: 100%; } }   /* Safari: Suche über die ganze Leiste; sie bricht um statt abgeschnitten zu werden */
@media (max-width: 560px) {
  .aw-win { font-size: 13.5px; }
  .aw-slack-side { width: 108px; }
  .aw-rail { width: 42px; }
  .aw-page-bg { padding: 12px 14px 0; }
  .aw-page { padding: 18px 18px; }
  .aw-tiles { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .aw, .aw-pill, .aw-dots i, .aw .aw-text { transition: none; } }

/* R6 · VoiceLock: Beispiele der Live-Anzeige (Zustände wie die Mac-App) */
.vl-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(28px, 4vw, 64px); align-items: start; margin-bottom: 54px; }
.vl-top .section-head { margin-bottom: 0; }
@media (max-width: 960px) { .vl-top { grid-template-columns: minmax(0, 1fr); } }
.vl-demo { padding: 18px; border-radius: var(--shape); background: #0f1a15; color: #f3efe6; box-shadow: var(--shadow-lg); }
.vld-top { display: flex; align-items: flex-start; gap: 10px; }
.vld-tabs { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; }
/* ohne Skript tun die Reiter nichts: dann gibt es nur «Du sprichst» und keine Reiter */
html:not(.js) .vld-tabs { display: none; }
.vld-tab { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: rgba(243, 239, 230, 0.08); color: rgba(243, 239, 230, 0.82); font: 600 12.5px/1 var(--font-sans); cursor: pointer; }
.vld-tab:hover { background: rgba(243, 239, 230, 0.16); }
.vld-tab[aria-selected="true"] { background: #f3efe6; color: #0f1a15; }
.vld-tab:focus-visible { outline: 2px solid #43d69a; outline-offset: 2px; }
.vld-sw { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); }
.vld-pause.motion-btn { margin-left: auto; background: rgba(243, 239, 230, 0.12); color: #f3efe6; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vld-pause.motion-btn:hover { color: #6ee7b7; box-shadow: 0 0 0 4px rgba(110, 231, 183, 0.18); }
.vld-pause:focus-visible { outline: 2px solid #43d69a; outline-offset: 2px; }
.vld-panel { margin-top: 14px; }
.vld-stage { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 330px; padding: 16px 14px 20px; border-radius: 16px; background: radial-gradient(120% 90% at 85% 0%, #1b4a38 0%, #12281e 60%, #0d1d16 100%); }
.vld-note { padding: 12px 14px; border-radius: 12px; background: #fbfaf7; color: #1f1d19; }
.vld-note-head { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6457; }
.vld-written { min-height: 3em; margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
/* der Satz erscheint in einem Zug — wie die App einfügt */
.vld-text.is-new { animation: vld-in 0.45s ease both; }
@keyframes vld-in { from { opacity: 0; } }
.vld-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: #1f1d19; }
/* blinkt viermal, dann steht sie (unter 5 s, wie die Schreibmarken der Seite) */
html.motion-ok .vld-caret { animation: blink 1.1s steps(2, start) 4; }
.vld-none { display: none; margin: 4px 0 0; font-size: 12px; font-weight: 600; color: #a3343a; }
.vl-demo[data-state="foreign"] .vld-none, .vl-demo[data-state="music"] .vld-none { display: block; }
.vl-demo:is([data-state="foreign"], [data-state="music"]) .vld-text { color: #6b6457; }
.vld-pillwrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Blase wie BubblePanel.swift: dunkle Karte mit Kante und Pfeil zur Pille; fette Wörter in der Farbe des Zustands */
.vld-bubble { position: relative; max-width: 330px; margin: 0; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: #141419; color: #ededed; font-size: 12px; line-height: 1.45; }
.vld-bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: inherit; }
.vld-bubble[hidden] { display: none; }
.vld-bubble b { font-weight: 700; color: #ededed; }
.vl-demo[data-state="music"] .vld-bubble { border-color: rgba(230, 71, 77, 0.45); }
.vl-demo[data-state="music"] .vld-bubble b { color: #ff858a; }
.vl-demo[data-state="ownmusic"] .vld-bubble b { color: #7ddba3; }
.vld-pill { width: 300px; max-width: 100%; }
.vl-demo[data-state="music"] .vld-label { color: #f27373; }
/* «du + Musik»: Zeile 1 trägt den Vermerk mit Schild wie die App (OverlayPanel .filtering, «Icon-Gesetz») */
.vl-demo[data-state="ownmusic"] .vld-label::before { content: ""; display: inline-block; width: 10px; height: 11px; margin-right: 5px; vertical-align: -1px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6 13.4 3.6v4.1c0 3.3-2.3 5.6-5.4 6.7C4.9 13.3 2.6 11 2.6 7.7V3.6L8 1.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6 13.4 3.6v4.1c0 3.3-2.3 5.6-5.4 6.7C4.9 13.3 2.6 11 2.6 7.7V3.6L8 1.6Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.vld-shield { width: 16px; height: 16px; fill: #4adb8f; }
.vl-demo[data-state="own"] .vld-wave i, .vl-demo[data-state="ownmusic"] .vld-wave i { background: #59d973; }
.vl-demo[data-state="music"] .vld-wave i { background: #f25959; }
html.motion-ok .vld-wave i { animation: wavebar 0.8s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.vld-caption { min-height: 2.9em; margin: 12px 2px 0; font-size: 13px; line-height: 1.45; color: rgba(243, 239, 230, 0.8); }
/* gleich hoch über alle vier Zustände (gemessen: höchster Zustand «Jemand anderes redet» 386 px bei 320 px Breite, 330 px ab 414 px) */
@media (max-width: 400px) { .vld-stage { min-height: 396px; } .vld-caption { min-height: 4.35em; } }
@media (prefers-reduced-motion: reduce) { .vld-text.is-new { animation: none; } }
html.motion-paused :is(.vld-caret, .vld-text) { animation-play-state: paused; }

/* R7 · Laden und Kaufen in einer Sparte (Founder 05.10. Abend): Mac-Karte mit Preis und beiden Knöpfen (Gestaltung der bisherigen Jahreslizenz-Karte),
   daneben die iPhone-Karte unverändert; «Jetzt kaufen» (#price) landet auf der Mac-Karte unter der Leiste */
#price.mac-kauf { scroll-margin-top: 14px; }   /* + scroll-padding-top 96 px aus styles.css = unter der Leiste */
.mac-kauf-test { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
.mac-kauf .plan-price { margin-top: 2px; }
.mac-kauf-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.mac-kauf-knoepfe .btn-download { flex: 1 1 190px; justify-content: center; min-width: 0; }
.mac-kauf-knoepfe .buy-form { display: flex; flex: 2 1 250px; margin: 0; padding: 0; }
.mac-kauf-aktion .wl-note { margin-top: 12px; }

/* R8 · Datenschutz (Founder 05.10. Abend): «Alles lokal» grün, Rest in der Grundfarbe; «nie dein Audio und nie deine Texte» im Satz, grün, ohne eigene Zeile */
.statement .lokal, .privacy-lines .pl-nie { color: var(--green-ink); }

/* R9 · Hintergründe (Founder 05.10. Abend: «nach 05 … ‹Eine Stimme. Auf Mac und iPhone verstanden.› … Diese Sektion weiss und danach 08 hellgrün»)
   «Eine Stimme. Auf Mac und iPhone verstanden.»: weiss in beiden Schemata (vorher dunkles Band). Die Sparte setzt alle Farb-Token des hellen
   Schemas neu (wie die Blöcke), damit im grünen Schema nichts Dunkles durchschlägt; die fest eingetragenen hellen Schriftfarben des Bands werden dunkel. */
html:root section.section-devices {
  --bg: #ffffff; --bg-soft: #f5efe4; --card: #fffcf6; --ink: #211f1a; --ink-2: #5d594f; --ink-3: #6b6558;
  --line: rgba(33, 31, 26, 0.09); --line-strong: rgba(33, 31, 26, 0.16);
  --green: #0e9f6e; --green-ink: #0a7a54; --green-tint: #e8f5ee; --green-text: #086b49; --red-text: #b23a3e; --amber-text: #8a5f0d;
  --glass: rgba(255, 252, 246, 0.66); --glass-strong: rgba(255, 252, 246, 0.88); --glass-edge: rgba(255, 255, 255, 0.75); --glass-hi: rgba(255, 255, 255, 0.7);
  --chip: rgba(255, 255, 255, 0.55); --float-1: rgba(33, 31, 26, 0.1); --float-2: rgba(33, 31, 26, 0.16);
  --shadow-sm: 0 1px 2px rgba(33, 31, 26, 0.05); --shadow-md: 0 2px 6px rgba(33, 31, 26, 0.05), 0 16px 40px rgba(33, 31, 26, 0.09);
  --section-bg: #ffffff;
  background: #ffffff;
  color: #211f1a;
}
.section-devices .devices-title, .section-devices .devices-points strong { color: #16130c; }
.section-devices .devices-sub { color: #4d493f; }
.section-devices .devices-points { border-top-color: rgba(33, 31, 26, 0.12); }
.section-devices .devices-points li { border-bottom-color: rgba(33, 31, 26, 0.12); }
.section-devices .devices-points span, .section-devices .dev-soon, .section-devices .devices-ctas .platform-status { color: #5f594c; }
.section-devices .dev-chip { border-color: rgba(33, 31, 26, 0.18); background: rgba(33, 31, 26, 0.03); color: #211f1a; }
.section-devices .dev-chip-live { border-color: rgba(14, 159, 110, 0.55); }
.section-devices .dev-tile { box-shadow: 0 14px 30px rgba(33, 31, 26, 0.16); }
.section-devices .dev-tile-light { box-shadow: inset 0 0 0 1px rgba(33, 31, 26, 0.12), 0 14px 30px rgba(33, 31, 26, 0.16); }
.section-devices .phone-shell { box-shadow: 0 0 0 2px rgba(33, 31, 26, 0.85), 0 34px 80px rgba(33, 31, 26, 0.22); }
html .section-devices :focus-visible { outline-color: #0a7a54; }
/* 08 «Laden & Kaufen»: hellgrüner Block, Ton «Signal» wie die Preis-Sparte in Variante A (Founder 05.10.: «etwas weniger hell») */
.block[data-tone="signal"] {
  --bg: #0b8559; --bg-soft: #097550; --card: #fffcf6; --ink: #ffffff; --ink-2: #f0faf5; --ink-3: #e1f4ea;
  --line: rgba(255, 255, 255, 0.28); --line-strong: rgba(255, 255, 255, 0.45);
  --green: #0e9f6e; --green-ink: #0a7a54; --green-tint: #e8f5ee;
  --section-bg: #0b8559; --green-text: #ffffff; --red-text: #ffd5d7; --amber-text: #ffe7ae;
  --shadow-sm: 0 1px 2px rgba(3, 40, 27, 0.18); --shadow-md: 0 2px 6px rgba(3, 40, 27, 0.18), 0 16px 40px rgba(3, 40, 27, 0.28);
  background: radial-gradient(900px 460px at 12% -20%, rgba(255, 255, 255, 0.14), transparent 70%), #0b8559;
  color: #ffffff;
}
.block[data-tone="signal"] :is(.eyebrow, .eyebrow-num, .section-head h2) { color: #ffffff; }
.block[data-tone="signal"] .h-akzent { color: #b8f5d9; }
.block[data-tone="signal"] .section-copy { color: #ffffff; }     /* #effaf4 hätte auf dem Grün nur 4,4:1 */
.block[data-tone="signal"] :is(.plan-fine, .plan-fine a) { color: #ffffff; }
.block[data-tone="signal"] .plan-fine a { text-decoration: underline; text-underline-offset: 3px; }
/* Fokusrahmen auf dem Grün weiss (der globale grüne Rahmen hätte darauf 1,1:1), in den Karten wieder grün */
.block[data-tone="signal"] :focus-visible { outline-color: #ffffff; }
.block[data-tone="signal"] :is(.mac-kauf, .platform-download-card-ios) :focus-visible { outline-color: var(--green-ink); }
/* die zwei Karten: Verlauf der früheren Schluss-Karte («Mehr sprechen. Weniger tippen.», .wl-card) — hell auf Creme, im grünen Schema dunkel wie im Bild */
.block[data-tone="signal"] :is(.mac-kauf, .platform-download-card-ios) {
  --ink: #211f1a; --ink-2: #4d493f; --ink-3: #5f594c; --line: rgba(33, 31, 26, 0.09); --line-strong: rgba(33, 31, 26, 0.16);
  --green: #0e9f6e; --green-ink: #0a7a54; --green-tint: #e8f5ee; --green-text: #086b49; --card: #fffcf6; --bg: #f5efe4; --bg-soft: #ede5d6;
  color: var(--ink);
  background:
    radial-gradient(560px 260px at 20% 0%, rgba(14, 159, 110, 0.12), transparent 65%),
    radial-gradient(560px 260px at 85% 10%, rgba(233, 151, 63, 0.1), transparent 65%),
    var(--card);
  border: 1px solid rgba(14, 159, 110, 0.25);
  box-shadow: var(--shadow-md);
}
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .block[data-tone="signal"] :is(.mac-kauf, .platform-download-card-ios) {
  --ink: #f3efe6; --ink-2: #d6cfc2; --ink-3: #a3ada4; --line: rgba(243, 239, 230, 0.12); --line-strong: rgba(243, 239, 230, 0.22);
  --green: #43d69a; --green-ink: #6ee7b7; --green-tint: rgba(67, 214, 154, 0.14); --green-text: #6ee7b7; --card: #16332a; --bg: #0e241b; --bg-soft: #122c22;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.26); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.26), 0 16px 38px rgba(0, 0, 0, 0.34);
  background:
    radial-gradient(560px 260px at 20% 0%, rgba(67, 214, 154, 0.14), transparent 65%),
    radial-gradient(560px 260px at 85% 10%, rgba(240, 184, 74, 0.1), transparent 65%),
    var(--card);
  border-color: rgba(110, 231, 183, 0.28);
}

/* R10 · Punkte-Leiste rechts (wo bin ich auf der Seite?) und O-Knopf «nach oben» in Form des Logo-O (Founder 05.10. Abend) — seitennav.js */
.seitennav { position: fixed; right: 12px; top: 50%; z-index: 40; translate: 0 -50%; }
.seitennav ol { display: flex; flex-direction: column; margin: 0; padding: 6px 4px; list-style: none; border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line), 0 8px 20px var(--float-1); }
.seitennav a { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; text-decoration: none; }
/* inaktive Punkte voll deckend (mit Deckkraft 0,5 lagen sie unter 3:1, WCAG 1.4.11); der aktive ist grün, grösser und hat einen Ring */
.seitennav a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); transition: transform 0.25s ease, background-color 0.25s ease; }
.seitennav a:hover::before { transform: scale(1.3); }
.seitennav a[aria-current="true"]::before { background: var(--green); transform: scale(1.45); box-shadow: 0 0 0 3px var(--green-tint); }
.seitennav a:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 0; }
.seitennav .sn-label { position: absolute; right: calc(100% + 10px); top: 50%; translate: 6px -50%; padding: 6px 11px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 12px/1 var(--font-sans); letter-spacing: 0.01em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, translate 0.2s ease; }
.seitennav a:is(:hover, :focus-visible) .sn-label { opacity: 1; translate: 0 -50%; }
/* WCAG 1.4.13 (Opus-Prüfung 06.10.): die Beschriftung lässt sich mit der Maus erreichen — sie bleibt nach dem Verlassen des Punkts
   kurz stehen (über die Lücke) und hält sich selbst, solange die Maus darauf ist; Escape blendet sie aus (page-nav.js: .sn-still) */
.seitennav .sn-label { visibility: hidden; pointer-events: auto; transition: opacity 0.2s ease 0.25s, translate 0.2s ease 0.25s, visibility 0s linear 0.45s; }   /* versteckt (visibility) nimmt sie keine Maus an, in der Haltezeit schon */
.seitennav a:is(:hover, :focus-visible) .sn-label { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.seitennav a.sn-still .sn-label { visibility: hidden; opacity: 0; transition: none; }
:root [data-sn-ziel]:is(:focus, :focus-visible) { outline: none; }      /* die angesprungene Sparte trägt den Fokus nur als Startpunkt, ohne Rahmen */
/* erst ab 1320 px Breite und 601 px Höhe: darunter läge die Leiste auf Text, Kartenkanten und Bedienelementen, bei 1280–1300 px auch auf
   dem Pause-Knopf im Hero (Opus-Prüfung R10, 2 Runden); bis 1503 px rücken die zwei Blöcke beidseitig 56 px ein, damit die Leiste neben
   ihrer Kante steht statt darauf */
@media (max-width: 1319px), (max-height: 600px) { .seitennav { display: none; } }
@media (min-width: 1320px) and (max-width: 1503px) and (min-height: 601px) { html.js:root .block { width: calc(100% - 112px); } }
/* O-Knopf: Ring = das O des Logos (dicke Seiten, feine Bögen oben und unten), darin zwei Wellen-Striche und der Pfeil; Grün wie im Logo */
.nach-oben { position: fixed; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: block; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--glass-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 26px var(--float-2); color: var(--ink); cursor: pointer; opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s linear 0.3s, box-shadow 0.25s ease; }
.nach-oben.is-sichtbar { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.3s ease, translate 0.3s ease, visibility 0s, box-shadow 0.25s ease; }
.nach-oben svg { display: block; width: 100%; height: 100%; }
.nach-oben .o-ring { fill: var(--ink); }
.nach-oben .o-welle { stroke: #49876d; stroke-width: 4.9; stroke-linecap: round; stroke-linejoin: round; }
html:is([data-theme="green"], [data-darkreader-mode], [data-darkreader-scheme]) .nach-oben .o-welle { stroke: #6ee7b7; }
.nach-oben .o-pfeil { transition: transform 0.25s ease; }
.nach-oben:hover { box-shadow: 0 0 0 4px var(--green-tint), 0 10px 26px var(--float-2); }
.nach-oben:hover .o-pfeil { transform: translateY(-4px); }
/* Fokus dreifarbig (grün · weiss · grün), damit er auf jedem Grund sichtbar ist — auch über dem grünen Block */
:root .nach-oben:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #0a7a54, 0 10px 26px var(--float-2); }
/* die letzte Zeile der Fusszeile liegt am Seitenende über dem O-Knopf, nie darunter */
body.mit-nach-oben .footer { padding-bottom: 104px; }   /* nur auf Seiten mit O-Knopf (Startseite, Klasse von page-nav.js — ohne :has(), GLM-Prüfung 06.10.); Unterseiten ohne Leerraum */
@media (max-width: 600px) { .nach-oben { right: 12px; width: 50px; height: 50px; } }
@media (prefers-reduced-motion: reduce) { .seitennav a::before, .seitennav .sn-label, .nach-oben, .nach-oben .o-pfeil { transition: none; }
  .seitennav .sn-label { transition: visibility 0s linear 0.45s; }   /* ohne Bewegung, aber mit derselben Haltezeit für die Maus */
  .seitennav a:is(:hover, :focus-visible) .sn-label { transition: none; } }
@media print { .seitennav, .nach-oben { display: none; } }

/* ---------- R11 · «03 Für wen»: Szenen im Wechsel (Founder 06.10., Wahl aus drei Bild-Mockups in design/fuer-wen-0610) ----------
   Vier grosse Szenen, Bild und Text nebeneinander, abwechselnd; die Einblendung (eingefügter Text + Pille «Eingefügt ✓») hängt an der
   Bildkante zum Text hin, damit sie die Menschen nicht verdeckt. Darunter «Genauso vertraulich» mit den übrigen drei Bereichen. */
.fw-reihen { display: grid; gap: 84px; margin-top: 64px; }
/* im DOM: Kopf (Symbol + Titel), Foto, Text — Bildschirmleser hören so den Titel vor dem Bild; auf dem Desktop legt das Raster das Foto
   daneben und zentriert Kopf + Text senkrecht dazu */
.fw-reihe { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "bild ." "bild kopf" "bild text" "bild ."; column-gap: 64px; row-gap: 14px; }
.fw-reihe.rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: ". bild" "kopf bild" "text bild" ". bild"; }
.fw-szene { position: relative; grid-area: bild; }
.fw-kopf { grid-area: kopf; display: grid; justify-items: start; gap: 14px; max-width: 440px; }
.fw-kopf .feature-ic { margin-bottom: 0; box-shadow: inset 0 0 0 1px var(--line); }   /* Kachel bleibt auch auf hellem Grund sichtbar */
.fw-foto { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 22px; background: #0b1a14; box-shadow: var(--shadow-md); }
.fw-foto img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.fw-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(6, 14, 10, 0.42)); pointer-events: none; }
.fw-ueber { position: absolute; z-index: 2; display: grid; justify-items: start; gap: 8px; width: max-content; max-width: 360px; }
.fw-ueber.fw-ueber-code { max-width: 460px; }
.fw-ueber.innen-rechts { right: -40px; bottom: -30px; justify-items: end; }
.fw-ueber.innen-links { left: -40px; bottom: -30px; }
.fw-feld { padding: 10px 14px 11px; border-radius: 14px; background: rgba(251, 250, 247, 0.98); color: #1f1d19; font: 13.5px/1.5 var(--font-sans); text-align: left; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32); }
.fw-feld small { display: block; margin-bottom: 4px; font: 600 10.5px/1.2 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: #6b665c; }
.fw-feld mark { padding: 0 2px; border-radius: 3px; background: rgba(89, 217, 115, 0.28); color: inherit; }
.fw-code { padding: 10px 14px 11px; border-radius: 14px; background: rgba(22, 24, 30, 0.98); color: #c9d1d9; font: 12px/1.65 var(--font-mono); text-align: left; white-space: pre; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.fw-code small { display: block; margin-bottom: 4px; font: 600 10.5px/1.2 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; white-space: normal; color: #8b949e; }
.fw-code .fw-gesagt { display: block; margin: 0 0 6px; font: italic 12px/1.4 var(--font-sans); white-space: normal; color: #8b949e; }
.fw-code .k { color: #ff7b72; } .fw-code .f { color: #d2a8ff; } .fw-code .t { color: #79c0ff; }
.fw-code mark { padding: 1px 3px; border-radius: 4px; background: rgba(89, 217, 115, 0.22); color: #8ddb9e; }
.fw-pille { width: 300px; }
.fw-pille .fw-ok { color: #59d973; }
.fw-pille .osp-dot { background: #0d9e6e; }
.fw-pille .osp-wave { opacity: 0.3; }
.fw-pille .osp-wave i { background: #59d973; }
.fw-kopf h3 { margin: 4px 0 0; font: 620 34px/1.12 var(--font-serif); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.fw-text { grid-area: text; max-width: 440px; margin: 0; font-size: 18px; line-height: 1.62; color: var(--ink-2); }
.fw-mehr { margin-top: 92px; padding-top: 34px; border-top: 1px solid var(--line-strong); }
.fw-mehr-titel { margin: 0 0 22px; font: 600 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.fw-mehr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.fw-klein { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
.fw-klein-bild { width: 112px; height: 112px; max-width: none; border-radius: 16px; object-fit: cover; }
.fw-klein h4 { margin: 2px 0 6px; font-size: 16px; font-weight: 650; color: var(--ink); }
.fw-klein p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
#audience .audience-facts { margin-top: 56px; }
/* Handy und Tablet hochkant: Symbol und Titel zuerst (man erkennt den Beruf schon auf dem ersten Bildschirm), dann das Foto, die
   Einblendung hängt unter der Bildkante, dann der Text; bis 900 px (sonst deckte die Einblendung auf dem iPad die halben Fotos) */
@media (max-width: 900px) {
  .fw-reihen { gap: 64px; margin-top: 40px; }
  .fw-reihe, .fw-reihe.rechts { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .fw-kopf { gap: 12px; margin-bottom: 18px; max-width: none; }
  .fw-kopf h3 { margin: 0; font-size: 26px; }
  .fw-text { margin-top: 22px; max-width: none; font-size: 16.5px; }
  .fw-foto { border-radius: 18px; }
  .fw-ueber, .fw-ueber.innen-rechts, .fw-ueber.innen-links { position: relative; left: auto; right: auto; bottom: auto; justify-items: start; width: auto; max-width: none; margin: -30px 12px 0; }
  .fw-pille { width: min(300px, 100%); }
  .fw-feld, .fw-code { max-width: 100%; }
  .fw-code { font-size: 11px; white-space: pre-wrap; }
  .fw-mehr { margin-top: 64px; padding-top: 28px; }
  .fw-mehr-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fw-klein { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
  .fw-klein-bild { width: 88px; height: 88px; border-radius: 14px; }
  #audience .audience-facts { margin-top: 40px; justify-content: flex-start; }
}


/* ---------- Bau B · Nachträge aus den Prüfungen 06.10. ------------------------------------------------------------------------
   (1) Wer «reduzierte Bewegung» während des Besuchs einschaltet, sieht die Datenschutz-Aussage sofort ganz (Wörter nicht mehr halb hell).
   (2) Druck: Die farbigen Blöcke (Datenschutz, Laden & Kaufen) und die dunklen Tafeln drucken wie die übrigen dunklen Bänder hell —
       ohne Hintergrund, Schrift dunkel (vorher weiss auf weiss, im grünen Schema auch bei eingeschalteter Hintergrundgrafik);
       der festgehaltene Ablauf druckt als die vier Karten, der Film (im Druck ohnehin ausgeblendet) ohne leeren Rahmen. */
@media (prefers-reduced-motion: reduce) { .statement.is-scrub .w { opacity: 1; } }
@media print {
  html:root .block,
  html:root .block *,
  .vl-demo, .vl-demo *,
  .osp, .osp *,
  .fw-code, .fw-code *,
  .aw-bar-dark, .aw-slack-side, .aw-slack-side * {
    background-color: transparent !important;
    background-image: none !important;
    color: #211f1a !important;
    border-color: rgba(33, 31, 26, 0.26) !important;
  }
  .statement.is-scrub .w { opacity: 1 !important; }
  html.motion-ok .flow-pin { display: none !important; }
  html.motion-ok .flow-fallback { display: grid !important; }
  .film-wrap, .film-note { display: none !important; }
}

/* ---------- Hero (Founder 06.10.): Szenen blättern ----------------------------------------------------------------------------
   Die Punkte sind jetzt Knöpfe (app.js): Aussehen wie vorher (der innere Punkt), Trefferfläche grösser, ohne dass sich etwas
   verschiebt (Innenabstand und negativer Rand heben sich auf). Waagerechtes Wischen über dem Hero blättert, senkrecht scrollt die
   Seite weiter, Zoomen mit zwei Fingern bleibt möglich. */
.hero-dot { appearance: none; display: block; margin: -9px -2.5px; padding: 9px 2.5px; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.hero-dot i { display: block; }
.hero-dot:focus-visible { outline: 2px solid var(--green); outline-offset: 0; }
/* Waagerecht wischen gehört nur über der Fotofläche dem Hero, und nur ungezoomt: gezoomt verschiebt der Finger die Ansicht
   (Opus 06.10.: vorher blockierte pan-y auf dem ganzen Kopf das seitliche Verschieben beim Zoomen) */
.hero-b3:not(.ist-gezoomt) :is(.hero-film, .hero-veil, .hero-film-ui) { touch-action: pan-y pinch-zoom; }
/* ‹ › neben den Punkten (Sol/GLM 06.10.): die Alternative zum Wischen und zu den kleinen Punkten — 30 px wie der Pause-Knopf
   (mindestens 24 × 24, WCAG 2.5.8), auch auf schmalen Handys sichtbar, wenn die Punkte wegfallen */
.hero-scenes { display: flex; flex: none; align-items: center; gap: 8px; }
.hero-arrow { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 20px var(--float-1);
  color: var(--ink-2); cursor: pointer; transition: box-shadow 0.25s ease, color 0.2s ease; }
.hero-arrow:hover { color: var(--green-ink); box-shadow: 0 0 0 4px var(--green-tint), 0 8px 20px var(--float-1); }
.hero-arrow:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.hero-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 420px) { .hero-scenes { gap: 6px; } }
/* Handys bis 440 px: die winzigen Punkte fallen weg, damit die Bildunterschrift ganz bleibt (Opus 06.10.: «Medi…») — dort
   blättern die Pfeile und der Finger */
@media (max-width: 440px) { .hero-dots { display: none; } }
.hero-arrow[hidden] { display: none; }   /* ohne Skript keine toten Knöpfe: app.js gibt sie frei */
@media (prefers-reduced-motion: reduce) { .hero-arrow { transition: none; } }
@media print { .hero-scenes { display: none; } }