/* ========================================================================== Scroll-Story ("Das Profil, das Sie nie geschrieben haben") Vanilla-Umbau des Designvorschlags vom 03.09.2026. Kein React, kein CDN, damit die CSP (script-src 'self' cdn.jsdelivr.net) greift. Gerendert von /assets/js/scroll-story.js aus den Daten in /assets/js/scroll-story-data.js (nginx liefert je Besucher a, b oder c). Farben kommen aus den --rd-* Variablen der Startseite, damit Hell- und Dunkelmodus mitlaufen. Akzentfarbe wird genau einmal benutzt: beim CTA. ========================================================================== */ /* Sichtbarkeit: die Klasse dps-on setzt die ausgelieferte Story-Datei im . Ohne Story (Kontrollarm, leere Datei, JavaScript aus) bleibt der Story-Abschnitt aus und der bisherige KI-Abschnitt stehen. */ #dpsSection { display: none; } html.dps-on #dpsSection { display: block; } html.dps-on #why-ki { display: none; } .dps { --dps-step: 80vh; --dps-fig-h: 100vh; --dps-dim: 0.24; padding-top: 0; } .dps-flag { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rd-fg-dim); } .dps-grid { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 48px; align-items: start; } /* ---------- linke Spalte: die Schritte ---------- */ .dps-col { min-width: 0; } .dps-step { min-height: var(--dps-step); display: flex; align-items: center; padding: 40px 0; } .dps-step-inner { display: flex; gap: 18px; opacity: var(--dps-dim); transition: opacity 0.5s ease; } .dps-step.is-active .dps-step-inner, .dps-intro .dps-step-inner, .dps-finale .dps-step-inner { opacity: 1; } .dps-num { flex: none; width: 30px; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; color: var(--rd-fg-dim); font-variant-numeric: tabular-nums; } .dps-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .dps-lead { margin: 0; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.35; font-weight: 400; color: var(--rd-fg); text-wrap: pretty; } .dps-sub { margin: 0; font-size: 15px; line-height: 1.55; color: var(--rd-fg-muted); text-wrap: pretty; } .dps-change { margin: 0; font-size: 14px; line-height: 1.5; color: var(--rd-fg); text-wrap: pretty; } .dps-src { margin: 0; font-size: 13px; line-height: 1.5; color: var(--rd-fg-dim); } /* ---------- Abschluss ---------- */ .dps-finale .dps-body { gap: 26px; } .dps-finale-text { display: flex; flex-direction: column; gap: 14px; } .dps-law { margin: 0; font-size: 13px; line-height: 1.5; color: var(--rd-fg-dim); font-variant-numeric: tabular-nums; } .dps-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--rd-accent); color: var(--rd-accent-ink); text-decoration: none; font-size: 16px; font-weight: 600; padding: 15px 26px; border-radius: 6px; align-self: flex-start; transition: opacity 0.2s ease; } .dps-cta:hover { opacity: 0.9; } .dps-cta-sub { margin: 0; font-size: 14px; color: var(--rd-fg-muted); } .dps-cta-sub a { color: var(--rd-fg-muted); text-decoration: underline; text-underline-offset: 3px; } /* ---------- rechte Spalte: Figur mit Profil ---------- */ .dps-figure-col { position: sticky; top: 0; height: var(--dps-fig-h); display: flex; align-items: center; justify-content: center; overflow: hidden; } .dps-stage { position: relative; width: 100%; max-width: 640px; height: 560px; } .dps-figure { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 230px; height: 390px; color: var(--rd-fg); opacity: 0.82; filter: blur(var(--dps-blur, 18px)); transition: filter 0.15s linear; /* Die Silhouette kommt als schwarzes PNG mit Alphakanal (--dps-fig-src setzt die Engine je Story-Arm). Sie liegt bewusst als MASKE vor currentColor und nicht als im Markup: der Abschnitt laeuft im dunklen Modus auf --rd-bg #0f172a, ein schwarzes Bild waere dort unsichtbar. So folgt die Figur --rd-fg in beiden Modi. "contain" faengt zugleich das Seitenverhaeltnis ab: die Dateien stehen 1:2, dieser Kasten 230:390. Ohne contain waere die Person gestaucht. */ background-color: currentColor; -webkit-mask-image: var(--dps-fig-src); mask-image: var(--dps-fig-src); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Ohne --dps-fig-src greift mask-image nicht und es bliebe ein eingefaerbtes Rechteck stehen. Die Engine setzt dann diese Klasse. */ .dps-figure.is-empty { display: none; } .dps-label { position: absolute; top: var(--dps-top); transform: translateY(-50%); display: flex; align-items: center; gap: 12px; opacity: 0.3; transition: opacity 0.6s ease; } .dps-label[data-side="l"] { right: calc(50% + var(--dps-off)); left: 0; flex-direction: row; } .dps-label[data-side="r"] { left: calc(50% + var(--dps-off)); right: 0; flex-direction: row-reverse; } .dps-label-text { display: flex; flex-direction: column; gap: 3px; flex: 0 1 auto; width: 148px; text-wrap: pretty; } .dps-label[data-side="l"] .dps-label-text { text-align: right; } .dps-label[data-side="r"] .dps-label-text { text-align: left; } .dps-key { font-size: 11px; letter-spacing: 0.04em; color: var(--rd-fg-dim); } .dps-old { font-size: 12px; line-height: 1.3; color: var(--rd-fg-dim); text-decoration: line-through; } .dps-val { font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--rd-fg-muted); transition: color 0.4s ease, font-size 0.3s ease; } .dps-connector { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; } .dps-label[data-side="l"] .dps-connector { flex-direction: row; } .dps-label[data-side="r"] .dps-connector { flex-direction: row-reverse; } .dps-line { width: var(--dps-len); flex: 1 1 auto; min-width: 16px; height: 1px; background: var(--rd-line-strong); transition: background 0.4s ease; } .dps-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; border: 1px solid var(--rd-fg); flex: none; transition: background 0.4s ease; } /* gefuellt. Im Abschluss (Umkehrung) blassen die Werte mit --dps-unsharp aus, waehrend sie durchgestrichen werden. */ .dps-label.is-set { opacity: calc(1 - var(--dps-unsharp, 0) * 0.85); } /* gerade veraendert: das einzige, was Gewicht hat */ .dps-label.is-new .dps-val { color: var(--rd-fg); font-weight: 500; font-size: 16px; } .dps-label.is-new .dps-line { background: var(--rd-fg); } .dps-label.is-new .dps-dot { background: var(--rd-fg); } /* Umkehrung: Datenputzer loescht, die Werte werden durchgestrichen */ .dps-label.is-struck .dps-val { text-decoration: line-through; } .dps-hint { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: var(--dps-hint, 1); transition: opacity 0.4s ease; pointer-events: none; } .dps-hint-line { width: 1px; height: 34px; background: var(--rd-fg); } .dps-hint-text { font-size: 11px; letter-spacing: 0.06em; color: var(--rd-fg-muted); } /* ---------- Rechtlicher Hinweis ---------- */ .dps-legal { max-width: 780px; margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--rd-line); font-size: 11px; line-height: 1.6; color: var(--rd-fg-dim); text-wrap: pretty; } /* ---------- Tablet ---------- */ @media (max-width: 1024px) { .dps-grid { gap: 28px; } .dps-stage { height: 480px; } .dps-figure { width: 180px; height: 300px; } .dps-label-text { width: 120px; } .dps-val { font-size: 13px; } .dps-label.is-new .dps-val { font-size: 14px; } } /* ---------- Mobil: Figur oben fixiert, Text scrollt darunter ---------- */ @media (max-width: 780px) { .dps { --dps-step: 68vh; } .dps-grid { grid-template-columns: 1fr; gap: 0; } .dps-figure-col { order: -1; position: sticky; top: 0; height: auto; padding: 14px 0 12px; margin-bottom: 4px; background: var(--rd-bg); border-bottom: 1px solid var(--rd-line); z-index: 3; } .dps-stage { display: flex; align-items: center; gap: 16px; width: 100%; max-width: none; height: auto; min-height: 124px; } .dps-figure { position: static; transform: none; flex: none; width: 62px; height: 106px; /* Die Unschaerfe kommt in Pixeln aus der Engine und ist fuer die grosse Figur bemessen. Auf 62 px Breite angewandt ergibt das einen Fleck, den die Leiste oben und unten abschneidet. Deshalb im Verhaeltnis zur Figurbreite mitskalieren. */ filter: blur(calc(var(--dps-blur, 18px) * 0.3)); } /* Labels werden zur kompakten Profilliste neben der Figur */ .dps-labels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; flex: 1 1 auto; min-width: 0; } .dps-label { position: static; transform: none; display: block; opacity: 0.32; } .dps-label-text, .dps-label[data-side="l"] .dps-label-text, .dps-label[data-side="r"] .dps-label-text { width: auto; text-align: left; gap: 0; } .dps-key { font-size: 10px; } .dps-old { display: none !important; } .dps-val, .dps-label.is-new .dps-val { font-size: 12px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dps-connector { display: none; } .dps-hint { display: none; } .dps-step { padding: 26px 0; } .dps-num { width: 24px; font-size: 19px; } .dps-lead { font-size: 20px; } .dps-step-inner { gap: 12px; } .dps-cta { width: 100%; justify-content: center; } } /* ---------- Bewegung reduzieren ---------- */ @media (prefers-reduced-motion: reduce) { .dps-figure, .dps-label, .dps-step-inner, .dps-val, .dps-line, .dps-dot, .dps-hint { transition: none !important; } .dps-figure { filter: none !important; } .dps-step-inner { opacity: 1 !important; } .dps-label { opacity: 1 !important; } } /* ---------- ohne JavaScript ---------- */ .dps-noscript .dps-step { min-height: 0; padding: 14px 0; } .dps-noscript .dps-step-inner { opacity: 1; }