/* Vorspann „Der Gedanke dahinter“: Text läuft wie im Kino in Satzgruppen perspektivisch nach hinten rechts oben.
   Eigenständiger Baustein: läuft auf jedem Hintergrund (Standbild heute, Video später). */
.vs { position: fixed; inset: 0; z-index: 1000; background: #0e1524; color: #fff; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.vs.is-open { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.vs-bg { position: absolute; inset: 0; overflow: hidden; }
.vs-bg img, .vs-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; transform-origin: 72% 40%; }
@media (prefers-reduced-motion: no-preference) { .vs.is-playing .vs-bg img { animation: vs-drift 70s ease-out both; } }
@keyframes vs-drift { from { transform: scale(1.14); } to { transform: scale(1); } }
.vs-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,16,30,.92) 0%, rgba(10,16,30,.74) 46%, rgba(10,16,30,.2) 84%), linear-gradient(0deg, rgba(10,16,30,.88) 0%, rgba(10,16,30,.55) 38%, rgba(10,16,30,0) 66%); }

.vs-scene { position: absolute; inset: 0; perspective: 720px; perspective-origin: 80% 15%; overflow: hidden; }
.vs-g { position: absolute; left: clamp(22px, 7vw, 130px); bottom: 9vh; width: min(30em, calc(100vw - 44px)); margin: 0; font: 300 clamp(21px, 2.6vw, 36px)/1.36 var(--display, "Josefin Sans", sans-serif); letter-spacing: .01em; hyphens: none; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 2px 24px rgba(0,0,0,.75); opacity: 0; transform-origin: 0 100%; will-change: transform, opacity; }

/* Schlusskarte: bleibt stehen */
.vs-end { position: absolute; left: clamp(22px, 7vw, 130px); bottom: 9vh; width: min(30em, calc(100vw - 44px)); opacity: 0; pointer-events: none; }
.vs-end.is-done { pointer-events: auto; }
.vs-end-title { margin: 0; font: 300 clamp(30px, 4.6vw, 62px)/1.08 var(--display, "Josefin Sans", sans-serif); text-transform: lowercase; text-shadow: 0 2px 22px rgba(0,0,0,.55); }
.vs-end-sign { margin: 14px 0 0; font: 300 20px var(--display, "Josefin Sans", sans-serif); color: rgba(255,255,255,.9); }
.vs-end-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.vs-btn { font: 600 13px var(--sans, system-ui, sans-serif); color: #fff; background: rgba(16,24,40,.6); border: 1px solid rgba(255,255,255,.4); border-radius: 30px; padding: 9px 16px; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.vs-btn:hover { background: rgba(16,24,40,.9); border-color: #fff; }
.vs-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vs-btn--main { background: #fff; color: #1b2a44; border-color: #fff; }
.vs-btn--main:hover { background: #eef2f6; color: #1b2a44; }
.vs-ctl { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 3; }
.vs-hint { position: absolute; left: clamp(22px, 7vw, 130px); bottom: 2.4vh; margin: 0; font-size: 12px; color: rgba(255,255,255,.55); }
@media (hover: none) { .vs-hint { display: none; } }
.vs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); }
.vs-bar i { display: block; height: 100%; background: rgba(255,255,255,.75); transform: scaleX(0); transform-origin: 0 50%; }
.vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ohne Bewegung (Systemeinstellung): alle Satzgruppen ruhig untereinander, scrollbar */
.vs.is-static .vs-scene { perspective: none; overflow: auto; padding: 84px clamp(22px, 7vw, 130px) 120px; }
.vs.is-static .vs-g { position: static; opacity: 1; width: auto; max-width: 30em; margin: 0 0 1em; font-size: clamp(19px, 2.2vw, 28px); transform: none; }
.vs.is-static .vs-end { position: static; opacity: 1; pointer-events: auto; margin-top: 36px; }
.vs.is-static .vs-bar, .vs.is-static .vs-hint, .vs.is-static [data-vs-pause], .vs.is-static [data-vs-skip] { display: none; }

@media (max-width: 760px) {
  .vs-scene { perspective: 600px; perspective-origin: 78% 12%; }
  .vs-g { bottom: 11vh; }
  .vs-ctl { top: 10px; right: 10px; }
}

/* Startseite: Text läuft von selbst im Hintergrund, rechts neben dem Text */
.vs-hscene { position: absolute; inset: 0; perspective: 800px; overflow: hidden; pointer-events: none; }
.vs-hscene::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,16,30,0) 36%, rgba(10,16,30,.42) 64%, rgba(10,16,30,.34) 100%); opacity: 0; transition: opacity 1.6s ease; }
.vs-hscene.is-on::before { opacity: 1; }
.vs-hg { line-height: 1.36; }
.manifest--vs .manifest-hint { display: inline-block; margin-top: 14px; }