/* STEP2NC-Produktseite (single-programm-step2nc.php).
   Übernommen aus step2nc/index.html (Stand 09.10.2026); alles unter .seite-step2nc, damit es nicht mit main.css kollidiert.
   Eigener Kopf/Fuß der Landingpage entfällt – Kopf und Fuß kommen vom Theme, darunter die STEP2NC-Leiste (.s2n-leiste).
   Ablauf: Hero → Sticky-Bühne (iPad zerlegt sich) → Ablauf → Statement → Funktionen → Zyklen → Videos (nur wenn vorhanden) → KI-Bühne → Regeln → Testen */

.seite-step2nc {
  --graphite: #16181B;
  --bezel: #0B0C0E;
  --panel: #1F2226;
  --panel-deep: #0E1012;
  --viewer: #1A1D21;
  --line: #2E3238;
  --line-strong: #3A3F46;
  --fg: #EDEEEF;
  --soft: #C4C8CD;
  --muted: #A2A7AE;
  --signal: #FF6A13;
  --signal-soft: #FF9A5C;
  --on-signal: #16181B;

  --display: 'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue Condensed', Impact, sans-serif;
  --body: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --s2n-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(16px, 3vw, 24px);
  --max: 1312px;
  --akzent: var(--signal);
  --akzent-hell: var(--signal-soft);

  background: var(--graphite);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}
.seite-step2nc a { color: var(--signal); }
.seite-step2nc a:hover { color: var(--signal-soft); }
.seite-step2nc :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

.seite-step2nc .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.seite-step2nc .eyebrow { font-family: var(--s2n-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.seite-step2nc .display { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.84; letter-spacing: -0.005em; margin: 0; text-wrap: balance; }
.seite-step2nc .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--soft); max-width: 36em; margin: 0; }

.seite-step2nc .btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 12px; font-weight: 800; font-size: 17px; text-decoration: none; border: 1px solid transparent; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.seite-step2nc .btn-signal, .seite-step2nc .btn-voll { background: var(--signal); color: var(--on-signal); }
.seite-step2nc .btn-signal:hover, .seite-step2nc .btn-voll:hover { background: var(--signal-soft); color: var(--on-signal); transform: translateY(-2px); }
.seite-step2nc .btn-ghost, .seite-step2nc .btn-rand { color: var(--fg); border-color: var(--line-strong); background: transparent; }
.seite-step2nc .btn-ghost:hover, .seite-step2nc .btn-rand:hover { color: var(--fg); border-color: var(--signal); transform: translateY(-2px); }

/* STEP2NC-Leiste unter dem Theme-Kopf (ersetzt den Kopf der Landingpage, klebt nicht) */
.seite-step2nc .s2n-leiste { border-bottom: 1px solid var(--line); }
.seite-step2nc .s2n-leiste .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 64px; padding-block: 8px; }
.seite-step2nc .s2n-logo { font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: 0.02em; color: var(--fg); text-decoration: none; }
.seite-step2nc .s2n-logo span { color: var(--signal); }
.seite-step2nc .s2n-logo:hover { color: var(--fg); }
.seite-step2nc .s2n-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-weight: 600; font-size: 15px; }
.seite-step2nc .s2n-nav a:not(.btn) { color: var(--muted); text-decoration: none; padding-block: 8px; }
.seite-step2nc .s2n-nav a:not(.btn):hover { color: var(--fg); }
.seite-step2nc .s2n-nav .btn { min-height: 44px; padding: 0 20px; font-size: 15px; border-radius: 10px; }
.seite-step2nc .nav-new { font-family: var(--s2n-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--on-signal); background: var(--signal); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 1px; }

/* Hero */
.seite-step2nc .s2n-hero { padding-block: clamp(48px, 8vw, 96px) 40px; display: flex; flex-direction: column; gap: 36px; }
/* Größe am längsten Wort „PROGRAMMIERUNG“ (≈ 8,1 × Schriftgröße breit, auch mit Ersatzschrift): passt immer in die Zeile */
.seite-step2nc .s2n-hero h1 { font-size: min(200px, calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 8.4)); }
.seite-step2nc .s2n-hero h1 .line { display: block; overflow: hidden; padding-top: 0.16em; margin-top: -0.16em; padding-bottom: 0.04em; }
.seite-step2nc .s2n-hero h1 .line > span { display: inline-block; animation: s2n-rise .9s cubic-bezier(.2,.7,.1,1) both; }
.seite-step2nc .s2n-hero h1 .line:nth-child(2) > span { animation-delay: .07s; }
.seite-step2nc .s2n-hero h1 .line:nth-child(3) > span { animation-delay: .14s; }
.seite-step2nc .s2n-hero h1 em { font-style: normal; color: var(--signal); }
@keyframes s2n-rise { from { transform: translateY(100%); } to { transform: none; } }
.seite-step2nc .hero-row { display: flex; flex-wrap: wrap; gap: 28px 40px; justify-content: space-between; align-items: flex-end; }
.seite-step2nc .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.seite-step2nc .specs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.seite-step2nc .specs li { font-family: var(--s2n-mono); font-size: 13px; color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; }
.seite-step2nc .scroll-hint { display: flex; align-items: center; gap: 10px; font-family: var(--s2n-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--muted); }
.seite-step2nc .scroll-hint svg { animation: s2n-nudge 1.8s ease-in-out infinite; }
@keyframes s2n-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Bühne: iPad zerlegt sich */
.seite-step2nc .stage { position: relative; height: 330vh; }
.seite-step2nc .stage-sticky { position: sticky; top: 72px; height: calc(100svh - 72px); display: flex; flex-direction: column; gap: 12px; padding-block: 16px 20px; }
.seite-step2nc .stage-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 24px; }
.seite-step2nc .stage-head h2 { font-size: clamp(34px, 5vw, 72px); }
.seite-step2nc .stage-count { font-family: var(--s2n-mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.seite-step2nc .stage-count b { color: var(--signal); font-weight: 500; }
.seite-step2nc .scene { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.seite-step2nc .device-box { container-type: inline-size; width: min(1060px, 100%, calc((100svh - 330px) * 4 / 3)); max-width: 100%; perspective: 2400px; }
.seite-step2nc .device {
  --tilt: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  transform-style: preserve-3d;
  transform: scale(calc(1 - 0.12 * var(--tilt))) rotateX(calc(var(--tilt) * 52deg)) rotateZ(calc(var(--tilt) * -30deg));
  will-change: transform;
}
.seite-step2nc .bezel { position: absolute; inset: 0; background: var(--bezel); border: 1px solid var(--line-strong); border-radius: 3.4cqi; }
.seite-step2nc .screen { position: absolute; inset: 1.4cqi; background: #111316; border-radius: 2.2cqi; }
.seite-step2nc .pane {
  --l: 0;
  position: absolute; top: 2cqi; bottom: 2cqi;
  border: 1px solid var(--line);
  border-radius: 1.4cqi;
  padding: 1.4cqi;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 1cqi;
  transform: translateZ(calc(var(--l) * var(--rise)));
  box-shadow: 0 calc(var(--l) * 3cqi) calc(var(--l) * 6cqi) rgba(0, 0, 0, 0.45);
  transition: border-color .35s ease;
  will-change: transform;
}
.seite-step2nc .pane.lifted { border-color: var(--signal); }
.seite-step2nc .pane-tag { font-family: var(--s2n-mono); font-size: clamp(6px, 1.05cqi, 12px); letter-spacing: 0.12em; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.seite-step2nc .pane.lifted .pane-tag { color: var(--signal); }
.seite-step2nc .pane-editor { left: 2cqi; width: 28%; background: var(--panel-deep); --rise: 7cqi; }
.seite-step2nc .pane-viewer { left: calc(2cqi + 28% + 1cqi); width: calc(42% - 2cqi); background: var(--viewer); --rise: 14cqi; }
.seite-step2nc .pane-panel { right: 2cqi; width: 27%; background: var(--panel-deep); --rise: 21cqi; }
.seite-step2nc .nc { margin: 0; font-family: var(--s2n-mono); font-size: clamp(4px, 1.02cqi, 12px); line-height: 1.75; color: var(--soft); white-space: pre; }
.seite-step2nc .nc .hl { color: var(--signal); }
.seite-step2nc .viewer-tools { display: flex; gap: 0.6cqi; }
.seite-step2nc .viewer-tools span { width: 2.6cqi; height: 2.6cqi; border-radius: 0.6cqi; background: var(--panel); border: 1px solid var(--line); }
.seite-step2nc .viewer-tools span.on { border-color: var(--signal); }
.seite-step2nc .viewer-art { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.seite-step2nc .viewer-art svg { width: 94%; height: auto; max-height: 100%; }
.seite-step2nc .tree { display: flex; flex-direction: column; gap: 0.5cqi; font-size: clamp(5px, 1.1cqi, 13px); color: var(--soft); }
.seite-step2nc .tree span { padding: 0.35cqi 0.7cqi; border-radius: 0.5cqi; }
.seite-step2nc .tree .sel { background: var(--signal); color: var(--on-signal); font-weight: 800; }
.seite-step2nc .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6cqi; }
.seite-step2nc .tile { background: var(--panel); border-radius: 0.8cqi; padding: 0.8cqi; display: flex; flex-direction: column; }
.seite-step2nc .tile small { font-family: var(--s2n-mono); font-size: clamp(4px, 0.9cqi, 11px); color: var(--muted); }
.seite-step2nc .tile b { font-size: clamp(7px, 1.7cqi, 20px); font-variant-numeric: tabular-nums; }
.seite-step2nc .nc-mini { margin-top: auto; font-family: var(--s2n-mono); font-size: clamp(4px, 0.9cqi, 11px); color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.8cqi; line-height: 1.6; }

.seite-step2nc .captions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.seite-step2nc .caption { border-top: 2px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; transition: border-color .3s ease, opacity .3s ease; opacity: .55; }
.seite-step2nc .caption.active { border-top-color: var(--signal); opacity: 1; }
.seite-step2nc .caption .eyebrow { font-size: 12px; }
.seite-step2nc .caption strong { font-size: 19px; }
.seite-step2nc .caption span:last-child { color: var(--soft); font-size: 15px; line-height: 1.45; }

/* KI-Bühne: Auftrag tippt sich ein → Plan wird geprüft → Zyklen fliegen in den Editor */
.seite-step2nc .ki-stage { position: relative; height: 380vh; }
.seite-step2nc .ki-box { container-type: inline-size; width: min(1240px, 100%, calc((100svh - 300px) * 16 / 9)); max-width: 100%; }
.seite-step2nc .ki-screen { --m: 1; position: relative; aspect-ratio: 16 / 9; background: var(--bezel); border: 1px solid var(--line-strong); border-radius: 2.6cqi; overflow: hidden; }
.seite-step2nc .ki-inner { position: absolute; inset: 1.2cqi; background: #111316; border-radius: 1.8cqi; }
.seite-step2nc .ki-pane { position: absolute; top: 3%; bottom: 3%; border: 1px solid var(--line); border-radius: 1.2cqi; padding: 1.4cqi; display: flex; flex-direction: column; gap: 1cqi; overflow: hidden; }
.seite-step2nc .ki-editor { left: 2.2%; width: 30%; background: var(--panel-deep); }
.seite-step2nc .ki-viewer { left: 33.6%; width: 33.4%; background: var(--viewer); }
.seite-step2nc .ki-chat { left: 68.4%; width: 29.4%; background: var(--panel-deep); border-color: var(--signal); }
.seite-step2nc .ki-chat .pane-tag { color: var(--signal); }
.seite-step2nc .ki-lines div { font-family: var(--s2n-mono); font-size: clamp(calc(7px * var(--m)), 1.15cqi, 14px); line-height: 2.05cqi; height: 2.05cqi; white-space: pre; color: var(--soft); opacity: 0; transition: color .8s ease; }
.seite-step2nc .ki-lines div.on { opacity: 1; }
.seite-step2nc .ki-lines div.fresh { color: var(--signal); transition: none; }
.seite-step2nc .ki-groups { font-family: var(--s2n-mono); font-size: clamp(calc(7px * var(--m)), 1.05cqi, 13px); color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.4cqi 1.4cqi; }
.seite-step2nc .ki-groups .on { color: var(--signal); }
.seite-step2nc .ki-bubble { align-self: flex-end; width: 82%; background: var(--signal); color: var(--on-signal); border-radius: 1.2cqi 1.2cqi 0.3cqi 1.2cqi; padding: 1cqi 1.2cqi; font-size: clamp(calc(8px * var(--m)), 1.3cqi, 16px); line-height: 1.45; font-weight: 700; }
.seite-step2nc .ki-rest { visibility: hidden; }
.seite-step2nc .ki-caret { display: none; width: 0.5cqi; height: 1.3cqi; margin-left: 0.15cqi; vertical-align: -0.2cqi; background: var(--on-signal); animation: s2n-blink 1s steps(1) infinite; }
.seite-step2nc .ki-caret.on { display: inline-block; }
@keyframes s2n-blink { 50% { opacity: 0; } }
.seite-step2nc .ki-think { font-family: var(--s2n-mono); font-size: clamp(calc(7px * var(--m)), 1.05cqi, 13px); color: var(--muted); line-height: 1.6; opacity: 0; }
.seite-step2nc .ki-think b { color: var(--signal); font-weight: 500; }
.seite-step2nc .ki-plan { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 1.2cqi; padding: 1.2cqi; display: flex; flex-direction: column; gap: 0.7cqi; opacity: 0; will-change: transform; }
.seite-step2nc .ki-plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqi; }
.seite-step2nc .ki-plan-head strong { font-size: clamp(calc(8px * var(--m)), 1.35cqi, 17px); }
.seite-step2nc .ki-plan-head span { font-family: var(--s2n-mono); font-size: clamp(calc(7px * var(--m)), 1cqi, 12px); color: var(--muted); }
.seite-step2nc .ki-plan-head span.ok { color: var(--signal); }
.seite-step2nc .ki-row { height: 3.6cqi; display: flex; align-items: center; gap: 0.9cqi; border-top: 1px solid var(--line); }
.seite-step2nc .ki-row i { width: 2cqi; height: 2cqi; flex: none; border-radius: 50%; border: 1px solid #5A6068; display: flex; align-items: center; justify-content: center; transition: background-color .2s ease, border-color .2s ease; }
.seite-step2nc .ki-row i svg { width: 1.2cqi; height: 1.2cqi; opacity: 0; }
.seite-step2nc .ki-row.ok i { background: var(--signal); border-color: var(--signal); }
.seite-step2nc .ki-row.ok i svg { opacity: 1; }
.seite-step2nc .ki-row span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.seite-step2nc .ki-row b { font-size: clamp(calc(8px * var(--m)), 1.2cqi, 15px); }
.seite-step2nc .ki-row small { font-family: var(--s2n-mono); font-size: clamp(calc(7px * var(--m)), 1cqi, 12px); color: var(--muted); white-space: nowrap; }
.seite-step2nc .ki-run { margin-top: 0.4cqi; height: 3cqi; border-radius: 0.8cqi; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(calc(8px * var(--m)), 1.25cqi, 15px); border: 1px solid var(--signal); color: #5A6068; transition: background-color .2s ease, color .2s ease; }
.seite-step2nc .ki-run.ready { color: var(--signal); }
.seite-step2nc .ki-run.pressed { background: var(--signal); color: var(--on-signal); }
.seite-step2nc .ki-done { font-family: var(--s2n-mono); font-size: clamp(calc(7px * var(--m)), 1.05cqi, 13px); color: var(--signal-soft); opacity: 0; }
.seite-step2nc .ki-chip { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; transform-origin: left center; background: var(--signal); color: var(--on-signal); border-radius: 0.8cqi; padding: 0.6cqi 1.1cqi; font-family: var(--s2n-mono); font-weight: 500; font-size: clamp(calc(7px * var(--m)), 1.15cqi, 14px); white-space: nowrap; box-shadow: 0 1.4cqi 3cqi rgba(0, 0, 0, 0.55); will-change: transform, opacity; }
.seite-step2nc .captions-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Ablauf */
.seite-step2nc .section { padding-block: clamp(72px, 10vw, 128px); display: flex; flex-direction: column; gap: 40px; }
.seite-step2nc .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.seite-step2nc .section-head h2 { font-size: clamp(44px, 7vw, 112px); }
.seite-step2nc .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.seite-step2nc .step { border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.seite-step2nc .step-num { font-family: var(--display); font-weight: 900; font-size: 88px; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--signal); }
.seite-step2nc .step h3 { margin: 0; font-size: 24px; }
.seite-step2nc .step p { margin: 0; color: var(--soft); }
.seite-step2nc .step code { margin-top: auto; font-family: var(--s2n-mono); font-size: 13px; color: var(--signal); background: var(--panel-deep); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-x: auto; white-space: nowrap; }

/* Video-Slider als Coverflow (template-parts/video-slider.php, Entwurf A): alle Folien liegen im selben Rasterfeld,
   step2nc.js setzt je Folie --x (Versatz in % der Breite), --s (Größe), --r (Drehung), --o (Deckkraft), --z. Ohne JS: nur die erste. */
.seite-step2nc .video-slider { gap: 48px; }
.seite-step2nc .vs-kopf { display: flex; flex-direction: column; gap: 14px; }
.seite-step2nc .vs-buehne { display: grid; justify-items: center; align-items: center; perspective: 1600px; padding-block: 8px; overflow-x: clip; margin-inline: calc(-1 * var(--gutter)); }
.seite-step2nc .vs-folie { grid-area: 1 / 1; width: min(560px, 64vw); position: relative; z-index: var(--z, 1); opacity: var(--o, 1);
  transform: translateX(calc(var(--x, 0) * 1%)) scale(var(--s, 1)) rotateY(calc(var(--r, 0) * 1deg));
  filter: saturate(var(--sat, 1)); transition: transform .65s cubic-bezier(.2,.7,.1,1), opacity .65s ease, filter .65s ease; }
.seite-step2nc .vs-folie.ist-breit { width: min(680px, 76vw); } /* Breitbild (16:9) etwas breiter, damit es nicht zu klein wirkt */
.seite-step2nc .video-slider:not(.vs-bereit) .vs-folie:not(:first-child) { display: none; }
.seite-step2nc .vs-folie.ist-weg { visibility: hidden; }
.seite-step2nc .vs-rahmen { position: relative; background: var(--bezel); border: 1px solid var(--line); border-radius: 22px; padding: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.seite-step2nc .vs-rahmen video { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: contain; border-radius: 14px; background: #000; }
.seite-step2nc .vs-marke { position: absolute; left: 22px; top: 22px; font-family: var(--s2n-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(11, 12, 14, 0.85); padding: 6px 10px; border-radius: 8px; pointer-events: none; transition: opacity .3s ease; }
.seite-step2nc .vs-folie.ist-aktiv .vs-marke { opacity: 0; }
.seite-step2nc .vs-waehlen { position: absolute; inset: 0; width: 100%; border: 0; background: transparent; cursor: pointer; border-radius: 22px; }
.seite-step2nc .vs-unten { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.seite-step2nc .vs-info { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.seite-step2nc .vs-info strong { font-size: 24px; }
.seite-step2nc .vs-text { color: var(--soft); max-width: 36em; }
.seite-step2nc .vs-nr { font-family: var(--s2n-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--signal); }
.seite-step2nc .vs-pfeile { display: flex; gap: 20px; }
.seite-step2nc .vs-pfeil { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.seite-step2nc .vs-pfeil:hover { border-color: var(--signal); background: var(--signal); color: var(--on-signal); }
.seite-step2nc .vs-kasten { width: min(100%, 560px); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.seite-step2nc .vs-suchfeld { position: relative; color: var(--muted); }
.seite-step2nc .vs-suchfeld svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.seite-step2nc .vs-suchfeld input { width: 100%; height: 44px; padding: 0 14px 0 42px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--graphite); color: var(--fg); font: inherit; font-size: 15px; }
.seite-step2nc .vs-suchfeld input::placeholder { color: var(--muted); }
.seite-step2nc .vs-suchfeld input:focus-visible { border-color: var(--signal); }
.seite-step2nc .vs-liste { list-style: none; margin: 0; padding: 0; max-height: 236px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.seite-step2nc .vs-liste button { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--soft); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.seite-step2nc .vs-liste button:hover { background: var(--line); color: var(--fg); }
.seite-step2nc .vs-liste button[aria-current="true"] { background: var(--line); color: var(--fg); }
.seite-step2nc .vs-liste .vs-nr { min-width: 22px; }
.seite-step2nc .vs-zeile-titel { flex: 1; }
.seite-step2nc .vs-laeuft { display: none; font-family: var(--s2n-mono); font-size: 12px; color: var(--signal-soft); }
.seite-step2nc .vs-liste button[aria-current="true"] .vs-laeuft { display: inline; }
.seite-step2nc .vs-leer { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 15px; }

/* Statement */
.seite-step2nc .statement { background: var(--signal); color: var(--on-signal); overflow: hidden; }
.seite-step2nc .statement .wrap { padding-block: clamp(72px, 10vw, 128px); display: flex; flex-direction: column; gap: 32px; }
/* „NICHT ABTIPPEN.“ ≈ 7 × Schriftgröße breit; beim Scrollen wandern beide Zeilen nur nach innen */
.seite-step2nc .statement h2 { font-size: min(200px, calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 8.2)); line-height: 0.8; }
.seite-step2nc .statement h2 span { display: block; will-change: transform; }
.seite-step2nc .statement h2 span:last-child { text-align: right; }
.seite-step2nc .statement p { margin: 0; font-size: 20px; font-weight: 700; max-width: 30em; }

/* Funktionen */
.seite-step2nc .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.seite-step2nc .feature { border: 1px solid var(--line); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: border-color .25s ease, transform .25s ease; }
.seite-step2nc .feature:hover { border-color: var(--signal); transform: translateY(-4px); }
.seite-step2nc .feature .big { font-family: var(--display); font-weight: 900; font-size: 60px; line-height: 0.9; color: var(--signal); }
.seite-step2nc .feature h3 { margin: 0; font-size: 20px; }
.seite-step2nc .feature p { margin: 0; color: var(--soft); }

/* Zyklen */
.seite-step2nc .cycles { border-block: 1px solid var(--line); padding-block: 56px; display: flex; flex-direction: column; gap: 20px; overflow: hidden; }
.seite-step2nc .cycles-track { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 9vw, 140px); line-height: 1; white-space: nowrap; will-change: transform; }
.seite-step2nc .cycles-track i { font-style: normal; color: var(--line-strong); padding-inline: 0.2em; }
.seite-step2nc .cycles-track b { font-weight: 900; color: var(--signal); }
.seite-step2nc .cycles-list { color: var(--muted); font-size: 15px; margin: 0; max-width: 60em; }

/* Testen + Download-Kasten des Theme */
.seite-step2nc .cta { background: var(--panel); border-radius: 32px; padding: clamp(32px, 6vw, 88px); display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: center; }
.seite-step2nc .cta h2 { font-size: clamp(52px, 8vw, 128px); }
.seite-step2nc .cta h2 em { font-style: normal; color: var(--signal); }
.seite-step2nc .cta p { margin: 12px 0 0; color: var(--soft); }
.seite-step2nc .cta-rechts { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; flex: 0 1 480px; min-width: 0; }
.seite-step2nc .cta-rechts > .btn { min-height: 64px; font-size: 20px; padding: 0 36px; border-radius: 14px; }
.seite-step2nc .download-kasten { background: var(--panel-deep); border-color: var(--line); width: 100%; }
.seite-step2nc .download-kasten .btn { min-height: 48px; font-size: 16px; padding: 0 20px; border-radius: 10px; }
.seite-step2nc .download-kasten p { margin: 0; }
.seite-step2nc .download-kasten .text-leise { color: var(--soft); font-size: 15px; }

/* Einblenden beim Scrollen: nur Elemente, die beim Laden unterhalb des Bildschirms liegen */
.seite-step2nc .reveal-pending { opacity: 0; transform: translateY(28px); }
.seite-step2nc .reveal-done { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.1,1); }

@media (max-width: 760px) {
  .seite-step2nc .s2n-nav a:not(.btn) { display: none; }
  .seite-step2nc .captions { grid-template-columns: minmax(0, 1fr); }
  .seite-step2nc .caption { display: none; }
  .seite-step2nc .caption.active { display: flex; }
  .seite-step2nc .device-box { width: min(100%, calc((100svh - 300px) * 4 / 3)); }
  .seite-step2nc .ki-box { width: min(100%, calc((100svh - 280px) * 16 / 9)); }
  .seite-step2nc .ki-screen { --m: 0; } /* Handy: Bühne als verkleinertes Bild, ohne Mindest-Schriftgröße */
  .seite-step2nc .ki-think { display: none; }
  .seite-step2nc .vs-folie { width: 72vw; }
  .seite-step2nc .vs-folie.ist-breit { width: 84vw; }
  .seite-step2nc .vs-rahmen { border-radius: 16px; padding: 6px; }
  .seite-step2nc .vs-rahmen video { border-radius: 11px; }
  .seite-step2nc .vs-marke { left: 14px; top: 14px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .seite-step2nc .s2n-hero h1 .line > span, .seite-step2nc .scroll-hint svg { animation: none; }
  .seite-step2nc .stage, .seite-step2nc .ki-stage { height: auto; }
  .seite-step2nc .stage-sticky { position: static; height: auto; }
  .seite-step2nc .device-box { width: min(1060px, 100%); }
  .seite-step2nc .ki-box { width: min(1240px, 100%); }
  .seite-step2nc .ki-caret { animation: none; }
  .seite-step2nc .reveal-pending { opacity: 1; transform: none; }
  .seite-step2nc .btn, .seite-step2nc .feature, .seite-step2nc .pane { transition: none; }
  .seite-step2nc .vs-folie { transition: none; }
}