/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    margin-bottom: 0;
}
li {
    margin-left: 1.25em;
}
.navi li {
    list-style: none;
    margin-left: 0;
}
table caption {
    display: none;
}
th {
    text-align: left;
    vertical-align: top;
}
td {
    vertical-align: top;
}
fieldset {
    border: none;
}
iframe {
    border: none;
}
address {
    margin-bottom: 0;
    font-style: normal;
}
img,
embed,
object,
video {
    max-width: 100%;
    height: auto;
    width: auto;
}
strong {
    font-weight: 700;
}



/* General */
:root {
    --fgcolor: #606060;
    --bgcolor: #f8f4f6;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-blue: #00008B;
    --color-darkgreen: #009797;
    --color-green: #00C800;
    --color-turquois: #00C9FF;
    --color-pink: #FF1493;
    --color-red: #EB1084;
    --color-violet: #9556F0;
}



/* The Layout */
.contentWrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 1600px;
    padding: 0 2em;
}
.pageHeader .contentWrapper {
    position: relative;
    display: flex;
    padding-top: 2em;
}
.logo {
    flex: 1 1 25%;
    max-width: 350px;
    min-width: 210px;
    padding: 1em 0 2em 0;
    border-right: 2px solid var(--fgcolor);
}
.pageHeader .pagetitle {
    flex: 1 1 calc(75% - 180px);
    padding: 2.75em 0 0 2em;
}
#p-1 .pageHeader .pagetitle h1 {
    display: none;
}
.languageswitcher {
    flex: 1 1 180px;
    max-width: 180px;
    padding: 3em 0 0 0;
}
.languageswitcher ul {
    display:flex;
    justify-content: end;
}
.toggleMainnavi {
    position: absolute;
    top: 5em;
    right: 1em;
    width: 30px;
    height: 30px;
    visibility: hidden;
}
.toggleMainnavi button {
    display: inline-block;
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    background-image: url("../Icons/icon_navibar.svg");
    background-position: center;
    background-size: 140%;
    background-repeat: no-repeat;
    cursor: pointer;
}
.toggleMainnavi button[data-icon="xmark"] {
    background-image: url("../Icons/icon_xmark.svg");
}
.pageContent .contentWrapper {
    display: flex;
}
.contentleft {
    flex: 1 1 25%;
    max-width: 350px;
    min-width: 210px;
    min-height: 550px;
    padding: 0 2em 0 0;
    border-right: 2px solid var(--fgcolor);
}
.contentmain {
    flex: 1 1 75%;
    padding: 0 0 0 2em;
}
.contentmain .pagetitle {
    display: none;
}

@media only screen and (max-width: 800px) {
    .contentWrapper {
        padding: 0 1em;
    }
    .logo {
        min-width: unset;
        padding-top: 0;
        border-right: 2px solid transparent;
    }
    .pagetitle {
        padding: 0;
    }
    .pageHeader .pagetitle h1 {
        display: none;
    }
    .languageswitcher {
        padding: 0;
    }
    .contentmain .pagetitle {
        display: block;
    }
    .toggleMainnavi {
        visibility: visible;
    }
    .pageContent .contentWrapper {
        display: block;
    }
    .contentleft {
        position: absolute;
        left: 0;
        top: 2em;
        z-index: 10;
        padding: 1em 1em 0 1em;
        background-color: var(--bgcolor);
        border-top: 1px solid var(--fgcolor);
        border-bottom: 1px solid var(--fgcolor);
        transition: left 800ms;
    }
    .contentleft.hide {
        left: -250px;
    }
    .contentmain {
        flex: 1 1 100%;
        width: 100%;
        padding: 0;
    }
}

.copyright {
    margin-top: 2em;
    margin-bottom: 1em;
}



/* The Styling */
body {
    background-color: var(--bgcolor);
    color: var(--fgcolor);
    font-size: 20px;
    font-family: "PT Sans Narrow",Helvetica,sans-serif;
}

h1 {
    font-size: 1.75em;
    margin-top: 1.75em;
    margin-bottom: 1.75em;
}
h2 {
    font-size: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
h3 {
    font-size: 1.125em;
    margin-top: 1.125em;
    margin-bottom: 1.125em;
}

p,
li,
td,
dd,
label,
input,
textarea {
    font-size: 1em;
    line-height: 1.25em;
    margin-bottom: 1.25em;
}
.copyright p {
    font-size: 0.875em;
    margin-bottom: 0;
}

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

/* Links */
.languageswitcher a,
.contentmain a,
.pageFooter .contentWrapper a {
    color: var(--fgcolor);
    text-decoration: none;
}


/* CE Text&Media */
.ce-left.ce-intext .ce-gallery {
    margin-right: 2em;
}
.image-caption {
    padding-top: 0.875em;
    font-size: 0.875em;
    text-align: right;
}
.ce-textpic img {
    margin-top: 0.25em;
}
.frame header:has(time) {
    position: relative
}
.frame header h1 {
    margin-top: 0;
}

/* date in header of frame */
.ce-textpic:has(time) {
    overflow: visible;
}
.ce-nowrap .ce-bodytext:has(time) {
    overflow: visible;
}
.frame header p:has(time) {
    position: absolute;
    top: -40px;
    right: 0;
}
.ce-right.ce-intext .ce-gallery{
    margin-left: 2em;
}
.ce-left.ce-intext .ce-gallery{
    margin-right: 2em;
}
.ce-above .ce-gallery {
    margin-bottom: 2em;
}
.ce-below .ce-gallery {
    margin-top: 2em;
}

@media only screen and (max-width: 1200px) {
    .ce-intext.ce-nowrap {
        display: flex;
        flex-direction: column;
    }

    .ce-intext.ce-nowrap .ce-bodytext {
        order: 2;
    }

    .ce-intext.ce-nowrap .ce-gallery {
        order: 1;
        margin-bottom: 2em;
    }

    .ce-intext.ce-nowrap .ce-gallery img {
        width: 100%;
    }
}

.languageswitcher ul {
    padding: 0;
}
.languageswitcher li {
    list-style: none;
    display: inline-block;
}
.languageswitcher li:first-child {
    margin-left: 0;
}
.languageswitcher li.active {
    font-weight: bold;
}

.pagetitle {
    height: 2em;
    margin-bottom: 3em;
}
.pagetitle h1 {
    margin: 0;
    font-size: 1.5em;
}


/* Mainnavi */
.mainnavi > ul {
    list-style: none;
}
.mainnavi > ul > li {
    margin-left: 0;
    margin-bottom: 1em;
    font-size: 1em;
    line-height: 1.4;
}
.mainnavi > ul > li.active a {
    font-weight: bold;
}
.mainnavi a {
    color: var(--fgcolor);
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    #toggleMainnavi { right:auto; left:10px; top:-55px; }

    .mainnavi .li-level1 { display:block; margin:0.75em 0; padding:0.75em 0; border-bottom:1px solid #00715A; }
    .mainnavi > li:first-child { margin-top:0; padding-top:5px; }
    .mainnavi .a-level1 { border-bottom:none; font-size:1.5em; }
    .mainnavi .a-level1-active { padding:0 10px; background-color:#ecf5f0; }
    .mainnavi .a-level2-active { padding:0 10px; background-color:#ecf5f0; }
    .mainnavi .a-level3 { text-transform:none; }
    .mainnavi .a-level3-active { background-color:#ecf5f0; }

    .mainnavi .ul-level2,
    .mainnavi .ul-level3 { padding-left:20px; }
}

/* border lines */
.link-spacer-before::before {
    content:"---------------";
    display:block;
    padding-bottom: 1.0em;
}

/* coloured links */
/* blue */
.mainnavi > ul > li.blue.active a,
body.blue .languageswitcher .active a,
body.blue .contentmain a,
body.blue .pageFooter .contentWrapper a {
    color: var(--color-blue);
}
/* darkgreen */
.mainnavi > ul > li.darkgreen.active a,
body.darkgreen .languageswitcher .active a,
body.darkgreen .contentmain a,
body.darkgreen .pageFooter .contentWrapper a {
    color: var(--color-darkgreen);
}
/* green */
.mainnavi > ul > li.green.active a,
body.green .languageswitcher .active a,
body.green .contentmain a,
body.green .pageFooter .contentWrapper a {
    color: var(--color-green);
}
/* turquois */
.mainnavi > ul > li.turquois.active a,
body.turquois .languageswitcher .active a,
body.turquois .contentmain a,
body.turquois .pageFooter .contentWrapper a {
    color: var(--color-turquois);
}
/* pink */
.mainnavi > ul > li.pink.active a,
body.pink .languageswitcher .active a,
body.pink .contentmain a,
body.pink .pageFooter .contentWrapper a {
    color: var(--color-pink);
}
/* red */
.mainnavi > ul > li.red.active a,
body.red .languageswitcher .active a,
body.red .contentmain a,
body.red .pageFooter .contentWrapper a {
    color: var(--color-red);
}
/* violet */
.mainnavi > ul > li.violet.active a,
body.violet .languageswitcher .active a,
body.violet .contentmain a,
body.violet .pageFooter .contentWrapper a {
    color: var(--color-violet);
}


/* Buttons */
a.button {
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid var(--fgcolor);
    border-radius: 0.25em;
    background-color: transparent;
}
a.button:hover {
    opacity:0.8;
}
body.blue a.button {
    border-color: var(--color-blue);
    background-color: var(--color-blue);
    color: var(--color-white);
}
body.darkgreen a.button {
    border-color: var(--color-darkgreen);
    background-color: var(--color-darkgreen);
    color: var(--color-white);
}
body.green a.button {
    border-color: var(--color-green);
    background-color: var(--color-green);
    color: var(--color-white);
}
body.turquois a.button {
    border-color: var(--color-turquois);
    background-color: var(--color-turquois);
    color: var(--color-white);
}
body.pink a.button {
    border-color: var(--color-pink);
    background-color: var(--color-pink);
    color: var(--color-white);
}
body.red a.button {
    border-color: var(--color-red);
    background-color: var(--color-red);
    color: var(--color-white);
}
body.violet a.button {
    border-color: var(--color-violet);
    background-color: var(--color-violet);
    color: var(--color-white);
}

.mfp-bg { background-color:#f8f4f6 !important; opacity:1.0 !important; }
.green .mfp-bg { background-color:#484446  !important; }

.mfp-close,
.mfp-title,
.mfp-counter { color: #484446 !important; }
.green .mfp-close,
.green .mfp-title,
.green .mfp-counter { color: #f8f4f6 !important; }

@media (hover: hover) and (pointer: fine) {
    .mainnavi > ul > li.blue a:hover {
        color: var(--color-blue);
    }
    .mainnavi > ul > li.darkgreen a:hover {
        color: var(--color-darkgreen);
    }
    .mainnavi > ul > li.green a:hover {
        color: var(--color-green);
    }
    .mainnavi > ul > li.turquois a:hover {
        color: var(--color-turquois);
    }
    .mainnavi > ul > li.pink a:hover {
        color: var(--color-pink);
    }
    .mainnavi > ul > li.red a:hover {
        color: var(--color-red);
    }
    .mainnavi > ul > li.violet a:hover {
        color: var(--color-violet);
    }
}

@media only screen and (max-width: 980px) {
    .news-list-view .article { width:100%; margin-right:0; margin-bottom:50px; }
    .news-single .news-img-wrap { float:left; width:100%; margin-bottom:30px; }
    .news-single .news-text-wrap { float:left; width:100%; }
}

@media only screen and (max-width: 768px) {
    iframe { width:100%; height:inherit; }
}

@media only screen and (min-width: 1200px) {

}