/* merk.werk - Bewegung beim Scrollen + Mauszeiger */

/* Ueberschriften: Zeilen fahren hinter einer Kante hervor */
.mw-z{display:block;overflow:hidden}
.mw-zi{display:block;transform:translateY(115%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.mw-an .mw-zi{transform:translateY(0)}

/* Kleine Versal-Labels: gelber Wisch von links nach rechts */
.mw-wisch{position:relative;display:inline-block;isolation:isolate}
.mw-wisch::after{content:"";position:absolute;left:-.3em;right:-.3em;top:0;bottom:0;background:#F7F775;transform:scaleX(0);transform-origin:left center;z-index:-1}
.mw-wisch.mw-an::after{animation:mwWisch 1.15s cubic-bezier(.16,1,.3,1) forwards}
@keyframes mwWisch{
  0%{transform:scaleX(0);transform-origin:left center}
  42%{transform:scaleX(1);transform-origin:left center}
  58%{transform:scaleX(1);transform-origin:right center}
  100%{transform:scaleX(0);transform-origin:right center}
}

/* Bilder: von unten aufdecken */
.mw-bild{clip-path:inset(0 0 100% 0);transform:scale(1.06);transition:clip-path 1s cubic-bezier(.16,1,.3,1),transform 1.25s cubic-bezier(.16,1,.3,1)}
.mw-bild.mw-an{clip-path:inset(0 0 0 0);transform:none}

/* Sanft anheben */
.mw-hoch{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.mw-hoch.mw-an{opacity:1;transform:none}

/* Von links einfliegen (Prozessschritte, waagrechte Raster) */
.mw-seit{opacity:0;transform:translateX(-46px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.mw-seit.mw-an{opacity:1;transform:none}
@media(max-width:767px){.mw-seit{transform:translateY(30px)}}

/* Gelber Punkt als Mauszeiger - nur mit echter Maus */
@media(hover:hover) and (pointer:fine){
  #mw-punkt{position:fixed;left:0;top:0;width:12px;height:12px;border-radius:50%;
    background:#F7F775;pointer-events:none;z-index:2147483000;
    transform:translate(-50%,-50%);
    transition:width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),opacity .2s ease;
    opacity:0}
  #mw-punkt.mw-wach{opacity:1}
  #mw-punkt.mw-gross{width:52px;height:52px}
  /* MW-GROSS-NEGATIV: Im vergroesserten Zustand wird der Kreis zur Linse.
     Er kehrt um, was hinter ihm liegt, und faerbt es gelb ein — Schrift
     bleibt dadurch als dunkle Negativform lesbar statt verdeckt. */
  #mw-punkt.mw-gross{background:transparent;
    -webkit-backdrop-filter:grayscale(1) invert(1) sepia(1) saturate(420%) hue-rotate(12deg) brightness(1.06);
    backdrop-filter:grayscale(1) invert(1) sepia(1) saturate(420%) hue-rotate(12deg) brightness(1.06);}
  @supports not ((backdrop-filter:invert(1)) or (-webkit-backdrop-filter:invert(1))){
    #mw-punkt.mw-gross{background:rgba(247,247,117,.85)}
  }
  #mw-punkt.mw-druck{width:8px;height:8px}
  /* Ueber Bildern und Video: echtes Negativ. Weiss + Differenz kehrt den
     Untergrund um — auf hellen Stellen wird der Punkt schwarz. Gelb als
     Basis wuerde hier das Blau erzeugen, deshalb der Wechsel auf Weiss. */
  #mw-punkt.mw-negativ{background:rgba(12,12,12,.5);mix-blend-mode:normal}
}

@media (prefers-reduced-motion: reduce){
  .mw-zi,.mw-bild,.mw-hoch,.mw-seit{transform:none !important;opacity:1 !important;clip-path:none !important;transition:none !important}
  .mw-wisch::after{display:none}
  #mw-punkt{display:none}
}

/* Pfeil nach oben, rechts unten */
#mw-hoch-knopf{position:fixed;right:22px;bottom:22px;z-index:98;width:48px;height:48px;
  border:1px solid #1B1B1B;background:#1B1B1B;color:#F7F775;font-size:19px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility .3s,background .25s,color .25s;}
#mw-hoch-knopf.mw-da{opacity:1;visibility:visible;transform:none;}
#mw-hoch-knopf:hover{background:#F7F775;color:#1B1B1B;border-color:#F7F775;}
@media(max-width:767px){#mw-hoch-knopf{right:14px;bottom:14px;width:44px;height:44px;}}
@media (prefers-reduced-motion: reduce){#mw-hoch-knopf{transition:none;transform:none;}}

/* Kontakt-Knopf unten links */
#mw-kontakt-knopf{position:fixed;left:18px;bottom:18px;z-index:98;display:inline-block;
  font-family:'Archivo Expanded','Poppins',sans-serif;font-weight:800;font-size:13.5px;
  letter-spacing:1.6px;text-transform:uppercase;text-decoration:none;
  background:#1B1B1B;color:#FFFFFF;border:1px solid #1B1B1B;padding:14px 22px;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s ease,transform .4s ease,background .25s,color .25s,border-color .25s}
#mw-kontakt-knopf.mw-da{opacity:1;transform:none;pointer-events:auto}
#mw-kontakt-knopf:hover{background:#F7F775;color:#1B1B1B;border-color:#F7F775}
@media(max-width:767px){#mw-kontakt-knopf{left:12px;bottom:12px;padding:11px 15px;letter-spacing:1.2px}}
@media (prefers-reduced-motion: reduce){#mw-kontakt-knopf{transition:none}}