a.invisible, span.invisible, .skip-link {
    font-size: var(--font_size07);
    font-family: var(--font_bold);
    position: relative !important;
    display: block  !important;
    overflow: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 solid transparent;
    background-color: var(--ci001) !important;
    color: var(--white) !important;
    transition: var(--animation_03);
}

a.invisible:focus,
span.invisible:focus,
.skip-link:focus {
    border: 3px solid var(--ciacc2);
    height: auto !important;
    padding: .75rem !important;
    transition: var(--animation_03);
}

a span.invisible {
    display: none !important;
}



body.nav-is-desktop .navigation-main .skip-link {
  visibility: visible !important;
  opacity: 0;
  transform: translateX(0%) !important;
  background: var(--skip-background);
  color: var(--white);
  overflow: hidden;
  display: block  !important;

}

body.nav-is-desktop .navigation-main .skip-link:focus  {
  opacity: 1;
  color: var(--white);
}
body.nav-is-desktop .navigation-main a:focus-visible {
  color: var(--nav-active-color);
}                           

 .btn-toggle-submenu {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

a {
    border: 0 solid transparent;
 }

 a:focus, .btn-toggle-submenu:focus {
    outline: 3px solid var(--ciacc2);
    border-radius: 0;
}

.nav-burger {
    outline: 3px solid transparent;
}
.nav-burger:focus {
    outline: 3px solid var(--ciacc2) !important
}

/*
.splide__arrow {
    outline: 3px solid transparent;
}
    */


main a:focus {
    outline: 3px solid var(--ciacc2) !important;
}
figure a:focus {
    outline: none;
    border: 3px solid var(--ciacc2) !important;
}
a:active {
    outline: 0 solid transparent;
}

.handorgel__header__button:focus {
    background-color: var(--ci001-5);
    border-color: var(--ciacc2) !important;
}

.matterbox a:focus,
.logoTicker .tickerLogo a:focus,
a.HeroImageLink:focus .inside {
    outline: none;
    border: 3px solid var(--ciacc2);
}
.tns-nav button:focus,
.tns-controls button:focus {
    background-color: var(--ciacc2);
}
video {
    border: 0 solid transparent;
}
video:focus {
    border: 4px solid var(--ciacc2);
}
::cue {
    color: var(--white);
    background-color: rgb(0 0 0 / 50%);
    background-clip: padding-box;
  }


input:focus,
textarea:focus {
    background-color: var(--ci001-5);
    outline: 3px solid var(--ciacc2) !important;
}

option:hover,
option:focus {
  background-color: var(--ciacc2) !important;
  color: var(--white) !important;
}


.fineuploader-wrapper .qq-upload-button:focus {
  background-color: var(--ciacc2) !important;
}


button[type="submit"]:focus,
select:focus {
    outline: 3px solid var(--ciacc2) !important;
}

.widget-checkbox [type="checkbox"]:focus {
    outline: none !important;
}

.widget-checkbox [type="checkbox"]:focus + label {
    background-color: var(--ci001-5) !important;
    outline: 3px solid var(--ciacc2) !important;
    outline-offset: 3px;
}


/* Splide Slideshow Eilmeldungen / Ticker */

.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}
.splide__arrow:focus {
    outline: 3px solid var(--ciacc2) !important;
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__slide:focus {
  outline: 0;
}

@supports (outline-offset: -3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide__slide:focus-visible {
    border: 3px solid #0bf;
  }
}
@supports (outline-offset: -3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #0bf;
  }
  .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
    border-color: #0bf;
  }
}

.splide__toggle:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}
.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}


/* Dark/Light-Mode Toggler */

.dark-light-mode button {
  display:initial
}

/* Dark */

.dark-mode-toggle,
.light-mode-toggle,
.default-mode-toggle {
    outline: 3px solid transparent;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
}

.dark-mode-toggle:focus,
.light-mode-toggle:focus,
.default-mode-toggle:focus {
    outline: 3px solid var(--ciacc2);
}

#Moon, 
#Sun,
#Default {
    cursor: pointer;
}
#Moon .Circle,
#Sun .Circle,
#Default .Circle {
    fill: none;
}


#Moon .Stroke,
#Moon .Moon,
#Sun .Stroke,
#Sun .Sun,
#Default .Stroke,
#Default .Colors {
    fill: var(--gry80);
}

#Moon:hover .Stroke,
#Moon:hover .Moon,
#Sun:hover .Stroke,
#Sun:hover .Sun,
#Default:hover .Stroke,
#Default:hover .Colors,
.dark-mode-toggle:focus #Moon .Stroke,
.dark-mode-toggle:focus #Moon .Moon,
.light-mode-toggle:focus #Sun .Stroke,
.light-mode-toggle:focus #Sun .Sun,
.default-mode-toggle:focus #Default .Stroke,
.default-mode-toggle:focus #Default .Colors
{
    fill: var(--ci001);
}

.defaultMode #Default .Circle {
    fill: var(--gry80);
}

.defaultMode #Default .Colors {
    fill: var(--white);
}

.defaultMode #Default:hover .Circle {
    fill: var(--ci001);
}


.darkmode #Moon .Circle {
    fill: var(--gry80);
}
.darkmode #Moon .Moon {
    fill: var(--white);
}
.darkmode #Moon:hover .Circle {
    fill: var(--ci001);
}

.lightMode #Sun .Circle {
    fill: var(--gry80);
}
.lightMode #Sun .Sun {
    fill: var(--white);
}
.lightMode #Sun:hover .Circle {
    fill: var(--ci001);
}

.dark-mode-toggle:focus #Moon:hover .Circle,
.light-mode-toggle:focus #Sun:hover .Circle,
.default-mode-toggle:focus #Default:hover .Circle {
    fill: var(--gry80);
}