/* ==========================================================================
   VESTRA — Motion, Grafik und Textur
   Ergänzung zu vestra.css · alles unter prefers-reduced-motion abschaltbar
   ========================================================================== */

/* ------------------------------------------------------- Scroll-Fortschritt */
.progressbar{
  position:absolute; top:70px; left:0; right:0; height:2px; z-index:3;
  background:transparent; pointer-events:none;
}
.progressbar__fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,#3E7F2B,#9FD08B);
  transition:width .12s linear;
}

/* ------------------------------------------------------------ Scroll-Reveal */
[data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),
             transform .85s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-reveal="left"]{ transform:translateX(-24px); }
[data-reveal="scale"]{ transform:scale(.97); }
[data-reveal].is-in{ opacity:1; transform:none; }

/* Kaskade für Kartenreihen */
.grid .cell:nth-child(1){ --d:0ms; }
.grid .cell:nth-child(2){ --d:90ms; }
.grid .cell:nth-child(3){ --d:180ms; }
.grid .cell:nth-child(4){ --d:270ms; }
.partners .partner:nth-child(1){ --d:0ms; }
.partners .partner:nth-child(2){ --d:110ms; }
.partners .partner:nth-child(3){ --d:220ms; }
.quotes .quote:nth-child(1){ --d:0ms; }
.quotes .quote:nth-child(2){ --d:90ms; }
.quotes .quote:nth-child(3){ --d:180ms; }
.quotes .quote:nth-child(4){ --d:270ms; }

/* --------------------------------------------------------- Hero-Auftritt */
@keyframes vHeroIn{
  from{ opacity:0; transform:translateY(26px); }
  to  { opacity:1; transform:none; }
}
.hero .anim{ opacity:0; animation:vHeroIn .95s cubic-bezier(.22,.61,.36,1) forwards; }
.hero .anim--1{ animation-delay:.10s; }
.hero .anim--2{ animation-delay:.24s; }
.hero .anim--3{ animation-delay:.38s; }
.hero .anim--4{ animation-delay:.52s; }
.hero .anim--5{ animation-delay:.66s; }
.hero .anim--6{ animation-delay:.80s; }

.hero .display .ln{ display:block; overflow:hidden; }
.hero .display .ln > span{
  display:block; opacity:0; transform:translateY(105%);
  animation:vLineIn 1.05s cubic-bezier(.19,1,.22,1) forwards;
}
@keyframes vLineIn{ to{ opacity:1; transform:none; } }
.hero .display .ln:nth-child(1) > span{ animation-delay:.16s; }
.hero .display .ln:nth-child(2) > span{ animation-delay:.28s; }
.hero .display .ln:nth-child(3) > span{ animation-delay:.40s; }
.hero .display .ln em{
  font-style:normal; color:#9FD08B;
}

/* ------------------------------------------------- Struktur-Grafik im Hero */
.heroart{
  position:absolute; z-index:1; pointer-events:none;
  right:-6%; top:50%; transform:translateY(-50%);
  width:min(760px,62vw); opacity:.5;
}
@media(max-width:999px){ .heroart{ right:-24%; width:120vw; opacity:.3; } }
.heroart line,.heroart path{
  stroke:#9FD08B; stroke-width:1; fill:none; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,400); stroke-dashoffset:var(--len,400);
  animation:vDraw 2.1s cubic-bezier(.33,1,.68,1) forwards;
  animation-delay:calc(.5s + var(--i,0)*.09s);
  opacity:.75;
}
@keyframes vDraw{ to{ stroke-dashoffset:0; } }
.heroart rect,.heroart circle{
  fill:#012234; stroke:#9FD08B; stroke-width:1; vector-effect:non-scaling-stroke;
  opacity:0; animation:vPop .6s cubic-bezier(.34,1.4,.64,1) forwards;
  animation-delay:calc(.9s + var(--i,0)*.09s);
}
@keyframes vPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
.heroart .node-fill{ fill:#9FD08B; opacity:0; animation:vFade 1s ease forwards; animation-delay:1.5s; }
@keyframes vFade{ to{ opacity:.9; } }
.heroart .pulse{
  transform-box:fill-box; transform-origin:center;
  animation:vPulse 3.4s ease-in-out infinite; animation-delay:2s;
}
@keyframes vPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:.9; } }

/* --------------------------------------------------------------- Textur */
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}
.hero > *, .cta > *, .section--dark > *, .pagehead > *, .pull > *{ position:relative; z-index:2; }
.hero > .heroart{
  position:absolute; z-index:1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1420px,104vw); max-width:none; opacity:.3;
}
@media(max-width:999px){
  .hero > .heroart{ width:160vw; opacity:.2; }
}

/* Hero-Karte über der Struktur-Grafik lesbar halten */
.honest{
  background:rgba(1,26,40,.62);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
}
.btn--primary::before{ pointer-events:none; }

/* ----------------------------------------------------------- Laufband/Band */
.band{ overflow:hidden; }
.band__track{
  display:flex; width:max-content; gap:0;
  animation:vMarquee 42s linear infinite;
}
.band:hover .band__track{ animation-play-state:paused; }
@keyframes vMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.band__set{ display:flex; align-items:center; gap:0; }
.band__set span{
  display:inline-flex; align-items:center; gap:12px; padding:19px 34px;
  font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.55); font-weight:500; white-space:nowrap;
}
.band__set span::before{
  content:""; width:5px; height:5px; border-radius:50%; background:#5F9B4E; flex:none;
}
.band__set span.is-yes{ color:#B9DFA9; }
.band__set span.is-yes::before{ background:#B9DFA9; }

/* ---------------------------------------------------------- Zitat-Sektion */
.pull{
  background:var(--navy-deep); color:#fff; position:relative; overflow:hidden;
  padding-block:clamp(80px,10vw,150px);
}
.pull::before{
  content:""; position:absolute; left:50%; top:-40%; width:80%; aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(95,155,78,.16),transparent 62%);
  pointer-events:none;
}
.pull__mark{
  font-family:var(--serif); font-size:clamp(70px,9vw,130px); line-height:.6;
  color:rgba(159,208,139,.28); display:block; margin-bottom:8px;
}
.pull blockquote{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(28px,4.4vw,60px); line-height:1.12; letter-spacing:-.028em;
  max-width:19ch; text-wrap:balance;
}
.pull__by{
  margin:38px 0 0; padding-top:24px; border-top:1px solid var(--line-dark);
  font-size:13.5px; color:rgba(255,255,255,.55); max-width:52ch;
}

/* ------------------------------------------------------------- Diagramm */
.diagram{
  margin-top:clamp(34px,4vw,56px);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); padding:clamp(22px,3vw,44px);
  overflow-x:auto;
}
.section--paper2 .diagram{ background:var(--paper); }
.diagram svg{ min-width:660px; width:100%; height:auto; display:block; }
.dg-box{ fill:var(--paper-2); stroke:var(--line); stroke-width:1; }
.dg-box--v{ fill:#E8F0E4; stroke:#B7D3AA; }
.dg-box--k{ fill:#fff; stroke:var(--line); }
.dg-t{ font-family:var(--sans); font-size:13px; font-weight:600; fill:var(--ink); }
.dg-s{ font-family:var(--sans); font-size:11.5px; fill:rgba(4,32,47,.62); }
.dg-lbl{
  font-family:var(--sans); font-size:10px; font-weight:600; fill:#B4402F;
  letter-spacing:.13em; text-transform:uppercase;
}
.dg-cap{ font-family:var(--sans); font-size:10.5px; font-weight:500; fill:#3E7F2B; letter-spacing:.12em; }
.dg-flow{
  stroke:#3E7F2B; stroke-width:1.4; fill:none; stroke-linecap:round;
  stroke-dasharray:var(--len,120); stroke-dashoffset:var(--len,120);
}
.is-in .dg-flow{ animation:vDraw 1.2s cubic-bezier(.33,1,.68,1) forwards; animation-delay:calc(.2s + var(--i,0)*.18s); }
.dg-border{ stroke:#B4402F; stroke-width:1.6; stroke-dasharray:6 5; opacity:0; }
.is-in .dg-border{ animation:vFadeIn .9s ease forwards; animation-delay:.85s; }
@keyframes vFadeIn{ to{ opacity:.85; } }
.dg-dot{ fill:#3E7F2B; opacity:0; }
.is-in .dg-dot{ animation:vFadeIn .5s ease forwards; animation-delay:calc(.5s + var(--i,0)*.18s); }
.diagram__legend{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:22px;
  padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted);
}
.diagram__legend span{ display:inline-flex; align-items:center; gap:9px; }
.diagram__legend i{ width:22px; height:0; border-top:1.6px solid #3E7F2B; flex:none; }
.diagram__legend i.dashed{ border-top:1.6px dashed #B4402F; }

/* ------------------------------------------------------------------ Icons */
.ico{
  width:34px; height:34px; margin-bottom:20px; display:block;
  stroke:var(--green); stroke-width:1.3; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}
.cell .cell__n{ display:flex; align-items:center; justify-content:space-between; }
.cell:hover .ico{ transform:translateY(-2px); }
.ico{ transition:transform .3s cubic-bezier(.22,.61,.36,1); }

/* ----------------------------------------------------------- Zahlen-Zähler */
.letter__facts b{ font-variant-numeric:tabular-nums; }
.counter{ display:inline-block; }

/* ------------------------------------------------------- Verfeinerte Hover */
.cell{ transition:background .35s ease; position:relative; }
.cell::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.cell:hover::after{ transform:scaleX(1); }
.cell:hover{ background:#fff; }
.section--paper2 .cell:hover{ background:#fff; }

.partner{ position:relative; overflow:hidden; }
.partner::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(90deg,#3E7F2B,#9FD08B);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.partner:hover::after{ transform:scaleX(1); }

.step{ transition:background .35s ease; }
.step:hover{ background:rgba(62,127,43,.035); }
.step__n{ transition:transform .4s cubic-bezier(.22,.61,.36,1); }
.step:hover .step__n{ transform:translateY(-3px); }

.audience li{ transition:padding-left .35s cubic-bezier(.22,.61,.36,1), color .3s ease; }
.audience li:hover{ padding-left:12px; }

.btn--primary{ position:relative; overflow:hidden; }
.btn--primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22),transparent 70%);
  transform:translateX(-120%); transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.btn--primary:hover::before{ transform:translateX(120%); }
.btn--primary > *{ position:relative; z-index:1; }

/* ----------------------------------------------------------------- FAQ */
.faq details{ transition:background .3s ease; }
.faq details[open]{ background:rgba(62,127,43,.03); }
.faq__a{ animation:vFaq .45s cubic-bezier(.22,.61,.36,1); }
@keyframes vFaq{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ------------------------------------------------------------- Fokus a11y */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid #5F9B4E; outline-offset:3px; border-radius:2px;
}

/* --------------------------------------------------- Bewegung reduzieren */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero .anim{ opacity:1 !important; }
  .hero .display .ln > span{ opacity:1 !important; transform:none !important; }
  .heroart line,.heroart path{ stroke-dashoffset:0 !important; }
  .heroart rect,.heroart circle{ opacity:1 !important; }
  .band__track{ animation:none !important; }
  .dg-flow{ stroke-dashoffset:0 !important; }
  .dg-border,.dg-dot{ opacity:.85 !important; }
}

/* --------------------------------------------- Definitionslisten umbrechen */
.dl dd{ overflow-wrap:anywhere; min-width:0; }
.dl > div{ min-width:0; }
@media(min-width:700px){
  .dl > div{ grid-template-columns:minmax(0,200px) minmax(0,1fr); }
}

/* ==========================================================================
   Anpassungen für die Hausschrift Inter
   Die Display-Rolle wird nicht mehr über eine Serife getragen, sondern über
   Größe, leichten Schnitt (300) und enge Laufweite — wie auf der bisherigen
   Seite (Schnitt 400, ls −0.03em, lh 1.0), nur konsequenter durchgezogen.
   ========================================================================== */
.display{ font-weight:300; letter-spacing:-.036em; line-height:1.0; }
.h2{ font-weight:300; letter-spacing:-.031em; line-height:1.06; }
.h2--wide{ letter-spacing:-.03em; }
.pull blockquote{ font-weight:300; letter-spacing:-.036em; line-height:1.06; }
.pull__mark{ font-weight:300; font-size:clamp(56px,6vw,96px); line-height:.72; }
.prose h2{ font-weight:300; letter-spacing:-.031em; }
.ftr__claim{ font-weight:300; letter-spacing:-.03em; line-height:1.16; }
.step__t{ font-weight:400; letter-spacing:-.026em; }
.partner__name{ font-weight:400; letter-spacing:-.028em; line-height:1.16; }
.letter__facts b{ font-weight:300; font-size:clamp(26px,2.4vw,32px); letter-spacing:-.032em; }
.sig__name{ font-weight:400; letter-spacing:-.026em; font-size:20px; }
.quote blockquote{ font-weight:300; letter-spacing:-.022em; line-height:1.42;
  font-size:clamp(17px,1.35vw,19.5px); }

/* Brief: Grotesk braucht etwas kleinere Grade und mehr Zeilenabstand */
.letter__body p{
  font-size:clamp(16.5px,1.3vw,19px); line-height:1.68; letter-spacing:-.012em;
}
.letter__body p:first-child::first-letter{
  font-size:3.05em; line-height:.78; padding:.1em .12em 0 0; font-weight:300;
}

/* Zahlen und Labels profitieren von echten Tabellenziffern */
.step__n,.cell__n,.letter__facts b,.audience li span,.dg-s,.num{
  font-variant-numeric:tabular-nums;
}
.step__n{ font-weight:300; letter-spacing:-.03em; }

/* ------------------------------------------------------------------- Logo */
.brand{ align-items:center; gap:12px; }
.brand__logo{ width:auto; height:19px; display:block; flex:none; }
.brand__sub{
  padding-left:12px; border-left:1px solid rgba(255,255,255,.22);
  line-height:1;
}
@media(max-width:420px){
  .brand__sub{ display:none; }
  .brand__logo{ height:18px; }
}
.ftr__logo{ height:22px; width:auto; margin-bottom:26px; display:block; }

/* ==========================================================================
   Bilder aus dem Sanity-CDN des bestehenden Auftritts
   Basis: https://cdn.sanity.io/images/d49y4xsr/production/<hash>-<w>x<h>.<ext>
   Größen werden über Query-Parameter angefordert (?w=&h=&fit=crop&fm=webp&q=).
   Fällt ein Bild aus (z. B. gesperrter Sandbox-Vorschau), zeigt .ph statt
   eines kaputten Bildes eine gestaltete Platzhalterfläche mit Initialen.
   ========================================================================== */

/* ------------------------------------------------------------- Platzhalter */
.ph{
  position:relative; overflow:hidden; background:var(--paper-2);
  display:block; isolation:isolate;
}
.ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.ph::after{
  content:attr(data-initials);
  position:absolute; inset:0; display:none;
  align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:300; letter-spacing:-.03em;
  font-size:clamp(20px,3.2vw,42px);
  color:rgba(4,32,47,.34);
  background:
    linear-gradient(140deg, rgba(62,127,43,.10), rgba(1,34,52,.07)),
    var(--paper-2);
}
.ph.is-missing::after{ display:flex; }
.ph.is-missing img{ visibility:hidden; }
.section--dark .ph::after,.pull .ph::after,.cta .ph::after{
  color:rgba(255,255,255,.42);
  background:linear-gradient(140deg, rgba(159,208,139,.14), rgba(255,255,255,.05));
}

/* ------------------------------------------------------- Porträt im Brief */
.letter__portrait{
  margin:0 0 30px; border-radius:var(--r); aspect-ratio:4/5;
  border:1px solid var(--line);
}
.letter__portrait img{ transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }
.letter__in:hover .letter__portrait img{ transform:scale(1.02); }
.portrait-cap{
  margin:-18px 0 30px; font-size:12.5px; color:var(--muted); letter-spacing:.02em;
}

/* -------------------------------------------- Bild als Grund einer Sektion */
.pull--photo{ background:var(--navy-deep); }
.pull__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.pull__bg img{ width:100%; height:100%; object-fit:cover; opacity:.30; }
.pull__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(1,26,40,.94) 0%, rgba(1,26,40,.80) 46%, rgba(1,26,40,.42) 100%);
}
@media(max-width:760px){
  .pull__bg::after{ background:rgba(1,26,40,.86); }
}

/* --------------------------------------------------- Porträts bei Zitaten */
.quote figcaption{ display:flex; align-items:center; gap:14px; }
.quote__ph{
  width:46px; height:46px; border-radius:50%; flex:none;
  border:1px solid var(--line);
}
.quote__ph::after{ font-size:14px; font-weight:500; }
.quote__meta{ min-width:0; }

/* ------------------------------------------------------------ Team-Karten */
.team{ display:grid; gap:24px; }
@media(min-width:760px){ .team{ grid-template-columns:repeat(2,1fr); gap:30px; } }
.member{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .25s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.member:hover{ border-color:rgba(1,34,52,.28); transform:translateY(-2px); }
.member__ph{ aspect-ratio:4/3; }
.member__ph img{ transition:transform 1.1s cubic-bezier(.22,.61,.36,1); }
.member:hover .member__ph img{ transform:scale(1.03); }
.member__body{ padding:clamp(22px,2.4vw,30px); }
.member__name{
  font-size:clamp(19px,1.6vw,22px); font-weight:400; letter-spacing:-.026em; line-height:1.2;
}
.member__role{
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--green); margin-top:9px; font-weight:500;
}
.member__text{
  margin:18px 0 0; font-size:14.5px; line-height:1.6; color:var(--muted);
}
.member__link{
  display:inline-flex; align-items:center; gap:8px; margin-top:20px;
  font-size:13.5px; font-weight:500; text-decoration:none; color:var(--ink);
}
.member__link:hover{ color:var(--green); }

.contact-photo{
  display:block; margin:34px 0 0; border-radius:var(--r);
  aspect-ratio:19/14; border:1px solid var(--line);
}

/* Zähler in den Kennzahlen darf nicht die Größe der Beschreibungszeile erben
   (.letter__facts span greift sonst auch auf das <span class="counter">) */
.letter__facts b .counter{
  font-size:inherit; color:inherit; letter-spacing:inherit; font-weight:inherit;
}

/* Zeitangabe unter dem Schritt-Titel (Säulen und Werdegang) */
.step__when{
  display:inline-block; margin-top:7px;
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--green); font-weight:500; font-family:var(--sans);
}
.step__n{ white-space:nowrap; }

/* Holdings nebeneinander */
@media(min-width:820px){
  .partners--2{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1180px){
  .partners--2{ grid-template-columns:repeat(2,1fr); }
}