/* pxmedia.ai — „Der Weg“ als Partikel-Zeitleiste (Fassung 10, Ansage Michael 02.10.2026: „ein digitaler Weg aus unseren Partikeln,
   an dem Punkte stehen, was wir machen“). Die Zeichenfläche (js/weg.js) legt den Strom durch die Knoten; ohne Skript und ohne Bewegung
   stehen alle Karten voll lesbar da. Cyan = Beratung/KI, Lila = der Mensch entscheidet. */
.weg{position:relative;--weg-spalte:64px}
.weg__flaeche{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.weg__liste{list-style:none;margin:0;padding:0}
.weg__etappe,.weg__punkt{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) var(--weg-spalte) minmax(0,1fr);align-items:center;padding-block:1.15rem}
.weg__knoten{grid-column:2;grid-row:1;justify-self:center;width:18px;height:18px;border-radius:50%;border:2px solid var(--c-linie-2);background:var(--c-grund);
  transform:translateX(var(--versatz,0px));transition:border-color .5s var(--kurve),box-shadow .5s var(--kurve),background-color .5s var(--kurve)}
.weg__etappe .weg__knoten{width:30px;height:30px;border-width:2px}
.weg__karte,.weg__kopf{grid-row:1;min-width:0}
.weg__punkt:nth-child(odd) .weg__karte{grid-column:1;justify-self:end;text-align:right}
.weg__punkt:nth-child(even) .weg__karte{grid-column:3}
.weg__kopf{grid-column:3}
.weg__karte{max-width:30rem;background:var(--c-flaeche-1);border:1px solid var(--c-linie);border-radius:var(--radius);padding:1.1rem 1.25rem;
  transition:opacity .6s var(--kurve),transform .6s var(--kurve),border-color .6s var(--kurve)}
.weg__karte b{display:block;font-size:1.12rem;line-height:1.3;margin:.2rem 0 .35rem;color:var(--c-text)}
.weg__karte p{margin:0;color:var(--c-text-2);font-size:.97rem;line-height:1.55}
.weg__karte a{color:var(--c-ki);font-weight:var(--fw-bold);text-underline-offset:.2em;display:inline-flex;align-items:center;min-height:44px}
.weg__marke{display:inline-block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-ki)}
.weg__punkt[data-mensch] .weg__marke{color:var(--c-mensch)}
.weg__kopf{max-width:30rem;transition:opacity .6s var(--kurve)}
.weg__kopf span{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:var(--fw-bold);color:var(--c-text-3)}
.weg__kopf h3{margin:.25rem 0 .3rem;font-size:var(--fs-h3)}
.weg__kopf p{margin:0;color:var(--c-text-2);font-size:.95rem;line-height:1.5}
.weg__etappe{padding-block:1.8rem 1rem}
.weg__etappe--zwei{margin-top:1.6rem}
/* erreicht */
.weg__punkt.an .weg__knoten,.weg__etappe.an .weg__knoten{border-color:var(--c-ki);background:var(--c-ki);box-shadow:0 0 0 6px var(--c-ki-weich),0 0 22px rgba(6,182,212,.55)}
.weg__punkt[data-mensch].an .weg__knoten{border-color:var(--c-mensch);background:var(--c-mensch);box-shadow:0 0 0 6px var(--c-mensch-weich),0 0 22px rgba(165,148,249,.5)}
.weg__etappe--zwei.an .weg__knoten{border-color:var(--c-mensch);background:var(--c-mensch);box-shadow:0 0 0 7px var(--c-mensch-weich),0 0 26px rgba(165,148,249,.5)}
.weg__punkt.an .weg__karte{border-color:var(--c-ki-linie)}
.weg__punkt[data-mensch].an .weg__karte{border-color:var(--c-mensch-linie)}
/* Aufbau beim Scrollen: nur wenn das Skript läuft (sonst bleibt alles sichtbar) */
.weg--bereit .weg__punkt:not(.an) .weg__karte{opacity:.3;transform:translateY(12px)}
.weg--bereit .weg__etappe:not(.an) .weg__kopf{opacity:.4}
@media (max-width:859px){
  .weg{--weg-spalte:44px}
  .weg__etappe,.weg__punkt{grid-template-columns:var(--weg-spalte) minmax(0,1fr);padding-block:.8rem}
  .weg__knoten{grid-column:1;transform:translateX(calc(var(--versatz,0px) * .3))}
  .weg__punkt:nth-child(odd) .weg__karte,.weg__punkt:nth-child(even) .weg__karte,.weg__kopf{grid-column:2;justify-self:start;text-align:left}
  .weg__karte{max-width:none;padding:1rem 1.05rem}
}
@media (prefers-reduced-motion:reduce){ .weg__karte,.weg__kopf,.weg__knoten{transition:none} }