/* Fonts - https://google-webfonts-helper.herokuapp.com/fonts */

/* roboto-regular - latin-ext */
/*@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;             FIXME Gives the font face an extremely small block period and an infinite swap period. *
font-display: font-fallback;    FIXME Gives the font face an extremely small block period and a short swap period. *
src: local('Roboto'), local('Roboto-Regular'),
url('../Fonts/roboto-v18-latin-ext-regular.woff2') format('woff2'),  Chrome 26+, Opera 23+, Firefox 39+ 
url('../Fonts/roboto-v18-latin-ext-regular.woff') format('woff');  Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ 
}*/

/* Typography  */
@media all {

    html { 
        font-size: 1rem; 
        height: 100%; 
        background: rgb(51,51,51); 
        background-color: #fff;
    }

    body, input:not([type="radio"]):not([type="checkbox"]), button, select, textarea {
        font-size: var(--font-size-base);
        font-family: 'Source Sans Pro', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        font-display: swap;
        color: var(--color-dark);
        background: var(--color-white);

        text-rendering: optimizelegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    input:not([type="radio"]):not([type="checkbox"]) {
        line-height: 1;
        max-height: 2.25rem;
    }

    b, strong, dt { font-weight: 600; }

    a {
        color: var(--color-yellow);
        color: var(--color-yellow-text);
        /*! text-decoration: underline; */ 
        text-decoration-skip: ink;
        font-weight: 700;
    }

    .ce-frame-boxblue a ,
    .page-footer a {
        color: inherit;
    }
    
    .js-icon i {
        /*! padding-right: .325rem; */
    }

    a:focus ,
    a:hover {
    }  

    li + li ,
    ol li > ol ,
    ul li > ol ,
    ol li > ul ,
    ul li > ul {
        margin-top: var(--size-d-2);
    }

    .ce-bodytext ol li::marker ,
    .ce-bodytext ul li::marker {
        color: var(--color-lightblue);
    }

    .ce-layout-box.ce-frame-boxblue .ce-bodytext ol li::marker ,
    .ce-layout-box.ce-frame-boxblue .ce-bodytext ul li::marker {
        color: var(--color-white);
    }

    .ce-header ,
    .ce-bodytext,
    .ce-accordeon ,
    .ce-type-table ,
    .ce-type-uploads {
        max-width: 47.5rem;
        max-width: calc(47.5rem + var(--size-4));
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .news-date ,
    .news-teaser {
        font-weight: 700;
    }
    .ce-header {
        color: var(--color-darkblue);
    }
    .ce-header span {
        color: var(--color-lightblue);
    }

    .page-footer .ce-header {
        color: var(--color-white);
    }

    .h1-like,.h2-like,.h3-like,.h4-like,.h5-like,
    h1,h2,h3,h4,h5 {
        margin: 0;
        line-height: var(--font-line-height-header);
        font-weight: normal;
        font-weight: var(--font-weight-bold);
    }
    .h1-like a,.h2-like a,.h3-like a,.h4-like a,.h5-like a,
    h1 a, h2 a, h3 a, h4 a,h5 a {
        /* color: rgb(70,70,70); FIXME */
        text-decoration: none;
        color: inherit;
    }

    .h1-like,
    h1 {
        font-size: calc(1em * 24 / 16);
    }

    .h2-like,
    h2 ,
    .page-sidebar h2,
    .page-footer h2 {
        font-size: calc(1em * 24 / 16);
    }

    .h3-like,
    h3 ,
    .page-sidebar h3,
    .page-footer h3 {
        font-size: calc(1em * 20 / 16);
    }

    .h4-like,
    h4 {
        font-size: calc(1em * 16 / 16);
    }

    .h5-like,
    h5 {
        font-size: calc(1em * 16 / 16);
    }

    .bodytext-like {
        font-weight: 700;
    }

    .ce-layout-box .bodytext-like {
        text-align: center;
    }

    blockquote {
        margin-left: 1.25rem;
        border-left: 4px solid rgb(204,204,204);
        padding: 0.9375rem 0 0 1.25rem;
        font-style: italic;
    }

    blockquote::after {
        content: "";
        display: table;
    }

    /* margins */

    .ce-news,
    .ce-header,
    p, ul, ol, dl { 
        margin: 0;
        margin-bottom: var(--size-d-2);
        margin-bottom: var(--font-size-base);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
    }

    .ce-element-footer {
        max-width: 47.5rem;
        margin: 0 auto;
        margin-top: var(--font-size-base);
    }

    .ce-element-footer a {
        padding: 0 var(--size-1);
    }

    .ce-accordeon > .ce-element > .ce-header {
        margin-bottom: 0;
    }

    .ce-news,
    .ce-header{ 
        width: 100%;
        /*! hyphens: auto; */
    }

    .searchbox ,
    .searchresults { 
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 47.5rem;
    }

    .ce-header-only .ce-textpic-inner {
        overflow: visible;
    }

    .ce-header-only .ce-header {
        margin-bottom: 0;
    }

    .ce-type-menu_pages,
    .ce-imageorient-8:not(.ce-type-gridelements_pi1) > .ce-header ,
    .ce-imageorient-8:not(.ce-type-gridelements_pi1) > .ce-textpic > .ce-bodytext ,
    .ce-imageorient-10:not(.ce-type-gridelements_pi1) ,
    .ce-textpic-inner { 
        padding: 0 var(--size-1);
        max-width: calc(47.5rem + var(--size-4));
        margin-left: auto;
        margin-right: auto;
        /*! overflow: hidden; */
    }

    .ce-layout-box-inner > .ce-above-header > div > .ce-header:last-child {
        margin-bottom: 0;
    }

    .content > .ce-element.ce-type-header > .ce-header ,
    .content > .ce-element.ce-type-list > .ce-header ,
    .content > .ce-imageorient-40 > .ce-header ,
    .content > .ce-element.ce-type-gridelements_pi1 > .ce-header {
        padding-left: var(--size-1);
        padding-right: var(--size-1);
        margin-bottom: var(--size-1);
    }

    .content > .ce-imageorient-40 > .ce-header {
        /*! margin-bottom: var(--font-size-base); */
    }

    .ce-bodytext > :last-child {
        margin-bottom: 0;
    }

    ul, 
    ol, 
    dl { 
        padding-left: var(--size-1); 
    }

    ul ul,
    ul ol,
    ul dl, 
    ol ul,  
    ol ol,  
    ol dl, 
    dl ul, 
    dl ol, 
    dl dl { 
        padding-left: 1.25rem; 
    }

    .search-result-info {
        padding-left: 0;
    }

    ol li:::marker ,
    ul li:::marker {
        color: rgb(255, 80, 0);
    }

    .ce-layout-box > div > .ce-teaserlink-outer {
        margin: 0;
    }

    .ce-header-subheader,
    .ce-header-date {
        margin-top: 0.3125rem;
    }

    .ce-header-subheader {
        margin-top: 0.625rem;
    }
    .ce-header-date {
        margin: 0.625rem 0 0;
    }
    ul ul,
    ul ol,
    ol ul,
    ol ol { margin:0; }

    .ce-menu {
        margin-left: .625rem;
    }

    .ce-menu .ce-menu {
        margin-left: 1.25rem;
    }

    hr,
    .ce-div {
        border: none;
        border-top: .125rem solid rgba(var(--color-lightblue-rgb), .1);
        margin: 0;
        height: 0;
        /*! margin-bottom: var(--size-2); */
    }

    .page-footer hr,
    .page-footer .ce-div {
        margin-bottom: 0;
        /*! margin: 0 var(--size-1); */
        border-top: .125rem solid rgba(var(--color-white-rgb), .1);
    }

    p + hr {
        margin-top: 1.25rem;
    }

    /* text flow */
    h1, h2, h3, h4, h5, h6
    p, li, a, figcaption {
        overflow-wrap: break-word;
        word-wrap: break-word;
        /*! -webkit-hyphens: auto; */
        /*! -moz-hyphens: auto; */
        /*! -ms-hyphens: auto; */
        /*! hyphens: auto; */
    }

    .ce-type-gridelements_pi1 .ce-col .ce-header > * ,
    .ce-type-list .news-list .ce-header > * {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    .ce-type-gridelements_pi1 .ce-col .ce-header > .bodytext-like ,
    .ce-type-list .news-list .ce-header > .bodytext-like {
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
    }

    .page-footer .ce-frame-iconsocial a {
        font-size: 2em;
    }

}

/* large */
@media all and (min-width: 47.5em) {

    .h1-like,
    h1 {
        font-size: calc(1em * 48 / 18);
    }

    .h2-like,
    h2 ,
    .page-sidebar h2,
    .page-footer h2 {
        font-size: calc(1em * 32 / 18);
    }

    .h3-like,
    h3 ,
    .page-sidebar h3,
    .page-footer h3 {
        font-size: calc(1em * 24 / 18);
    }

    .h4-like,
    h4 {
        font-size: calc(1em * 24 / 18);
    }

    .h5-like,
    h5 {
        font-size: calc(1em * 20 / 18);
    }

}


/* large */
@media all and (min-width: 62.5em) {
    /* typography */

    .content > .ce-element.ce-type-header > .ce-header ,
    .content > .ce-element.ce-type-list > .ce-header ,
    .content > .ce-imageorient-40 > .ce-header ,
    .content > .ce-element.ce-type-gridelements_pi1 > .ce-header {
        margin-bottom: var(--size-4);
        padding-left: var(--size-2);
        padding-right: var(--size-2);
    }

    .content > .ce-imageorient-40 > .ce-header {
        margin-bottom: var(--size-1);
    }

    .content > .ce-imageorient-40 > .ce-header + .ce-below >  .ce-gallery:first-child {
        /*! margin-top: calc(var(--size-4) - var(--size-1)); */
    }

    hr,
    .ce-div {
        /*! margin-bottom: var(--size-4); */
    }

    p + hr {
        margin-top: 2.5rem;
    }

    .h1-like,
    h1 {
        font-size: calc(1em * 64 / 22);
    }

    .h2-like,
    h2 ,
    .page-sidebar h2,
    .page-footer h2 {
        font-size: calc(1em * 48 / 22);
    }

    .h3-like,
    h3 ,
    .page-sidebar h3,
    .page-footer h3 {
        font-size: calc(1em * 32 / 22);
    }

    .h4-like,
    h4 {
        font-size: calc(1em * 28 / 22);
    }

    .h5-like,
    h5 {
        font-size: calc(1em * 28 / 22);
    }

    .ce-type-menu_pages,
    .ce-imageorient-8:not(.ce-type-gridelements_pi1) > .ce-header ,
    .ce-imageorient-8:not(.ce-type-gridelements_pi1) > .ce-textpic > .ce-bodytext ,
    .ce-imageorient-10:not(.ce-type-gridelements_pi1) ,
    .ce-textpic-inner ,
    .ce-imageorient-8:not(.ce-type-gridelements_pi1) .ce-header ,
    .ce-imageorient-8:not(.ce-type-gridelements_pi1) .ce-textpic { 
        padding-left: var(--size-2);
        padding-right: var(--size-2);
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    /*
    .ce-textpic-inner ,
    .ce-imageorient-8:not(.ce-type-gridelements_pi1) .ce-header ,
    .ce-imageorient-8:not(.ce-type-gridelements_pi1) > .ce-textpic > .ce-bodytext ,
    */
    .ce-imageorient-8:not(.ce-type-gridelements_pi1) .ce-textpic { 
        padding-left: 0;
        padding-right: 0;
    }

    .ce-element-footer a {
        padding: 0 var(--size-2);
    }

}

/* xlarge */
@media all and (min-width: 82.5em) {
    /* typography */

}

@media all and (min-width: 120em) {
    
    html { 
        background-color: #333;
    }

}