/* WG Bausteine: Widget wirkung. Ursprünglich aus startseite-2026/v3/parts/wirkung.html übernommen. */
/* ===== Sektion: Wirkung (id wirkung) ===== */
#wirkung{overflow-x:clip}
#wirkung .v3-wrap{position:relative;z-index:1}
/* Die Überschrift steht seit 1.3.7 in der Spalte mit der Liste, damit sie beim Durchscrollen sichtbar bleibt */
#wirkung .wk-head{max-width:none;margin:0 0 28px;align-items:center;text-align:center}
#wirkung .wk-ghost{margin:0;padding:0 0 .06em;overflow-wrap:anywhere;font-size:clamp(48px,8.6vw,124px)}
@supports (color:color-mix(in srgb,red 50%,blue)){
  #wirkung .wk-ghost{background-image:linear-gradient(180deg,color-mix(in srgb,#141414 calc(var(--p,1) * 100%),#E6E7E1) 20%,color-mix(in srgb,#4A4F45 calc(var(--p,1) * 100%),#D4D6CE) 95%)}
}
#wirkung .wk-stage{position:relative}
#wirkung .wk-sticky{display:block}
#wirkung .wk-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
#wirkung .wk-kicker{margin:0 0 18px;font-family:"WGB Roboto Mono",ui-monospace,monospace;--wgb-ff:"WGB Roboto Mono",ui-monospace,monospace;font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#wirkung .wk-hint{max-width:520px;margin:14px auto 0;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:14px;line-height:1.5;color:var(--muted);text-align:center}
#wirkung .wk-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
#wirkung .wk-item{appearance:none;cursor:pointer;margin:0;border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;background:rgba(255,255,255,.7);font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-weight:500;font-size:14px;line-height:1.2;color:var(--muted);transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
#wirkung .wk-item.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
#wirkung .wk-item:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#wirkung .wk-fig{margin:0;min-width:0}
#wirkung .wk-chart{position:relative;width:100%;max-width:640px;margin:0 auto;aspect-ratio:510/318}
#wirkung .wk-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#wirkung .wk-ring,#wirkung .wk-axis{fill:none;stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
/* Achsen: im Ausgangszustand (letztes Profil, Lime) ausgeblendet, wirkung.js blendet sie in den Einzelprofilen ein */
#wirkung .wk-axis{opacity:0}
#wirkung .wk-end{fill:var(--faint);opacity:0}
/* Umrisse der Einzelprofile gibt es nicht mehr; falls noch altes Markup aus einem Seitencache kommt, bleibt es unsichtbar */
#wirkung .wk-ghosts{display:none}
#wirkung .wk-area{stroke-linejoin:round;vector-effect:non-scaling-stroke}
#wirkung .wk-area--ink{fill:var(--ink);fill-opacity:.12;stroke:var(--ink);stroke-width:1.5;opacity:0}
#wirkung .wk-area--lime{fill:#C2F21C;fill-opacity:.34;stroke:#8DB80E;stroke-width:2;filter:drop-shadow(0 0 10px rgba(194,242,28,.6)) drop-shadow(0 0 28px rgba(194,242,28,.3))}
#wirkung .wk-dot{fill:var(--ink);stroke:#fff;stroke-width:1.5;vector-effect:non-scaling-stroke}
#wirkung .wk-lab{position:absolute;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-weight:500;font-size:13px;line-height:1.25;color:var(--muted);white-space:nowrap;pointer-events:none}
#wirkung .wk-lab--t{transform:translate(-50%,calc(-100% - 12px));text-align:center}
#wirkung .wk-lab--b{transform:translate(-50%,12px);text-align:center}
#wirkung .wk-lab--r{transform:translate(12px,-50%);text-align:left}
#wirkung .wk-lab--l{transform:translate(calc(-100% - 12px),-50%);text-align:right}
#wirkung .wk-cap{max-width:520px;min-height:4.8em;margin:36px auto 0;font-family:"WGB Roboto",system-ui,sans-serif;--wgb-ff:"WGB Roboto",system-ui,sans-serif;font-size:18px;line-height:1.6;color:var(--ink-2);text-align:center;transition:opacity .22s var(--ease),transform .22s var(--ease)}
#wirkung .wk-cap.is-out{opacity:0;transform:translateY(6px)}
/* Desktop: klebender Bereich, Liste links, Diagramm rechts */
@media (min-width:900px){
  /* Überschrift links über der Liste, so groß, dass „Zusammen“ in die Spalte passt */
  #wirkung .wk-head{align-items:flex-start;text-align:left;margin-bottom:32px}
  #wirkung .wk-head > .v3-pill{align-self:flex-start}
  #wirkung .wk-ghost{font-size:clamp(44px,5.2vw,84px)}
  #wirkung .wk-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
  #wirkung .wk-list{flex-direction:column;flex-wrap:nowrap;gap:6px}
  #wirkung .wk-item{position:relative;display:flex;align-items:center;gap:0;width:100%;border:0;border-radius:0;padding:8px 0;background:none;text-align:left;font-family:"WGB Archivo",system-ui,sans-serif;--wgb-ff:"WGB Archivo",system-ui,sans-serif;font-weight:800;font-size:clamp(24px,2.5vw,36px);line-height:1.1;letter-spacing:-.025em;color:var(--faint)}
  #wirkung .wk-item::before{content:"";flex:none;width:0;height:3px;margin-right:0;border-radius:3px;background:var(--lime);box-shadow:0 0 12px var(--glow);transition:width .45s var(--ease),margin-right .45s var(--ease)}
  #wirkung .wk-item.is-active{background:none;color:var(--ink)}
  #wirkung .wk-item.is-active::before{width:28px;margin-right:16px}
  #wirkung .wk-item:hover{color:var(--ink-2)}
  #wirkung .wk-cap{margin-top:28px}
  #wirkung.wk-scroll{padding-bottom:0}
  /* Scrollstrecke: eine Bildschirmhöhe je Wechsel zwischen zwei Profilen plus Halt am Anfang und am Ende
     (0,25 und 0,3 Bildschirmhöhen, VOR und NACH in wirkung.js) plus die angeheftete Bildschirmhöhe selbst.
     Bei fünf Profilen sind das 4,55 Bildschirmhöhen Scrollweg, also rund 91 vh je Profil. */
  /* 75vh je Profil: etwa die Hälfte davon Halt, die andere Hälfte Überblendung */
  #wirkung.wk-scroll .wk-stage{height:416vh;height:calc(75vh * (var(--n,5) + .55))}
  /* Oben 72 px frei für die feste Kopfzeile, damit die Pille über der Überschrift nicht darunter rutscht */
  #wirkung.wk-scroll .wk-sticky{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;padding-top:72px;display:flex;align-items:center}
  #wirkung.wk-scroll .wk-sticky > .wk-grid{width:100%}
}
/* Die Einstellungsleiste von WG FX sitzt auf dem Desktop links mittig bis 76 px vom Rand und damit genau auf Höhe
   der angehefteten Liste. Die Liste beginnt deshalb mindestens 104 px vom Fensterrand (mit klassischer Scrollleiste
   etwa 96 px, also rund 20 px rechts der Pille). Ab rund 1360 px Breite ist der Inhalt ohnehin weit genug vom Rand entfernt, der Einzug wird dann 0. */
/* Ab 1280 px übernimmt das der Seitenrahmen für alle Bausteine (core.css). */
@media (min-width:900px) and (max-width:1279px){
  body:has(.wgfx-sidebar) #wirkung.wk-scroll .wk-sticky > .wk-grid{padding-left:max(0px,calc(80px - max(0px,(100vw - var(--wrap)) / 2)))}
}
@media (max-width:899px){
  /* Auf dem Handy ist die Überschrift sofort lesbar, ohne Aufhellen beim Scrollen */
  #wirkung .wk-ghost{background-image:linear-gradient(180deg,#141414 20%,#4A4F45 95%)}
  #wirkung .wk-kicker{text-align:center}
  #wirkung .wk-list{justify-content:center}
  #wirkung .wk-cap{font-size:17px;margin-top:28px}
}
@media (max-width:520px){
  #wirkung .wk-ghost{font-size:clamp(46px,14.5vw,64px)}
  #wirkung .wk-lab{font-size:11px}
  #wirkung .wk-lab--r{transform:translate(8px,-50%)}
  #wirkung .wk-lab--l{transform:translate(calc(-100% - 8px),-50%)}
  #wirkung .wk-lab--t{transform:translate(-50%,calc(-100% - 8px))}
  #wirkung .wk-lab--b{transform:translate(-50%,8px)}
  #wirkung .wk-item{font-size:13px;padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){
  #wirkung .wk-ghost{background-image:linear-gradient(180deg,#141414 20%,#4A4F45 95%)}
  #wirkung .wk-item,#wirkung .wk-item::before,#wirkung .wk-cap{transition:none}
}