/* WG Bausteine: Widget „stimmen“. Übernommen aus startseite-2026/v3/parts/stimmen.html (style-Block unverändert). */
/* ================================================================
   STIMMEN · Band zum Ziehen (Zitatkarten und Ergebniskarten)
   Alle Selektoren beginnen mit #stimmen. Setzt die Shell voraus.
   ================================================================ */
#stimmen{overflow:clip}
#stimmen .st-head{position:relative;z-index:1}

/* Bühne und Band */
#stimmen .st-stage{position:relative;margin-top:64px}
#stimmen .st-band{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:24px;outline:none;-webkit-tap-highlight-color:transparent}
#stimmen .st-band::-webkit-scrollbar{display:none}
#stimmen .st-band:focus-visible{outline:2px solid var(--lime-text);outline-offset:-4px;border-radius:var(--radius)}
#stimmen .st-track{display:flex;align-items:stretch;gap:20px;width:max-content;margin:0;list-style:none;padding:20px max(24px,calc((100% - var(--wrap)) / 2 + 24px)) 56px}
#stimmen .st-item{flex:0 0 auto;width:324px;display:flex;scroll-snap-align:start;margin:0;padding:0}
/* Ab 1280 px beginnt der Inhalt mindestens 104 px vom Fensterrand, wegen der Einstellungsleiste von WG FX (core.css).
   Die erste Karte steht an derselben Kante wie die Überschrift. */
@media (min-width:1280px){
  #stimmen .st-track{padding-left:max(104px,calc((100% - var(--wrap)) / 2 + 24px))}
  #stimmen .st-band{scroll-padding-inline:104px 24px}
}

/* Ziehmodus am Desktop (nur mit JavaScript und feinem Zeiger) */
#stimmen .st-stage.is-drag .st-band{overflow:hidden;scroll-snap-type:none;cursor:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
#stimmen .st-stage.is-drag .st-track{will-change:transform}
#stimmen .st-stage.is-drag .st-card{-webkit-user-drag:none}
@media (min-width:1024px){
  #stimmen .st-band{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
}

/* Karten, gemeinsame Basis */
#stimmen .st-card{position:relative;width:100%;min-height:380px;margin:0;padding:26px;border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;isolation:isolate}

/* Zitatkarte (Milchglas) */
#stimmen .st-q__mark{position:absolute;top:10px;right:22px;font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:900;font-size:96px;line-height:1;color:var(--band);z-index:-1;pointer-events:none}
#stimmen .st-q__who{display:flex;align-items:center;gap:12px}
#stimmen .st-q__ini{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 25%,#34392F 0%,var(--graphite-2) 50%,var(--graphite) 100%);color:var(--lime);font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;box-shadow:0 0 0 4px rgba(194,242,28,.18)}
#stimmen .st-q__logo{flex:0 0 auto;display:grid;place-items:center;height:44px;min-width:44px;max-width:112px;padding:0 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line-2),0 4px 12px rgba(20,20,20,.05)}
#stimmen .st-q__logo img{display:block;width:auto;height:auto;max-width:88px;max-height:24px;filter:brightness(0);opacity:.7}
#stimmen .st-q__name{display:block;font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:800;font-size:16px;line-height:1.2;color:var(--ink);letter-spacing:-.01em}
#stimmen .st-q__role{display:block;margin-top:3px;font-family:"WGB Roboto Mono",monospace;--wgb-ff:"WGB Roboto Mono",monospace;font-weight:500;font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#stimmen .st-q__stars{display:flex;gap:3px;margin-top:20px}
#stimmen .st-q__stars svg{width:15px;height:15px;fill:var(--ink)}
#stimmen .st-q blockquote{flex:1;margin:14px 0 0;padding:0}
#stimmen .st-q blockquote p{margin:0;font-family:"WGB Roboto",sans-serif;--wgb-ff:"WGB Roboto",sans-serif;font-size:15px;line-height:1.55;color:var(--ink-2)}
#stimmen .st-q figcaption{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-family:"WGB Roboto Mono",monospace;--wgb-ff:"WGB Roboto Mono",monospace;font-weight:500;font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#stimmen .st-q figcaption::before,
#stimmen .st-r__label::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--glow)}

/* Ergebniskarte (Graphit mit Lime-Zahl) */
#stimmen .st-r{background:var(--graphite);color:#fff;box-shadow:var(--shadow)}
#stimmen .st-r::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(120% 90% at 85% 100%,#000 0%,transparent 75%);mask-image:radial-gradient(120% 90% at 85% 100%,#000 0%,transparent 75%)}
#stimmen .st-r::after{content:"";position:absolute;right:-30%;bottom:-35%;width:110%;height:80%;z-index:-2;background:radial-gradient(closest-side,rgba(194,242,28,.28),transparent);filter:blur(24px);pointer-events:none}
#stimmen .st-r__label{display:flex;align-items:center;gap:8px;margin:0;font-family:"WGB Roboto Mono",monospace;--wgb-ff:"WGB Roboto Mono",monospace;font-weight:500;font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
#stimmen .st-r__num{display:flex;flex-direction:column;margin:auto 0 0}
#stimmen .st-r__big{display:block;font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:900;font-size:124px;line-height:.86;letter-spacing:-.055em;padding-bottom:.04em;background:linear-gradient(180deg,#E6FB8E 0%,var(--lime) 72%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#stimmen .st-r__bis{font-size:.26em;font-weight:800;letter-spacing:0;margin:0 .18em 0 .1em;vertical-align:.12em}
#stimmen .st-r__unit{display:block;margin-top:6px;font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:800;font-size:30px;line-height:1.05;letter-spacing:-.02em;color:#fff}
#stimmen .st-r__txt{margin:14px 0 0;font-family:"WGB Roboto",sans-serif;--wgb-ff:"WGB Roboto",sans-serif;font-size:15px;line-height:1.5;color:rgba(255,255,255,.72)}
#stimmen .st-r__firm{margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-family:"WGB Roboto Mono",monospace;--wgb-ff:"WGB Roboto Mono",monospace;font-weight:500;font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.56)}

/* Ergebniskarte in Lime */
#stimmen .st-r--lime{background:linear-gradient(160deg,var(--lime-2) 0%,var(--lime) 58%,#B4E318 100%);color:var(--lime-ink);box-shadow:0 20px 50px rgba(120,160,0,.22),inset 0 0 0 1px rgba(20,23,12,.06)}
#stimmen .st-r--lime::before{background-image:linear-gradient(rgba(20,23,12,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(20,23,12,.07) 1px,transparent 1px)}
#stimmen .st-r--lime::after{left:-35%;right:auto;top:-40%;bottom:auto;background:radial-gradient(closest-side,rgba(255,255,255,.7),transparent)}
#stimmen .st-r--lime .st-r__label{color:rgba(20,23,12,.6)}
#stimmen .st-r--lime .st-r__label::before{background:var(--lime-ink);box-shadow:none}
#stimmen .st-r--lime .st-r__big{background:linear-gradient(180deg,#14170C 20%,#3E4A18 100%);-webkit-background-clip:text;background-clip:text}
#stimmen .st-r--lime .st-r__unit{color:var(--lime-ink)}
#stimmen .st-r--lime .st-r__txt{color:rgba(20,23,12,.74)}
#stimmen .st-r--lime .st-r__firm{border-top-color:rgba(20,23,12,.14);color:rgba(20,23,12,.6)}

/* Videokarte (Milchglas mit Vorschaubild aus der Mediathek, Vimeo lädt erst im Dialog)
   Im Quelltext steht die Firma (H3) vorn, per order erscheinen Bild und Hinweis oben. Der Abstandshalter
   ::after schiebt die Stichworte an den unteren Rand. */
#stimmen .st-card.st-v{padding:10px 10px 20px}
#stimmen .st-v::after{content:"";order:1;flex:1 1 0}
#stimmen .st-v__media{order:-2;position:relative;display:block;flex:none;width:100%;aspect-ratio:2/1;margin:0;padding:0;border:0;border-radius:16px;overflow:hidden;isolation:isolate;background:var(--band);color:var(--lime-ink);font:inherit;text-align:left;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
#stimmen .st-v__media::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,20,20,.07);pointer-events:none}
#stimmen .st-v__play{cursor:pointer}
#stimmen .st-v__play:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#stimmen .st-v__img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;object-position:50% 32%;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;transition:transform .8s var(--ease)}
#stimmen .st-v__play:hover .st-v__img{transform:scale(1.035)}
/* Abspielknopf oben rechts: dort zeigen die Vorschaubilder nur Hintergrund, keine Gesichter und keine Namensschilder */
#stimmen .st-v__btn{position:absolute;right:12px;top:12px;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(140deg,#E6FB8E 0%,var(--lime) 62%,#B9E61A 100%);color:var(--lime-ink);box-shadow:0 0 0 4px rgba(194,242,28,.26),0 8px 22px rgba(11,12,11,.3),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
#stimmen .st-v__btn .v3-ico{width:19px;height:19px;margin-left:2px;stroke-width:2}
#stimmen .st-v__play:hover .st-v__btn{transform:scale(1.06);box-shadow:0 0 0 6px rgba(194,242,28,.32),0 10px 26px rgba(11,12,11,.34),0 0 24px var(--glow),inset 0 1px 0 rgba(255,255,255,.6)}
/* Ohne Vorschaubild: ruhige Fläche mit Raster und großen, hellen Initialen */
#stimmen .st-v__ph{position:absolute;inset:0;display:block;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,rgba(255,255,255,0) 62%),linear-gradient(180deg,#F8F8F4 0%,var(--band) 100%)}
#stimmen .st-v__ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px;background-position:center;-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%)}
#stimmen .st-v__ini{position:absolute;left:18px;bottom:-.15em;font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:900;font-size:104px;line-height:1;letter-spacing:-.05em;background:linear-gradient(180deg,#E1E3DB 0%,#CDD0C6 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* Hinweis auf Vimeo, Firma, Zitat (höchstens drei Zeilen) und Stichworte */
#stimmen .st-v__hint{order:-1;display:flex;align-items:flex-start;gap:5px;margin:10px 16px 0;font-family:"WGB Roboto",sans-serif;--wgb-ff:"WGB Roboto",sans-serif;font-size:11px;line-height:1.4;color:var(--muted)}
#stimmen .st-v__hint .v3-ico{flex:none;width:12px;height:12px;margin-top:1.5px;color:var(--lime-text)}
#stimmen .st-v__name{margin:12px 16px 0;padding:0;font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:800;font-size:16px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
#stimmen .st-v__quote{margin:6px 16px 0;padding:0}
#stimmen .st-v__quote p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;margin:0;font-family:"WGB Roboto",sans-serif;--wgb-ff:"WGB Roboto",sans-serif;font-size:14px;line-height:1.45;color:var(--ink-2)}
#stimmen .st-v__tags{order:2;display:flex;flex-direction:column;gap:3px;margin:12px 16px 0;padding:12px 0 0;border-top:1px solid var(--line);list-style:none}
#stimmen .st-v__tags li{display:flex;align-items:center;gap:7px;margin:0;padding:0;font-family:"WGB Roboto Mono",monospace;--wgb-ff:"WGB Roboto Mono",monospace;font-weight:500;font-size:11px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#stimmen .st-v__tags li::before{content:"";flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 6px var(--glow)}
/* Ziehmodus: über dem Abspielknopf der normale Zeiger statt des Zieh-Cursors, beim Ziehen keiner */
#stimmen .st-stage.is-drag .st-v__play{cursor:pointer}
#stimmen .st-stage.is-grabbing .st-v__play{cursor:none}

/* Eigener Cursor „Ziehen“ */
#stimmen .st-cursor{position:absolute;left:0;top:0;z-index:5;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 34px rgba(20,20,20,.16),0 0 0 1px rgba(20,20,20,.06);font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:800;font-size:14px;letter-spacing:-.005em;color:var(--ink);pointer-events:none;transform:translate3d(-200px,-200px,0) scale(0);will-change:transform}
#stimmen .st-cursor span{display:flex;align-items:center;gap:6px}
#stimmen .st-cursor svg{width:10px;height:10px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#stimmen .st-stage:not(.is-drag) .st-cursor{display:none}

/* Fortschritt und Hinweis unter dem Band */
#stimmen .st-meta{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:4px;padding:0 18px}
#stimmen .st-meta[hidden]{display:none}
#stimmen .st-bar{position:relative;width:140px;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
#stimmen .st-bar i{position:absolute;left:0;top:0;bottom:0;width:30%;border-radius:2px;background:var(--ink)}
#stimmen .st-hint{font-family:"WGB Roboto Mono",monospace;--wgb-ff:"WGB Roboto Mono",monospace;font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:720px){#stimmen .st-hint,#stimmen .st-q__role{font-size:12px;letter-spacing:.08em}}
#stimmen .st-hint--touch{display:none}
@media (hover:none),(pointer:coarse){
  #stimmen .st-hint--fine{display:none}
  #stimmen .st-hint--touch{display:inline}
}

/* Videodialog: showModal() hebt ihn in die oberste Ebene. Der Dialog selbst ist die abgedunkelte Fläche über
   dem ganzen Fenster (Klick darauf schließt), das Feld darin passt sich dem Format an und bleibt ganz im Bild.
   Die Größe rechnet mit der Größe des Dialogs (Container-Einheiten), sonst mit dem Fenster. */
#stimmen .st-dlg{position:fixed;inset:0;z-index:2147483000;box-sizing:border-box;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border:0;border-radius:0;background:rgba(12,13,12,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;overflow:hidden;overscroll-behavior:contain;container-type:size;opacity:0;transition:opacity .28s var(--ease)}
#stimmen .st-dlg:not([open]){display:none}
#stimmen .st-dlg[open]{display:grid;place-items:center}
#stimmen .st-dlg::backdrop{background:transparent}
#stimmen .st-dlg.is-open{opacity:1}
#stimmen .st-dlg__panel{display:flex;flex-direction:column;gap:14px;width:min(1120px,calc(100vw - 32px),calc((100vh - 96px) * 16 / 9));transform:translateY(10px) scale(.965);transition:transform .4s var(--ease)}
#stimmen .st-dlg--hoch .st-dlg__panel{width:min(460px,calc(100vw - 32px),calc((100vh - 96px) * 9 / 16))}
@supports (width:1cqw){
  #stimmen .st-dlg__panel{width:min(1120px,100cqw,calc((100cqh - 62px) * 16 / 9))}
  #stimmen .st-dlg--hoch .st-dlg__panel{width:min(460px,100cqw,calc((100cqh - 62px) * 9 / 16))}
}
#stimmen .st-dlg.is-open .st-dlg__panel{transform:none}
#stimmen .st-dlg__head{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px}
#stimmen .st-dlg__title{display:flex;align-items:center;gap:10px;min-width:0;margin:0;font-family:"WGB Archivo",sans-serif;--wgb-ff:"WGB Archivo",sans-serif;font-weight:800;font-size:18px;line-height:1.2;letter-spacing:-.01em;color:#fff}
#stimmen .st-dlg__title::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(194,242,28,.2),0 0 10px var(--glow)}
#stimmen .st-dlg__close{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;box-sizing:border-box;width:48px;height:48px;margin:0;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font:inherit;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
#stimmen .st-dlg__close:hover{background:#fff;border-color:#fff;color:var(--ink)}
#stimmen .st-dlg__close:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
#stimmen .st-dlg__close .v3-ico{width:22px;height:22px}
#stimmen .st-dlg__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0B0C0B center/cover no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 0 6px rgba(194,242,28,.06),0 40px 100px rgba(0,0,0,.5)}
#stimmen .st-dlg--hoch .st-dlg__frame{aspect-ratio:9/16}
#stimmen .st-dlg__frame iframe{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0}

/* Handy */
@media (max-width:767px){
  #stimmen .st-stage{margin-top:44px}
  #stimmen .st-band{scroll-padding-inline:18px}
  #stimmen .st-track{gap:14px;padding:16px 18px 44px}
  #stimmen .st-item{width:300px}
  #stimmen .st-card{min-height:372px;padding:22px}
  #stimmen .st-q blockquote p{font-size:14.5px}
  #stimmen .st-q__logo{max-width:96px;padding:0 10px}
  #stimmen .st-q__logo img{max-width:76px}
  #stimmen .st-r__big{font-size:112px}
  #stimmen .st-r__unit{font-size:27px}
  #stimmen .st-r__txt{font-size:14.5px}
  #stimmen .st-card.st-v{padding:8px 8px 18px}
  #stimmen .st-v__media{border-radius:14px}
  #stimmen .st-v__hint,#stimmen .st-v__name,#stimmen .st-v__quote,#stimmen .st-v__tags{margin-left:14px;margin-right:14px}
  #stimmen .st-v__btn{right:10px;top:10px;width:42px;height:42px}
  #stimmen .st-v__btn .v3-ico{width:17px;height:17px}
  #stimmen .st-v__hint .v3-ico{display:none}
  #stimmen .st-dlg__head{min-height:44px}
  #stimmen .st-dlg__title{font-size:16px}
  #stimmen .st-dlg__frame{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  #stimmen .st-band{scroll-behavior:auto}
  #stimmen .st-v__img,#stimmen .st-v__btn,#stimmen .st-dlg__close{transition:none}
  #stimmen .st-v__play:hover .st-v__img{transform:none}
  #stimmen .st-dlg{transition:opacity .16s linear}
  #stimmen .st-dlg__panel,#stimmen .st-dlg.is-open .st-dlg__panel{transform:none;transition:none}
}