/* wow-stufe4-2026-09-18 — Stil zum Erkennungszeichen (Goldfaden-Navigator, Zeigerlicht, Ueberschriften-Wisch).
   Farbe ueber --wow4-c (augmanitai Gold; ballscience setzt Kupfer). Kein blur, keine Layout-Aenderung (alles fixed/overlay). */
:root{--wow4-c:#d9905f;--wow4-c2:rgba(217,144,95,.18)}

/* 1 Goldfaden am linken Rand */
.wow4-faden{position:fixed;left:10px;top:14vh;bottom:12vh;width:2px;z-index:60;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--wow4-c2) 8%,var(--wow4-c2) 92%,transparent)}
.wow4-faden::before{content:"";position:absolute;left:0;top:0;width:2px;height:calc(var(--wow4-f,0)*100%);
  background:linear-gradient(180deg,transparent,var(--wow4-c));opacity:.85}
.wow4-punkt{position:absolute;left:-4px;width:10px;height:10px;margin-top:-5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,var(--wow4-c) 55%,transparent 72%);
  box-shadow:0 0 10px 2px var(--wow4-c),0 -14px 18px -6px var(--wow4-c2);transition:top .08s linear}
.wow4-knoten{position:absolute;left:-3px;width:8px;height:8px;margin-top:-4px;border-radius:50%;pointer-events:auto;
  border:1px solid var(--wow4-c);background:rgba(6,10,18,.9);transition:transform .2s,background .2s}
.wow4-knoten:hover,.wow4-knoten:focus-visible{transform:scale(1.6);background:var(--wow4-c)}
.wow4-knoten span{position:absolute;left:16px;top:50%;transform:translateY(-50%) translateX(-6px);white-space:nowrap;
  font:500 13px/1.2 system-ui,sans-serif;letter-spacing:.02em;color:#f0ece2;background:rgba(6,10,18,.92);
  border:1px solid var(--wow4-c2);border-radius:6px;padding:5px 9px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.wow4-knoten:hover span,.wow4-knoten:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:900px){.wow4-faden{left:3px;top:18vh;bottom:16vh}.wow4-knoten{display:none}}
@media print{.wow4-faden,.wow4-licht{display:none!important}}

/* 2 Zeigerlicht: weiches Licht folgt der Maus (nur Rechner) */
.wow4-licht{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;transition:opacity .6s;mix-blend-mode:screen;
  background:radial-gradient(520px circle at var(--x,50%) var(--y,40%),rgba(217,144,95,.11),rgba(217,144,95,.04) 38%,transparent 64%)}
.wow4-licht.an{opacity:1}

/* 3 Unterseiten: Zwischenueberschriften wischen sich ins Bild (nur wo der Browser Scroll-Zeitachsen kann) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html.wow4-sub main h2{animation:wow4-wisch linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
    @keyframes wow4-wisch{from{clip-path:inset(0 100% 0 0);opacity:.25}to{clip-path:inset(0 -2% 0 0);opacity:1}}
  }
}

/* wow4-hell-fest: Faden auch auf hellem Grund sichtbar (dunkler Saum) */
.wow4-faden{background:linear-gradient(180deg,transparent,rgba(170,100,60,.40) 8%,rgba(170,100,60,.40) 92%,transparent)!important;filter:drop-shadow(0 0 1px rgba(6,10,18,.55))}
.wow4-punkt{outline:1px solid rgba(6,10,18,.55)}