/* individual microsite css file to setup individual styles
v1 microsites: breadcrumb immer im "normal-container" ausgerichtet

csp spezifisch
font-family ändern zu Cantarell (Google Font)

dach - h1 - teaser linksbündig
h1 = #515143 (dunkel Grau aus Logo)
teaser entfetten


#324AA1 (Blau CSP) :  first
#69A056 (Grün CSP): second
#EF8930 (Orange CSP)


laufweite der navi-flyout vergrößern: anhand guidance documents

testseite unter /110310/index.php.en

tabs / klapper in orange, klapper default/ closed auch in orange


überschriften: alle etwas größer showcase

Überschriften im cms h1, h4, h5 entfernen und ggf. alte migrieren


cantarell-regular - latin_latin-ext (in download folder)




*/
/*  .msfirst (texte, headlines) #45546a , .mssecond (links ?) #c0cf3a, .msthird (still to define) #e9f0f3 */
:root {
    --msfirst: #324AA1;
    --mssecond: #69A056;
    --msthird: #EF8930;
    --msfourth: #9b9b9b;
}

/*local font for microsite with overwriting in body */
@font-face {
    font-display: swap;
    font-family: 'Cantarell';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/cantarell-v17-latin_latin-ext/cantarell-v17-latin_latin-ext-regular.eot');
    src: url('../fonts/cantarell-v17-latin_latin-ext/cantarell-v17-latin_latin-ext-regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/cantarell-v17-latin_latin-ext/cantarell-v17-latin_latin-ext-regular.woff2') format('woff2'),
    url('../fonts/cantarell-v17-latin_latin-ext/cantarell-v17-latin_latin-ext-regular.woff') format('woff'),
    url('../fonts/cantarell-v17-latin_latin-ext/cantarell-v17-latin_latin-ext-regular.ttf') format('truetype'),
    url('../fonts/cantarell-v17-latin_latin-ext/cantarell-v17-latin_latin-ext-regular.svg#Cantarell') format('svg');
}
body {
    font-family: Cantarell,Poppins,Helvetica Neue,Helvetica,Arial,sans-serif;
}


/*  Farbbalken Header bg default */

.header-main { box-shadow: 0 6px 0 0 var(--msfirst); }
/*
increase border thickness if box-shadow: 0 VALUE 0 0 ist increased
*/
.header-main .nav-container .menu-container #nav_menu > ul > li > ul > li:first-of-type a.firstoflevel-3 {border-top: 6px solid var(--msfirst);}
.header-main .nav-container .menu-container #nav_menu ul > li:hover > ul > li:first-of-type a.level-2:first-of-type {border-top: 6px solid  var(--mssecond)}


a, a:link, a:visited , a:focus, a:active{
    color: var(--mssecond);
    text-decoration: none;
}
a:hover {
    color: var(--msfirst);
    text-decoration: none !important;
}

/*in modules */
i[class^="fi-"]::before , a[class*="fi-"]::before  {
    color: var(--mssecond);
}
/*not for hereon sm stuff */
.footer-main .social-media a i[class^="fi-"]::before {
    color: #2c2c2c;
}

/* special handling in flowing text*/
.ms .flexmodule a.bbcLink, .ms .flexmodule a.boxStandaloneLink.bbcLink {
    color:  var(--msfirst)  !important;
    text-decoration: underline !important;
    padding-left: 0 !important;
}
.ms .flexmodule a.bbcLink.fi-link::before, .ms .flexmodule a.bbcLink.fi-link::before {
    content: none !important;
    color: var(--msfirst) !important;
    margin: 0 !important;
    padding: 0 !important;
    right: 0 !important;
    left: 0 !important;
}

/*in buttons */
a.button {
    color: var(--mssecond) !important;
    border-color: var(--mssecond) !important;
}
/*use primary for hover if wanted*/
a.button:hover {
    color: var(--msfirst) !important;
    border-color: var(--msfirst) !important;
}
/*buttonsets form v2 */
main.ms .cta-wrapper .button, main.ms .nav-binnen .button {
     background-color: var(--msfirst) !important;
     border-color: var(--msfirst) !important;
    color: #fff;
}
main.ms .cta-wrapper .button:hover, main.ms .nav-binnen .button:hover {
    background-color: #fff  !important;
    color: var(--msfirst)  !important;
}
main.ms .cta-wrapper .button a:hover, main.ms .nav-binnen .button a:hover {
   color: var(--msfirst)  !important;
}
/* links in setcards*/
.boxContent a {
    color: var(--mssecond) !important;
    border-color: var(--mssecond) !important;
}
/* setcard toggles */
.cell-setcard .component-setcard .navtoggle-container .navtoggles button.active,
.cell-setcard .component-setcard .navtoggle-container .navtoggles button:hover {
    color: var(--mssecond);
}

/*in tables */
table a, table a:link, table a:visited , table a:focus, table a:active {
    color:  var(--msfirst);
    text-decoration: none;
}

/*in slider */
.slick-slider-container .slick-next::before, .slick-slider-container .slick-prev::before {
    color:  var(--mssecond);
}
.slick-dots li.slick-active button::before , .slick-dots li button:hover{
    color:  var(--mssecond);
}
.slick-dots li button:hover{
    opacity: 1;
}



/*  h1, h2, h3 colors + ausrichtung h1 */
h1, h2, h3, h4 { color: var(--msfirst); font-family: Cantarell,Poppins,Helvetica Neue,Helvetica,Arial,sans-serif;}
h1 { text-align: left; color: #515143 !important}
h2 { text-align:  left; font-size: 1.5rem; line-height: 1.55;}
h3 { text-align: left;font-size: 1.125rem; line-height: 1.2222222222; color: var(--mssecond);}
h4 { text-align: left;font-size: 1.2857142857rem; line-height: 1.2222222222;}
/* demo only  - is calculated by foundation framework
increase by calc with *1.1
*/


@media only screen and (min-width: 1440px) {
    .h2, h2 {
        font-size: 1.5888888888rem;
        line-height: 1.6538461538;
    }
    .h3, h3 {
        font-size: 1.2222222222rem;
        line-height: 1.41;
    }
    .h4, h4 {
        font-size: 1rem;
        line-height: 1.3333333333;
    }
}
@media only screen and (min-width: 1200px) {
    .h2, h2 {
        font-size: 1.5rem;
        line-height: 1.55;
    }
    .h3, h3 {
        font-size: 1.2rem;
        line-height: 1.3;
    }
    .h4, h4 {
        font-size: 1rem;
        line-height: 1.3333333333;
    }
}



@media only screen and (min-width: 1024px) {
    .h2, h2 {
        font-size: 1.4rem;
        line-height: 1.5;
    }
    .h3, h3 {
        font-size: 1.2rem;
        line-height: 1.3;
    }
    .h4, h4 {
        font-size: 1rem;
        line-height: 1.3333333333;
    }
}



@media only screen and (min-width: 640px) {
    .h2, h2 {
        font-size: 1.35rem;
        line-height: 1.45;
    }
    .h3, h3 {
        font-size: 1.2rem;
        line-height: 1.3;
    }
    .h4, h4 {
        font-size: 1rem;
        line-height: 1.3333333333;
    }
}

.grid-container-large {
    max-width: 77rem;
}
/*dachzeile neu*/
.cell.large-10.large-offset-1.al-text_c {
    text-align: left;
}
@media print, screen and (min-width: 1200px) {
    .nav-breadcrumb {
        padding-left: 6.6em;
        padding-right: 6.6em;
    }
}


/*dachzeile, teaser */
.al-dachzeile, p.teaser {
    text-align: left;
    font-weight: normal;
    color: var(--msfirst);
}

/*  list bullet color */
.flexmodule-list ul {color: var(--msfirst);}

/* NEU klapper zu farben invertiert */
.flexmodule-klapper .innerModuleToggle .innerBoxButton:hover, .flexmodule-klapper .innerModuleToggle .innerBoxButton,
.flexmodule-klapper .innerModuleToggle .innerBoxButton span ,
.flexmodule-tabs .moduleTabs.tabs li a ,
.flexmodule-tabs .moduleTabs.tabs li a {
    color: var(--msfourth);
}
.flexmodule-tabs .moduleTabs.tabs li {
    border-bottom:  1px solid var(--msfourth);
}


/* klapper open / hover */
.flexmodule-klapper .innerModuleToggle .innerBoxButton:hover, .flexmodule-klapper .innerModuleToggle .innerBoxButton[aria-expanded="true"],
.flexmodule-klapper .innerModuleToggle .innerBoxButton span:hover , .flexmodule-klapper .innerModuleToggle .innerBoxButton[aria-expanded="false"]:hover,
.flexmodule-klapper .innerModuleToggle .innerBoxButton[aria-expanded="false"]:hover span,
.flexmodule-klapper .innerModuleToggle .innerBoxButton[aria-expanded="true"] span,
.flexmodule-tabs .moduleTabs.tabs li.is-active a ,
.flexmodule-tabs .moduleTabs.tabs li a:hover {
    color: var(--msthird);
}
.flexmodule-tabs .moduleTabs.tabs li.is-active {
    border-bottom:  3px solid var(--msthird);
}




/*  logo definitions */

.header-main .nav-header img.logo-main {
    min-height: 64px;
    /* caution with chrome and svg */
    width: unset;
}
.header-main .nav-header img.logo-sub {
    min-width: 120px;
    /* caution with chrome and svg */
    width: unset;
}

@media all and (min-width: 64em) {
    .header-main .nav-header img.logo-main {
        min-height: 85px;
    }
    .header-main .nav-header img.logo-sub {
        min-height: 110px;
        width: 155px;
        max-width: 155px;
        position: absolute;
        left: 20%;
        top: 10px;
        right: unset;
    }
}



/*  setup navigation */
/*  increase menu size if needed (here from 200 to 250px ) */
.header-main .nav-container .menu-container #nav_menu ul > li ul a {width: 250px; border-bottom: 1px solid grey;}
.header-main .nav-container .menu-container #nav_menu ul > li ul li ul {left: -250px;}
/*  colors */
.header-main .nav-container .menu-container #nav_menu ul > li ul a:hover ,
.header-main .nav-container .menu-container #nav_menu ul > li ul a:focus{background-color: #f1f1f1;}

.header-main .nav-container .menu-container #nav_menu ul li a {
    color: var(--msfirst) !important;
}

.header-main .nav-container .menu-container #nav_menu ul li a:hover  {
    color: var(--mssecond)  !important;
}
.header-main .language-switch a {
    color: #9b9b9b;
}
.header-main .language-switch a .active{
    color: var(--msfirst);
}
/*mobile nav slick*/
#mobilemenu .slicknav_menu .slicknav_nav {
    background-color: var(--msfirst) !important;
}
.slicknav_menu .nav-main__toggle::after, .slicknav_menu .nav-main__toggle::before {
    background-color: var(--msfirst);
}
.slicknav_menu .nav-main__toggle:hover::after, .slicknav_menu .nav-main__toggle:hover::before, .slicknav_menu .nav-main__toggle:hover span {
    background-color: #606060;
}

/*  setup progress bak2top indicator, maybe with */
.progress-wrap::before {
    background-image: linear-gradient(298deg,var(--msfirst),var(--mssecond));
}

.progress-wrap::after {
    color: var(--msfirst) !important;
}
.progress-wrap svg.progress-circle path {stroke: var(--msfirst) !important;}

/*teaser_21 flex coloring*/
.flexmodule-teaser-21 .al-teaser__img::before , .flexmodule-teaser-21 .al-teaser__img::after {
    background-color: var(--msfirst);
}


/*  more desktop mode defintions */
@media all and (min-width: 64em) {

}