/* ALETHEIA VESTIGIUM 2.1 — Motion & Visual Storytelling */
:root{--v21-blue:#1764d8;--v21-ice:#eef6ff}
.v2-header{transition:background .45s ease,box-shadow .45s ease,transform .45s ease}
.v2-header.v21-scrolled{
  position:fixed;background:rgba(248,251,255,.88);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(15,40,78,.1)
}
.v2-hero__media:after{
  content:"";position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.24) 49%,transparent 60%);
  transform:translateX(-55%);animation:v21Light 8s ease-in-out infinite
}
@keyframes v21Light{0%,25%{transform:translateX(-55%)}70%,100%{transform:translateX(55%)}}
.v2-hero__copy{animation:v21HeroCopy .95s cubic-bezier(.2,.7,.2,1) both}
@keyframes v21HeroCopy{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.v2-card{transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .65s ease}
.v2-card:hover{box-shadow:0 28px 70px rgba(11,34,66,.2)}
.v21-card-no{
  position:absolute;z-index:3;top:24px;left:26px;color:#fff;font-size:.58rem;
  letter-spacing:.2em;font-weight:700;border:1px solid rgba(255,255,255,.48);
  width:34px;height:34px;display:grid;place-items:center
}
.v2-gallery figure:nth-child(even){margin-top:72px}
.v2-gallery__track{padding-bottom:70px}
.v21-cinematic{height:260vh;background:#071b36;position:relative}
.v21-cinematic__sticky{height:100vh;position:sticky;top:0;overflow:hidden;color:#fff}
.v21-cinematic__image{position:absolute;inset:-8%;background-size:cover;background-position:center;will-change:transform,opacity}
.v21-cinematic__image--a{background-image:url("./hero-person.jpg");filter:saturate(.86) contrast(1.03)}
.v21-cinematic__image--b{background-image:url("./scene-new-paths.jpg");opacity:0;filter:saturate(.9) contrast(1.06)}
.v21-cinematic__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,22,44,.82) 0%,rgba(5,22,44,.48) 48%,rgba(5,22,44,.18) 100%)}
.v21-cinematic__copy{position:absolute;left:8vw;right:8vw;top:50%;transform:translateY(-50%);z-index:2}
.v21-cinematic__index{font-size:.62rem;letter-spacing:.23em;color:#b8d3fa;font-weight:700}
.v21-line{
  margin:0;font-family:"Libre Caslon Display",Georgia,serif;font-size:clamp(4.6rem,9vw,11rem);
  line-height:.82;letter-spacing:-.055em;opacity:.13;transform:translateX(-30px);
  transition:opacity .3s linear,transform .3s linear
}
.v21-line--1{margin-top:40px}.v21-line--2{margin-left:9vw}.v21-line--3{margin-left:18vw;color:#9fc5ff}
.v21-line.is-active{opacity:1;transform:none}
.v21-progress{position:absolute;right:4vw;top:15vh;bottom:15vh;width:1px;background:rgba(255,255,255,.28);z-index:3}
.v21-progress span{position:absolute;left:0;top:0;width:1px;height:0;background:#fff}
.v2-stage__copy,.v2-principle>div{will-change:transform}
.v2-gallery figure img{will-change:transform}
.v2-btn{position:relative;overflow:hidden}
.v2-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28),transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.v2-btn:hover:after{transform:translateX(120%)}
@media(max-width:680px){
 .v21-cinematic{height:210vh}
 .v21-line{font-size:3.8rem;line-height:.9}
 .v21-line--2,.v21-line--3{margin-left:0}
 .v2-gallery figure:nth-child(even){margin-top:0}
}
@media(prefers-reduced-motion:reduce){
 .v2-hero__media:after{animation:none}
 .v21-cinematic{height:auto}
 .v21-cinematic__sticky{height:80vh;position:relative}
 .v21-line{opacity:1;transform:none}
}


/* 2.1.2 – Optimierung Scroll-Film: bessere Bildausschnitte, drei Szenen, stärkere Lesbarkeit */
.v21-cinematic__image--a{
  background-image:url("./scene-questions.jpg")!important;
  background-position:center 42%!important;
  filter:saturate(.9) contrast(1.04)!important;
}
.v21-cinematic__image--b{
  background-image:url("./hero-person.jpg")!important;
  background-position:58% 34%!important;
  opacity:0;
  filter:saturate(.9) contrast(1.02)!important;
}
.v21-cinematic__image--c{
  background-image:url("./scene-new-paths.jpg");
  background-position:center center;
  opacity:0;
  filter:saturate(.92) contrast(1.06);
}
.v21-cinematic__shade{
  background:
    linear-gradient(90deg,rgba(5,22,44,.88) 0%,rgba(5,22,44,.64) 36%,rgba(5,22,44,.24) 68%,rgba(5,22,44,.1) 100%)!important;
}
.v21-cinematic__copy{
  left:7vw!important;
  right:12vw!important;
  top:50%!important;
  max-width:1180px;
}
.v21-cinematic__index{
  display:inline-block;
  padding:8px 12px;
  background:rgba(9,42,83,.28);
  border:1px solid rgba(195,218,252,.18);
  backdrop-filter:blur(8px);
}
.v21-line{
  font-size:clamp(5rem,8vw,10.5rem)!important;
  line-height:.86!important;
  text-shadow:0 10px 36px rgba(0,0,0,.28);
  max-width:1150px;
}
.v21-line--1{margin-top:34px!important}
.v21-line--2{margin-left:7vw!important}
.v21-line--3{margin-left:14vw!important}
.v21-line.is-active{opacity:1!important}
.v21-line:not(.is-active){opacity:.16!important}
.v21-progress{right:3vw!important}

@media(max-width:900px){
  .v21-line--2,.v21-line--3{margin-left:0!important}
  .v21-cinematic__copy{left:7vw!important;right:7vw!important}
}


/* 2.1.3 – Scroll-Film Reparatur */
.v21-cinematic{
  height:200vh!important;
  background:
    linear-gradient(rgba(7,27,54,.28),rgba(7,27,54,.28)),
    url("./scene-new-paths.jpg") center/cover no-repeat!important;
}
.v21-cinematic__sticky{
  height:calc(100vh - 96px)!important;
  min-height:620px;
  top:96px!important;
}
.v21-cinematic__image{
  inset:0!important;
  background-size:cover!important;
  opacity:0;
}
.v21-cinematic__image--a{
  opacity:1;
  background-position:center 42%!important;
}
.v21-cinematic__image--b{
  opacity:0;
  background-position:58% 30%!important;
}
.v21-cinematic__image--c{
  opacity:0;
  background-position:center 48%!important;
}
.v21-cinematic__copy{
  top:48%!important;
}
.v21-line{
  transition:none!important;
}
.v21-progress{
  top:9vh!important;
  bottom:9vh!important;
}

/* Beim Ende der Sticky-Sequenz bleibt die Bildwelt sichtbar statt einer großen Vollfläche. */
.v21-cinematic::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:24vh;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,27,54,.46));
}

@media(max-width:900px){
  .v21-cinematic{height:190vh!important}
  .v21-cinematic__sticky{top:82px!important;height:calc(100vh - 82px)!important;min-height:520px}
}

@media(prefers-reduced-motion:reduce){
  /* Nutzerwunsch: Scroll-gesteuerter Szenenwechsel bleibt erhalten.
     Nur automatische Daueranimationen werden reduziert. */
  .v21-cinematic{height:190vh!important}
  .v21-cinematic__sticky{position:sticky!important;height:calc(100vh - 96px)!important;top:96px!important}
}


/* 2.1.4 – Sticky-Fix
   Ursache: .v2-site hatte aus v2.css overflow:hidden.
   Dadurch konnte position:sticky im Scroll-Film nicht arbeiten. */
.v2-site{
  overflow-x:clip!important;
  overflow-y:visible!important;
}

/* Scroll-Film muss in einem nicht abgeschnittenen Scroll-Kontext liegen. */
.v21-cinematic{
  position:relative!important;
  height:240vh!important;
  overflow:visible!important;
}
.v21-cinematic__sticky{
  position:sticky!important;
  top:96px!important;
  height:calc(100vh - 96px)!important;
  min-height:0!important;
  overflow:hidden!important;
}

/* Keine sichtbare Restfläche mehr am Ende der Sequenz. */
.v21-cinematic::after{
  display:none!important;
}

/* Die letzte Bildphase bleibt bis zum Ende der Sticky-Strecke sichtbar. */
.v21-cinematic__image--c{
  background-position:center 48%!important;
}

@media(max-width:900px){
  .v21-cinematic{height:220vh!important}
  .v21-cinematic__sticky{
    top:82px!important;
    height:calc(100vh - 82px)!important;
  }
}