/* DatAGI — handwork, released data, value returned. Page compositions. */
/* Opening: text is present before any canvas, script or media loads. */
.hero {
  background:var(--dark);
  color:#edf1f5
}
/* A centered opening, followed by a full-width hand-to-data sequence. */
.hero-cinema { position:relative; margin:auto; }
.cinema-copy { position:relative; z-index:2; padding:32px var(--gutter) 10px; max-width:1320px; margin:auto; text-align:center; }
.cinema-copy .eyebrow { margin-bottom:16px; color:var(--accent-soft); font-size:10px; letter-spacing:.06em; }
.hero h1 { font-size:clamp(44px,4.1vw,66px); line-height:1.08; letter-spacing:-.045em; max-width:29ch; margin-inline:auto; }
.hero h1 span { color:var(--accent-soft); }
.hero-summary { font-size:15px; color:#b8c4d2; max-width:68ch; margin:16px auto 0; }
.hero-ctas { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 28px; margin-top:20px; }
.hero .btn-primary { background:#edf1f5; border-color:#edf1f5; color:#1f2937; }
.hero .btn-primary:hover { background:var(--accent-soft); }
.hero .text-link { color:#b8c4d2; font-size:12px; }
.hero :focus-visible { outline-color:var(--signal); }
.cinema-scroll { display:inline-flex; align-items:center; gap:22px; padding:12px 0 0; color:#91a2b5; font:10px/1.5 var(--code); }
.cinema-scroll span { font-size:20px; }
.cinema-track { position:relative; }
.cinema-track.is-pinned { height:calc(280svh - var(--nav-h)); }
.capture { position:relative; width:100%; margin:0; display:flex; flex-direction:column; height:calc(100svh - var(--nav-h)); min-height:540px; max-height:1000px; overflow:hidden; }
.is-pinned .capture { position:sticky; top:var(--nav-h); min-height:0; max-height:none; }
.capture-head { display:flex; justify-content:flex-end; flex:none; z-index:5; padding:18px var(--gutter) 0; }
.capture-stage { position:relative; flex:1; min-height:0; isolation:isolate; }
.capture-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.video-plane { position:absolute; width:min(82vw,1060px,calc((100svh - var(--nav-h) - 190px) * 1.897)); aspect-ratio:960/506; top:50%; left:50%; border-radius:8px; overflow:hidden; background:#141b28; box-shadow:0 24px 80px #0005; transform:translate(-50%,-50%); opacity:var(--video-opacity,1); }
.capture .cam { display:block; width:100%; height:100%; object-fit:contain; }

.pause { border:1px solid #4b5565; color:#edf1f5; background:transparent; min-height:44px; padding:10px 15px; font-size:12px; flex:none; }
.pause:hover { background:#141b28; }
.hero-intro {
  padding-block:70px;
  border-top:1px solid #354152;
  background:#141b28;
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:80px;
  max-width:none
}
.hero-intro .intro-title {
  font:500 clamp(30px,3.4vw,52px)/1.14 var(--head);
  letter-spacing:-.035em;
  color:#edf1f5;
  max-width:13ch
}
.hero-intro .lede {
  color:#b8c4d2;
  font-size:clamp(17px,1.5vw,22px);
  max-width:65ch
}
.hero-intro strong {
  color:#edf1f5;
  font-weight:400
}
.hero-facts {
  background:var(--bg);
  color:var(--ink);
  padding-block:40px
}
.facts {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:34px
}
.facts li {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
  gap:24px 70px;
  align-items:baseline;
  font-size:16px;
  color:var(--ink-2)
}

.facts b {
  font:500 clamp(20px,2vw,28px)/1.3 var(--head);
  letter-spacing:-.025em;
  color:var(--ink)
}
.facts p { max-width:65ch; }
.capture-explainer {
  grid-column:1/-1;
  margin:0;
  padding-top:28px;
  border-top:1px solid #354152;
  display:grid;
  gap:20px
}
.capture-explainer>div {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);
  gap:16px 70px
}
.capture-explainer dt {
  font:500 14px/1.6 var(--sans);
  color:#b8c4d2;
  margin-bottom:14px
}
.capture-explainer dd {
  margin:0;
  font-size:13px;
  color:#b8c4d2
}
/* Compact figures lead directly from the hand sequence into the examples. */
.stats {
  padding-block:64px 24px
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px
}
.stats-grid>div {
  border-top:1px solid var(--rule);
  padding-top:32px
}
.stats-grid b {
  font:500 clamp(48px,5.3vw,82px)/1.05 var(--head);
  letter-spacing:-.055em;
  display:block;
  margin-bottom:12px
}
.stats-grid [data-count] { display:inline-block; font-variant-numeric:tabular-nums; min-width:1ch; }
.stats-grid small {
  font-size:.4em;
  margin-left:6px;
  color:var(--accent)
}
.stats-grid>div>span {
  display:block;
  font-size:13px;
  color:var(--ink-2);
  max-width:28ch
}
.stats-grid .stat-prefix { display:block; font:500 12px/1.4 var(--sans); letter-spacing:0; }
.stats-grid b:has(.stat-prefix) { position:relative; }
.stats-grid .stat-prefix { position:absolute; bottom:100%; margin-bottom:2px; }
.stats-grid sup { font:500 14px/1 var(--sans); vertical-align:super; letter-spacing:0; }
.stats-note { margin-top:26px; font-size:12px; color:var(--ink-2); max-width:88ch; }
.stats-note a { text-decoration-thickness:1px; }
.earnings-example { margin-bottom:24px; }
.earnings-example .earnings-label { font-size:13px; color:var(--ink-2); margin-bottom:8px; }
.earnings-example strong { display:block; font:500 clamp(56px,6vw,88px)/1.1 var(--head); letter-spacing:-.055em; }
.earnings-example strong small { font-size:.35em; letter-spacing:-.02em; }
.earnings-example .earnings-unit { font-size:16px; margin-top:8px; }

/* Four real example clips, given enough space to see the work. */
.reel {
  background:#edf1f5
}
.reel-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:50px
}
.reel-head .sec-head {
  margin:0;
  max-width:820px
}
.reel-head .btn-small {
  flex:none
}
.reel-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:56px 28px
}
.reel-grid figure:nth-child(even) {
  padding-top:90px
}
.clip {
  position:relative;
  aspect-ratio:16/10;
  background:#141b28;
  overflow:hidden
}
.clip video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.55)
}

.reel-grid figcaption {
  display:block;
  padding-top:20px;
  border-top:1px solid var(--rule);
  margin-top:14px
}
.reel-grid figcaption b {
  font:500 23px/1.2 var(--head);
  letter-spacing:-.035em
}
.reel .fine {
  margin-top:42px
}
/* Four editorial chapters, not a row of interchangeable cards. */
.benefits {
}
.benefit {
  display:grid;
  grid-template-columns:2.5fr 4fr 4.5fr;
  gap:24px 48px;
  padding:54px 0;
  border-top:1px solid var(--rule);
  position:relative
}
.benefit .k {
  font:500 clamp(38px,4.6vw,68px)/1 var(--head);
  letter-spacing:-.05em;
  color:var(--accent)
}
.benefit .k small {
  display:block;
  font:11px/1.6 var(--code);
  letter-spacing:0;
  margin-top:14px;
  color:var(--muted);
  max-width:18ch
}
.benefit h3 {
  font-size:clamp(26px,2.6vw,40px)
}
.benefit>p {
  color:var(--ink-2);
  font-size:15px
}
.benefit .tagline {
  grid-column:3;
  font:10px/1.6 var(--code);
  color:var(--accent)
}
.benefit:last-child {
  border-bottom:1px solid var(--rule)
}
/* The common branching model: approval precedes both forms of return. */
.system {
  background:#141b28;
  color:#edf1f5
}
.system .eyebrow {
  color:#b8c4d2
}
.system .sec-head {
  max-width:850px
}
.system .lede {
  color:#b8c4d2
}
.system-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}
.system-path {
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:path
}
.system-path li {
  padding:18px 0 18px 56px;
  border-bottom:1px solid #354152;
  position:relative;
  font:500 21px/1.3 var(--head);
  letter-spacing:-.02em
}
.system-path li::before {
  counter-increment:path;
  content:'0' counter(path);
  position:absolute;
  left:0;
  top:22px;
  font:10px var(--code);
  color:#91a2b5
}
.system-path li::after {
  content:'↓';
  position:absolute;
  right:0;
  color:#91a2b5
}
.system-path li:last-child {
  color:#b8c4d2
}
.system-path li:last-child::after {
  content:'↘'
}
.system-returns {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:34px;
  border-left:1px solid #4b5565;
  padding-left:48px
}
.system-returns article {
  border-top:1px solid #354152;
  padding-top:24px
}
.system-returns .meta {
  color:#b8c4d2;
  margin-bottom:10px
}
.system-returns h3 {
  font-size:30px
}
.system-returns p {
  color:#b8c4d2;
  font-size:15px;
  margin-top:12px
}
.system-returns .text-link {
  color:#edf1f5;
  align-self:start
}
.trust-teaser>.wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.trust-teaser h2 {
  max-width:16ch
}
.trust-teaser .lede {
  margin:18px 0 24px
}
.trust-points {
  list-style:none;
  padding:0;
  margin:24px 0
}
.trust-points li {
  padding:12px 0;
  border-bottom:1px solid var(--rule);
  font-size:15px
}
.trust-points li::before {
  content:'↳';
  margin-right:16px;
  color:var(--accent)
}
/* Werk: explanation and responsibilities, followed by the exact example. */
.page-band {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-bottom:68px;
  min-height:360px;
  background:#141b28;
  color:#edf1f5
}
.page-band img {
  height:100%;
  width:100%;
  object-fit:cover;
  filter:saturate(.45)
}
.page-band figcaption {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:45px;
  gap:24px
}
.page-band .meta {
  color:#b8c4d2
}
.page-band b {
  font:500 clamp(32px,3.2vw,48px)/1.12 var(--head);
  letter-spacing:-.04em
}
.page-band .fine {
  color:#b8c4d2
}
.plain {
  display:grid;
  grid-template-columns:1fr;
  gap:60px
}
.plain-text {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 70px
}
.plain-text>p {
  font-size:17px;
  color:var(--ink-2)
}
.plain-text>p:first-child {
  font-size:25px;
  line-height:1.5;
  color:var(--ink)
}
.plain-text>p:nth-child(3) {
  grid-column:1
}
.plain-text .split {
  grid-column:2;
  grid-row:2 / span 2
}
.partner-model {
  padding:0;
  margin:0;
  list-style:none;
  border-top:1px solid var(--rule)
}
.partner-model li {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:24px;
  border-bottom:1px solid var(--rule);
  padding:20px 0;
  font-size:14px
}
.partner-model b {
  color:var(--accent)
}
.split>p {
  margin-top:24px;
  color:var(--ink-2);
  font-size:14px
}
.ledger {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:40px;
  margin-top:30px;
  padding-top:50px;
  border-top:1px solid var(--rule);
}

.ledger>div:first-child { grid-row:span 2; }
.ledger h3 {
  font-size:26px;
  margin-bottom:22px
}
.ledger h3 span {
  display:block;
  font:11px/1.6 var(--code);
  letter-spacing:0;
  color:var(--muted);
  margin-top:10px
}
.ledger ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px
}
.ledger li {
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  color:var(--ink-2)
}
.ledger svg {
  width:15px;
  height:15px;
  flex:none;
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  margin-top:5px
}
.ledger .none {
  font-size:15px;
  color:var(--ink-2)
}
.ledger .none b {
  display:block;
  color:var(--ink);
  margin-bottom:12px
}
section#warum {
  background:#141b28;
  color:#edf1f5;
  --rule:#354152;
  --ink-2:#b8c4d2;
  --accent:#b8c4d2
}
section#warum .fine {
  color:#b8c4d2
}
.why {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px 80px;
}
.why>div {
  border-top:1px solid var(--rule);
  padding:30px 0 0;
  position:relative
}

.why h3 {
  font-size:28px;
  margin-bottom:20px
}
.why p {
  font-size:15px;
  color:var(--ink-2)
}
.why-line {
  font:500 clamp(32px,4.8vw,68px)/1.16 var(--head);
  letter-spacing:-.04em;
  max-width:20ch;
  padding-top:80px
}
#rueckfluss .grid-2 {
  grid-template-columns:1fr 1.3fr
}
.products>div {
  border-top:1px solid var(--rule);
  padding:28px 0 40px
}
.products h3 {
  margin:16px 0
}
.products>div>p:last-child {
  color:var(--ink-2);
  font-size:15px
}
.analysis {
  background:#edf1f5;
  padding:34px;
  align-self:start
}
.analysis-head {
  display:flex;
  gap:18px;
  justify-content:space-between;
  align-items:flex-start
}
.analysis h3 {
  font-size:28px
}
.analysis .sub {
  font:10px/1.7 var(--code);
  color:var(--muted);
  margin-top:15px
}
.time-sculpture {
  height:360px;
  position:relative
}
#time-canvas {
  width:100%;
  height:100%;
  display:block
}
.sculpture-hint {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  gap:12px
}
.sculpture-hint button {
  min-height:44px;
  background:#f5f7fae6;
  border:1px solid var(--rule-strong);
  padding:8px 12px;
  font-size:11px;
  color:var(--ink)
}
.chart {
  padding:32px 0 20px
}
.chart svg {
  width:100%;
  height:auto;
  display:block
}
.seg-label {
  fill:var(--ink);
  font:10px var(--sans)
}
.seg-val {
  fill:var(--ink);
  font:11px var(--code)
}
.axis {
  fill:var(--muted);
  font:9px var(--code)
}
.baseline {
  stroke:var(--rule-strong)
}
.cycle-legend {
  display:none
}
.finding {
  font-size:14px;
  color:var(--ink-2);
  padding:22px 0;
  border-top:1px solid var(--rule)
}
.finding b {
  color:var(--ink)
}
.outputs {
  list-style:none;
  padding:0;
  margin:0
}
.outputs li {
  border-top:1px solid var(--rule);
  padding:14px 0;
  font-size:12px
}
.outputs span {
  display:block;
  color:var(--muted);
  font:10px/1.6 var(--code);
  margin-top:5px
}
/* Five stages. The camera is an illustration, content is in ordinary flow. */
.workflow-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start
}
.workflow-visual {
  position:sticky;
  top:calc(var(--nav-h) + 24px);
  height:580px;
  background:#141b28;
  overflow:hidden
}
.workflow-canvas {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  opacity:0
}
.workflow-visual.webgl-ready canvas {
  opacity:1
}
.workflow-fallback {
  position:absolute;
  inset:23% 32%;
  border:2px solid #6c7c90;
  border-radius:28px;
  background:linear-gradient(120deg,#6c7c90,#141b28 55%);
  box-shadow:14px 14px 0 #354152
}
.workflow-fallback::after {
  content:'';
  position:absolute;
  top:18%;
  left:25%;
  width:50%;
  aspect-ratio:1;
  border:10px solid #253244;
  border-radius:50%;
  background:#141b28
}
.webgl-ready .workflow-fallback {
  display:none
}
.workflow-visual:not(.webgl-ready) .workflow-pause {
  display:none;
}
.workflow-pause {
  position:absolute;
  right:22px;
  top:20px;
  min-height:44px;
  border:1px solid #4b5565;
  padding:10px 15px;
  background:transparent;
  color:#edf1f5;
  font-size:12px
}
.workflow-caption {
  position:absolute;
  bottom:28px;
  left:28px;
  right:28px;
  display:grid;
  gap:12px;
  color:#edf1f5;
  font:16px var(--head)
}
.workflow-caption>span:first-child {
  font:10px var(--code);
  color:#b8c4d2
}
.workflow-progress {
  position:absolute;
  bottom:0;
  left:0;
  height:2px;
  width:calc(var(--workflow-progress,0)*100%);
  background:var(--signal)
}
.steps {
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:step
}
.step {
  position:relative;
  padding:32px 0 54px 48px;
  border-top:1px solid var(--rule)
}
.step::before {
  counter-increment:step;
  content:'0' counter(step);
  position:absolute;
  left:0;
  top:39px;
  font:11px var(--code);
  color:var(--muted)
}
.step.is-current::before {
  color:var(--accent)
}
.step h3 {
  font-size:30px;
  margin-bottom:20px
}
.step p {
  color:var(--ink-2);
  font-size:16px
}
.step .spec {
  display:block;
  font:10px/1.8 var(--code);
  color:var(--accent);
  margin-top:24px
}
section#erfassung {
  background:#edf1f5
}
.table-wrap {
  overflow:auto;
  border-block:1px solid var(--rule);
  overscroll-behavior-inline:contain
}
.table-wrap:focus-visible {
  outline-offset:4px
}
table.spec {
  width:100%;
  min-width:830px;
  border-collapse:collapse;
  text-align:left;
  font-size:14px
}
table.spec th {
  padding:18px 20px;
  font:10px/1.5 var(--code);
  color:var(--muted);
  border-bottom:1px solid var(--rule);
  vertical-align:top
}
table.spec td {
  vertical-align:top;
  padding:26px 20px;
  border-bottom:1px solid var(--rule);
  color:var(--ink-2)
}
table.spec td:first-child {
  width:26%;
  font-weight:600;
  color:var(--ink)
}
table.spec td small {
  display:block;
  font-size:11px;
  font-weight:400;
  margin-top:8px;
  color:var(--muted)
}
table.spec th:first-child,table.spec td:first-child {
  padding-left:0
}
table.spec th:last-child,table.spec td:last-child {
  padding-right:0
}
table.spec tr:last-child td {
  border-bottom:0
}
.hw {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:60px
}
.hw>div {
  border-top:1px solid var(--rule);
  padding-top:24px
}
.hw b {
  display:block;
  font:500 25px/1.2 var(--head);
  letter-spacing:-.03em;
  margin-bottom:18px
}
.hw p {
  font-size:14px;
  color:var(--ink-2)
}
section#pilot {
  background:var(--bg)
}
.terms {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:34px;
  margin-bottom:60px
}
.terms>div {
  border-top:1px solid var(--rule);
  padding-top:25px
}
.terms b {
  display:block;
  font:500 clamp(22px,2.7vw,42px)/1.2 var(--head);
  letter-spacing:-.04em;
  margin-bottom:12px
}
.terms span {
  font-size:13px;
  color:var(--ink-2)
}
.timeline {
  list-style:none;
  padding:0;
  margin:0
}
.timeline li {
  display:grid;
  grid-template-columns:1fr 1.3fr 2fr;
  gap:40px;
  border-top:1px solid var(--rule);
  padding:28px 0
}
.timeline h3 {
  font-size:25px
}
.timeline p {
  font-size:14px;
  color:var(--ink-2)
}
.timeline .when {
  padding-top:5px
}
/* Robotics: image, pose and labels are aligned illustrations, never live inference. */
.sec-models {
  padding-bottom:80px;
  background:#141b28;
  color:#edf1f5
}
.buyers-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:64px
}
.buyers-grid h1 {
  font-size:clamp(44px,5vw,76px);
  max-width:15ch
}
.buyers-grid .eyebrow,.models-partners .eyebrow {
  color:#b8c4d2
}
.buyers-grid .lede {
  color:#b8c4d2
}
.model-specification {
  padding-top:15px
}
.specs {
  list-style:none;
  margin:0 0 34px;
  padding:0;
  border-top:1px solid #4b5565
}
.specs li {
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid #354152;
  font-size:14px
}
.specs span {
  font:11px/1.8 var(--code);
  color:#b8c4d2
}
.sec-models .hero-ctas {
  gap:12px
}
.btn-light {
  border-color:#6c7c90;
  color:#edf1f5
}
.btn-light.btn-primary {
  background:#edf1f5;
  color:#1f2937;
  border-color:#edf1f5
}
.btn-light:hover {
  color:#edf1f5;
  background:#202c3e
}
.btn-light.btn-primary:hover {
  background:#b8c4d2;
  color:#1f2937
}
.modalities {
  margin-top:75px;
  position:relative;
  border-block:1px solid #4b5565;
  padding:24px 0
}
.modality-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  color:#b8c4d2;
  font:10px/1.6 var(--code);
  margin-bottom:25px
}
.modality-top .btn-small {
  color:#edf1f5;
  border-color:#6c7c90
}
.modality-panels {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px
}
.modality-panel {
  position:relative;
  background:#141b28;
  aspect-ratio:16/11;
  overflow:hidden
}
.modality-panel>video,.modality-panel>img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.4)
}
.modality-panel.pose-panel>img {
  object-fit:contain;
  background:#202c3e
}
.modality-panel>span {
  position:absolute;
  left:14px;
  top:14px;
  font:500 12px/1.4 var(--sans);
  background:#141b28c9;
  color:#edf1f5;
  padding:7px 9px
}
.label-track {
  list-style:none;
  padding:56px 24px 20px;
  margin:0;
  display:grid;
  gap:14px;
  font:11px var(--code);
  color:#b8c4d2
}
.label-track li {
  padding:12px;
  border:1px solid #4b5565
}
.modality-axis {
  display:flex;
  align-items:center;
  gap:24px;
  color:#91a2b5;
  font:10px var(--code);
  padding-top:24px
}
.modality-axis::before {
  content:'';
  height:1px;
  background:#4b5565;
  flex:1
}
.modality-axis::after {
  content:'→';
  font-size:20px
}
.models-partners {
  padding-top:64px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px
}
.perks {
  list-style:none;
  margin:18px 0 0;
  padding:0
}
.perks li {
  border-top:1px solid #354152;
  padding:17px 0;
  color:#b8c4d2;
  font-size:14px
}
.perks b {
  color:#edf1f5
}
.models-stat {
  border-top:1px solid #4b5565;
  padding-top:25px
}
.models-stat b {
  display:block;
  font:500 56px/1.1 var(--head);
  letter-spacing:-.045em;
  margin-bottom:18px
}
.models-stat span {
  display:block;
  color:#b8c4d2;
  font-size:14px
}
.models-stat .fine {
  color:#b8c4d2;
  margin-top:16px
}
/* Trust reads like a clear agreement, with six numbered promises. */
.trust-page #datenschutz .sec-head {
  max-width:1250px
}
.trust-page h1 {
  max-width:20ch
}
.purpose {
  display:grid;
  grid-template-columns:1fr 4fr;
  gap:40px;
  padding:40px;
  background:#eaf0f5;
  margin-bottom:64px
}
.purpose .tag {
  align-self:start;
  justify-self:start
}
.purpose p {
  font-size:18px;
  color:var(--ink-2)
}
.commit {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 72px
}
.commit>div {
  position:relative;
  padding:35px 0 42px;
  border-top:1px solid var(--rule)
}

.commit svg {
  display:none
}
.commit h3 {
  font-size:28px;
  margin-bottom:18px
}
.commit p {
  font-size:15px;
  color:var(--ink-2)
}
.commit b {
  color:var(--ink)
}
.bonus {
  margin-top:70px;
  padding:54px 0;
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:80px;
  border-block:1px solid var(--rule)
}
.bonus h3 {
  font-size:38px;
  max-width:15ch
}
.bonus p {
  color:var(--ink-2);
  font-size:15px
}
.bonus p+p {
  margin-top:20px
}
.docs {
  margin-top:76px
}
.incl-head {
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:baseline;
  margin-bottom:35px
}
.incl-head span {
  font:10px var(--code);
  color:var(--accent)
}
.docs-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 40px
}
.docs-grid>div {
  border-top:1px solid var(--rule);
  padding-top:25px
}
.docs-grid svg {
  display:none
}
.docs-grid b {
  display:block;
  font-weight:500;
  font-size:18px;
  margin-bottom:14px
}
.docs-grid p {
  color:var(--ink-2);
  font-size:14px
}
.docs .text-link {
  margin-top:36px
}
.legal-note {
  display:flex;
  gap:32px;
  margin-top:42px;
  padding-top:25px;
  border-top:1px solid var(--rule);
  color:var(--ink-2);
  font-size:13px
}
.legal-note .tag {
  align-self:start
}
section#faq {
  background:#edf1f5
}
#faq>.wrap {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:80px
}
#faq .sec-head {
  align-self:start;
  position:sticky;
  top:calc(var(--nav-h) + 30px)
}
.faq details {
  border-top:1px solid var(--rule)
}
.faq details:last-child {
  border-bottom:1px solid var(--rule)
}
.faq summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  font:500 19px/1.5 var(--head);
  padding:24px 0;
  cursor:pointer
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary::after {
  content:'+';
  font-size:25px;
  font-weight:400;
  flex:none;
  color:var(--accent)
}
.faq details[open] summary::after {
  content:'−'
}
.faq .a {
  font-size:15px;
  color:var(--ink-2);
  padding:0 32px 28px 0
}
.faq .a p+p {
  margin-top:18px
}
/* Calculator and contact: quiet working surfaces. */
section#rechner {
  background:var(--bg)
}
.planner-page .sec-head {
  max-width:1200px
}
.planner-page h1 {
  max-width:20ch
}
.est {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start
}
.est-form {
  padding-top:30px;
  border-top:1px solid var(--rule)
}
.field {
  border:0;
  margin:0 0 36px;
  padding:0
}
.field-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  margin-bottom:22px
}
.field label,.field legend {
  font-size:15px;
  font-weight:500
}
.field legend {
  margin-bottom:20px
}
.field-head label {
  max-width:28ch
}
.field output {
  font:500 32px/1 var(--head);
  letter-spacing:-.035em;
  text-align:right
}
.field output small {
  display:block;
  font:10px/1.6 var(--code);
  color:var(--muted);
  margin-top:7px;
  white-space:nowrap
}
input[type=range] {
  width:100%;
  accent-color:var(--accent);
  height:28px;
  cursor:pointer
}
.range-scale {
  display:flex;
  justify-content:space-between;
  font:10px var(--code);
  color:var(--muted)
}
.est-form .seg {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}
.seg input,.chips input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.seg label {
  display:grid;
  gap:6px;
  text-align:center;
  border:1px solid var(--rule-strong);
  padding:14px 7px;
  cursor:pointer;
  min-height:76px
}
.seg small {
  font-size:10px;
  font-weight:400
}
.seg input:checked+label {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff
}
.seg input:focus-visible+label,.chips input:focus-visible+label {
  outline:2px solid var(--accent);
  outline-offset:4px
}
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.chips label {
  border:1px solid var(--rule-strong);
  padding:10px 14px;
  min-height:44px;
  font-size:12px;
  font-weight:400;
  cursor:pointer
}
.chips label::before {
  content:'+';
  margin-right:10px
}
.chips input:checked+label {
  background:#eaf0f5;
  border-color:var(--accent);
  color:var(--accent)
}
.chips input:checked+label::before {
  content:'✓'
}
.est-result {
  background:#eaf0f5;
  padding:36px;
  display:grid;
  gap:24px
}
.est-result .eyebrow {
  font-size:10px
}
.est-big {
  display:flex;
  flex-wrap:wrap;
  gap:0 10px;
  font:500 clamp(34px,3.15vw,50px)/1.15 var(--head);
  letter-spacing:-.05em
}
.est-big span:not(.dash) {
  white-space:nowrap
}
.est-unit {
  font:10px/1.8 var(--code);
  color:var(--muted);
  margin-top:-10px
}
.est-lines {
  margin:0
}
.est-lines>div {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid #b8c4d2;
  padding:14px 0;
  font-size:13px
}
.est-lines dt {
  color:var(--ink-2)
}
.est-lines dd {
  font-weight:500;
  margin:0;
  white-space:nowrap
}
.est-lines small {
  display:block;
  color:var(--muted);
  font:9px/1.6 var(--code);
  text-align:right
}
.est-result .fine {
  font-size:12px
}
.est-result .btn {
  justify-self:start
}
section#kontakt {
  background:var(--bg)
}
.contact-page h1 {
  max-width:13ch
}
.contact-page .sec-head {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px 80px;
  max-width:none
}
.contact-page .sec-head .eyebrow {
  grid-column:1/-1
}
.contact-page .sec-head .lede {
  align-self:end
}
.apply {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:80px
}
.apply-side>p {
  margin-bottom:30px;
  font-size:18px
}
.apply-side ol {
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:apply
}
.apply-side li {
  padding:22px 0 22px 36px;
  border-top:1px solid var(--rule);
  position:relative;
  font-size:14px;
  color:var(--ink-2)
}
.apply-side li::before {
  counter-increment:apply;
  content:'0' counter(apply);
  position:absolute;
  left:0;
  top:25px;
  font:10px var(--code);
  color:var(--accent)
}
.contact-direct {
  font-size:22px;
  letter-spacing:-.025em;
  margin-bottom:30px
}
.contact-direct a {
  text-decoration:none
}
.form {
  display:grid;
  gap:26px;
  padding:34px;
  background:#edf1f5
}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}
.f {
  display:flex;
  flex-direction:column;
  gap:9px
}
.f label {
  font-size:12px;
  line-height:1.5
}
.f input,.f select,.f textarea {
  width:100%;
  min-width:0;
  min-height:48px;
  border:1px solid #b8c4d2;
  padding:12px;
  background:#f5f7fa;
  color:var(--ink);
  border-radius:0;
  font-size:16px
}
.f textarea {
  min-height:135px;
  resize:vertical
}
.form-foot {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  align-items:center
}
.form-foot .mail-note {
  width:100%
}
.form-foot .fine {
  font-size:11px
}
.mail-dialog {
  position:fixed;
  max-width:min(720px,calc(100% - 36px));
  width:100%;
  max-height:90dvh;
  margin:auto;
  padding:38px;
  border:1px solid var(--rule);
  color:var(--ink);
  background:var(--bg)
}
.mail-dialog::backdrop {
  background:#141b28c9
}
.mail-dialog h2 {
  font-size:38px;
  margin-bottom:18px
}
.mail-dialog p {
  margin-bottom:20px
}
.dialog-close {
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  font-size:26px;
  border:0;
  background:transparent;
  color:var(--ink)
}
.mail-preview {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-height:35dvh;
  overflow:auto;
  padding:22px;
  background:#edf1f5;
  border:1px solid var(--rule);
  font:12px/1.7 var(--code);
  margin:24px 0
}
.dialog-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
.copy-status {
  min-height:24px;
  font-size:13px;
  margin-top:16px
}
/* Responsive compositions. All content survives; tables alone may scroll. */
@media(max-width:1199px) {
  .benefit {
    gap:24px
  }
  .workflow-layout {
    gap:40px
  }
  .workflow-visual {
    height:520px
  }
  .est {
    gap:36px
  }
  .apply {
    gap:40px
  }
  .est-result {
    padding:26px
  }
  .buyers-grid {
    gap:40px
  }
  .specs li {
    grid-template-columns:1fr;
    gap:6px
  }
  .modality-panel {
    aspect-ratio:1
  }
  .label-track {
    padding:48px 16px 15px;
    gap:9px
  }
  .label-track li {
    padding:10px
  }
}
@media(max-width:899px) {
  .cinema-copy { padding-top:46px; }
  .hero h1 { font-size:clamp(44px,6vw,58px); }

  .hero-intro {
    gap:40px;
    grid-template-columns:1fr 1.7fr;
    padding-block:50px
  }
  .facts {
    gap:25px
  }
  .stats-grid {
    gap:24px
  }
  .stats-grid b {
    font-size:56px
  }
  .stats-grid>div>span {
    font-size:12px
  }
  .reel-head {
    display:grid
  }
  .reel-head .btn-small {
    justify-self:start
  }
  .reel-grid figure:nth-child(even) {
    padding-top:50px
  }
  .reel-grid figcaption {
    grid-template-columns:1fr;
    gap:10px
  }
  .benefit {
    grid-template-columns:1fr 2fr;
    gap:20px 40px
  }
  .benefit>p {
    grid-column:2
  }
  .benefit .tagline {
    grid-column:2
  }
  .system-layout {
    gap:40px
  }
  .system-returns {
    padding-left:28px
  }
  .system-path li {
    font-size:18px
  }
  .trust-teaser>.wrap {
    gap:40px
  }
  .plain-text {
    gap:30px
  }
  .partner-model li {
    grid-template-columns:1fr;
    gap:8px
  }
  .ledger {
    gap:25px
  }
  .ledger h3 {
    font-size:23px
  }
  .why {
    gap:35px
  }
  .why h3 {
    font-size:25px
  }
  #rueckfluss .grid-2 {
    grid-template-columns:1fr
  }
  .products { display:block; }
  .products h3 {
    font-size:24px
  }
  .workflow-layout {
    grid-template-columns:1fr 1.2fr;
    gap:30px
  }
  .workflow-visual {
    height:420px
  }
  .step {
    padding-left:30px
  }
  .step h3 {
    font-size:25px
  }
  .step p {
    font-size:14px
  }
  .step::before {
    top:37px
  }
  .hw {
    gap:30px
  }
  .timeline li {
    grid-template-columns:1fr 2fr;
    gap:12px 30px
  }
  .timeline p {
    grid-column:2
  }
  .terms {
    gap:22px
  }
  .terms b {
    font-size:25px
  }
  .buyers-grid {
    grid-template-columns:1fr
  }
  .buyers-grid h1 {
    max-width:20ch
  }
  .specs li {
    grid-template-columns:1fr auto
  }
  .modality-panels {
    grid-template-columns:1fr 1fr
  }
  .modality-panel:last-child {
    grid-column:1/-1;
    aspect-ratio:auto
  }
  .label-track {
    grid-template-columns:repeat(3,1fr);
    padding:48px 22px 20px
  }
  .models-partners {
    gap:40px
  }
  .purpose {
    grid-template-columns:1fr;
    padding:30px;
    gap:20px
  }
  .commit {
    gap:0 40px
  }
  .commit h3 {
    font-size:24px
  }
  .bonus {
    gap:40px
  }
  .bonus h3 {
    font-size:32px
  }
  .docs-grid {
    grid-template-columns:1fr 1fr
  }
  #faq>.wrap {
    grid-template-columns:1fr;
    gap:0
  }
  #faq .sec-head {
    position:static
  }
  .est {
    grid-template-columns:1fr 1fr;
    gap:24px
  }
  .est-big {
    font-size:34px
  }
  .est-lines>div {
    gap:16px;
    font-size:12px
  }
  .est-result {
    padding:24px
  }
  .field-head {
    gap:15px
  }
  .field label,.field legend {
    font-size:13px
  }
  .field output {
    font-size:28px
  }
  .contact-page .sec-head {
    gap:24px 40px
  }
  .apply {
    grid-template-columns:1fr 1.3fr;
    gap:32px
  }
  .form {
    padding:24px
  }
  .form-row {
    grid-template-columns:1fr
  }
  .contact-direct {
    font-size:19px
  }
}
@media(max-width:699px) {
  .cinema-copy { padding:38px var(--gutter) 14px; }
  .hero h1 { font-size:clamp(37px,8vw,53px); max-width:20ch; }
  .hero-summary { font-size:14px; margin-top:22px; }
  .hero-ctas { gap:14px 22px; margin-top:24px; }
  .cinema-scroll { font-size:9px; }
  .capture { height:480px; min-height:0; }
  .is-pinned .capture { height:calc(100svh - var(--nav-h)); }
  .capture-head { padding-top:10px; }
  .video-plane { width:94vw; border-radius:5px; transform:translate(-50%,-50%); }

  .capture-explainer {
    grid-template-columns:1fr;
    gap:24px
  }
  .hero-intro {
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
    padding:45px var(--gutter)
  }
  .hero-intro .intro-title {
    max-width:20ch;
    font-size:32px
  }
  .hero-intro .lede {
    font-size:17px
  }
  .hero-facts {
    padding-block:34px
  }
  .facts {
    grid-template-columns:1fr;
    gap:24px
  }
  .facts li { grid-template-columns:1fr; gap:12px; padding:0; }
  .capture-explainer>div { grid-template-columns:1fr; gap:4px; }
  .ledger>div:first-child { grid-row:auto; }

  .facts li:last-child {
    border-bottom:0;
    padding-bottom:0
  }
  .stats-grid {
    grid-template-columns:1fr 1fr;
    gap:30px 24px
  }
  .stats-grid b {
    font-size:52px
  }
  .stats-grid>div>span {
    font-size:12px
  }
  .stats {
    padding-block:40px 12px
  }
  .reel-grid {
    gap:34px;
    grid-template-columns:1fr
  }
  .reel-grid figure:nth-child(even) {
    padding-top:0
  }
  .reel-grid figcaption {
    grid-template-columns:1fr 1.2fr;
    gap:22px
  }
  .reel-grid figcaption b {
    font-size:22px
  }
  .reel-grid figcaption span {
    font-size:12px
  }
  .reel-head {
    margin-bottom:35px
  }
  .reel .fine {
    font-size:11px
  }
  .benefit {
    grid-template-columns:1fr;
    gap:22px;
    padding:35px 0
  }
  .benefit .k {
    display:flex;
    align-items:center;
    gap:20px;
    font-size:44px
  }
  .benefit .k small {
    margin:0;
    max-width:22ch;
    font-size:10px
  }
  .benefit h3 {
    max-width:20ch;
    font-size:30px
  }
  .benefit>p,.benefit .tagline {
    grid-column:auto
  }
  .benefit>p {
    font-size:15px
  }
  .system-layout,.trust-teaser>.wrap {
    grid-template-columns:1fr;
    gap:40px
  }
  .system-returns {
    padding-left:24px;
    gap:25px
  }
  .system-returns h3 {
    font-size:27px
  }
  .system-path li {
    font-size:19px
  }
  .page-band {
    grid-template-columns:1fr;
    margin-bottom:44px
  }
  .page-band img {
    aspect-ratio:16/9
  }
  .page-band figcaption {
    padding:30px
  }
  .page-band b {
    font-size:32px
  }
  .plain-text {
    display:block
  }
  .plain-text>p {
    margin-bottom:22px;
    font-size:16px
  }
  .plain-text>p:first-child {
    font-size:22px
  }
  .plain-text .split {
    margin-top:35px
  }
  .partner-model li {
    grid-template-columns:1fr 1.5fr;
    gap:20px
  }
  .ledger {
    grid-template-columns:1fr;
    gap:36px;
    margin-top:0
  }
  .ledger>div {
    border-bottom:1px solid var(--rule);
    padding-bottom:30px
  }
  .ledger h3 {
    font-size:28px
  }

  .why {
    grid-template-columns:1fr;
    gap:35px
  }
  .why>div {
    padding-left:0
  }
  .why-line {
    padding-top:44px;
    font-size:38px
  }
  .products {
    grid-template-columns:1fr;
    gap:0
  }
  .products>div {
    padding-bottom:25px
  }
  .analysis {
    padding:24px
  }
  .analysis h3 {
    font-size:25px
  }
  .analysis-head .tag {
    display:none
  }
  .time-sculpture {
    height:290px
  }
  .sculpture-hint {
    gap:6px
  }
  .sculpture-hint button {
    font-size:10px;
    padding:7px
  }
  .chart svg {
    display:none
  }
  .chart {
    padding-top:25px
  }
  .cycle-legend {
    display:block;
    margin:0
  }
  .cycle-legend>div {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid var(--rule);
    padding:7px 0;
    font-size:12px
  }
  .cycle-legend dd {
    margin:0;
    font-family:var(--code)
  }
  .workflow-layout {
    grid-template-columns:1fr
  }
  .workflow-visual {
    position:relative;
    top:auto;
    height:340px
  }
  .steps {
    margin-top:10px
  }
  .step {
    padding:26px 0 35px 36px
  }
  .step h3 {
    font-size:28px
  }
  .step p {
    font-size:15px
  }
  .step .spec {
    font-size:10px
  }
  .step::before {
    top:33px
  }
  .hw {
    grid-template-columns:1fr;
    gap:30px
  }
  .hw b {
    font-size:26px
  }
  .terms {
    grid-template-columns:1fr 1fr;
    gap:30px
  }
  .terms b {
    font-size:28px
  }
  .timeline li {
    grid-template-columns:1fr;
    gap:13px;
    padding:25px 0
  }
  .timeline p {
    grid-column:auto
  }
  .modality-panels {
    grid-template-columns:1fr
  }
  .modality-panel {
    aspect-ratio:16/10
  }
  .modality-panel:last-child {
    grid-column:auto
  }
  .label-track {
    grid-template-columns:1fr;
    padding-top:60px
  }
  .modality-top {
    align-items:flex-start
  }
  .modality-top>span {
    max-width:23ch;
    font-size:9px
  }
  .modality-top .btn-small {
    font-size:10px;
    padding:9px
  }
  .models-partners {
    grid-template-columns:1fr;
    gap:35px
  }
  .specs li {
    grid-template-columns:1fr auto;
    font-size:13px;
    gap:10px
  }
  .specs li span {
    font-size:10px
  }
  .buyers-grid h1 {
    font-size:43px;
    max-width:16ch
  }
  .models-stat b {
    font-size:48px
  }
  .modalities {
    margin-top:45px
  }
  .purpose {
    padding:24px
  }
  .purpose p {
    font-size:16px
  }
  .commit {
    grid-template-columns:1fr
  }
  .commit>div {
    padding:28px 0 30px 36px
  }

  .commit h3 {
    font-size:26px
  }
  .bonus {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:35px;
    padding-block:35px
  }
  .bonus h3 {
    max-width:20ch
  }
  .docs {
    margin-top:44px
  }
  .incl-head {
    display:grid;
    gap:14px
  }
  .docs-grid {
    grid-template-columns:1fr;
    gap:22px
  }
  .legal-note {
    display:grid;
    gap:15px
  }
  .legal-note .tag {
    justify-self:start
  }
  .faq summary {
    font-size:18px;
    gap:20px
  }
  .faq .a {
    padding-right:0;
    font-size:14px
  }
  .est {
    grid-template-columns:1fr;
    gap:28px
  }
  .est-form {
    padding-top:20px
  }
  .field-head label {
    font-size:15px
  }
  .field legend {
    font-size:15px
  }
  .field {
    margin-bottom:34px
  }
  .est-result {
    padding:24px
  }
  .est-big {
    font-size:37px
  }
  .est-lines>div {
    font-size:13px
  }
  .contact-page .sec-head {
    grid-template-columns:1fr
  }
  .apply {
    grid-template-columns:1fr;
    gap:40px
  }
  .apply-side {
    order:2
  }
  .form {
    padding:24px
  }
  .contact-direct {
    font-size:22px
  }
  .mail-dialog {
    padding:30px 22px
  }
  .dialog-actions {
    display:grid
  }
  .mail-dialog .btn {
    width:100%
  }
  .mail-preview {
    padding:15px;
    font-size:11px
  }
  .mail-dialog h2 {
    font-size:34px
  }
}
@media(max-width:359px) {
  .hero h1 { font-size:35px; }
  .hero-ctas { flex-direction:column; }

  .reel-grid figcaption {
    grid-template-columns:1fr
  }
  .partner-model li {
    grid-template-columns:1fr;
    gap:8px
  }
  .est-big {
    font-size:32px
  }
  .form {
    padding:20px
  }
  .specs li {
    grid-template-columns:1fr;
    gap:4px
  }
  .analysis {
    padding:18px
  }
  .terms b {
    font-size:25px
  }
}
@media(max-width:699px) and (max-height:700px) {
}
@media(max-height:500px) and (min-width:700px) {
  .workflow-visual {
    position:relative;
    top:0;
    height:380px
  }
}