/* WE-Effekte — Sektions-Effekte des Effektbaukastens, Stand 27.09.2026 (vorher 18.09.).
   Enthalten ist nur, was Jonathan im Labor genehmigt hat. Jeder Effekt ist eine Klasse,
   alle Farben kommen aus Marken-Variablen, alle Zeiten aus einer Dauer-Variablen.

   Einbinden:  <link rel="stylesheet" href="css/we-effekte.css">  + we-effekte.js vor </body>
   Farben setzen (im Hero oder auf :root):
     --we-marke:   Firmenfarbe (Knöpfe, Kanten, Fortschritt)
     --we-akzent:  zweite Farbe (Textmarker, Lichtkante)
   Die übrigen Variablen sind Voreinstellungen und müssen nicht gesetzt werden.

   Zugänglichkeit: Am Ende der Datei schaltet prefers-reduced-motion alle Bewegung ab,
   die Endzustände bleiben sichtbar.

   Ohne JavaScript ist alles sichtbar: Versteckt wird nur unterhalb von .we-js, und diese Klasse
   setzt we-effekte.js an <html>. Damit Inhalte, die das Skript sonst erzeugt, auch ohne Skript
   stimmen, schreibt der Generator sie ins HTML: das erste Wort in .we-woerter, die fertige Zahl
   in [data-we-ziel] und der fertige Prozentwert in .we-wert. Das Skript überschreibt sie. */

:root {
  --we-marke: #2563eb;
  --we-akzent: #e0a24a;
  --we-tinte: #e9ecf1;
  --we-neben: #8d97a5;
  --we-flaeche: #161b22;
  --we-linie: #2a333e;
  --we-dauer: .8s;
  --we-kurve: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Fotos ---------- */

/* Lichtstreif über dem Foto beim Überfahren. Braucht ein Elternteil mit position:relative. */
.we-glanz { position: relative; overflow: hidden; }
.we-glanz::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  transform: translateX(-60%); transition: transform 1.1s var(--we-kurve);
}
.we-glanz:hover::after, .we-glanz.we-an::after { transform: translateX(60%); }

/* Foto läuft nach unten weich aus, Text steht ohne Kasten darauf. */
.we-bildrand { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }

/* ---------- Karten ---------- */

/* Glanzlicht folgt dem Zeiger (Position setzt we-effekte.js als --we-x/--we-y). */
.we-karte-licht { position: relative; overflow: hidden; }
.we-karte-licht::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(240px circle at var(--we-x, 50%) var(--we-y, 50%), rgba(255, 214, 150, .22), transparent 60%);
  opacity: var(--we-o, 0); transition: opacity .25s;
}
.we-karte-licht::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(260px circle at var(--we-x, 50%) var(--we-y, 50%), rgba(255, 214, 150, .7), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--we-o, 0); transition: opacity .25s;
}

/* Karte neigt sich zum Zeiger, ein Reflex wandert mit. Elternteil braucht perspective. */
.we-karte-glas-buehne { perspective: 800px; }
.we-karte-glas {
  position: relative; overflow: hidden;
  transform: rotateX(var(--we-rx, 0deg)) rotateY(var(--we-ry, 0deg));
  transition: transform .25s ease-out;
}
.we-karte-glas::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
  transform: translateX(var(--we-sx, 0));
}

/* Lichtkante wandert einmal um die Karte. */
@property --we-w { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.we-karte-kante { position: relative; }
.we-karte-kante::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--we-w, 0deg), transparent 0 72%, var(--we-akzent) 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: we-dreh 6s linear infinite;
}
@keyframes we-dreh { to { --we-w: 360deg; } }

/* Spalten öffnen sich, die aktive wird breit. */
.we-spalten { display: flex; gap: 8px; }
.we-spalten > * {
  flex: 1; min-width: 0; overflow: hidden;
  transition: flex .55s var(--we-kurve), background .35s;
}
.we-spalten > * .we-mehr { display: block; max-height: 0; overflow: hidden; transition: max-height .5s var(--we-kurve); }
.we-spalten > *.we-auf, .we-spalten > *:hover { flex: 2.6; }
.we-spalten > *.we-auf .we-mehr, .we-spalten > *:hover .we-mehr { max-height: 12em; }
/* Handy: untereinander und alles offen, sonst brechen die schmalen Spalten Wörter („Neuba-u“). Wie im Generator. */
@media (max-width: 640px) {
  .we-spalten { flex-direction: column; }
  .we-spalten > * { flex: none; }
  .we-spalten > * .we-mehr { max-height: none; }
}

/* Karten schieben sich beim Scrollen übereinander. Jede Karte bekommt --we-i (0,1,2 …). */
/* --we-kopf = Höhe einer festen Kopfzeile, sonst rutschen die Karten darunter (der Generator nimmt --header-h). */
.we-stapel > * { position: sticky; top: calc(var(--we-kopf, 0px) + 14px + var(--we-i, 0) * 12px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }

/* ---------- Text ---------- */

/* Überschrift kommt aus der Unschärfe. */
.we-js .we-text-unschaerfe > * { display: inline-block; filter: blur(12px); opacity: 0; transition: filter var(--we-dauer), opacity var(--we-dauer); }
.we-text-unschaerfe.we-an > * { filter: blur(0); opacity: 1; }

/* Zeilen steigen aus der Maske. Jede Zeile: <span class="we-zeile"><span>Text</span></span> */
.we-zeile { display: block; overflow: hidden; }
.we-js .we-zeile > * { display: block; transform: translateY(110%); transition: transform var(--we-dauer) var(--we-kurve); }
.we-js .we-zeile > * { transition-delay: calc(var(--we-i, 0) * .12s); }
.we-js .we-an .we-zeile > * { transform: none; }

/* Textmarker zieht sich unter dem Wort durch. */
.we-marker {
  background: linear-gradient(100deg, rgba(255, 212, 84, 0) 0, rgba(255, 212, 84, .8) 2.5%, rgba(255, 205, 66, .5) 55%, rgba(255, 212, 84, .82) 97%, rgba(255, 212, 84, 0) 100%) no-repeat 0 72% / var(--we-m, 100%) 68%;
  color: inherit; padding: 0 .18em; margin: 0 -.1em; border-radius: .7em .2em .8em .25em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .9s cubic-bezier(.3, .6, .2, 1);
  transition-delay: calc(var(--we-i, 0) * .55s);
}
.we-js .we-marker { --we-m: 0%; }
.we-js .we-an .we-marker { --we-m: 100%; }

/* Lichtstreif läuft durch die Überschrift (Labor T04). Die Grundfarbe steht in --we-sf, we-effekte.js setzt sie auf
   die Schriftfarbe der Überschrift; ohne JS bleibt die Schrift normal. Bis 25.09.2026 stand hier currentColor
   zusammen mit color:transparent, damit war die Schrift bis auf den Streif unsichtbar. */
.we-text-schimmer.we-sf-an {
  background: linear-gradient(110deg, var(--we-sf, #b8bcc4) 40%, #fff 50%, var(--we-sf, #b8bcc4) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* text-fill-color schlaegt jede Schriftfarbe der Seite, sonst deckt eine staerkere Farbregel den Streif zu */
  -webkit-text-fill-color: transparent;
  animation: we-schimmer 3.2s ease-in-out 1.2s infinite;
}
@keyframes we-schimmer { to { background-position: -150% 0; } }

/* Wechselnde Wörter. Der feste Text bleibt stehen, das Wort rollt weich durch.
   Aufbau: Wir machen <span class="we-woerter" data-we-woerter="Neubau,Wallbox,E-Check"></span> */
.we-woerter { display: inline-grid; overflow: hidden; text-align: left; vertical-align: bottom; padding: .12em 0; margin: -.12em 0; color: var(--we-marke); }
.we-js .we-woerter > span { grid-area: 1 / 1; white-space: nowrap; opacity: 0; transform: translateY(75%); filter: blur(5px); }
.we-woerter > span.we-an { opacity: 1; transform: none; filter: none; transition: transform .6s cubic-bezier(.2, .75, .2, 1), opacity .45s, filter .5s; }
.we-woerter > span.we-raus { opacity: 0; transform: translateY(-75%); filter: blur(5px); transition: transform .5s cubic-bezier(.5, 0, .8, .4), opacity .4s, filter .4s; }

/* ---------- Knöpfe ---------- */

/* Glasknopf, bricht den Hintergrund. Nur über Fotos oder Farbflächen einsetzen. */
.we-knopf-glas {
  position: relative; color: #fff; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(7px) saturate(1.3); backdrop-filter: blur(7px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 30px rgba(0, 0, 0, .4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .we-knopf-glas { background: rgba(20, 24, 30, .55); }
}

/* Lichtstreif läuft über den Knopf. */
.we-knopf-streif { position: relative; overflow: hidden; }
.we-knopf-streif::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); animation: we-streif 4.5s ease-in-out infinite;
}
@keyframes we-streif { 0%, 60% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }

/* ---------- Stimmen ---------- */

/* Laufband, hält beim Überfahren an. Die Kinder müssen doppelt vorliegen (JS verdoppelt sie). */
/* Rand läuft weich aus, statt die Karten hart abzuschneiden */
.we-laufband { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.we-laufband > * { display: flex; gap: 14px; width: max-content; animation: we-lauf var(--we-lauf, 26s) linear infinite; }
.we-laufband:hover > * { animation-play-state: paused; }
@keyframes we-lauf { to { transform: translateX(-50%); } }

/* ---------- Zahlen ---------- */

/* Kreis-Fortschritt. Aufbau steht in der Anleitung, Wert kommt aus data-we-wert. */
.we-kreis { position: relative; display: grid; place-items: center; }
.we-kreis svg { transform: rotate(-90deg); }
.we-kreis circle { fill: none; stroke-width: 10; }
.we-kreis .we-hinter { stroke: var(--we-linie); }
.we-kreis .we-vor { stroke: var(--we-marke); stroke-linecap: round; stroke-dasharray: var(--we-u, 377); stroke-dashoffset: var(--we-o, var(--we-u, 377)); transition: stroke-dashoffset 1.6s var(--we-kurve); }
.we-kreis .we-wert { position: absolute; font-weight: 700; }

/* ---------- Fuß ---------- */

/* Der Fuß liegt fest unter der Seite und wird beim Scrollen freigelegt. */
.we-fuss-enthuellt { position: sticky; bottom: 0; z-index: 0; overflow: hidden; }
.we-fuss-enthuellt + *, .we-fuss-vor { position: relative; z-index: 1; }
.we-fuss-enthuellt .we-fuss-name { transform: translateY(calc(26px - var(--we-f, 1) * 26px)); opacity: calc(.25 + var(--we-f, 1) * .75); transition: transform .12s linear, opacity .12s linear; }
.we-fuss-enthuellt .we-fuss-zeile { transform: translateY(calc(14px - var(--we-f, 1) * 14px)); opacity: var(--we-f, 1); transition: transform .12s linear, opacity .12s linear; }

/* Großer Firmenname als Kontur im Fuß (U02). Nicht mehr in neue Demos: Jonathan am 22.09.2026 an einer echten
   Demo, der Name stehe dann doppelt („lass das mit dem großen Firmennamen bitte einfach weg"). Die Klasse bleibt
   nur, damit ältere Demos nicht brechen. */
.we-fuss-kontur {
  font-size: clamp(2.6rem, 9vw, 4.6rem); font-weight: 800; letter-spacing: -.03em; line-height: .95;
  color: transparent; -webkit-text-stroke: 1px var(--we-linie);
}

/* ---------- Hero ---------- */

/* Der Verlauf liegt als Hintergrund unter dem Canvas. Ohne JavaScript ist er das ganze Bild,
   mit JavaScript zeichnet der Hero darüber. */
canvas[data-we-hero] { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 238, 205, .13), #0a0c10 62%), #0a0c10; }
canvas[data-we-hero][data-we-ecke^="links"] { background: radial-gradient(120% 90% at 0% 0%, rgba(255, 238, 205, .13), #0a0c10 62%), #0a0c10; }
canvas[data-we-hero][data-we-ecke$="unten"] { background: radial-gradient(120% 90% at 100% 100%, rgba(255, 238, 205, .13), #0a0c10 62%), #0a0c10; }
canvas[data-we-hero][data-we-ecke="links-unten"] { background: radial-gradient(120% 90% at 0% 100%, rgba(255, 238, 205, .13), #0a0c10 62%), #0a0c10; }

/* ---------- Flächen ---------- */

/* Punktraster mit Lichtschein. Zeichnet we-effekte.js auf ein Canvas. */
.we-raster { position: relative; overflow: hidden; touch-action: pan-y; }
.we-raster > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Seit 27.09.2026: im Labor genehmigt nach dem 18.09. ----------
   Galerie (G01), Coverflow (G04), Absatz leuchtet auf (S05), Textmarker in der Navigation (N01).
   Aussehen 1:1 aus der genehmigten Fassung im Labor, Namen auf we-* umgestellt. */

/* Leistungs-Galerie (G01.3): Fächer nebeneinander, eines ist offen (Titel und Text), die anderen zeigen ihr
   Stichwort senkrecht. Wechselt von selbst, Zeiger oder Tippen öffnet sofort. Handy: Fächer untereinander.
   Aufbau: .we-galerie > .we-fach (img, .we-fach-wort, .we-fach-inhalt > small, b, span). Das erste Fach trägt
   im HTML schon .we-auf, damit es ohne Skript offen steht. */
.we-galerie { display: flex; gap: 6px; height: clamp(380px, 48vw, 540px); container-type: size; }
.we-galerie > .we-fach { position: relative; flex: 1 1 0; min-width: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #11151b; transition: flex-grow 1.15s cubic-bezier(.65, .05, .25, 1); will-change: flex-grow; }
.we-galerie > .we-fach.we-auf { flex-grow: 4.2; }
.we-fach > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); filter: brightness(.5) saturate(.75); transition: transform 7s cubic-bezier(.2, .6, .2, 1), filter 1.1s ease; }
.we-fach.we-auf > img { transform: scale(1.02); filter: brightness(.92) saturate(1); }
.we-fach::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 8, 11, .92), rgba(6, 8, 11, .1) 60%, transparent); pointer-events: none; }
.we-fach-wort { position: absolute; left: 50%; bottom: 16px; z-index: 2; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #e9ecf1; white-space: nowrap; transition: opacity .5s ease .25s; }
.we-fach.we-auf .we-fach-wort { opacity: 0; transition: opacity .25s ease; }
.we-fach-inhalt { position: absolute; left: 20px; bottom: 18px; z-index: 2; width: min(360px, 50cqw); opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .4s ease; color: #fff; }
.we-fach.we-auf .we-fach-inhalt { opacity: 1; transform: none; transition: opacity .7s ease .5s, transform .9s cubic-bezier(.2, .7, .2, 1) .45s; }
.we-fach-inhalt small { display: block; font-weight: 700; font-size: .72rem; letter-spacing: .14em; color: var(--we-akzent); margin-bottom: 6px; }
.we-fach-inhalt b { display: block; font-weight: 700; font-size: 1.3rem; line-height: 1.15; margin-bottom: 6px; }
.we-fach-inhalt span { display: block; font-size: .86rem; line-height: 1.45; color: #c9d1db; }
.we-fach-lauf { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3; background: rgba(255, 255, 255, .1); opacity: 0; transition: opacity .4s; }
.we-fach.we-auf .we-fach-lauf { opacity: 1; }
.we-fach-lauf i { display: block; height: 100%; width: 0; background: var(--we-akzent); }
.we-fach.we-auf .we-fach-lauf i { animation: we-fach-lauf var(--we-takt, 4.4s) linear forwards; }
.we-galerie.we-pause .we-fach.we-auf .we-fach-lauf i { animation-play-state: paused; }
@keyframes we-fach-lauf { to { width: 100%; } }
@media (max-width: 680px) {
  .we-galerie { flex-direction: column; height: clamp(460px, 130vw, 620px); }
  .we-fach-wort { writing-mode: horizontal-tb; left: 16px; right: 16px; top: 50%; bottom: auto; transform: translateY(-50%); font-size: .78rem; }
  .we-fach-inhalt { left: 16px; bottom: 14px; width: calc(100cqw - 64px); }
  .we-fach-inhalt b { font-size: 1.05rem; }
  .we-fach-inhalt span { font-size: .8rem; }
}

/* Coverflow (G04.5): Fotos im Kreis, ziehen mit Schwung, Tippen holt ein Bild nach vorn, hinten dunkler,
   Spiegelung am Boden, ohne Berührung dreht es sich langsam weiter. Titel und Punkte setzt das Skript.
   Aufbau: .we-coverflow > .we-cf-ring > figure[data-we-titel][data-we-stichwort] > img (6 bis 10 Bilder). */
.we-coverflow { position: relative; height: clamp(340px, 44vw, 480px); perspective: 1100px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.we-coverflow:active { cursor: grabbing; }
.we-cf-ring { position: absolute; left: 50%; top: 45%; width: 42%; aspect-ratio: 3 / 2; transform-style: preserve-3d; transform: translate(-50%, -50%) translateZ(calc(var(--we-rad, 300px) * -1)) rotateY(0deg); }
.we-cf-ring figure { position: absolute; inset: 0; margin: 0; transform-style: preserve-3d; }
.we-cf-ring img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 22px 50px rgba(0, 0, 0, .55); -webkit-box-reflect: below 6px linear-gradient(transparent 62%, rgba(255, 255, 255, .22)); -webkit-user-drag: none; pointer-events: none; }
.we-cf-titel { position: absolute; left: 0; right: 0; bottom: 12%; text-align: center; color: var(--we-tinte); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
.we-cf-titel small { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--we-akzent); margin-bottom: 4px; }
.we-cf-punkte { position: absolute; left: 0; right: 0; bottom: 6%; display: flex; justify-content: center; gap: 6px; }
.we-cf-punkte i { width: 6px; height: 6px; border-radius: 50%; background: #39424f; transition: background .3s, transform .3s; }
.we-cf-punkte i.we-an { background: var(--we-akzent); transform: scale(1.3); }
@media (max-width: 680px) { .we-coverflow { height: clamp(300px, 92vw, 400px); } .we-cf-ring { width: 58%; } }
/* Ohne Skript: die Bilder als ruhige Reihe statt im Kreis */
html:not(.we-js) .we-cf-ring { position: static; transform: none; width: auto; display: flex; gap: 10px; overflow-x: auto; padding: 20px; }
html:not(.we-js) .we-cf-ring figure { position: static; flex: 0 0 240px; aspect-ratio: 3 / 2; }

/* Absatz leuchtet beim Scrollen auf (S05.2): Wort für Wort aus der Unschärfe, an der Lesekante warmer Schein,
   Schlüsselwörter (data-we-marken) in der Akzentfarbe. Für einen großen Absatz (etwa 1.3 bis 1.9rem).
   Auf dunklem Grund die Vorgabe, auf hellem Grund data-we-grund="hell". */
.we-absatz-licht { --we-al-aus: #2c333d; --we-al-an: #f4f1ea; --we-al-glut: rgba(255, 205, 130, .85); --we-al-glut2: rgba(255, 190, 110, .35); }
.we-absatz-licht[data-we-grund="hell"] { --we-al-aus: #c4c9d0; --we-al-an: #1a1e24; --we-al-glut: rgba(224, 162, 74, .38); --we-al-glut2: rgba(224, 162, 74, .12); }
.we-js .we-absatz-licht .we-wort { display: inline-block; color: var(--we-al-aus); filter: blur(2.2px); transform: translateY(5px); transition: color .5s, filter .5s, transform .5s, text-shadow .5s; }
.we-js .we-absatz-licht .we-wort.we-an { color: var(--we-al-an); filter: none; transform: none; }
.we-js .we-absatz-licht .we-wort.we-jetzt { text-shadow: 0 0 18px var(--we-al-glut), 0 0 42px var(--we-al-glut2); }
.we-js .we-absatz-licht .we-wort.we-marke.we-an { color: var(--we-akzent); text-shadow: 0 0 22px color-mix(in srgb, var(--we-akzent) 40%, transparent); }

/* Textmarker in der Navigation (N01.4): Ein Strich wie von Hand mit dem Textmarker liegt unter dem Menüpunkt,
   über dem der Zeiger ist, sonst unter dem Abschnitt, in dem man gerade liest. Jedes Mal etwas anders, raue
   Kanten. Nur auf heller Kopfzeile: Die Farbe multipliziert sich mit dem Grund, auf Dunkel wäre sie weg.
   Aufbau: nav.we-nav-marker > a[href^="#"] (das Skript legt den Strich selbst an). */
.we-nav-marker { position: relative; }
.we-nav-marker > a { position: relative; z-index: 1; }
.we-nm-strich { position: absolute; z-index: 0; left: 0; top: 0; width: 80px; height: 26px; pointer-events: none; mix-blend-mode: multiply; opacity: 0; transition: opacity .3s ease; }
.we-nm-strich.we-an { opacity: 1; }
.we-nm-strich svg { width: 100%; height: 100%; overflow: visible; display: block; }
.we-nm-strich path { fill: none; stroke: var(--we-marker-farbe, #ffd23f); stroke-opacity: .82; stroke-linecap: round; stroke-width: var(--we-dicke, 17); filter: url(#we-nm-rau); }

/* ---------- Ruhe ---------- */

@media (prefers-reduced-motion: reduce) {
  .we-galerie > .we-fach, .we-fach > img, .we-fach-inhalt, .we-fach-wort { transition: none !important; }
  .we-fach.we-auf .we-fach-lauf i { animation: none; width: 100%; }
  .we-js .we-absatz-licht .we-wort { filter: none; transform: none; color: var(--we-al-an); transition: none; }
  .we-nm-strich { transition: none; }
  .we-glanz::after, .we-karte-kante::before, .we-knopf-streif::after, .we-text-schimmer, .we-laufband > * { animation: none !important; transition: none !important; }
  .we-glanz::after { display: none; }
  .we-text-schimmer { background: none; color: inherit; }
  .we-js .we-text-unschaerfe > * { filter: none; opacity: 1; }
  .we-js .we-zeile > * { transform: none; }
  .we-js .we-marker { --we-m: 100%; }
  .we-woerter > span.we-an { transition: none; }
  .we-karte-glas { transform: none; }
  .we-kreis .we-vor { transition: none; }
}