/* ============================================================
   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ß, darüber die fünf 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 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(5,minmax(0,1fr));gap:10px}
.stimmenfeld__person{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;
  width:100%;min-height:44px;margin:0;padding:10px 12px 10px 10px;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:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.14);transition:box-shadow .4s;
}
/* Solange kein Porträt freigegeben ist: Initialen auf Pflaume */
.stimmenfeld__bild--kuerzel{
  display:grid;place-items:center;
  background:linear-gradient(150deg,#8A5A78,#4A2C3E);
  font-family:var(--sans,"Geist",system-ui,sans-serif);font-weight:500;font-size:18px;letter-spacing:.04em;
  color:var(--st-altrosa);transition:box-shadow .4s,color .4s;
}
.stimmenfeld__person[aria-pressed="true"] .stimmenfeld__bild--kuerzel,
.stimmenfeld__person:hover .stimmenfeld__bild--kuerzel{color:#fff}
.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:15px;line-height:1.25;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}}

/* Fünf Personen: unter 1180px Porträt oben, Name darunter */
@media(max-width:1180px){
  .stimmenfeld__person{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px;padding:12px 8px 14px}
  .stimmenfeld__wer{align-items:center}
}
@media(max-width:900px){
  /* Hochkant: alle fünf Personen passen nebeneinander ins Bild, Porträt
     oben, Nachname darunter. Kein seitliches Wischen, nichts ragt heraus. */
  .stimmenfeld--js .stimmenfeld__wahl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .stimmenfeld__vorname{display:none}
  .stimmenfeld__person{
    grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px;
    padding:10px 2px 12px;border-radius:16px;
  }
  .stimmenfeld__person:hover{transform:none}
  .stimmenfeld__bild{width:46px;height:46px}
  .stimmenfeld__bild--kuerzel{font-size:15px}
  .stimmenfeld__wer{align-items:center}
  .stimmenfeld__wer b{font-size:12px;line-height:1.25;hyphens:manual;overflow-wrap:normal}
  .stimmenfeld__wer i{display:none}
}
@media(max-width:400px){
  .stimmenfeld__wer b{font-size:11px}
  .stimmenfeld__bild{width:40px;height:40px}
  .stimmenfeld__bild--kuerzel{font-size:13px}
}
@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}