/* ============================================================
   STIMMEN · Testimonials
   Eingebunden auf Startseite, Nachfolge und Investoren. Eigene
   Datei, weil die Startseite editorial.css nicht lädt.

   Aufbau: dunkle Pflaumenfläche mit ruhiger Aura. Links steht ein
   Zitat groß, rechts die drei Personen als Auswahl. Das Zitat baut
   sich Wort für Wort auf, ein Balken im gewählten Porträt zeigt, wann
   die nächste Stimme kommt. stimmen.js steuert Wechsel und Takt.
   Ohne Skript stehen alle drei Zitate untereinander.

   Die Fläche trägt eine eigene background-color, damit die
   Helligkeitsmessung der Leiste (nav-glass.js) sie als dunkel liest.
   ============================================================ */
.stimmenfeld{
  --st-tinte:#1E1119;
  --st-pflaume:#704861;
  --st-altrosa:#C9A7B5;
  --st-orange:#F0762F;
  --st-text:rgba(255,255,255,.78);
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(40px,4.4vw,64px) 0 clamp(56px,6vw,96px);
  background-color:#2A1824;
  background-image:linear-gradient(160deg,#3A2232 0%,#2A1824 48%,#1E1119 100%);
  color:#fff;
}
.stimmenfeld .wrap{position:relative;z-index:2}

/* ---- Aura: drei Wolken, nur transform ---- */
.stimmenfeld__aura{position:absolute;inset:0;z-index:0;pointer-events:none}
.stimmenfeld__aura i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);mix-blend-mode:screen;will-change:transform;
}
.stimmenfeld__aura i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-18vw;background:#8A5A78;opacity:.55;animation:st-drift-a 22s ease-in-out infinite alternate}
.stimmenfeld__aura i:nth-child(2){width:38vw;height:38vw;right:-10vw;bottom:-16vw;background:#C9A7B5;opacity:.22;animation:st-drift-b 26s ease-in-out infinite alternate}
.stimmenfeld__aura i:nth-child(3){width:24vw;height:24vw;left:44%;top:30%;background:#F0762F;opacity:.12;animation:st-drift-c 19s ease-in-out infinite alternate}
@keyframes st-drift-a{to{transform:translate3d(10vw,8vw,0) scale(1.12)}}
@keyframes st-drift-b{to{transform:translate3d(-12vw,-6vw,0) scale(.9)}}
@keyframes st-drift-c{to{transform:translate3d(-8vw,10vw,0) scale(1.2)}}

/* ---- Kopf ---- */
.stimmenfeld__kopf{margin-bottom:clamp(22px,2.6vw,34px)}
/* Die Marke entfällt: die Überschrift steht wie „Für wen wir da sind" und
   „Was für uns spricht" auf der Startseite, mit orangem Strich davor. */
.stimmenfeld__kopf .stimmenfeld__marke{display:none}
.stimmenfeld__marke{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono,"Geist Mono",ui-monospace,monospace);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--st-altrosa);
}
.stimmenfeld__marke::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--st-orange)}
.stimmenfeld__kopf h2{
  display:flex;align-items:center;gap:14px;margin:0;
  font-family:var(--sans,"Geist",system-ui,sans-serif);font-weight:400;
  font-size:clamp(23px,2.7vw,34px);line-height:1.14;letter-spacing:-.02em;color:#fff;
}
.stimmenfeld__kopf h2::before{content:"";flex:none;width:26px;height:2px;border-radius:2px;background:var(--st-orange)}
.stimmenfeld__kopf h2 em{font-style:normal;color:var(--st-altrosa)}

/* ---- Bühne ---- */
.stimmenfeld__buehne{display:flex;flex-direction:column;gap:clamp(26px,3vw,40px)}
.stimmenfeld__zitate{position:relative;min-width:0;max-width:980px}
.stimme{margin:0;position:relative}
.stimme + .stimme{margin-top:56px}

/* Das Anführungszeichen zeichnet sich, bevor der Text kommt */
.stimme__zeichen{display:block;width:clamp(40px,3.6vw,54px);height:auto;margin-bottom:14px;overflow:visible}
.stimme__zeichen path{
  fill:none;stroke:var(--st-orange);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;
}
.stimme blockquote{margin:0}
.stimme blockquote p{
  margin:0;font-family:var(--sans,"Geist",system-ui,sans-serif);font-weight:300;
  font-size:clamp(18px,1.65vw,24px);line-height:1.5;letter-spacing:-.012em;color:#fff;
  text-wrap:pretty;
}
.stimme figcaption{
  display:flex;flex-direction:column;gap:6px;margin-top:clamp(22px,2.4vw,32px);
  padding-top:18px;border-top:1px solid rgba(255,255,255,.14);max-width:60ch;
}
.stimme figcaption b{font-family:var(--sans,"Geist",system-ui,sans-serif);font-weight:500;font-size:16px;color:#fff;letter-spacing:-.01em}
.stimme figcaption span{font-family:var(--sans,"Geist",system-ui,sans-serif);font-weight:300;font-size:14px;line-height:1.55;color:var(--st-text)}

/* ---- Auswahl der Personen ---- */
.stimmenfeld__wahl{display:none;order:-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stimmenfeld__person{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;
  width:100%;min-height:44px;margin:0;padding:12px 18px 12px 12px;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  transition:background .4s,border-color .4s,transform .45s cubic-bezier(.2,.7,.2,1);
}
.stimmenfeld__person:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-2px)}
.stimmenfeld__person:focus-visible{outline:2px solid var(--st-orange);outline-offset:3px}
.stimmenfeld__person[aria-pressed="true"]{background:rgba(255,255,255,.1);border-color:rgba(201,167,181,.5)}
.stimmenfeld__bild{
  position:relative;width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.14);transition:box-shadow .4s;
}
.stimmenfeld__bild img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.6);transition:filter .5s}
.stimmenfeld__person[aria-pressed="true"] .stimmenfeld__bild{box-shadow:0 0 0 2px var(--st-orange)}
.stimmenfeld__person[aria-pressed="true"] .stimmenfeld__bild img,
.stimmenfeld__person:hover .stimmenfeld__bild img{filter:none}
.stimmenfeld__wer{display:flex;flex-direction:column;gap:3px;min-width:0}
.stimmenfeld__wer b{font-family:var(--sans,"Geist",system-ui,sans-serif);font-weight:500;font-size:16px;color:#fff;letter-spacing:-.01em}
.stimmenfeld__wer i{
  font-style:normal;font-family:var(--mono,"Geist Mono",ui-monospace,monospace);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--st-altrosa);
}
/* Takt: füllt sich, solange die Stimme steht */
.stimmenfeld__takt{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.08)}
.stimmenfeld__takt::after{
  content:"";position:absolute;inset:0;background:var(--st-orange);
  transform:scaleX(0);transform-origin:left;
}
.stimmenfeld__person.laeuft .stimmenfeld__takt::after{animation:st-takt var(--st-dauer,9s) linear forwards}
.stimmenfeld__person.laeuft.pause .stimmenfeld__takt::after,
.stimmenfeld__buehne.aus-dem-bild .stimmenfeld__person.laeuft .stimmenfeld__takt::after{animation-play-state:paused}
@keyframes st-takt{to{transform:scaleX(1)}}

/* ---- Mit Skript: eine Stimme zur Zeit ---- */
.stimmenfeld--js .stimmenfeld__wahl{display:grid}
.stimmenfeld--js .stimme{position:absolute;inset:0 0 auto 0;visibility:hidden;opacity:0}
.stimmenfeld--js .stimme + .stimme{margin-top:0}
.stimmenfeld--js .stimme.is-an{position:relative;visibility:visible;opacity:1}
.stimmenfeld--js .stimme.is-an .stimme__zeichen path{animation:st-zeichnen 1s cubic-bezier(.2,.7,.2,1) both}
.stimmenfeld--js .stimme .w{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(6px)}
.stimmenfeld--js .stimme.is-an .w{
  animation:st-wort .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(.25s + var(--i) * 28ms);
}
.stimmenfeld--js .stimme.is-an figcaption{animation:st-auf .8s cubic-bezier(.2,.7,.2,1) .6s both}
@keyframes st-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes st-wort{to{opacity:1;transform:none;filter:none}}
@keyframes st-auf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  /* Hochkant: alle drei Personen passen nebeneinander ins Bild, Porträt
     oben, Name darunter. Kein seitliches Wischen, nichts ragt heraus. */
  .stimmenfeld--js .stimmenfeld__wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stimmenfeld__person{
    grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px;
    padding:12px 6px 14px;border-radius:18px;
  }
  .stimmenfeld__person:hover{transform:none}
  .stimmenfeld__bild{width:52px;height:52px}
  .stimmenfeld__wer{align-items:center}
  .stimmenfeld__wer b{font-size:13px;line-height:1.25;hyphens:manual;overflow-wrap:normal}
  .stimmenfeld__wer i{display:none}
}
@media(max-width:340px){
  .stimmenfeld__wer b{font-size:12px}
  .stimmenfeld__bild{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .stimmenfeld__aura i,.stimmenfeld--js .stimme.is-an .w,.stimmenfeld--js .stimme.is-an figcaption,
  .stimmenfeld--js .stimme.is-an .stimme__zeichen path{animation:none}
  .stimmenfeld--js .stimme .w{opacity:1;transform:none;filter:none}
  .stimmenfeld__person.laeuft .stimmenfeld__takt::after{animation:none}
}
html.sparsam .stimmenfeld__aura i{animation:none;filter:blur(40px);will-change:auto}
html.sparsam .stimmenfeld--js .stimme .w{filter:none}