*,
*::before,
*::after {
    box-sizing: border-box;
    background:transparent;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}
html {
    height:100%;
}
body {
    margin: 0;
    font-family: var(--body-font-family);
    font-style: var(--body-font-style);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: var(--body-line-height);
    color: var(--body-font-color);
    background-color: var(--body-bg-color);
    text-align: left;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body * {
    background-color: transparent;
}
#pageWrapper {
    margin: 0 auto;
    background-color: var(--body-bg-color);
    width: 100%;
    height: 100%;
    max-width: var(--pagewrapper-max-width);
    background:url('/static/svg/bg-blue-02.svg');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    position: relative;
    
}
.header-wrapper {
    padding-top: 32px !important;
}
.sicky-border svg {
    width:164px;
}
.container .container {
    padding-right: 0px;
    padding-left: 0px;
}
#content-container {
    overflow:hidden;
    padding-bottom: 4px;
}
/*======================================
  WEB ACCESSIBILITY
======================================*/
.sr-only {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
#skiptocontent a {
    padding: 6px 10px;
    position: absolute;
    top: -62px;
    left: 0px;
    color: var(--color-white) !important;
    background: var(--color-blue);
    transition: 0.5s;
    z-index: 999999;
}
#skiptocontent a:focus {
    border: 1px solid var(--color-white);
    color: var(--standard-color-white) !important;
    top: -26px;
    transition: 0.5s;
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
}
/*======================================                  
  Allgemeine Elemente und Preparser
======================================*/
.clear {
    clear: both;   
}
/*======================================                  
  UEBERSCHRIFTEN
======================================*/
h6, h5, h4, h3, h2, h1 {
    line-height: 120%;
    color: var(--heading-color);
    margin-top: 0px;
    margin-bottom: 0px;
    word-wrap: anywhere;
}
h1 {
    font-size: 36px;
    font-weight: 700;
}
.startseite h1 {
    font-weight: 400;
    text-align: center;
}
article {
    margin-top:24px !important; 
}
.startseite article p {
    text-align: center;
    margin-top: 16px !important;
}
h1 .dachzeile{
    display:inline-block;
    width:100%;
    font-size: 16px;
    line-height:150%;
    font-weight: 400;
}
h1 .subhead {
    display:inline-block;
    width:100%;
    font-size: 32px;
    font-weight: 400;
}
h2 {
    font-size: 28px;
    margin-top: 56px;
    margin-bottom:24px;
}
h2 .dachzeile{
    display:inline-block;
    width:100%;
    font-size: 16px;
    line-height:150%;
    font-weight: 400;
}
h2.h3{
    font-size: 20px;
    margin-bottom: 24px;
    margin-top: 40px;
}
h3 {
    font-size: 20px;
    margin-bottom: 24px;
    margin-top: 40px;
}
h4,
.h4 {
    font-size: 16px;
    line-height:150%;
    margin-bottom: 24px;
    margin-top: 32px;
}
.infobox h4 {
    margin-top: 0px;  
}
/*======================================                  
  PARAGRAPH
======================================*/
p {
    margin-top: 24px !important;
    margin-bottom: 40px;
}
.intro p {
    font-size:20px;
    line-height:150%;
    margin-top:24px !important;
    margin-bottom:0px !important;
}  
/*======================================                  
  KURSIV
======================================*/
em {
    font-style: italic;
}
/*======================================                  
  FETT
======================================*/
strong {
    font-weight: 700;
}
/*======================================                  
  KLEIN
======================================*/
small {
    font-size: 14px;
    font-size: 150%;
}
/*======================================                  
  CAPTION
======================================*/
.caption {
    font-size:12px;
}
/*======================================                  
  ZITAT
======================================*/
.blockquote {
    font-size: 20px;
    line-height:150%;
    font-style: italic;
}
/*======================================                  
  HERVORGEHOBEN
======================================*/
.hervorgehoben,
.hevorgehoben {
    background: var(--hervorgehoben-bg-color);
}
/*======================================                  
  ICONS
======================================*/
i.svg-icon { 
    width: 24px;
    display: inline-block;
    text-align: center;
}
i.svg-icon svg { 
    margin-top:-3px;
    vertical-align: middle;
}
i.svg-icon svg,
i.svg-icon svg path{
    color:var(--link-font-color);
    fill:var(--link-font-color);
}
*:not(.formular .element, .fancybox-button, .exklusiv-badge):hover > i.svg-icon svg,
*:not(.formular .element, .fancybox-button,  .exklusiv-badge):hover > i.svg-icon svg path{
    color:var(--link-font-color-hoverfocus) !important;
    fill:var(--link-font-color-hoverfocus) !important;
}
a.more,
.link-local,
.link-external,
.link-mail,
.link-download,
.ankerNavigation a,
.link-service-kontakt-anker,
.link-service-zum-seitenanfang,
.link-service-vorlesen,
.link-service-drucken,
.link-phone,
.link-service-teilen {
    margin-left:30px;
}
.more i.svg-icon,
.link-phone i.svg-icon,
.link-local i.svg-icon,
.link-external i.svg-icon,
.link-mail i.svg-icon,
.link-download i.svg-icon,
.ankerNavigation a i.svg-icon,
.link-service-kontakt-anker i.svg-icon,
.link-service-zum-seitenanfang i.svg-icon,
.link-service-vorlesen i.svg-icon,
.link-service-drucken i.svg-icon,
.link-service-teilen i.svg-icon{
    margin-left:-30px;
    margin-right: 5px;
}
.link-anker .svg-icon svg,
.link-external .svg-icon svg {
    width:14px;
}
.link-mail i.svg-icon svg,
.link-local i.svg-icon svg{
    width:16px;
}
/*======================================                  
  LINKS
======================================*/
a,
a:active {
    color: var(--link-font-color);
    text-decoration: none;
    position: relative;
    outline:none;
    background-image: repeating-linear-gradient(to right, var(--link-font-color-hoverfocus), var(--link-font-color-hoverfocus));
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    background-size: 0 2px;
    transition: background-size 0.5s ease-in-out;
    position:relative;
}
/*TO DO ENTFERNEN*/
a.more .iconfont::before{
    content:"\e901";
}
a.link-local .iconfont::before{
    content:"\e994";
}
a.link-external .iconfont::before {
    content: "\e931";
}
a.link-mail .iconfont::before {
    content: "\e90e";
}
a.link-anker .iconfont::before {
    content: "\e96d";
}
a.link-download .iconfont::before{
    content:"\e997";
}
a.link-linkedin .iconfont::before{
    content: "\e97a" !important;
}
a.link-twitter .iconfont::before{
    content: "\e99c" !important;
}
a.link-facebook .iconfont::before{
    content: "\e97b" !important;
}
a.link-instagram .iconfont::before{
    content: "\e97d" !important;
}
a.link-youtube .iconfont::before{
    content: "\e97c" !important;
}
/*TO DO ENTFERNEN*/
a:focus, 
a:hover {
  --link-font-color: var(--link-font-color-hoverfocus);
  background-size: 100% 2px;
}
p a,
p a {
    background-size: 100% 2px;
    background-image: repeating-linear-gradient(to right, var(--link-font-color), var(--link-font-color));
    transition: background-size 0.5s ease-in-out;
}
p a:focus, 
p a:hover {
  outline: none;
  text-decoration: none;
  background-size: 0% 2px;
}
button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border:none;
    outline:none;
    color: var(--link-font-color);
    text-decoration: none;
    position: relative;
    background-image: repeating-linear-gradient(to right, var(--link-font-color-hoverfocus), var(--link-font-color-hoverfocus));
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    background-size: 0 2px;
    transition: background-size 0.5s ease-in-out;
    position:relative;
    padding:0;
}
button:focus, 
button:hover {
  --link-font-color: var(--link-font-color-hoverfocus);
  background-size: 100% 2px;
}
/*======================================                  
  BUTTONS
======================================*/
a.primary-button,
button.primary-button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 8px 16px;
    background: var(--button-primary-bg-color);
    border: 2px solid var(--button-primary-border-color);
    color: var(--button-primary-font-color);
    text-align: center;
    font-weight: bold;
    display: inline-block;
}
a.primary-button i.svg-icon,
button.primary-button i.svg-icon {
    margin-left: 4px;
}
a.secondary-button,
button.secondary-button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 8px 16px;
    background: var(--button-secondary-font-color);
    border: 2px solid var(--button-secondary-border-color);
    color: var(--button-secondary-bg-color);
    text-align: center;
    font-weight: bold;
    display: inline-block;
}
a.primary-button:hover,
a.primary-button:focus,
button.primary-button:hover,
button.primary-button:focus {
    color:var(--button-primary-font-color-hoverfocus);
    background: var(--button-primary-bg-color-hoverfocus);
    border: 2px solid var(--button-primary-border-color-hoverfocus);
    outline: 2px solid var(--button-primary-offset-color-hoverfocus);
    outline-offset: 0px;
}
a.secondary-button:hover,
a.secondary-button:focus,
button.secondary-button:hover,
button.secondary-button:focus {
    color:var(--button-secondary-font-color-hoverfocus);
    background: var(--button-secondary-bg-color-hoverfocus);
    border: 2px solid var(--button-secondary-border-color-hoverfocus);
    outline: 2px solid var(--button-secondary-offset-color-hoverfocus);
    outline-offset: 0px;
}
.primary-button.with-icon,
.secondary-button.with-icon {
    padding-left:48px;
}
.primary-button.with-icon i:before,
.secondary-button.with-icon i:before{
    content: "\e901";

}
.primary-button.with-icon.show-after,
.secondary-button.with-icon.show-after {
    padding-left:24px !important;
    padding-right: 48px;
}
.primary-button.with-icon.show-after i,
.secondary-button.with-icon.show-after i {
    float:right;
    left: 32px;
}
.link-tags {
    padding:10px 24px 9px 24px;
    padding:4px 16px 4px 16px;
    border-radius:8px;
    font-weight:bold;
    display: block;
    background: var(--button-primary-bg-color);
    border: 2px solid var(--button-primary-border-color);
    color: var(--button-primary-font-color);
}
.link-tags:hover,
.link-tags:focus {
    color:var(--button-primary-font-color-hoverfocus);
    background: var(--button-primary-bg-color-hoverfocus);
    border: 2px solid var(--button-primary-border-color-hoverfocus);
    outline: 2px solid var(--button-primary-offset-color-hoverfocus);
    outline-offset: 0px;
}
a.link-cta {
    overflow: hidden;
    font-weight:700;
}
.link-cta {
    background:var(--link-cta-bg-color);
    border:2px solid var(--link-cta-border-color);
    color:var(--link-cta-font-color);
    padding: 10px 98px 10px 24px;
    display: inline-block;
}
.link-cta .cta-right {
    position:absolute;
    right:-20px;
    top:0px;
    width:88px;
    height:102%;
    display:block;
    transform: skewX(-20deg);
    overflow:hidden;
    background:var(--link-cta-brand-bg-color);
}
.link-cta .cta-right span{
    background:var(--link-cta-brand-bg-color);
    display:inline-block;
    transform: skewX(20deg);
}
.link-cta i.svg-icon svg{
    width:16px;
    margin-top:14px;
    margin-left:18px;

}
.link-cta i.svg-icon svg,
.link-cta i.svg-icon svg path{
    fill:var(--link-cta-icon-color) !important;
}
.link-cta:hover, 
.link-cta:focus {
    background:var(--link-cta-bg-color-hoverfocus);
    border:2px solid var(--link-cta-border-color-hoverfocus);
    outline:2px solid var(--link-cta-outline-color-hoverfocus);
    outline-offset:0;
}
.link-cta i.svg-icon:hover {
    --link-font-color-hoverfocus:#fff;
}
@media (max-width: 540px) {
    .link-cta .cta-right {
        max-width: 78px;
    }
}
/*======================================                  
  LISTEN IND AUFZAEHLUNGEN
======================================*/
ul.contentliste,
ol.contentliste {
    margin-top: 16px;
    margin-bottom: 16px;
}
ul.contentliste li,
ol.contentliste li{
    margin-bottom: 8px;
    margin-left: 32px;
    padding-left: 8px;
}
ul.contentliste.ohne-auszeichnung li {
    list-style-type:none; 
    margin-left: 0px;
    padding-left: 0px;
}
ul.contentliste li,
ul.contentliste.disc li {
    list-style-type:disc;
}
ul.contentliste.square li {
    list-style-type:square;
}
ul.contentliste.circle li {
    list-style-type:circle;
}
ol.contentliste li,
ol.contentliste.decimal li {
    list-style-type:decimal;
}
ol.contentliste.lowerAlpha li {
    list-style-type:lower-alpha;
}
ol.contentliste.upperAlpha li {
    list-style-type:upper-alpha;
}
ol.contentliste.lowerRoman li {
    list-style-type:lower-roman;
}
ol.contentliste.upperRoman li {
    list-style-type:upper-roman;
}
/*======================================                  
  BILDER UND VIDEO
======================================*/
img,
svg {
    vertical-align: middle;
    width:100%;
    height:auto;
}
svg {
    width:auto;  
}
.video-wrapper {
    margin-top: 0px;
    margin-bottom: 40px;
}
.image.image-ganz {
    float:none;
    margin:0;
    width:100%;
    margin-bottom: 0px;
    margin-top: 40px;
    float:left;
}
.video-wrapper.left {
    margin-top: 0px;
    margin-bottom: 40px;
}
.image.image-left {
    margin-top: 0px;
    margin-bottom: 40px;
    float:left;
}
.video-wrapper.right {
    margin-top: 0px; 
    margin-bottom: 40px;
}
.image.image-right {
    margin-bottom: 0px;
    margin-bottom: 40px;
    float:left;
}

.video-js,
.image img {
    margin-bottom:12px;
}
.image .imageZoom,
.image .imageDownload,
.video-wrapper .caption-and-copyright,
.image .caption-and-copyright {
    font-size:12px;
    line-height:150%;
    position:relative;
    display: block;
    width:100%;
}
.image .imageDownload,
.image .imageZoom {
    width:auto;
    display: inline-block;
}
.video-wrapper .caption,
.image .caption {
    font-style:italic;
}
.video-wrapper .copyright {
    width:100%;
    display: block;
}
.image .copyright {
    display: block;
    position: absolute;
    top: -34px;
    color: var(--copyright-color);
    z-index: 9;
    right: 0px;
    padding: 2px 10px;
    background: var(--copyright-bg-color);
    opacity:0.75;
}
.video-wrapper.right {
    float:right;
}
.video-wrapper.left {
    float:left;
}
.video-wrapper {
    position: relative;
}
.youtube-wrapper {
    display:block;
    background-color: var(--youtube-wrapper-bg-color) !important;
    background-image:none !important;
}
.youtube-warning {
    font-size:14px;
    position: absolute;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
    display: block;
    padding: 10%;
    left: 0;
}
.video-wrapper:hover .youtube-wrapper.inactive {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
}
.video-wrapper .youtube-wrapper.inactive {
    display: block!important;
}
.video-wrapper:hover .youtube-wrapper.inactive + .youtube-warning {
    display: block !important;
}
.video-wrapper a.primary-button.video-button:hover,
.video-wrapper a.primary-button.video-button:focus {
    z-index: 99;
}
.video-wrapper iframe {
    position: absolute;
    height: 100%;
    top: 0;
    width: calc(100% - 24px);
    display: block;
    border: none;
}
.video-js .vjs-control:focus::before, 
.video-js .vjs-control:hover::before {
    text-shadow: none !important;
    box-shadow: none !important;
    outline: 2px solid var(--vjs-control-outline-color) !important;
    outline-offset: -4px !important;
}
.video-js .vjs-big-play-button {
    
}
.video-js .vjs-big-play-button:focus::before,
.video-js .vjs-big-play-button:hover::before {
    color: var(--vjs-control-font-color) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    outline: 2px solid var(--vjs-control-outline-color) !important;
    outline-offset: -4px !important;
}
.vjs-menu li { 
    text-transform:unset !important;
}
/*======================================                  
  INFOBOX
======================================*/
.infobox-wrapper .infobox {
    display:block;
    padding:24px;
    border:8px solid;
    border-color: var(--border-color);
    margin-bottom:40px;
}  
.infobox-wrapper .right .infobox {
    margin-top:2px;
}
.infobox-wrapper .right {
    float:right;
    margin-left:12px;
    display: block;
}
.infobox-wrapper .left {
    float:left;
    margin-right:12px;
    display: block;
}

.infobox-wrapper img {
    margin-top:24px;
    margin-bottom:12px;
}
/*======================================                  
  ZITAT ERWEITERT
======================================*/
.zitat {
    margin: 56px auto;
    position: relative;
    display: block;
    overflow: hidden;
    padding: 32px;
}
.zitat.halb {
    margin-top: 0px !important; 
    margin-bottom:24px;
}
.zitat.with-image {
    padding: 0 12px;
    background: unset;
}
.zitat.with-image .zitat-wrapper {
    float: left;
    background: var(--color-blue-20);
    padding: 20px;
}
.zitat.with-image .zitat-wrapper{
    background:transparent;
}
.zitat.with-image .zitat-wrapper .brand-element {
    position: absolute;
    top: unset;
    right: unset;
    bottom: 0;
    left: -24px;
}
.zitat.with-image .zitat-image-wrapper-table {
    position: static;
    width:100%;
}

.zitat.halb.left {
    float:left;
    margin: 40px 24px 40px 12px;
}
.zitat.halb.right {
    float:right;
    margin: 40px 12px 40px 24px;
}
.zitat blockquote {
    font-size: 24px;
    line-height:130%;
    font-style: italic;
    font-weight: 500;
    text-align: left;
    position:relative;
    display:block;
    z-index:100; 
    margin: 0;
    margin-bottom:16px;
}

.zitat.with-image blockquote {
    font-size: 20px;
    line-height:130%;
    font-style: italic;

}
.zitat .zitat-verfasser,
.zitat .zitat-verfasser-funktion,
.zitat .zitat-zusatz,
.zitat .zitat-link {
   display:block; 
   position: relative;
    z-index: 100;
}
.zitat .zitat-link,
.zitat .zitat-verfasser {
    font-weight: 700;
}
/*======================================                  
  Accordion
======================================*/
.ui-accordion {
    border-bottom:2px solid var(--accordion-icon-border-color);
    margin-top:40px;
    margin-bottom:40px;
}
.ui-accordion-header {
    border-top: 2px solid var(--accordion-icon-border-color);
    padding: 12px 0px;
    margin: 0;
    position: relative;
    outline: none;
    padding-right: 70px;
}
.ui-accordion-header-icon {
    font-family: "BVMed_IconFont_Pictograms" !important;
    font-size: 22px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    position: absolute;
    right: 0;    
    top: calc(50% - 18px);
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 7px;
    padding-right: 7px;
}
.ui-accordion-header span + span {
    background-image: repeating-linear-gradient(to right, var(--link-font-color-hoverfocus), var(--link-font-color-hoverfocus));
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    background-size: 0 2px;
    position: relative;
}
.ui-accordion-header-active span + span {
    --link-font-color-hoverfocus:var(--color-blue);
    --link-font-color: var(--link-font-color-hoverfocus);
    color: var(--link-font-color-hoverfocus);
    background-size: 100% 2px;
}
.ui-accordion-header-active span:first-child {
    --link-font-color-hoverfocus:var(--accordion-link-active-font-color);
    background: var(--link-font-color-hoverfocus);
    color: var(--accordion-link-active-icon-color);
}
.ui-accordion-header-active:hover span + span,
.ui-accordion-header-active:focus span + span,
.ui-accordion-header:hover span + span,
.ui-accordion-header:focus span + span {
    --link-font-color-hoverfocus:var(--accordion-link-font-color-hoverfocus);
    --link-font-color: var(--link-font-color-hoverfocus);
    color: var(--link-font-color-hoverfocus);
    background-size: 100% 2px;
}
.ui-accordion-header-active:hover span:first-child,
.ui-accordion-header-active:focus span:first-child,
.ui-accordion-header:hover span:first-child,
.ui-accordion-header:focus span:first-child {
    --link-font-color-hoverfocus:var(--accordion-link-font-color-hoverfocus);
    background: var(--link-font-color-hoverfocus);
    color: #fff;
}
.ui-accordion-header-icon:before {
    content: "\e963"; 
}
.ui-accordion-header-active .ui-accordion-header-icon:before {
    content: "\e95f";
}
.ui-accordion-content {
    padding:0px;
}
.ui-accordion-content h3,
.ui-accordion-content h4,
.ui-accordion-content .h4 {
    margin-top:0;
    margin-bottom:0;
}
.ui-accordion-content .content{
    margin:0 !important;
    margin-bottom: 36px !important;
    margin-top: 24px !important;
}
/*======================================                  
  TABELLE
======================================*/
article table {
    width:100%;
    border:none;
    background:var(--tabelle-bg-color);
    border-collapse:collapse;
}
article table tr {
    background:var(--tabelle-bg-color);
    text-align: left;
    min-width:150px;

}
article table tr th,
article table tr td {
    border:1px solid var(--tabelle-border-color);
    vertical-align: top;
}
article table tr p{
    padding:22px 24px 22px 24px;
    margin:0;
}
article table tr:first-child {
    background:var(--tabelle-head-bg-color) !important;
    color:var(--tabelle-head-font-color) !important;
    font-weight:700 !important;
}
.scrollable-table {
    max-width:100%;
    overflow-x:auto;
}
/*======================================                  
  DOWNLOADBOX
======================================*/
.downloadbox {
    padding:24px 32px 24px 32px; 
    position:relative;
    overflow:hidden;
    margin-bottom: 40px;
    margin-top: 40px;
}
.downloadbox br {
    display:none;
}
.downloadbox h2{
    margin:0;
    margin-bottom:16px;
}
.downloadbox h4 {
    margin-top:0;
    margin-bottom:12px;
}
.downloadbox .contentliste {
    margin-top:12px;
    margin-bottom:0;
}
.downloadbox .image {
    width:100%;
    float:left;
    margin-right:24px;
    width:232px;
    max-width:232px;
}
.downloadbox li {
    margin:0;
}
.downloadbox a {
    font-weight:700;
}
.downloadbox a i {
    font-weight:400;  
}
@media all and (max-width: 640px) {
    .downloadbox .col-4 {
        width:232px;
        max-width:232px; 
    }
}
/*======================================                  
  BANNER
======================================*/
.banner-bild {
    width: 100%;
    position: relative;
}
.banner-bild img {
    max-width: 100%;
    width: 100%;
    position: relative;
    left: 0%;
}
.banner-intro-wrapper {
  margin-top: -40px;
  margin-left: -24px;
  max-width: calc(100% + 48px);
  width: calc(100% + 48px);
}
@media (max-width: 640px) {
    .banner-bild {
        width: 150%;
        position: relative;
        left: -25%;
    }
}
.banner-intro {  
    position: relative;
    background: var(--banner-intro-bg-color);
    overflow:hidden;
    margin-top: 0px;
    padding: 32px 24px 64px 24px;
}
.veranstaltungen .banner-intro { 
    background: var(--banner-intro-veranstaltung-bg-color);
}
.banner-intro * {
    position: relative;
    z-index:100;
} 
.intro p.infozeile {
    margin-top:16px !important;
}
.infozeile *{
    font-size:14px;
    line-height:21px;
}
.infozeile .label {
    padding:5px 16px 4px 16px;
    border:2px solid;
    border-radius:6px;
    border-color: var(--banner-intro-infozeile-label-border-color);
    margin-right:25px;
    margin-right:18px;
    color: var(--banner-intro-infozeile-label-color);
    display: inline-block;
    margin-bottom: 12px;
}
.infozeile .date {
    margin-top: 16px;
    display:inline-block;
}
.themen p {
    margin-top:16px !important;
    margin-bottom:16px;
}
.themen li{
    float: left;
    margin-top: 0px;
    margin-right: 16px;
    margin-bottom: 16px;    
}
.brand-element {
    width: 1000px;
    height: 5000px;
    position: absolute;
    right: -91px;
    top: 0;
    transform: skewX(-20deg);
    background: var(--banner-intro-brand-bg-color);
    z-index: 1;
}
body.veranstaltungen .brand-element { 
    background: var(--banner-intro-veranstaltung-brand-bg-color);
}
.brand-element.first {
    width: 500px;
    height: 1000px;
    position: absolute;
    right: unset;
    left:-495px;
    top: 0;
    transform: skewX(-20deg);
    background: var(--color-blue);
    z-index: 1;
}
.brand-element-right-spacer {
    display:none;
}
/*======================================                  
  ONSITE-NAVIGATION
======================================*/
.mobile.accordion-ankerNavigation {
    display:block !important;
}
.mobile.accordion-ankerNavigation .ui-accordion-header-icon {
    font-size: 24px;
    top: calc(50% - 21px);
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 8px;
    padding-right: 8px;
}
.desktop.ankerNavigation {
    display:none;
}
.ankerNavigation {
    margin-top: 64px;
    margin-bottom: 48px;
    padding-top: 32px;
    padding-bottom: 32px;
    border-top:2px solid var(--ankerNavigation-bg-color);
    border-bottom:2px solid var(--ankerNavigation-bg-color);
    font-weight:700;
}
.ankerNavigation h2 {
    margin-top:0;
    margin-bottom:10px;
}
.ankerNavigation li {
    padding-top: 10px;
    margin-left: 30px;
    float: left;
    max-width:calc(100% - 30px);
}
.ankerNavigation a  {
    margin-left: 0;
    margin-left:0px;
    padding-left: 0px;
}
.accordion-ankerNavigation .ankerNavigation {
    padding-top: 24px;
}
/*======================================                  
  LEISTE SPRUNGANKER
======================================*/
.leiste-sprunganker  {
    margin-top: 64px;
    margin-bottom: 48px;
}
.ankerNavigation-wrapper + .leiste-sprunganker  {
    margin-top: 0px;
}
.leiste-sprunganker  + div  > h2:first-child{
    margin-top: 0px;
}
.leiste-sprunganker .right-wrapper {
    padding-left: 12px;
    margin-left: -12px;
    overflow:hidden;
    position:relative;
}
.leiste-sprunganker .right-skewX {
    transform: skewX(-20deg);
    background: var(--leiste-sprunganker-rechts-bg-color);
    float: left;
    width: 120%;
    padding: 22px;
}
.leiste-sprunganker .kontakt-anker {
    padding: 22px;
}
.leiste-sprunganker .right-skewX-back ul{
    float: right;
    margin-right: 20%;
}
.leiste-sprunganker .right-skewX-back {
    transform: skewX(20deg);
}
.leiste-sprunganker .right-skewX-back li{
    float:left;
    margin-right:16px;
}
.leiste-sprunganker .right-skewX-back li:last-child{
    margin-right:0px;
}
.leiste-sprunganker a,
.leiste-sprunganker button {
    font-weight:700;
}

.leiste-sprunganker .link-service-vorlesen span,
.leiste-sprunganker .link-service-drucken span,
.leiste-sprunganker .link-service-teilen span {
    display:none;
}
.leiste-sprunganker .shariff {
    position: absolute;
    border: 2px solid var(--shariff-border-color);
    top: 56px;
    left: 38px;
    padding: 12px;
    max-width:300px;
}
.leiste-sprunganker .link-service-kontakt-anker span{
    display:none;
}
/*======================================
  VORLAGE LOGO
======================================*/
.logo .home-link{
    background-image:none;
}
.logo .home-link:focus,
.logo .home-link:hover {
    outline:2px solid var(--link-logo-ouline-color-hoverfocus);
    outline-offset:2px;
}
.logo .variante {
    display:none;
}
.home-link,
.logo .variante-sm{
    display:inline-block;
    width:auto;
    height:auto;
}
#logo-38376 {
    margin-bottom: -3px;
    margin-top: -9px;
}
#logo-38374 {
    margin-bottom: -3px;
    margin-top: -9px;
}
/*======================================
  VORLAGE TOOLBAR
======================================*/
.toolbar {
    display:none;
}
.toolbar.toolbar-mobil {
    display:block;
}
.toolbar.toolbar-mobil {
    margin-top: 9px;
}
.toolbar ul {
    margin-top:-5px;
    float:right;
    height:32px;
}
.toolbar ul * {
    vertical-align:middle;
}
.toolbar ul li{
    float:left;
    margin-left:7px;
}
.toolbar ul li.item:not(.only-icon) {
    margin-left:16px;
}
.toolbar ul li.item:not(.only-icon) + li.only-icon {
    margin-left:32px;
}
.toolbar ul li a {
    display: inline-block;
}
.toolbar ul li.only-icon a{
    width: 32px;
    height: 32px;
}
.toolbar ul li.only-icon a i {
    width: 32px;
    height: 32px;
    display: inline-block;
    text-align: center;
    padding: 0;
    font-size: 24px;
}
.toolbar ul li.only-icon a.threads-weiterleitung i svg{
    max-width:24px;
}
.toolbar ul li.only-icon a i:before {
    top:0;
}
.toolbar ul li button,
.toolbar ul li a {
    --link-font-color:var(--toolbar-link-color);
    --link-font-color-hoverfocus:var(--toolbar-link-color-hoverfocus);
}
.toolbar-mobil ul li button span,
.toolbar-mobil ul li a span {
    display:none;
}
.toolbar-mobil i {
    width: 32px;
}
.toolbar-mobil ul li button i + i {
    display:none;
}
.toolbar-mobil ul li button.active i {
    display:none;
}
.toolbar-mobil ul li button.active i + i {
    display:inline-block;
}
.toolbar-mobil ul li.item {
  margin-left: 16px;
}
.toolbar-mobil ul li button.active:not(:hover,:focus) {
    background-image: repeating-linear-gradient(to right, var(--toolbar-button-active), var(--toolbar-button-active));
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    background-size: 100% 6px;
}
.toolbar-mobil ul li button,
.toolbar-mobil ul li a {
    font-size:20px;
    line-height:28px;
    background-size: 0% 6px;
    padding-bottom:12px;
}
.toolbar-mobil ul li button:focus,
.toolbar-mobil ul li button:hover,
.toolbar-mobil ul li a:hover,
.toolbar-mobil ul li a:focus {
    background-size: 100% 6px;
}
@media (max-width: 768px) {
    .toolbar-mobil svg {
        width:18px;
    }
    .toolbar-mobil .hamburger-button:not(.active) svg {
        width: 28px;
    }
}
/*======================================
  BREADCRUMB
======================================*/
.breadcrump {
    border-top: 1px solid var(--breadcrumb-border-color);
    border-bottom: 1px solid var(--breadcrumb-border-color);
    padding: 9px 0 7px 0;
    float:left;
    width:100%;
    margin-top:32px;
}
#breadcrump ul li {
    float:left;
    display:none;
}
#breadcrump ul li.show-only-on-xs,
#breadcrump ul li.show-always {
    display:block;
}
#breadcrump ul li > a,
#breadcrump ul li span{
    font-size:14px;
    line-height:21px;
    --link-font-color: var(--breadcrumb-link-font-color);
    --link-font-color-hoverfocus: var(--breadcrumb-link-font-color);
}
#breadcrump ul li span.trenner {
    margin-right: 8px;
    margin-left: 8px;
}
#breadcrump ul li:last-child span + span{
    font-weight:bold;
}
@media (max-width: 768px) {
    .breadcrump {
        margin-top: 24px;
    }
}
/*======================================
  VORLAGE HAUPNAVIGATION
======================================*/
.hauptnavigation {
    display:none;
}
.mobile-hauptnavigation {
    display:block;
    position: relative;
    top: 32px;
    min-height: calc(100vh - 99px);
    margin-left: -24px;
    width:calc(100% + 48px);
    max-width:calc(100% + 48px);
    z-index: 9999;
    overflow: hidden;
    z-index:990;
    padding:32px 36px 56px 36px;
    padding-bottom:200px;
}
.mobile-hauptnavigation * {
    font-size:18px;
}
.mobile-hauptnavigation .ui-accordion {
    margin-top: 0px;
    margin-bottom: 0px;
}
.mobile-hauptnavigation .ui-accordion-header-icon {
    padding:4px 8px;
    top: calc(50% - 20px);
}
.mobile-hauptnavigation .ui-accordion-header span:first-child {
    border: 1px solid var(--color-blue);
}
@media (min-width: 641px) and (max-width: 768px) {
    .mobile-hauptnavigation ul {
        margin-top:12px;
    }
}
@media (max-width: 768px) {
    .mobile-hauptnavigation ul li:first-child:not(.bottom ul li:first-child) {
        margin-top:0;
    }
    .mobile-hauptnavigation ul {
        margin-top:0;
    }
}
.mobile-hauptnavigation li {
    margin-top: 8px;
    margin-bottom: 8px;
}
.mobile-hauptnavigation .ui-accordion-content .content {
    margin-left: -12px !important;
    margin-right: -12px !important;
    margin-bottom: 24px  !important;
    margin-top: 12px !important;
}
.mobile-hauptnavigation .bottom {
    bottom:20px;
    position:absolute;
}
.mobile-hauptnavigation .bottom .line-one,
.mobile-hauptnavigation .bottom .line-two {
    width:100%;
}
.mobile-hauptnavigation .bottom ul li {
    float:left;
    margin-right:25px;
}
.mobile-hauptnavigation .ui-accordion-header span:first-child {
    border: 1px solid var(--bg-blue);
}
.mobile-hauptnavigation .ui-accordion-header-active span,
.mobile-hauptnavigation .ui-accordion-header-active span + span {
    color:var(--hauptnavigation-flyout-font-color-hoverfocus);
}
.mobile-hauptnavigation a.active {
    color:var(--hauptnavigation-flyout-font-color-active);
    font-weight:700;
}
.mobile-hauptnavigation a.active i svg path {
    --link-font-color:var(--hauptnavigation-flyout-font-color-active);
}
.mobile-hauptnavigation .ui-accordion-header:hover span + span,
.mobile-hauptnavigation a.active:focus,
.mobile-hauptnavigation a.active:hover,
.mobile-hauptnavigation a.active:focus i svg path,
.mobile-hauptnavigation a.active:hover i svg path {
    fill:var(--bg-blue-link-font-color-hoverfocus);
    color:var(--bg-blue-link-font-color-hoverfocus);
}
.mobile-hauptnavigation .ui-accordion-header-active span:first-child {
    border: 1px solid var(--hauptnavigation-mobil-icon-border-color);
}
.mobile-hauptnavigation .ui-accordion-header:hover span:first-child {
    background: var(--bg-blue-link-font-color-hoverfocus);
    border: 1px solid var(--bg-blue-link-font-color-hoverfocus);
}
/*======================================
  SEITENFUNKTIONEN
======================================*/
.seitenfunktionen {
    padding-top: 12px;
    padding-bottom:24px;   
}
.seitenfunktionen > ul {
  margin-top: 32px;
}
.footer.seitenfunktionen > ul > li {
    margin-top:12px;
}
.footer.seitenfunktionen > ul > li > *{
    float:left;
}
.seitenfunktionen > ul > li:last-child {
    float:right; 
    margin-right:0px !important;
    margin-top: -62px;
}
.service-teilen {
    position:relative;
}
.service-teilen .shariff{
    position: absolute;
    border: 2px solid var(--shariff-border-color);
    top: 32px;
    left: 0;
    padding: 12px;
}
@media (max-width: 372px) {
    .seitenfunktionen > ul > li:last-child {
        margin-top: -98px;
    }
}
/*======================================
  TEASER_FOOTER
======================================*/
.teaser-footer > div > div {
    margin-bottom:48px;
}
.teaser-footer > div > div:first-child,
.teaser-footer > div > div:nth-child(2) {
    margin-bottom:0;
}
.teaser-footer img {
    max-width:309px;
    margin-top:36px;
    margin-bottom:24px;
}
.teaser-footer h3 {
    margin-bottom:24px;
    margin-top: 0;
}
.teaser-footer p {
    margin:0 !important;
    margin-bottom:8px !important;
}
.teaser-footer ul.socialmedia {
    width:100%;
    display:block;
    margin:48px auto;
}
.teaser-footer ul.socialmedia li {
    float:left;
    margin-right:24px;
    margin-bottom:12px;
}
.teaser-footer ul.socialmedia li a,
.teaser-footer ul.socialmedia li a i {
    width: 32px;
    height: 32px;
    display: inline-block;
    text-align: center;
    padding: 0;
    font-size: 32px;
    margin-left: 0;
}
.teaser-footer ul.socialmedia li a i svg {
    width:24px;
    height:24px;
    display:inline-block;
}
.teaser-footer ul.socialmedia li a i svg path{
    fill:var(--teaser-footer-socialmedia-icon-color);
}
.teaser-footer ul.socialmedia li a:focus i svg path,
.teaser-footer ul.socialmedia li a:hover i svg path{
    fill:var(--link-font-color);
}
.teaser-footer ul.contentliste.ohne-auszeichnung li {
    margin-bottom:0;
}
.teaser-footer a.secondary-button {
    margin-top: 20px;
}
.teaser-footer h3 + a.secondary-button {
    margin-top:0px;
}
.teaser-footer  div.border-top div {
    border-top:1px solid var(--footer-border-color);
}
/*======================================
  FUSS
======================================*/
.footer {
    padding-bottom:24px;
}
.footer div.border-top div {
    border-top:1px solid var(--footer-border-color);
    margin-bottom:24px;
}
.footer > div:not(.border-top) {
    color:var(--footer-border-color);
    display:block;
    width:100%;
    margin-top:12px;
}
.footer li{
    float:left;
    margin-right:24px;
}
/*======================================                  
  TOOLTIP
======================================*/
.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 640px;
    width:auto;
    opacity:1;
    border-radius:unset;
    border:none;
}
body .ui-tooltip {
    background:var(--tooltip-bg-color);
    opacity:1;
    padding:3px 10px;
    border-radius:2px;
    border:2px solid var(--tooltip-font-color);
    overflow:hidden;
}
body .ui-tooltip > *{
    background:var(--tooltip-bg-color);
    color:var(--tooltip-font-color);
    opacity:1;
    padding:5px 10px;
    border-radius:unset;
    border:none;
}
/*======================================
  VERANSTALTUNG
======================================*/
.veranstaltung .infozeile .label {
    margin-bottom: 18px;
}
.veranstaltung .infozeile {
    margin-top:24px;
}
.veranstaltung h4 {
    margin-top:18px;
}
.veranstaltung .link-cta {
    margin-top:32px;
}
.veranstaltung .banner-intro {
  background: var(--veranstaltung-banner-intro-bg-color);
}
.veranstaltung .brand-element-right-spacer,
.veranstaltung .brand-element {
  background: var(--veranstaltung-banner-intro-brand-bg-color);
}
.veranstaltung .accordion .content p{
    margin-top: 0px !important;
    margin-bottom: 0px;
}
.veranstaltung .downloadbox br {
    display:block;
}
.veranstaltung .downloadbox + .link-cta {
    margin-top:0;
}
.veranstaltung .link-cta {
    border-color:var(--veranstaltung-link-cta-border-color);
}
.veranstaltung .object-infos {
    display:block;
    margin-top:24px;
}
.veranstaltung .referenten li {
    margin-top:12px;
}
/*======================================
  Publikation
======================================*/
.downloadbox  + .downloadbox {
    margin-top:0;
}
.publikation .downloadbox br {
    display:block;
}
/*======================================
  MITGLIED
======================================*/
.mitglied .unternehmenstyp-hinweis,
.mitglied .produktkategorien-hinweis {
  display: block;
  margin-bottom: 24px;

}
.mitglied a.link-tags{
    display:inline-block;
    margin-right: 16px;
    margin-bottom: 16px;
}
.mitglied .link-facebook,
.mitglied .link-youtube,
.mitglied .link-twitter,
.mitglied .link-instagram,
.mitglied .link-linkedin,
.mitglied .link-xing {
    margin-left:30px;
}
/*======================================
  WARBENKORB ICON
======================================*/
a.warenkorb  {
    width:46px;
    height:46px;
    border:2px solid var(--warenkorb-icon-border-color);
    border-radius:24px;
    background:var(--warenkorb-icon-bg-color);
    position:fixed;
    z-index: 999;
    right:16px;
    top:calc(100vh - 64px);
    --link-font-color:var(--warenkorb-icon-font-color);
    --link-font-color-hoverfocus:var(--warenkorb-icon-font-color);
    background-image:unset;
}
a.warenkorb:hover,
a.warenkorb:focus {
    --link-font-color-hoverfocus:var(--warenkorb-icon-font-color-hoverfocus);
    outline: 2px solid var(--warenkorb-outline-font-color-hoverfocus);
    outline-offset: -6px;
    background-image:unset;
}
a.warenkorb i {
    width:16px;
    height:14px;
    position:absolute;
    left:calc(50% - 8px);
    top:calc(50% - 10px);
}
a.warenkorb i svg {
    width:16px;
    height:14px;
}
a.warenkorb:focus i svg path,
a.warenkorb:hover i svg path {
    fill:var(--warenkorb-icon-color) !important;
}
/*======================================                  
  LISTE ALLGEMEIN PAGINATION
======================================*/
.liste-allgemein .elemente + .pagination {
    margin-bottom:0px;
    margin-top:32px;
    padding-top:32px;
    border-top: 2px solid var(--liste-border-color);
}
.liste-allgemein .pagination {
    margin-top: 0px;
    margin-bottom: 32px;
    
}
.liste-allgemein .pagination span {
    float:left;
}
.liste-allgemein .pagination li {
    float:left;
}
.liste-allgemein .pagination .blaettern-text,
.liste-allgemein .pagination ul li span.text {
    display:none;
}
.liste-allgemein .pagination ul li span,
.liste-allgemein .pagination ul li a{
    font-weight:bold;
}
.liste-allgemein .pagination ul li a {
    background-size: 100% 2px;
    background-image: none;
}
.liste-allgemein .pagination ul li a:focus,
.liste-allgemein .pagination ul li a:hover{
    color:var(--pagination-font-color);
    background-image: repeating-linear-gradient(to right, var(--pagination-font-color), var(--pagination-font-color));
    background-size: 100% 2px;
}

.liste-allgemein .pagination ul li .pagination-item-active{
    background-image: repeating-linear-gradient(to right, var(--pagination-active-border-color), var(--pagination-active-border-color));
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    background-size: 100% 4px;
}
.liste-allgemein .pagination ul li .pagination-item-active:hover, 
.liste-allgemein .pagination ul li .pagination-item-active:focus{
    background-image: repeating-linear-gradient(to right, var(--pagination-font-color), var(--pagination-font-color));
    background-repeat: no-repeat;
    background-position: left 0 bottom 0;
    background-size: 100% 2px;
}
.liste-allgemein .elemente li.background-light-orange {
    padding:24px;
}
.liste-allgemein .pagination *:hover > i.svg-icon svg path,
.liste-allgemein .pagination ul li .svg-icon svg path {
    fill:var(--pagination-font-color) !important;
}
/*======================================                  
  Filter
======================================*/
.filter-allgemein .accordion {
    margin-top:0;
}
.filter-allgemein h3 {
    margin-bottom:0 !important;
    padding-left:12px;
    background: var(--filter-bg-color);
}
.filter-allgemein h3 .text-opened {
    display:none;
}
.filter-allgemein .ui-accordion-header-active .text-opened {
    display:inline-block;
    margin-left:0;
}
.filter-allgemein .ui-accordion-header-active .text-closed {
    display:none;
}
.filter-allgemein h3:hover .ui-accordion-header-icon{
    outline:2px solid var(--filter-button-outline-color-hoverfocus);
    outline-offset:2px;
}
.filter-allgemein .ui-accordion-header-icon {
    margin-right:12px;
}
.filter-allgemein .ui-accordion-header span + span {
    margin-left: 30px;
}
.filter-allgemein .ui-accordion-header span + span i{
    padding-left: 7px;
    margin-right: 12px;
    margin-left: -38px;
}
.filter-allgemein h3 i.svg-icon svg {
    margin-top: -3px;
}
.filter-allgemein .ui-accordion-content .content ul,
.filter-allgemein .ui-accordion-content .content li,
.filter-allgemein .ui-accordion-content .content {
    margin:0 !important;
}
.filter-allgemein .ui-accordion-content .content ul {
    float: left;
}
.filter-allgemein .ui-accordion-content .content ul  ul{
    margin-bottom:12px !important;
    float: left;
}
.filter-allgemein .accordion {
    background:var(--filter-bg-color);
}
.filter-allgemein .ui-accordion-content .content {
    margin:10px !important;
    background:var(--filter-content-bg-color);
    padding: 16px;
}
.filter-allgemein .ui-accordion-content .content h4 {
    margin-bottom: 12px;
    display: block;
    clear: both;
}
.filter-allgemein .filter-arten button,
.filter-allgemein .filter-arten label {
    background: var(--filter-button-bg-color);
    border: 2px solid var(--filter-button-border-color);
    color:var(--filter-button-font-color);
    padding: 8px 28px 8px 20px;
    border-radius: 12px;
    margin-right: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    display: block;
    float: left;
    cursor:pointer;
}
.filter-allgemein .filter-arten button.active,
.filter-allgemein .filter-arten label.active {
    background: var(--filter-button-bg-color-active);
    color: var(--filter-button-font-color-active);
    border: 2px solid var(--filter-button-border-color-active);
}
.filter-allgemein .filter-arten button i,
.filter-allgemein .filter-arten label i {
  background: var(--filter-i-color);
  padding: 6px 4px 4px 4px;
  border-radius: 6px;
  margin-left: 8px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  color: var(--filter-button-zahl-color) !important;
}
.filter-allgemein button:hover,
.filter-allgemein label:hover,
.filter-allgemein button:focus,
.filter-allgemein label:focus {
    color: var(--filter-button-font-color-hoverfocus);
    border: 2px solid var(--filter-button-border-color-hoverfocus);
    outline:2px solid var(--filter-button-outline-color-hoverfocus);
    background:var(--filter-button-bg-color-hoverfocus);
    outline-offset:2px;
}
.filter-allgemein .filter-arten button.active:hover,
.filter-allgemein .filter-arten label.active:hover,
.filter-allgemein .filter-arten button.active:focus,
.filter-allgemein .filter-arten label.active:focus {
    color: var(--filter-button-active-font-color-hoverfocus);
    border: 2px solid var(--filter-button-active-border-color-hoverfocus);
    outline:2px solid var(--filter-button-active-outline-color-hoverfocus);
    background:var(--filter-button-active-bg-color-hoverfocus);
    outline-offset:2px;
}
.link-clear-all {
    display: inline-block;
}
/*======================================                  
  LISTE MITGLIEDER
======================================*/
.liste-mitarbeiter p{
    margin-top:12px;
    margin-bottom:12px;
}
.liste-allgemein.liste-mitarbeiter h2 {
    margin-top: 32px;
}
.liste-allgemein.liste-mitarbeiter h3 {
    margin-top: 12px;
}
.liste-allgemein.liste-mitarbeiter li img {
    margin-bottom:0;
}
.liste-mitarbeiter .elemente li {
    border:none !important;
    padding:0 !important;
}
.liste-mitarbeiter div.item  {
    border-top: 2px solid var(--liste-border-color);
    padding: 32px 0;
}

.liste-mitarbeiter a {
    margin-bottom:5px;
}
/*======================================                  
    LISTE ALLGEMEIN
======================================*/
.liste-allgemein {
    margin-top:40px;
}
.liste-allgemein .elemente {
    overflow:hidden;
}
.liste-allgemein .elemente li {
    padding:24px 0;
    border-top:2px solid var(--liste-border-color);
}
.liste-allgemein .elemente li h2 {
    margin-top:0;
    margin-bottom:16px;
}
.liste-allgemein .elemente li p {
    margin-top:0 !important;
    margin-bottom:16px;
}
.liste-allgemein:not(.liste-mitarbeiter) .elemente li img{
    max-width:100%;
    width:100%;
    height:auto;
    margin-top:5px;
}
.liste-allgemein .elemente li.with-kicker img {
    margin-top:44px;
}
.liste-allgemein .elemente li a {
    font-weight:bold;
}
/*======================================                  
  CONSENT-TOOL
======================================*/
.consentToolWrapper h2{
    margin-top:0px;
}

.consentToolWrapper #matomo-consent-trigger, 
.consentToolWrapper .trigger-stage-a, 
.consentToolWrapper .trigger-stage-b,
.consentToolWrapper input.trigger-stage-a:not(:checked) + .stage-a,
.consentToolWrapper input.trigger-stage-b:not(:checked) ~ .stage-b { 
    display:none; 
}    
.consentToolWrapper .stage-b {
    margin-top: 20px;
    margin-bottom: 0;
}
@media (max-width: 584px) {
    .fancybox-content { 
        padding: 24px !important;
    }
    .consentToolWrapper h2{
        margin-top:80px;
    }
    .fancybox-slide--html .fancybox-close-small {
        margin-top: 23px !important;
        margin-right: 24px !important;
    }
}
/*======================================
  TEASER_ALLGEMEIN
======================================*/
.teaser {
    margin-top:40px;
    margin-bottom:40px;
    position:relative;
}
.teaser h2 {
    margin-top:16px;
    margin-bottom:16px;
    word-wrap: anywhere;
}
.teaser .teaser-wrapper {
    position:relative;
}
.teaser li {
    margin-top:40px;
}
.teaser .img-wrapper-teaser img {
    margin-top:0;
}
.teaser li .img-wrapper-teaser {
    overflow:hidden;
}
.teaser li .image.image-left {
    margin-bottom:0;
    transition: 1s all;
}
.teaser li .teaser-wrapper:hover .image.image-left {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.teaser .teaser-data {
    margin-top:24px;
    padding-bottom:24px;
}
.teaser h3 {
    margin-top:0px;
    margin-bottom:12px;
    word-wrap: anywhere;
}
.teaser h3 .dachzeile {
    font-size:16px;
    line-height:24px;
    font-weight:normal;
    display:inline-block;
    width:100%;
    margin-bottom:12px;
}
.teaser p {
    margin-top: 12px !important;
    margin-bottom:12px;
    word-wrap: anywhere;
}
.teaser p.infozeile {
    margin-top:16px !important;
    margin-bottom:16px !important;
}
.teaser p.infozeile .label {
    margin-bottom:0px !important;
}
.teaser ul {
    margin-bottom:56px;
}
.teaser .more {
    margin-top:16px;
    font-weight:bold;
}
.teaser .button-wrapper {
     text-align:center;   
}
/*TEASER BLUE*/
.teaser .background-blue .teaser-data {
    padding:24px 24px 24px 24px;
    margin-top:0;
}

/*TEASER LIGHT-BLUE*/
.teaser .background-light-blue {
    padding:8px 24px;
}

/*TEASER ORANGE*/
.teaser .background-light-orange {
  position: relative;
  margin-left: 24px;
  padding:24px;
  border-radius: 20px;
  border-top-left-radius: 20px;
  border-top-left-radius: 0;
}
.teaser .background-light-orange p.infozeile .label {
    margin-bottom:5px !important;
}
.teaser .background-light-orange .teaser-data {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.teaser .background-light-orange img {
    display:none;
}
.teaser .background-light-orange .ecke {
    display: block !important;
    width: 24px;
    background: var(--color-orange-20);
    height: 24px;
    transform: skewX(45deg);
    left: -12px;
    position: absolute;
    display: block;
    top: 0px;
}
/*======================================
  VORLAGE TEASER-LANDSCAPE
======================================*/
.teaser-landscape {
    margin:52px auto;
    width:100%;
    float:left;
    position:relative;
    overflow:hidden;
}
.teaser-landscape h2 {
    margin-top: 0;
}
.teaser-landscape .img-wrapper > div {
    position:relative;
    overflow:hidden;
    padding-right:0px;
    padding-left:0px;
}
.teaser-landscape .img-wrapper div .brand-element {
    background:var(--teaser-landscape-brand-element-color);
    opacity:0.8;
}
.teaser-landscape .teaser-data {
    max-width:1200px;
    margin:0 auto;
}
.teaser-landscape .teaser-data > div {
    padding:24px;
}
.teaser-landscape.background-blue.brand-orange h2 {
    color: var(--bg-blue-font-color-orange);
}
.teaser-landscape.background-blue.brand-orange .brand-element.first{
    background:var(--bg-blue);
    opacity:1;
}
.teaser-landscape.background-blue.brand-orange .brand-element.last{
    background:var(--teaser-landscape-brand-element-color);
    opacity:0.8;
}
.teaser-landscape.background-blue.brand-cyan h2 {
    color: var(--bg-blue-font-color-cyan);
}    
.teaser-landscape.background-blue.brand-cyan .brand-element.first{
    background:var(--bg-blue);
    opacity:1;
}
.teaser-landscape.background-blue.brand-cyan .brand-element.last{
    background:var(--teaser-landscape-background-blue-brand-cyan-brand-element);
    opacity:0.8;
}
.teaser-landscape.background-light-blue.brand-blue .brand-element.first{
    background:var(--teaser-landscape-background-light-blue-brand-blue-brand-element);
    opacity:1;
}
.teaser-landscape.background-light-blue.brand-blue .brand-element.last{
    background:var(--teaser-landscape-background-light-blue-brand-blue-brand-element);
    opacity:0.8;
}
.teaser-wall .teaser-landscape.background-blue .brand-element.first{
    background:var(--bg-blue);
    opacity:1;
}
.teaser-wall .teaser-landscape.background-light-blue .brand-element.first{
    background:var(--teaser-wall-teaser-landscape-background-light-blue-brand-element);
    opacity:1;
}
.teaser-wall .teaser-landscape.background-light-orange {
    margin:0;
    border-radius:unset;
}
.teaser-wall .teaser-landscape.background-light-orange img {
    display: block;
}
.teaser-wall .teaser-landscape.background-light-orange .brand-element.first{
    background: var(--teaser-wall-teaser-landscape-background-light-orange-brand-element-first);
    opacity:1;
}
.teaser.teaser-landscape .teaser-data {
    padding-top:0;
    padding-bottom:0;
}
.teaser-landscape-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.teaser-landscape .brand-element.first {
    display:none;
}
.teaser-landscape .teaser-data {
    order:2;
    width:100%;
}
.teaser-landscape .img-wrapper {
    order:1;
    width:100%;
}
/*======================================
  VORLAGE TEASER-WALL
======================================*/
.teaser-wall .teaser-landscape {
    margin:0px auto;
}
.teaser-wall .teaser-landscape .brand-element.last{
    right:-15%;
}
.teaser-wall .teaser-landscape.background-blue .brand-element.last{
    background:var(--bg-blue);
}
.teaser-wall .teaser-landscape .teaser-data > div {
    padding:24px 0;
}
/*======================================                  
  teaser-icon
======================================*/
.teaser-icon {
    position:relative;
    overflow:hidden;
    padding-top:48px;
    padding-bottom:48px;
}
.teaser-icon .brand-element {
    background: var(--teaser-icon-brand-bg-color);
    right: unset;
    left: -1800px;
}
.teaser-icon *:not(.brand-element) {
    text-align:center;
    position:relative;
    z-index:9;
}
.teaser-icon h2{
    margin-bottom:40px;
}
.teaser-icon li{
    margin-bottom:24px;
    margin-top: 0px;
}
.teaser-icon .image {
    max-width:90px;
    height:auto;
    margin:0 auto;
    display:block;
}
.teaser-icon h3{
    margin-top:24px;
    margin-bottom:8px;
}
.teaser-icon p {
  margin-top: 0px !important;
  margin-bottom: 0px;
}
/*======================================                  
  teaser-related-terms
======================================*/
.teaser-related-terms {
    position:relative;
    overflow:hidden;
    padding-top:40px;
    padding-bottom:48px;
}
.teaser-related-terms *:not(.brand-element){
    position:relative;
    z-index:9;
}
.teaser-related-terms .brand-element {
    background:var(--teaser-related-terms-brand-bg-color);
}
.teaser-related-terms h2{
    margin-top:0px;
    margin-bottom:16px;
}
.teaser-related-terms ul {
  margin-bottom: 0px;
}
.teaser-related-terms li{
    float:left;
    margin-top:0px;
    margin-right:16px;
    margin-bottom:16px;
}
.teaser-related-terms .image {
    max-width:90px;
    height:auto;
    margin:0 auto;
    display:block;
}
.teaser-related-terms .primary-button {
    margin-top:32px;
}
.teaser-related-terms.background-blue input::placeholder {
    background:transparent;
}
.teaser-related-terms.background-blue input {
    padding:12px 16px !important;
    border:2px solid #FFFFFF!important;
    background:#FFFFFF;
    color:#003C78;
    font-size:18px;
    opacity: 1;
}
.teaser-related-terms.background-blue label {
    position:absolute;
}
.teaser-related-terms.background-blue input[type="text"] {
    width:100%;
}
.teaser-related-terms.background-blue input[type="submit"] {
    color: #fff !important;
    cursor: pointer;
    position: absolute;
    z-index:12;
    text-indent: -99999px;
    top: -32px;
    right: -13px;
    width: 64px;
    background: transparent !important;
    border: none !important;
}
.teaser-related-terms .submit + i::before {
    content: "\e97f";
    z-index:10;
    left: -24px;
    top: -2px;
    color:#003C78;
    font-size:32px;
    cursor:pointer;
    width: 64px;
}
/*======================================                  
  TAESER DOWNLOAD
======================================*/
.teaser-download {
    padding:24px 32px; 
}
.teaser-download .teaser-item {
    margin-bottom:24px;
}
.teaser-download h2{
    margin:0;
    margin-bottom:16px;
}
.teaser-download .image-wrapper {
    width:100%;
    float:left;
    margin-right:24px;
}
.teaser-download li {
    margin:0;
}
.teaser-download img{
    margin:0;
    height:auto;
    max-width:232px;
}
.teaser-download .teaser-data {
    margin-top:0;
}
/*======================================                  
  TEASER KONTAKT-SERVICE
======================================*/
.teaser-kontakt-service {
    position:relative;
    overflow:hidden;
    padding-top:40px;
    padding-bottom:48px;
}
.teaser-kontakt-service .brand-element {
    background:var(--teaser-kontakt-service-brand-bg-color);
}
.teaser-kontakt-service *:not(.brand-element, .link-cta *, .shariff) {
    position:relative;
    z-index:9;
}
.teaser-kontakt-service .service-teilen {
    z-index:999;  
}

.teaser-kontakt-service h2{
    margin-top:0;
    margin-bottom:12px;
}
.teaser-kontakt-service li{
    margin-top:0px;
    margin-bottom:0px;
}
.teaser-kontakt-service .personen li {
    float:left;
    width:100%;
    margin-bottom:32px;
}
.teaser-kontakt-service .personen .image {
    float:left;
    display:block;
}
.teaser-kontakt-service .personen .personen-data{
    float:left;
}
.teaser-kontakt-service li.service-vorlesen a,
.teaser-kontakt-service li.service-teilen button,
.teaser-kontakt-service li.service-drucken a,
.teaser-kontakt-service .personen li .name,
.teaser-kontakt-service .personen li .phone,
.teaser-kontakt-service .personen li .email {
    font-weight:bold;
    margin-bottom:6px;
    display: inline-block;
}
.teaser-kontakt-service .personen li .function {
    margin-bottom:6px;
    margin-bottom:12px;
}
.teaser-kontakt-service .shariff {
    position:absolute;
    z-index: 99999;
}

.teaser-kontakt-service .personen-data div{
    display:block;
    width:100%;
}

.teaser-kontakt-service .personen-data div i.svg-icon svg {
    margin-top: -3px;
}
/*======================================                  
  TEASER KONTAKT-SERVICE
======================================*/

 .teaser.teaser-prefooter {
    position:relative;
    overflow:hidden;
    padding-top:48px;
    padding-bottom:48px;
    background:var(--bg-lighter-blue);/*#E5F8FD*/
    margin-bottom:0 !important;
}
.teaser-prefooter h2 {
    margin:0;
    margin-bottom:16px;
}
.teaser-prefooter .secondary-button {
    margin-top:24px !important;
}
.teaser-prefooter .image {
    max-width:90px;
    height:auto;
    margin:0 auto;

    display:block;
}
@media (min-width: 1008px) {
    .teaser-prefooter {
        padding-top:64px;
        padding-bottom:64px;
    }

    .teaser-prefooter .image {
        max-width:120px;
    }
}
@media (min-width: 768px) {
    .teaser-prefooter .image-wrapper {
        display:table;
        width:100%;
        height: 100%;
    }
    .teaser-prefooter .image-wrapper-immer {
         display:table-cell; 
         vertical-align:middle;
         width: 100%;
         height: 100%;
    }
    .teaser-prefooter .image {
        margin-right: 0;
    }
}
/*======================================                  
  SLIDER
======================================*/
#slider .slider,
.controls-line,
.skip-items {
    max-width:1256px;
    margin:0 auto;
}
#slider {
    margin-top:32px;
    margin-bottom:32px;
}
#slider h2 {
    margin-top: 40px;
}
#slider .brand-element {
    display:none;
}

#slider .overflow {
    overflow: hidden;
    position: relative;
}
.skip {
    color:transparent;
}
.skip:focus {
    color:inherit;
}
#slider,
#slider .slider-item {
    position:relative;
}
.slider-item-image {
    padding:0;
}

#slider .slider-item.row {
    margin:0;
}
#slider .slider-item-content {
    order:2;
    padding: 0 24px 25px 24px;
}
#slider .slider-item-content a {
    margin-top:24px;
}
#slider .controls {
    color:var(--slider-controls-font-color);
    max-width: 1256px; 
    margin: 0 auto;
    margin-bottom: 0px;
    margin-top: -50px;
    margin-bottom: 50px;
    margin-left:24px;
    position: relative;
    z-index: 99999999;
}
#slider .controls > div > span{
    line-height: 25px;
    display: inline-block;
    width: 36px;
}
#slider .controls > div {
    display:table;
}
.controls > div > *{
    display:table-cell;
    vertical-align:middle;
    margin-right:20px;
}
.animation {
    width:0%;
    height:6px;
    background:var(--slider-animation-color);
}
/* Arrows */
.slickButtons {
    position:relative;
    font-size: inherit;
    line-height: inherit;
    color: var(--slider-controls-font-color);
    padding: 0;
    cursor: pointer;
    border: none;
    outline: none;
	z-index: 1;
    width: 25px;
    height: 25px;
}
.slickButtons:hover,
.slickButtons:focus {
    color: var(--slider-controls-font-color);
    background: none;
    outline: 2px solid var(--slider-controls-outline-color);
    outline-offset: 2px;
}
.slickButtons .iconfont {
    width: 25px;
    height: 25px;
    display: block;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.slickButtons .iconfont::before {
    position: absolute;
    padding:0;
    margin:0;
    top: 0px;
    left: 2px;
    font-size:23px;
    line-height:25px;
}
.slickStopButton .iconfont::before {
    content: "\e985";
}
.slickStopButton.slickStartButton .iconfont::before {
    content: "\e983";
    
}
.slickPrevButton  .iconfont::before {
    content: "\e987";
}
.slickNextButton  .iconfont::before {
    content: "\e98b";
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: var(--bg-blue)
}
.slick-list:focus {
    outline: none;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
    overflow:hidden;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-list {
	padding: 0 !important;
}
.slick-slide *{
    cursor: auto;
}
.slick-slide a img{
	cursor:pointer !important;
}
#slider .brand-element.first{
    display:none;
}
@media all and (max-width: 1007px) {
    .slick-initialized .slick-slide {
        overflow:unset;
    }
    #slider .slick-active .brand-element.first{
        display:block;
        left:50%;
        opacity:0.5;
        background:var(--slider-brand-bg-color);
    }
    #slider h2,
    #slider a,
    #slider p {
        position:relative;
        z-index:100;
    }
}
@media all and (min-width: 768px) and (max-width: 1007px) {
    #slider .slick-active .brand-element.first{
        display:block;
        left:70%;
        opacity:0.5;
        background:var(--slider-brand-bg-color);
    }
}
@media all and (min-width: 1008px) and (max-width: 1240px) {
    #slider .brand-element {
        left: -440px !important;
        background: var(--slider-brand-bg-color);
    }
}
/*======================================                  
  FORMULAR
======================================*/
.error-summery {
    border-left:10px solid var(--form-element-error-color);
    background:var(--form-error-summery-bg-color);
    padding:12px 32px 24px 32px;
    margin-top: 40px;
    margin-bottom: 40px;
}
.error-summery * {
    color:var(--form-element-error-color);
    fill:var(--form-element-error-color) !important;
    font-weight:700;
}
.error-summery h2 {
    font-size:20px;
    margin-top:0;
    margin-bottom:16px;
}
.error-summery h2 .svg-icon {
    margin-left: -4px;
    margin-right:5px;
    position:relative;
}
.error-summery h2 .svg-icon svg{
    top:0px;
    width:17px;
    position:relative;
}
.error-summery h2 .svg-icon svg path{
    fill:var(--form-element-error-color) !important;
}
.error-summery a {
    --link-font-color-hoverfocus: var(--form-element-error-color);
    margin-left:30px;
}
.error-summery a .svg-icon {
    margin-left:-30px;
}
.error-summery li {
    padding-left: 8px;
}
.formular h3 {
    margin-top:40px; 
    margin-bottom:24px;
}
.formular h4 {
    margin-bottom:12px;
}
.formular .has-errors label,
.formular .has-errors .errors *,
.formular .has-errors .errors a,
.formular .has-errors input[type="text"],
.formular .has-errors input[type="password"],
.formular .has-errors textarea,
.formular .has-errors select {
    --link-font-color:var(--form-element-error-color);
    --link-font-color-hoverfocus: var(--form-element-error-color);
    --form-element-color:var(--form-element-error-color);
    --form-element-border-color:var(--form-element-error-color);
}
.formular label,
.formular .errors * {
    color:var(--form-element-color);
}
.formular .errors {
    margin-top:8px;
}
.formular .element-group .errors {
     margin-top:-12px;
     float:left;
     width:100%;
}
.formular .errors *{
    color:var(--form-element-error-color);
}
.formular input[type="text"],
.formular input[type="password"],
.formular textarea,
.formular select {
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0px;
    -webkit-border-radius:0;
    font-family: inherit;
    font-style: inherit;
    font-size: inherit;
    font-weight: bold;
    color:var(--form-element-color);
    border: 2px solid var(--form-element-border-color);
    outline:2px solid var(--form-element-outline-color);
    outline-offset: 2px;
    background-color: var(--form-element-background-color);
    padding:10px 12px 10px 12px;
    width:100%;
}
.formular button[type="submit"],
.formular input[type="submit"] {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 10px 24px;
    margin-top:32px;
    background: var(--form-element-border-color);
    border: 2px solid var(--form-element-border-color);
    color: var(--color-white);
    text-align: center;
    font-weight: bold;
    display: inline-block;
    margin-right:12px;
}
.formular button[type="submit"].with-icon,
.formular input[type="submit"].with-icon {
    padding-right: 48px;
}
.formular button [type="submit"].with-icon + .svg-icon,
.formular input[type="submit"].with-icon + .svg-icon {
    margin-left: -52px;
}
.formular button[type="submit"].with-icon + .svg-icon svg *,
.formular input[type="submit"].with-icon + .svg-icon svg * {
    fill:var(--form-submit-icon-color);
}
.formular button[type="submit"]:hover,
.formular button[type="submit"]:focus,
.formular input[type="submit"]:hover,
.formular input[type="submit"]:focus {
    background: var(--form-submit-button-bg-color);
    border: 2px solid var(--form-submit-button-border-color);
    outline: 2px solid var(--form-submit-button-outline-color);
    outline-offset: 2px;
}

.formular button[type="submit"].with-icon:hover  + .svg-icon svg *,
.formular button[type="submit"].with-icon:focus + .svg-icon svg *,
.formular input[type="submit"].with-icon:hover + .svg-icon svg *,
.formular input[type="submit"].with-icon:focus + .svg-icon svg * {
    fill:var(--form-submit-icon-color) !important;
}
.formular select option{
    font-family: Arial;
    font-weight:normal;
    color:var(--form-select-option-color) !important;
}
.formular input[type="text"]:hover,
.formular input[type="text"]:focus,
.formular input[type="password"]:hover,
.formular input[type="password"]:focus,
.formular textarea:hover,
.formular textarea:focus,
.formular select:hover,
.formular select:focus {
    --form-element-color:var(--form-element-color-basic);
    --form-element-border-color:var(--form-element-border-hover-focus);
    --form-element-outline-color: var(--form-element-outline-color-hover-focus);
    --form-element-background-color: var(--form-element-background-color-hover-focus);
}
.formular .changed input[type="text"],
.formular .changed input[type="password"],
.formular .changed textarea,
.formular .changed select {
    --form-element-color:var(--form-element-color-basic);
    --form-element-border-color:var(--form-element-border-hover-focus);
}
.formular .changed label,
.formular .hovered label,
.formular .focused label {
    --form-element-color:var(--form-element-color-basic);
}
.formular select option:hover,
.formular select option:focus {
    color:red;
}
/*CHECKBOX*/
.formular .label-input-wrapper input {
    position:absolute;
    left:-9999999999px;
    cursor: pointer;
}
.formular .label-radio,
.formular .label-checkbox {
    position:relative;
    z-index:9999999;    
    display: inline-block;
    width:auto;
    padding-top: 3px;
    padding-left: 42px;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.formular .label-input-wrapper {
    position:relative;
}
.formular .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height:30px;
    width: 30px;
    background-color: var(--form-element-background-color);
    border: 2px solid var(--form-element-border-color);
    outline:2px solid var(--form-element-outline-color);
    outline-offset: 2px;
}
.formular .radio .checkmark {
    border-radius:15px;
}    
.formular .has-errors .checkmark {
    --form-element-color:var(--form-element-error-color);
    --form-element-border-color:var(--form-element-error-color);
}
.formular .label-input-wrapper label:hover + input +.checkmark,
.formular .label-input-wrapper input:focus + .checkmark {
    --form-element-color:var(--form-element-color-basic);;
    --form-element-outline-color: var(--form-element-outline-color-hover-focus);
    --form-element-border-color: var(--form-element-border-hover-focus);
    --form-element-background-color: var(--form-element-background-color-hover-focus);
}
.formular .changed .label-input-wrapper label + input +.checkmark {
    --form-element-border-color: var(--form-element-border-hover-focus);
}
.formular .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
/* Show the checkmark when checked */
.formular .label-input-wrapper input:checked + .checkmark:after {
    display: block;
}
/* Style the checkmark/indicator */
.formular .label-input-wrapper input + .checkmark:after {
    left: 9px;
    top: 4px;
    width: 8px;
    height: 15px;
    border: solid var(--form-element-border-color);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.formular .label-input-wrapper.radio input + .checkmark:after {
    top: 5px;
    left: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--form-element-border-color);
    border: none;
}
.formular .element {
    margin-bottom:16px;
}
.formular .element-group {
    float:left;
    width:100%;
}
.formular .element-group h4{
    margin-top:0;
}
.formular .element-group .element {
    float:left;
    width:auto;
    margin-right: 25px;
}
.formular .svg-icon {
    margin-left:0px;
    margin-right:5px;
}
/*======================================                  
  NEWSLETTER
======================================*/
.newsletter-anmelden .subscriptions,
.newsletter-anmelden .subscription {
    width:100%;
}
.newsletter-anmelden .subscriptions {
    margin-bottom:40px;
}
.newsletter-anmelden .subscription li{
    float: left;
    width: 100%;
    display:table;
    background:var(--newsletter-anmelden-subscription-bg-color);
    margin-bottom:5px;
    padding-left:32px;
}
.newsletter-anmelden .subscription li .element {
    display: table-cell;
    vertical-align: middle;
}
.newsletter-anmelden .subscription li .element input {
    float:left;
}
.newsletter-anmelden .subscription li .img-wrapper {
    float:right;
}

.newsletter-anmelden .image {
    min-width:263px;
    margin-left:40px;
}
@media all and (max-width: 640px) {
    .newsletter-anmelden .image {
        display:none;
    }
    .newsletter-anmelden .subscription li {
        padding:0;
    }
    ul.subscription .element {
        padding:12px;
    }
}
/*======================================                  
  STARTSEITE
======================================*/
.startseite #header .border {
    border-bottom: 1px solid var(--startseite-border-color);
    margin-top: 24px;
    margin-bottom: 18px;
}
.startseite #prefooter-container {
    margin-top:-64px;
}
.startseite #teaser-37565 {
    background:var(--startseite-veranstaltungen-bg-color);
    padding-bottom:64px;
}
.startseite #teaser-37565 h2{
    margin-top:58px;
}
@media all and (max-width: 1008px){
    .startseite article {
      margin-top: 24px !important;
    }
}
/*======================================                  
  VERHALTEN BEI FARBIGEM HINTERGRUND
======================================*/
/*======================================                  
  HINTERGRUND BLAU
======================================*/
.background-blue {
    background-color:var(--bg-blue);
}
.youtube-warning,
.background-blue h1,
.background-blue h2,
.background-blue h3,
.background-blue h4,
.background-blue p,
.background-blue {
    color:var(--bg-blue-font-color);
}
.background-blue .font-color-orange {
    color:var(--bg-blue-font-color-orange);
}
.background-blue .font-color-cyan-50 {
    color:var(--bg-blue-font-color-cyan);
}

.background-blue button,
.background-blue button:active,
.background-blue a,
.background-blue a:active {
    --link-font-color:var(--bg-blue-link-font-color);
}
.background-blue button:hover,
.background-blue button:focus,
.background-blue a:hover,
.background-blue a:focus {
    --link-font-color:  var(--bg-blue-link-font-color-hoverfocus);
    --link-font-color-hoverfocus:  var(--bg-blue-link-font-color-hoverfocus);
}
a.primary-button.video-button,
.background-blue a.primary-button,
.background-blue button.primary-button {
    background: var(--bg-blue-button-primary-bg-color);
    border: 2px solid var(--bg-blue-button-primary-border-color);
    color: var(--bg-blue-button-primary-font-color);
}
.background-blue a.primary-button i.svg-icon svg,
.background-blue button.primary-button i.svg-icon svg path{
    --link-font-color:var(--color-blue); 
}
a.primary-button.video-button:hover,
a.primary-button.video-button:focus,
.background-blue a.primary-button:hover,
.background-blue a.primary-button:focus,
.background-blue button.primary-button:hover,
.background-blue button.primary-button:focus {
    color:var(--bg-blue-button-primary-font-color-hoverfocus);
    background: var(--bg-blue-button-primary-bg-color-hoverfocus);
    border: 2px solid var(--bg-blue-button-primary-border-color-hoverfocus);
    outline: 2px solid var(--bg-blue-button-primary-offset-color-hoverfocus);
}
.background-blue a.primary-button:hover i.svg-icon svg,
.background-blue a.primary-button:focus i.svg-icon svg path{
    --link-font-color:var(--color-white);
    --link-font-color-hoverfocus:var(--link-font-color);
}
.background-blue .link-tags {
    background:var(--bg-blue-link-tag-bg-color);
    border: 2px solid var(--bg-blue-link-tag-border-color);
    color: var(--bg-blue-button-primary-font-color);
}
.background-blue .link-tags:hover,
.background-blue .link-tags:focus {
    color:var(--bg-blue-button-primary-font-color-hoverfocus);
    background: var(--bg-blue-button-primary-bg-color-hoverfocus);
    border: 2px solid var(--bg-blue-button-primary-border-color-hoverfocus);
    outline: 2px solid var(--bg-blue-button-primary-offset-color-hoverfocus);
}
.background-blue a.secondary-button,
.background-blue button.secondary-button {
    background: var(--bg-blue-button-secondary-bg-color);
    border: 2px solid var(--bg-blue-button-secondary-border-color);
    color: var(--bg-blue-button-secondary-font-color);
}
.background-blue a.secondary-button:hover,
.background-blue a.secondary-button:focus,
.background-blue button.secondary-button:hover,
.background-blue button.secondary-button:focus {
    color:var(--bg-blue-button-secondary-font-color-hoverfocus);
    background: var(--bg-blue-button-secondary-bg-color-hoverfocus);
    border: 2px solid var(--bg-blue-button-secondary-border-color-hoverfocus);
    outline: 2px solid var(--bg-blue-button-secondary-offset-color-hoverfocus);
    outline-offset: 0px;
}
.background-blue .infozeile .label {
    border-color: var(--color-white);
    color: var(--color-white);
}
/*======================================                  
  HINTERGRUND HELLBLAU
======================================*/
.background-light-blue {
    background-color:var(--bg-light-blue);
}
.background-light-blue button,
.background-light-blue button:active,
.background-light-blue a,
.background-light-blue a:active {
    --link-font-color-hoverfocus: var(--bg-light-blue-link-font-color);
}
.background-light-blue button:hover,
.background-light-blue button:focus,
.background-light-blue a:hover,
.background-light-blue a:focus {
    --link-font-color: var(--bg-light-blue-link-font-color);
    --link-font-color-hoverfocus: var(--bg-light-blue-link-font-color);
}
/*======================================                  
  HINTERGRUND ORANGE
======================================*/
.background-light-orange {
    background-color:var(--bg-orange);
}
.background-light-orange button,
.background-light-orange button:active,
.background-light-orange a,
.background-light-orange a:active {
    --link-font-color-hoverfocus: var(--bg-orange-link-font-color);
}
.background-light-orange button:hover,
.background-light-orange button:focus,
.background-light-orange a:hover,
.background-light-orange a:focus {
    --link-font-color: var(--bg-orange-link-font-color);
    --link-font-color-hoverfocus:  var(--bg-orange-link-font-color);
}
/*======================================
  ENDE
======================================*/
.header-wrapper.active {
    position:sticky;
    top:0px;
    background:var(--sticky-bg-color);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.16);
    z-index:999999999;
}
.header-wrapper.active #breadcrump{
    display:none;
}
.startseite .header-wrapper.active .border {
    display:none;
}
.sicky-border {
    display:none;
}
.sicky-border .container {
    position:relative;
}
 .sicky-border button{
    position:absolute;
    right:0;
}
.sicky-border.active {
     display:block;
    position:sticky;
    top:0px;
    height:4px;
    background:var(--bg-blue);
    z-index:999999999;
}   
.header-wrapper.active .hauptnavigation .wrapper-level-2 {
    top: 160px;
}

.tooltop-sticky {
    position:fixed;
    top: calc(100vh - 115px) !important;
}

.exklusiv-badge {
    margin-bottom:24px;
}

.exklusiv-badge:focus,
.exklusiv-badge:hover {
    color: var(--bg-blue);
}
.exklusiv-badge:hover i.svg-icon svg path,
.exklusiv-badge:focus i.svg-icon svg path,
.exklusiv-badge i.svg-icon svg path {
    fill: var(--warenkorb-icon-bg-color) !important;
}

@media (max-width: 1007px) {
/*FIXES*/
.zitat.background-light-blue.col-12.col-lg-8.col-xl-9,
.zitat.background-light-blue.col-12.col-md-12.col-lg-6.col-xl-6.halb.left,
.zitat.background-light-blue.col-12.col-md-12.col-lg-6.col-xl-6.halb.right {
    margin-left: 12px;
    margin-right: 12px;
    max-width: calc(100% - 24px);
}
.zitat.with-image {
    margin-left: 12px;
    max-width: calc(100% - 12px);
    padding-left: 0;
    margin-right: 0;
}
}