/* KONTUR CMS 0.6.0.16 – handschriftlicher Menü-CTA mit SVG-Unterstreichung */

/* Der CTA bleibt bewusst vom Wellen-/Hover-Effekt der normalen Menüpunkte entkoppelt. */
@media (min-width:1181px){
  .site-header .desktop-nav > ul > li.kontur-nav-cta-item{
    flex:0 0 clamp(238px,13.2vw,286px) !important;
    min-width:238px !important;
    width:auto !important;
    padding:4px 0 3px 12px !important;
    overflow:visible !important;
    border-left:1px solid var(--kontur-nav-line) !important;
    background:var(--kontur-nav-bg) !important;
  }

  .site-header .desktop-nav > ul > li.kontur-nav-cta-item > a.kontur-nav-cta{
    position:relative !important;
    isolation:isolate;
    width:100% !important;
    min-width:0 !important;
    height:70px !important;
    min-height:70px !important;
    padding:3px 18px 15px !important;
    overflow:visible !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
    color:var(--kontur-menu-cta-color,#0b63b6) !important;
    font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive !important;
    font-size:clamp(16px,1.06vw,20px) !important;
    font-weight:600 !important;
    font-style:normal !important;
    line-height:1.05 !important;
    letter-spacing:-.035em !important;
    text-transform:none !important;
    text-align:center !important;
    white-space:nowrap !important;
    text-overflow:clip !important;
    transition:none !important;
  }

  .site-header .desktop-nav > ul > li.kontur-nav-cta-item > a.kontur-nav-cta::before,
  .site-header .desktop-nav > ul > li.kontur-nav-cta-item > a.kontur-nav-cta::after{
    display:none !important;
    content:none !important;
  }
}

.kontur-cta-label{
  position:relative;
  z-index:2;
  display:inline-block;
  transform:rotate(-1deg) translateY(1px);
  transform-origin:center center;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),color .22s ease;
}

.kontur-cta-stroke{
  position:absolute;
  z-index:1;
  left:17px;
  bottom:8px;
  width:calc(100% - 34px);
  height:15px;
  display:block;
  overflow:visible;
  pointer-events:none;
  fill:none;
  color:var(--kontur-menu-cta-color,#0b63b6);
}

.kontur-cta-stroke path{
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.kontur-cta-stroke-base{
  opacity:.48;
  transform:rotate(-.45deg);
  transform-origin:center;
}
.kontur-cta-stroke-base path{stroke-width:3.1}

.kontur-cta-stroke-hover{
  opacity:.96;
  transform:rotate(.35deg) translateY(1px);
  transform-origin:center;
}
.kontur-cta-stroke-hover path{
  stroke-width:4.25;
  stroke-dasharray:650;
  stroke-dashoffset:650;
  transition:stroke-dashoffset 760ms cubic-bezier(.22,.61,.36,1);
}

.kontur-nav-cta:hover .kontur-cta-label,
.kontur-nav-cta:focus-visible .kontur-cta-label,
.kontur-nav-cta-mobile:hover .kontur-cta-label,
.kontur-nav-cta-mobile:focus-visible .kontur-cta-label{
  transform:rotate(-1.55deg) translateY(-1px) scale(1.035);
}
.kontur-nav-cta:hover .kontur-cta-stroke-hover path,
.kontur-nav-cta:focus-visible .kontur-cta-stroke-hover path,
.kontur-nav-cta-mobile:hover .kontur-cta-stroke-hover path,
.kontur-nav-cta-mobile:focus-visible .kontur-cta-stroke-hover path{
  stroke-dashoffset:0;
}

@media (min-width:1181px){
  .site-header .desktop-nav > ul > li.kontur-nav-cta-item > a.kontur-nav-cta:hover,
  .site-header .desktop-nav > ul > li.kontur-nav-cta-item > a.kontur-nav-cta:focus-visible{
    transform:none !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
  }
  .site-header .desktop-nav > ul > li.kontur-nav-cta-item > a.kontur-nav-cta:focus-visible{
    outline:2px solid color-mix(in srgb,var(--kontur-menu-cta-color,#0b63b6) 38%,transparent) !important;
    outline-offset:-4px !important;
    border-radius:10px !important;
  }
}

/* Mobile: derselbe handschriftliche Charakter, ohne blauen Pillen-Button. */
.mobile-links .kontur-nav-cta-mobile{
  position:relative !important;
  min-height:72px !important;
  margin:11px 0 3px !important;
  padding:13px 20px 24px !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--kontur-menu-cta-color,#0b63b6) !important;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive !important;
  font-size:clamp(18px,5vw,22px) !important;
  font-weight:600 !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
  text-transform:none !important;
  text-align:center !important;
}
.mobile-links .kontur-nav-cta-mobile::before,
.mobile-links .kontur-nav-cta-mobile::after{display:none !important;content:none !important}
.mobile-links .kontur-nav-cta-mobile .kontur-cta-stroke{left:16%;width:68%;bottom:8px;height:15px}

@media (prefers-reduced-motion:reduce){
  .kontur-cta-label{transition:none}
  .kontur-cta-stroke-hover path{transition-duration:120ms}
}
