/* KONTUR CMS 0.6.0.35 – animierter Mehrfach-Zeichen-Effekt für das Header-Logo.
   Funktioniert mit dem vorhandenen Rasterlogo und auch mit später hochgeladenen PNG/JPG/WebP-Logos. */
.site-header .brand .kontur-logo-motion{
  position:relative;
  display:block;
  width:fit-content;
  max-width:100%;
  line-height:0;
  isolation:isolate;
}
.site-header .brand .kontur-logo-motion__base{
  position:relative;
  z-index:4;
  transition:opacity .16s ease;
}
.site-header .brand .kontur-logo-motion__pass{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  will-change:clip-path,opacity,transform;
}
.site-header .brand .kontur-logo-motion__pass--one{z-index:1;transform:translate(-1.5px,-.6px)}
.site-header .brand .kontur-logo-motion__pass--two{z-index:2;transform:translate(1.2px,.7px)}
.site-header .brand .kontur-logo-motion__pass--final{z-index:3;transform:translateX(-.5px)}
.site-header .brand .kontur-logo-motion__pass img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left center!important;
}
/* Die zwei schwachen Vorläufe werden in feine horizontale Segmente zerlegt.
   Das passt optisch zu den charakteristischen Linien im KONTUR-Schriftzug. */
.site-header .brand .kontur-logo-motion__pass--ghost img{
  -webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 2px,rgba(0,0,0,.88) 2px 3px,transparent 3px 5px);
  mask-image:repeating-linear-gradient(to bottom,#000 0 2px,rgba(0,0,0,.88) 2px 3px,transparent 3px 5px);
}
.site-header .brand .kontur-logo-motion.is-running .kontur-logo-motion__base{opacity:.10}
.site-header .brand .kontur-logo-motion.is-running .kontur-logo-motion__pass--one{
  animation:konturLogoTrace var(--kontur-logo-duration,1800ms) cubic-bezier(.48,0,.18,1) var(--kontur-logo-delay-one,0ms) both;
  --kontur-logo-pass-opacity:.20;
}
.site-header .brand .kontur-logo-motion.is-running .kontur-logo-motion__pass--two{
  animation:konturLogoTrace var(--kontur-logo-duration,1800ms) cubic-bezier(.48,0,.18,1) var(--kontur-logo-delay-two,150ms) both;
  --kontur-logo-pass-opacity:.34;
}
.site-header .brand .kontur-logo-motion.is-running .kontur-logo-motion__pass--final{
  animation:konturLogoTrace var(--kontur-logo-duration,1800ms) cubic-bezier(.48,0,.18,1) var(--kontur-logo-delay-final,300ms) both;
  --kontur-logo-pass-opacity:1;
}
@keyframes konturLogoTrace{
  0%{clip-path:inset(0 100% 0 0);opacity:0}
  7%{opacity:var(--kontur-logo-pass-opacity,1)}
  52%{opacity:var(--kontur-logo-pass-opacity,1)}
  100%{clip-path:inset(0 -1% 0 0);opacity:var(--kontur-logo-pass-opacity,1)}
}
/* Sehr dezente Verstärkung beim Überfahren, ohne Farbwechsel oder Sprung. */
@media (hover:hover) and (pointer:fine){
  .site-header .brand:hover .kontur-logo-motion:not(.is-running) .kontur-logo-motion__base{
    transform:translateY(-.4px);
    transition:transform .2s ease,opacity .16s ease;
  }
}
@media (prefers-reduced-motion:reduce){
  .site-header .brand .kontur-logo-motion__pass{display:none!important}
  .site-header .brand .kontur-logo-motion__base{opacity:1!important;transform:none!important}
}