/* Glitch-Bildsprache: Graustufen + Lime-Duotone + Scanlines + Mono-Label.
   Ebenen werden von glitch.js deckungsgleich aufs Bild gelegt. */
.gimg{isolation:isolate}
img.gimg-img{filter:grayscale(1) contrast(1.15) brightness(.95) !important}
.gimg-duo,.gimg-scan{position:absolute;pointer-events:none;z-index:1}
.gimg-duo{
  background:linear-gradient(155deg, rgba(198,255,1,.6), rgba(4,22,21,.05) 55%, rgba(4,22,21,.85));
  mix-blend-mode:color;
}
.gimg-scan{background:repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px)}
.gimg-tag{
  position:absolute;z-index:2;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  font-size:11px;letter-spacing:.06em;color:#C6FF01;
  background:#041615;border:1px solid #244038;
  padding:4px 9px;white-space:nowrap;pointer-events:none;
}
/* Animierte Störung (glitch.js setzt .is-glitch für ~420ms).
   Zwei Kopien des Bildes: Lime-Kanal (screen) und Tinten-Kanal (multiply),
   in Streifen zerschnitten und gegeneinander versetzt. Nur transform + clip-path. */
.gimg-fx{position:absolute;z-index:1;pointer-events:none;overflow:hidden;opacity:0}
.gimg-fx-a,.gimg-fx-b{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat}
.gimg-fx-a{filter:grayscale(1) sepia(1) saturate(7) hue-rotate(38deg) brightness(1.15) contrast(1.2);mix-blend-mode:screen;opacity:.75}
.gimg-fx-b{filter:grayscale(1) brightness(.45) contrast(1.4);mix-blend-mode:multiply;opacity:.9}
.gimg-fx.is-glitch{opacity:var(--fxop,1)}
.gimg-fx.is-glitch .gimg-fx-a{animation:gimg-a .42s steps(1,end) both}
.gimg-fx.is-glitch .gimg-fx-b{animation:gimg-b .42s steps(1,end) both}
.gimg-fx.is-glitch[style*="--gs:1"] .gimg-fx-a,.gimg-fx.is-glitch[style*="--gs: 1"] .gimg-fx-a{animation-name:gimg-a2}
.gimg-fx.is-glitch[style*="--gs:2"] .gimg-fx-b,.gimg-fx.is-glitch[style*="--gs: 2"] .gimg-fx-b{animation-name:gimg-b2}
@keyframes gimg-a{
  0%  {clip-path:inset(12% 0 70% 0);transform:translate(-14px,0)}
  15% {clip-path:inset(58% 0 22% 0);transform:translate(10px,0)}
  30% {clip-path:inset(34% 0 52% 0);transform:translate(-6px,0)}
  45% {clip-path:inset(80% 0 4% 0); transform:translate(16px,0)}
  60% {clip-path:inset(4% 0 86% 0); transform:translate(-10px,0)}
  75% {clip-path:inset(46% 0 38% 0);transform:translate(6px,0)}
  90% {clip-path:inset(0 0 100% 0); transform:none}
  100%{clip-path:inset(0 0 100% 0); transform:none}
}
@keyframes gimg-b{
  0%  {clip-path:inset(62% 0 18% 0);transform:translate(12px,0)}
  20% {clip-path:inset(20% 0 64% 0);transform:translate(-16px,0)}
  40% {clip-path:inset(72% 0 12% 0);transform:translate(8px,0)}
  60% {clip-path:inset(38% 0 44% 0);transform:translate(-8px,0)}
  80% {clip-path:inset(8% 0 80% 0); transform:translate(12px,0)}
  95% {clip-path:inset(0 0 100% 0); transform:none}
  100%{clip-path:inset(0 0 100% 0); transform:none}
}
@keyframes gimg-a2{
  0%  {clip-path:inset(70% 0 10% 0);transform:translate(18px,0)}
  25% {clip-path:inset(28% 0 58% 0);transform:translate(-12px,0)}
  50% {clip-path:inset(50% 0 40% 0);transform:translate(8px,0)}
  75% {clip-path:inset(6% 0 78% 0); transform:translate(-14px,0)}
  92% {clip-path:inset(0 0 100% 0); transform:none}
  100%{clip-path:inset(0 0 100% 0); transform:none}
}
@keyframes gimg-b2{
  0%  {clip-path:inset(30% 0 50% 0);transform:translate(-18px,0)}
  30% {clip-path:inset(84% 0 2% 0); transform:translate(10px,0)}
  60% {clip-path:inset(14% 0 72% 0);transform:translate(-6px,0)}
  90% {clip-path:inset(0 0 100% 0); transform:none}
  100%{clip-path:inset(0 0 100% 0); transform:none}
}
@media (prefers-reduced-motion: reduce){.gimg-fx{display:none}}
/* Verlauf unten in den Säulen-Karten bleibt über den Scanlines */
.pimg .gimg-duo,.pimg .gimg-scan{
  z-index:0;
  -webkit-mask-image:linear-gradient(#000 45%, transparent 82%);
  mask-image:linear-gradient(#000 45%, transparent 82%);
}
/* Bilder mit Hover-Lift: Ebenen bewegen sich nicht mit, also Lift aus */
.rm-shots img:hover{transform:none}
.rm-shots .shot-offset,.rm-shots .shot-offset:hover{transform:none}

/* ---- CSS-Hintergrundbilder: gleiche Glitch-Behandlung ohne <img> ----
   Ebenen von oben: Scanlines, Lime-Duotone (color), Graustufen (saturation), Foto. */
/* Roadmap-Hero (überschreibt v2.css) */
header.hero::after{
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),linear-gradient(205deg,rgba(198,255,1,.7),rgba(4,22,21,.05) 55%,rgba(4,22,21,.85)),linear-gradient(90deg,#041615 0,rgba(4,22,21,.93) 32%,rgba(4,22,21,.5) 60%,rgba(4,22,21,.12) 100%),linear-gradient(180deg,rgba(4,22,21,.45),transparent 30%,transparent 72%,rgba(4,22,21,.96)),linear-gradient(#808080,#808080),url(../img/roadmap-hero.webp) 76% 16%/cover no-repeat;
  background-blend-mode:normal,color,normal,normal,saturation,normal;
}
@media(max-width:860px){
  header.hero::after{
    background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),linear-gradient(200deg,rgba(198,255,1,.7),rgba(4,22,21,.05) 55%,rgba(4,22,21,.85)),linear-gradient(180deg,rgba(4,22,21,.8),rgba(4,22,21,.95) 55%),linear-gradient(#808080,#808080),url(../img/roadmap-hero.webp) 70% 12%/cover no-repeat;
    background-blend-mode:normal,color,normal,saturation,normal;
  }
}
/* Roadmap: Step-Kacheln */
.howsteps .hstep::before{filter:grayscale(1) contrast(1.15)}

/* Glitch-Hintergrund für Kopfbereiche ohne eigenes Bild (Startseite, LabOS).
   Gleiche Machart wie auf den Engpass-Seiten: dezent (13 %), zur Textspalte hin ausgeblendet.
   Das Bild kommt pro Seite über --gbg im style-Attribut; glitch.js animiert es. */
.ghero.gbg::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),linear-gradient(155deg,rgba(198,255,1,.6),rgba(4,22,21,.05) 55%,rgba(4,22,21,.85)),linear-gradient(#808080,#808080),var(--gbg) center right/cover no-repeat;
  background-blend-mode:normal,color,saturation,normal;
  opacity:.13;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 46%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 46%,#000 100%);
}
.ghero.gbg>.wrap{position:relative;z-index:1}