@media (max-width: 640px) {
    .breakpoint-hide-mobile {
        display: none ! important;
    }
}
@media (max-width: 1024px) and (min-width: 641px) {
    .breakpoint-hide-tablet {
        display: none ! important;
    }
}
@media (min-width: 1025px) {
    .breakpoint-hide-desktop {
        display: none ! important;
    }
    .breakpoint-hide-desktop-dropdown::after {
        display: none ! important;
    }
}

/* Default-Stile für den Kontrastumschalter */
#header-contrast-switch {
    text-align: right;
}
.contrast-switch {
    font-size: 20px;
    margin: 0;
}
/* Elemente mit Hintergrundfarbe weiß machen */
.high-contrast-background {
    background-color: white ! important;
}
/* Transparenzeffekte deaktivieren */
.high-contrast-no-opacity {
    opacity: 1 ! important;
}
/* Text schwarz */
html.high-contrast * {
    color: black ! important;
}
html.high-contrast *::placeholder {
    color: black ! important;
    opacity: 0.5 ! important;
}
/* Verweise blau und unterstrichen - dieses Blau hat sowohl zu Schwarz als auch zu Weiß hohen Kontrast (jeweils > 4.5) */
html.high-contrast a, html.high-contrast a * {
    color: #2279BB ! important;
    text-decoration: underline ! important;
}
html.high-contrast a.active-link {
    text-decoration-style: double ! important;
    -webkit-text-decoration-style: double ! important;
}
nav.high-contrast-background {
    outline: 2px solid black;
}
html:not(.bitv-mobile) nav.high-contrast-background ul ul {
    outline: 2px solid black;
}
/* Schwarzer Rahmen für Suchfeld, Buttons und Eingabefelder */
html.high-contrast input, html.high-contrast button:not(.search-submit):not(.search-reset), html.high-contrast textarea, html.high-contrast select {
    border: 2px solid black ! important;
}
/* Suchfelder mit Fehler bekommen Markierung */
html.high-contrast input.error, html.high-contrast .error input,
html.high-contrast select.error, html.high-contrast .error select,
html.high-contrast textarea.error, html.high-contrast .error textarea {
    outline: 4px dotted red;
    margin-top: 8px;
    margin-bottom: 8px;
}

html.high-contrast .alert-box.alert {
    border: 4px dotted red;
}

/* Iconboxen und Slider-Texte bekommen einen schwarzen Rahmen */
.iconbox.high-contrast-background, html.high-contrast .slick-slide .caption {
    border: 2px solid black;
}
/* Schärferer Kontrast für Slider-Buttons */
html.high-contrast .slick-dots li button::before, html.high-contrast .slick-arrow::before {
    text-shadow: 0 2px #000, 0 -2px #000, 2px 0 #000, -2px 0 #000, 1.4px 1.4px #000, 1.4px -1.4px #000, -1.4px -1.4px #000, -1.4px 1.4px #000;
}
/* Keine Overlays für Teaserboxen bei Hover/Fokus (die vermindern den Kontrast zu stark) */
html.high-contrast .image-with-text.content-hover::before, html.high-contrast .newsteaser-image.content-hover::before {
    display: none;
}
/* Footer abgrenzen */
html.high-contrast .footer {
    border-top: 2px solid black;
    padding-top: 10px;
}
/* Akkordeons */
html.high-contrast .accordion .accordion-navigation>a {
    border: 2px solid black;
}
/* Vom Hintergrund abgesetzte Boxen bekommen auch nen schwarzen Rahmen */
html.high-contrast .has-background-box, html.high-contrast .aside-navigation {
    border: 2px solid black;
}
/* Hintergrund für Slider & Co. loswerden */
html.high-contrast .header-bottom-wrapper {
    background: white;
}
/* Overlay-Effekt deaktivieren - der "Mehr"-Text hat eh miesen Kontrast */
html.high-contrast .cham-imagehover-overlay {
    display: none ! important;
}

/* Pauseknopf im Slick-Slider */
.slick-pause {
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    height: 10%;
    margin: 0;
    padding: 0;
    z-index: 2;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 0;
    line-height: 0;
    color: transparent;
    text-align: center;
    transition: opacity 300ms;
    cursor: pointer;
}
.slick-pause::before {
    content: "\F04C";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1;
    vertical-align: middle;
    font-size: 2.85714rem;
    color: #fff;
}
.slick-pause.paused::before {
    content: "\F04B";
}
.slick-slider:hover .slick-pause, .jssorSlider:hover .slick-pause, .slick-pause:focus {
    opacity: 1;
    transition: opacity 300ms;
    background: transparent;
}

.jssorSlider .slick-pause::before {
    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
    margin: 8px 0;
}

/* auf jeden Fall einen Rahmen bei Fokussierung anzeigen */
a:focus, button:focus, .search-form button:focus, *[tabindex]:not([tabindex="-1"]):focus {
    outline: 1px dotted black;
}

/* damit der Fokus-Rahmen um Menüeinträge herum nicht abgeschnitten wird */
.top-bar-section a:focus {
    position: relative;
    z-index: 100;
}

/* damit Iconboxen einen sichtbaren Fokusrahmen bekommen */
a.iconbox-link:focus, a.image-with-text-link:focus {
    display: block;
}
/* auskommentiert, da dies auf manchen Seiten zu bei Klick verschwindenden Logos führt */
/*
div.logo a:focus {
    display: inline-block;
    height: 100%;
}
*/
/* Logo nicht beschneiden, damit Fokus-Rahmen sichtbar wird */
.header-top1-content .logo, .header-top-wrapper .header-top1-wide .header-top1-content .logo {
    overflow: visible;
}

/* Da schwarze Rahmen fürs Layout benutzt werden, benutzen wir für den Fokus jetzt rote Rahmen */
html.high-contrast a:focus,
html.high-contrast button:focus,
html.high-contrast input:focus,
html.high-contrast textarea:focus,
html.high-contrast select:focus,
html.high-contrast *[tabindex]:not([tabindex="-1"]):focus {
    outline: 2px solid red;
}

/* Kein Hover-Effekt für Navigationen */
html.high-contrast nav ul.side-nav li a:hover {
    background: none;
}

html.high-contrast:not(.bitv-mobile) .top-bar-section .has-dropdown > a::after {
    border-top-color: black;
}
html.high-contrast.bitv-mobile  .top-bar-section .has-dropdown > a::after {
    border-left-color: black;
}
html.high-contrast .top-bar-section ul li:hover:not(.has-form) > a {
    background: white;
}
html.high-contrast .top-bar-section .dropdown li a.parent-link {
    font-weight: bold;
}
html.high-contrast.bitv-mobile #navigation .navigation-wrapper a {
    border: 2px solid white;
}
html.high-contrast.bitv-mobile #navigation .navigation-wrapper a:focus {
    border: 2px solid red;
    outline: none;
}
html.bitv-mobile #header-contrast-switch {
    position: fixed;
    right: 90px;
    top: 10px;
    z-index: 1000;
}

html.high-contrast .top-bar .toggle-topbar.menu-icon a span::after {
    box-shadow: 0 0 0 1px black, 0 7px 0 1px black, 0 14px 0 1px black;
}
html.high-contrast .top-bar.expanded .toggle-topbar a span::after {
    box-shadow: 0 0 0 1px #777, 0 7px 0 1px #777, 0 14px 0 1px #777;
}
.top-bar button.contrast-switch {
    font-size: 20px;
    padding: 1rem 2rem 1.07143rem 2rem;
}
.dynamicForm {
    margin-top: -80px;
    padding-top: 80px;
}