/*------------------------------*/
/* Konfiguration:               */
/*------------------------------*/

:root {
    --layout-x-margin: 120px;
    --layout-y-margin:  80px;

    --footer-layout-y-margin:  50px;

    --font-family-headlines: Zilla,       serif;
    --font-family:           Nunito, sans-serif;
    --font-size: 18px;
    --line-height: 1.4em;

    --font-color: #000000;

    --content-background-color-1: #eeeeee;
    --content-background-color-2: #93b8c8;
    --content-background-color-3: #7c7469;
    --background-bottom-offset: 120px;

    --main-title-top-position: 40%;

    --paragraph-spacing: 16px;

    --h1-font-color: #000000;
    --h2-font-color: #000000;
    --h3-font-color: #000000;
    --h4-font-color: #000000;

    --h1-font-size: 60px;
    --h2-font-size: 45px;
    --h3-font-size: 30px;
    --h4-font-size: 32px;

    --counter-font-color: #0b4225;
    --counter-font-size: 100px;

    --link-font-color: #0b4225;
    --link-hover-color: #c4c4c4;

    --figcaption-font-color: #ffffff;
    --figcaption-link-font-color: #ffffff;
    --figcaption-link-hover-color: #ffffff;

    --button-background-color: #ffffff;
    --button-hover-background-color: #f8f8f8;

    --mainmenu-font-color: #ffffff;
    --mainmenu-hover-color: #93b8c8;
    --mainmenu-background-color: #7c7469;

    --footer-font-color: #ffffff;
    --footer-background-color: #7c7469;

    --footermenu-font-color: #ffffff;
    --footermenu-hover-color: #ffffff;

    --uplift-top: -160px;
    --uplift-left: 30%;

    --teaserMarginTop: 0px;
}

/*------------------------------*/
/* Schriftarten einbinden        :*/
/*------------------------------*/

/*

@font-face {
    font-family: 'Montserrat';
    src: url('../../fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 600;
    src: url('../../fonts/Montserrat-Semibold.ttf') format('truetype');
}

*/

@font-face {
    font-family: 'Zilla';
    font-weight: 200;
    src: url('../../fonts/Zilla_Slab/ZillaSlab-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Nunito';
    font-weight: 200;
    src: url('../../fonts/Nunito_Sans/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('truetype');
}

/*------------------------------*/
/* Basics:                      */
/*------------------------------*/

/* apply a natural box layout model to all elements, but allowing components to change (Paul Irish) */
html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

.fullwidth {
    width: 100%;
    height: auto;
    display: block;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.pos-rel {
    position: relative;
}

.flexbox {
    display: flex;
}

.flexitem {
    flex: 1;
}

body {
    color: var(--font-color);
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: 200;

    max-width: 1920px;
    margin: 0 auto;
}

h1 {
    font-family: var(--font-family-headlines);
    color: var(--h1-font-color);
    font-size: var(--h1-font-size);
    line-height: var(--line-height);
    font-weight: 200;
    padding-right: 0.5em;
}

#teaser h1,
figcaption * {
    color: #ffffff;
}

figcaption h1,
figcaption h2,
figcaption h3,
figcaption h4 {
    text-transform: uppercase;
}

h2 {
    font-family: var(--font-family-headlines);
    color: var(--h2-font-color);
    font-size: var(--h2-font-size);
    line-height: var(--line-height);
    font-weight: 200;
}

h3 {
    font-family: var(--font-family-headlines);
    color: var(--h3-font-color);
    font-size: var(--h3-font-size);
    line-height: var(--line-height);
    font-weight: 200;
    letter-spacing: 1px;
    text-transform: uppercase;
}

h4 {
    font-family: var(--font-family-headlines);
    color: var(--h4-font-color);
    font-size: var(--h4-font-size);
    line-height: var(--line-height);
    font-weight: 400;
}

p {
    margin: var(--paragraph-spacing) 0;
}

pre,
pre a {
    font-size: 14px!important;
    white-space: pre-wrap;
}

.moreLink {
    margin: calc(2 * var(--paragraph-spacing)) 0;
}

figure {
    margin: 0;
}

address {
    font-style: normal;
}

/* Schriftfarbe weiß bei dunklen Hintergründen */

.styleblueBG              p,
.styleblueBGBottomOffset  p,
.styleblueBGLeftf         p,
.styleblueBGRight         p,
.stylebeigeBG             p,
.stylebeigeBGBottomOffset p,
.stylebeigeBGLeftf        p,
.stylebeigeBGRight        p,
.styleblueBG              h1,
.styleblueBGBottomOffset  h1,
.styleblueBGLeftf         h1,
.styleblueBGRight         h1,
.stylebeigeBG             h1,
.stylebeigeBGBottomOffset h1,
.stylebeigeBGLeftf        h1,
.stylebeigeBGRight        h1,
.styleblueBG              h2,
.styleblueBGBottomOffset  h2,
.styleblueBGLeftf         h2,
.styleblueBGRight         h2,
.stylebeigeBG             h2,
.stylebeigeBGBottomOffset h2,
.stylebeigeBGLeftf        h2,
.stylebeigeBGRight        h2,
.styleblueBG              h3,
.styleblueBGBottomOffset  h3,
.styleblueBGLeftf         h3,
.styleblueBGRight         h3,
.stylebeigeBG             h3,
.stylebeigeBGBottomOffset h3,
.stylebeigeBGLeftf        h3,
.stylebeigeBGRight        h3,
.styleblueBG              h4,
.styleblueBGBottomOffset  h4,
.styleblueBGLeftf         h4,
.styleblueBGRight         h4,
.stylebeigeBG             h4,
.stylebeigeBGBottomOffset h4,
.stylebeigeBGLeftf        h4,
.stylebeigeBGRight        h4 {
    color: white!important;
}

.styleblueBG              h1:after,
.styleblueBGBottomOffset  h1:after,
.styleblueBGLeftf         h1:after,
.styleblueBGRight         h1:after,
.stylebeigeBG             h1:after,
.stylebeigeBGBottomOffset h1:after,
.stylebeigeBGLeftf        h1:after,
.stylebeigeBGRight        h1:after,
.styleblueBG              h2:after,
.styleblueBGBottomOffset  h2:after,
.styleblueBGLeftf         h2:after,
.styleblueBGRight         h2:after,
.stylebeigeBG             h2:after,
.stylebeigeBGBottomOffset h2:after,
.stylebeigeBGLeftf        h2:after,
.stylebeigeBGRight        h2:after,
.styleblueBG              h3:after,
.styleblueBGBottomOffset  h3:after,
.styleblueBGLeftf         h3:after,
.styleblueBGRight         h3:after,
.stylebeigeBG             h3:after,
.stylebeigeBGBottomOffset h3:after,
.stylebeigeBGLeftf        h3:after,
.stylebeigeBGRight        h3:after,
.styleblueBG              h4:after,
.styleblueBGBottomOffset  h4:after,
.styleblueBGLeftf         h4:after,
.styleblueBGRight         h4:after,
.stylebeigeBG             h4:after,
.stylebeigeBGBottomOffset h4:after,
.stylebeigeBGLeftf        h4:after,
.stylebeigeBGRight        h4:after {
    border-color: white;
}

/* Figcaption */

.stylefigcaption figure {
    position: relative;
}

.stylefigcaption figure figcaption {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 5%;
    padding-bottom: 3%;
    background-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0) 80%);
}

.stylefigcaption figure figcaption * {
    color: var(--figcaption-font-color);
}

.stylefigcaption figure figcaption > :first-child {
    width: 50%;
    margin-top: auto;
    margin-bottom: 0;
}

.stylefigcaption figure figcaption > :last-child {
    display: inline-block;
    border-bottom: 3px solid var(--figcaption-font-color);
}

/* Buttons */

.button {
    color: var(--link-font-color);
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
    display: inline-block;
    padding: 28px 52px;
    border: 1px solid var(--link-font-color);
    background-color: var(--button-background-color);
}

.button i {
    font-size: 2em;
    margin-right: 1rem;
    vertical-align: -7px;
}

.button:hover {
    background-color: var(--button-hover-background-color);
}

/* Info-Element "More information coming soon." */

.info {
    color: #ffffff;
    border: 1px solid #acacac;
    background-color: #739282;
    padding: 40px 25px 40px 75px;
    position: relative;
    display: inline-block;
}

.info:before {
    color: #ffffff;
    font-family: "Font Awesome 6 Free";
    font-size: 2em;
    content: "\f110";
    position: absolute;
    left: 25px;
    top: 40px;
}

/* Bilder ausgrauen (nur im Main-Bereich, nicht im Header) */
/*
main img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition-property: all;
    transition-duration: 0.3s;
}

main img:hover,
main figure:hover img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}
*/
/* Link Styles */

form p.pdf:before,
form p.weblink:before,
form p.address:before,
form p.phone:before,
form p.email:before,
input.powermail_submit,
main :not(figure) > a:link,
main :not(figure) > a:visited {
    color: var(--link-font-color);
    font-size: var(--font-size);
    font-weight: normal;
    text-decoration: none;
    border-width: 0 0 3px 0;
    border-style: solid;
    border-color: var(--link-font-color);

    cursor: pointer;

    background-color: var(--link-hover-color);
    background-image: linear-gradient(90deg, var(--link-font-color) 0%, var(--link-font-color) 100%);
    background-repeat: no-repeat;
    background-position: 0 top;

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    transition: background-position .4s ease-out;

    padding: 0 60px 0 0;
}

/* Link-Schriftfarbe weiß bei dunklen Hintergründen */

.styleblueBG              :not(figure) > a:link,
.styleblueBGBottomOffset  :not(figure) > a:link,
.styleblueBGLeftf         :not(figure) > a:link,
.styleblueBGRight         :not(figure) > a:link,
.stylebeigeBG             :not(figure) > a:link,
.stylebeigeBGBottomOffset :not(figure) > a:link,
.stylebeigeBGLeftf        :not(figure) > a:link,
.stylebeigeBGRight        :not(figure) > a:link,
.styleblueBG              :not(figure) > a:visited,
.styleblueBGBottomOffset  :not(figure) > a:visited,
.styleblueBGLeftf         :not(figure) > a:visited,
.styleblueBGRight         :not(figure) > a:visited,
.stylebeigeBG             :not(figure) > a:visited,
.stylebeigeBGBottomOffset :not(figure) > a:visited,
.stylebeigeBGLeftf        :not(figure) > a:visited,
.stylebeigeBGRight        :not(figure) > a:visited {
    background-image: linear-gradient(90deg, white 0%, white 100%);
}

.styleblueBG              :not(figure) > a:link,
.styleblueBGBottomOffset  :not(figure) > a:link,
.styleblueBGLeftf         :not(figure) > a:link,
.styleblueBGRight         :not(figure) > a:link,
.stylebeigeBG             :not(figure) > a:link,
.stylebeigeBGBottomOffset :not(figure) > a:link,
.stylebeigeBGLeftf        :not(figure) > a:link,
.stylebeigeBGRight        :not(figure) > a:link,
.styleblueBG              :not(figure) > a:visited,
.styleblueBGBottomOffset  :not(figure) > a:visited,
.styleblueBGLeftf         :not(figure) > a:visited,
.styleblueBGRight         :not(figure) > a:visited,
.stylebeigeBG             :not(figure) > a:visited,
.stylebeigeBGBottomOffset :not(figure) > a:visited,
.stylebeigeBGLeftf        :not(figure) > a:visited,
.stylebeigeBGRight        :not(figure) > a:visited {
    border-color: white;
}

/* Hover-Effekt für normale Links */

main :not(figure) a:hover,
main :not(figure) a:focus {
    color: var(--link-hover-color);
    border-bottom: 3px solid var(--link-hover-color)!important;
    background-position: 400px top;
}

/* Hover-Effekt für den Submit-Button im Kontaktformular */

input.powermail_submit:hover {
    color: var(--link-hover-color);
    border-bottom: 3px solid var(--link-hover-color);
    background-position: 100px top;
}

/* Hover-Effekt für die Links im Kontaktformular */

form p.pdf:hover:before,
form p.weblink:hover:before,
form p.address:hover:before,
form p.phone:hover:before,
form p.email:hover:before {
    color: var(--link-hover-color);
    border-bottom: 3px solid var(--link-hover-color);
    background-position: 50px top;
}

/* Waagrechter Strich zwischen Überschrift und Unterüberschrift */

main header h2 {
    position: relative;
}

main header h2::after {
    content: " ";
    display: block;
    width: 90px;
    border: 2px solid var(--h2-font-color);
    position: absolute;
    left: 0;
    top: calc(var(--h2-font-size) * -0.4);
}

main .ce-headline-right::after {
    left: auto;
    right: 0;
}

/*------------------------------*/
/* Header:                      */
/*------------------------------*/

.main-title {
    position: absolute;
    z-index: 100;
    left: var(--layout-x-margin);
    top: var(--main-title-top-position);
}

.down-button {
    position: absolute;
    z-index: 100;
    left: var(--layout-x-margin);
    bottom: 2vw;
}

/*------------------------------*/
/* Main:                        */
/*------------------------------*/

/**/
/* Die zwei Hauptabschnitte des Inhaltsbereichs (main) */
/**/

/* Zunächst der Teil ganz oben unter dem Headerbild */

#main-top {
    position: relative;
    min-height: calc(-1 * var(--uplift-top));
    margin-top: var(--uplift-top);
    margin-left: var(--uplift-left);
}

#main-top [class*='contentItem'] {
    padding:   var(--layout-y-margin) var(--layout-x-margin) var(--layout-y-margin) var(--layout-x-margin);
    background-color: #ffffff;
}
#main-top:has(.stylegreyBG) [class*='contentItem'] {
    background-color: var(--content-background-color-1);
}
#main-top:has(.styleblueBG) [class*='contentItem'] {
    background-color: var(--content-background-color-2);
}
#main-top:has(.stylebeigeBG) [class*='contentItem'] {
    background-color: var(--content-background-color-3);
}

#main-top [class*='contentItem'] + [class*='contentItem'] {
    margin-top: 0;
    padding-top: 10px;
}

/* Und hier der Hauptinhaltsbereich */

#main-content {
    position: relative;
    margin-top: var(--layout-y-margin);
    margin-bottom: var(--layout-y-margin);
}

#main-content [class*='contentItem'] {
    padding: 0 var(--layout-x-margin);
    margin: var(--layout-y-margin) 0;
}

#main-content [class*='contentItem'] > div {
    box-sizing: content-box;
}

#main-content [class*='contentItem'] > div * {
    box-sizing: border-box;
}

/**/
/* Content-Blöcke */
/**/

/* Header links neben Text */

.contentItemLayout1.contentItemtext .frame {
    display: flex;
    align-items: flex-start;
}

.contentItemLayout1.contentItemtext .frame > header {
    flex: 33% 0 0;
}

.contentItemLayout1.contentItemtext .frame > .contentBody {
    flex: 67% 0 0;
    margin-left: 3%;
}

/* Element mit halber Breite */

.contentItemLayout2 .articleInner
{
    width: 50%;
}

/* Header rechts neben Text */

.contentItemLayout3.contentItemtext .frame {
    display: flex;
    flex-direction: row-reverse;
}

.contentItemLayout3.contentItemtext .frame > .contentBody {
    flex: 67% 0 0;
}

.contentItemLayout3.contentItemtext .frame > header {
    flex: 33% 0 0;
    margin-left: 3%;
    text-align: right;
}

.contentItemLayout3.contentItemtext .frame > header h2::after {
    left: auto;
    right: 0;
}

/* Text unten ausrichten */

.contentItemLayout4 .ce-bodytext {
    display: flex;
    flex-direction: column;
}

.contentItemLayout4 .ce-bodytext p:first-of-type {
    margin-top: auto;
}

.contentItemLayout4 .ce-bodytext p:last-of-type {
    margin-bottom: -18px;
}

/**/
/* Modifikatoren (Nur für den Hauptinhaltsbereich!) */
/**/

/* GRAU */

/* Modifikatorklasse, die einen über die ganze Breite des Content-Blocks gehenden, grauen Hintergrund erzeugt */

#main-content .stylegreyBG {
    background-image: linear-gradient(to right, var(--content-background-color-1), var(--content-background-color-1));
    background-position: 0 0;
    background-repeat: no-repeat;
    padding-top: var(--layout-y-margin);
    padding-bottom: var(--layout-y-margin);
}

/* Modifikatorklasse, die einen über die ganze Breite des Content-Blocks gehenden, grauen Hintergrund erzeugt - mit Offset unten */

#main-content .stylegreyBGBottomOffset {
    background-image: linear-gradient(to right, var(--content-background-color-1), var(--content-background-color-1));
    background-position: 0 calc(-1 * var(--background-bottom-offset));
    background-repeat: no-repeat;
    padding-top: var(--layout-y-margin);
}

#main-content .stylegreyBGBottomOffset .ce-bodytext {
    padding-bottom: calc(var(--background-bottom-offset) + var(--layout-y-margin) / 2);
}

/* Etwas Abstand, wenn zwei Inhaltsblöcke mit Hintergrund über die ganze Breite aufeinander folgen */

#main-content .stylegreyBG + .stylegreyBG,
#main-content .stylegreyBG + .stylegreyBGBottomOffset,
#main-content .stylegreyBGBottomOffset + .stylegreyBG,
#main-content .stylegreyBGBottomOffset + .stylegreyBGBottomOffset {
    margin-top: var(--layout-y-margin);
}

/* Modifikatorklasse, die den linken Teil des Content-Blocks grau einfärbt (bis zum Viewportrand) */

#main-content .stylegreyBGLeft {
    padding-left: 0;
}

#main-content .stylegreyBGLeft :not(.ce-bodytext) > header {
    padding-left: var(--layout-x-margin);
}

#main-content .stylegreyBGLeft .contentBody > :not(.ce-right) > :first-child {
    padding-left: var(--layout-x-margin);
    background-color: var(--content-background-color-1);
}

#main-content .stylegreyBGLeft .contentBody > .ce-right > :last-child {
    padding-left: var(--layout-x-margin);
    background-color: var(--content-background-color-1);
}

#main-content .stylegreyBGLeft .contentBody > :not(.ce-right) > :first-child {
    padding-left: var(--layout-x-margin);
    background-color: var(--content-background-color-1);
}

#main-content .stylegreyBGLeft .contentBody > .ce-right .ce-bodytext {
    padding-right: 3%;
    padding-bottom: 3%;
}

#main-content .stylegreyBGLeft .contentBody > .ce-right .ce-bodytext > :last-child {
    margin-bottom: 0;
}

/* Modifikatorklasse, die den rechten Teil des Content-Blocks grau einfärbt (bis zum Viewportrand) */

#main-content .stylegreyBGRight {
    padding-right: 0;
}

#main-content .stylegreyBGRight .contentBody > :not(.ce-left) > :first-child {
    padding-right: var(--layout-x-margin);
    background-color: var(--content-background-color-1);
}

#main-content .stylegreyBGRight .contentBody > .ce-left > :last-child {
    padding-right: var(--layout-x-margin);
    background-color: var(--content-background-color-1);
}

#main-content .stylegreyBGRight .contentBody > :not(.ce-left) > :first-child {
    padding-right: var(--layout-x-margin);
    background-color: var(--content-background-color-1);
}

#main-content .stylegreyBGRight .contentBody > .ce-left .ce-bodytext {
    padding-left: 3%;
    padding-bottom: 3%;
}

#main-content .stylegreyBGRight .contentBody > .ce-left .ce-bodytext > :last-child {
    margin-bottom: 0;
}

/* BLAU */

/* Modifikatorklasse, die einen über die ganze Breite des Content-Blocks gehenden, grauen Hintergrund erzeugt */

#main-content .styleblueBG {
    background-image: linear-gradient(to right, var(--content-background-color-2), var(--content-background-color-2));
    background-position: 0 0;
    background-repeat: no-repeat;
    padding-top: var(--layout-y-margin);
    padding-bottom: var(--layout-y-margin);
}

/* Modifikatorklasse, die einen über die ganze Breite des Content-Blocks gehenden, grauen Hintergrund erzeugt - mit Offset unten */

#main-content .styleblueBGBottomOffset {
    background-image: linear-gradient(to right, var(--content-background-color-2), var(--content-background-color-2));
    background-position: 0 calc(-1 * var(--background-bottom-offset));
    background-repeat: no-repeat;
    padding-top: var(--layout-y-margin);
}

#main-content .styleblueBGBottomOffset .ce-bodytext {
    padding-bottom: calc(var(--background-bottom-offset) + var(--layout-y-margin) / 2);
}

/* Etwas Abstand, wenn zwei Inhaltsblöcke mit Hintergrund über die ganze Breite aufeinander folgen */

#main-content .styleblueBG + .styleblueBG,
#main-content .styleblueBG + .styleblueBGBottomOffset,
#main-content .styleblueBGBottomOffset + .styleblueBG,
#main-content .styleblueBGBottomOffset + .styleblueBGBottomOffset {
    margin-top: var(--layout-y-margin);
}

/* Modifikatorklasse, die den linken Teil des Content-Blocks grau einfärbt (bis zum Viewportrand) */

#main-content .styleblueBGLeft {
    padding-left: 0;
}

#main-content .styleblueBGLeft :not(.ce-bodytext) > header {
    padding-left: var(--layout-x-margin);
}

#main-content .styleblueBGLeft .contentBody > :not(.ce-right) > :first-child {
    padding-left: var(--layout-x-margin);
    background-color: var(--content-background-color-2);
}

#main-content .styleblueBGLeft .contentBody > .ce-right > :last-child {
    padding-left: var(--layout-x-margin);
    background-color: var(--content-background-color-2);
}

#main-content .styleblueBGLeft .contentBody > :not(.ce-right) > :first-child {
    padding-left: var(--layout-x-margin);
    background-color: var(--content-background-color-2);
}

#main-content .styleblueBGLeft .contentBody > .ce-right .ce-bodytext {
    padding-right: 3%;
    padding-bottom: 3%;
}

#main-content .styleblueBGLeft .contentBody > .ce-right .ce-bodytext > :last-child {
    margin-bottom: 0;
}

/* Modifikatorklasse, die den rechten Teil des Content-Blocks grau einfärbt (bis zum Viewportrand) */

#main-content .styleblueBGRight {
    padding-right: 0;
}

#main-content .styleblueBGRight .contentBody > :not(.ce-left) > :first-child {
    padding-right: var(--layout-x-margin);
    background-color: var(--content-background-color-2);
}

#main-content .styleblueBGRight .contentBody > .ce-left > :last-child {
    padding-right: var(--layout-x-margin);
    background-color: var(--content-background-color-2);
}

#main-content .styleblueBGRight .contentBody > :not(.ce-left) > :first-child {
    padding-right: var(--layout-x-margin);
    background-color: var(--content-background-color-2);
}

#main-content .styleblueBGRight .contentBody > .ce-left .ce-bodytext {
    padding-left: 3%;
    padding-bottom: 3%;
}

#main-content .styleblueBGRight .contentBody > .ce-left .ce-bodytext > :last-child {
    margin-bottom: 0;
}

/* BEIGE */

/* Modifikatorklasse, die einen über die ganze Breite des Content-Blocks gehenden, grauen Hintergrund erzeugt */

#main-content .stylebeigeBG {
    background-image: linear-gradient(to right, var(--content-background-color-3), var(--content-background-color-3));
    background-position: 0 0;
    background-repeat: no-repeat;
    padding-top: var(--layout-y-margin);
    padding-bottom: var(--layout-y-margin);
}

/* Modifikatorklasse, die einen über die ganze Breite des Content-Blocks gehenden, grauen Hintergrund erzeugt - mit Offset unten */

#main-content .stylebeigeBGBottomOffset {
    background-image: linear-gradient(to right, var(--content-background-color-3), var(--content-background-color-3));
    background-position: 0 calc(-1 * var(--background-bottom-offset));
    background-repeat: no-repeat;
    padding-top: var(--layout-y-margin);
}

#main-content .stylebeigeBGBottomOffset .ce-bodytext {
    padding-bottom: calc(var(--background-bottom-offset) + var(--layout-y-margin) / 2);
}

/* Etwas Abstand, wenn zwei Inhaltsblöcke mit Hintergrund über die ganze Breite aufeinander folgen */

#main-content .stylebeigeBG + .stylebeigeBG,
#main-content .stylebeigeBG + .stylebeigeBGBottomOffset,
#main-content .stylebeigeBGBottomOffset + .stylebeigeBG,
#main-content .stylebeigeBGBottomOffset + .stylebeigeBGBottomOffset {
    margin-top: var(--layout-y-margin);
}

/* Modifikatorklasse, die den linken Teil des Content-Blocks grau einfärbt (bis zum Viewportrand) */

#main-content .stylebeigeBGLeft {
    padding-left: 0;
}

#main-content .stylebeigeBGLeft :not(.ce-bodytext) > header {
    padding-left: var(--layout-x-margin);
}

#main-content .stylebeigeBGLeft .contentBody > :not(.ce-right) > :first-child {
    padding-left: var(--layout-x-margin);
    background-color: var(--content-background-color-3);
}

#main-content .stylebeigeBGLeft .contentBody > .ce-right > :last-child {
    padding-left: var(--layout-x-margin);
    background-color: var(--content-background-color-3);
}

#main-content .stylebeigeBGLeft .contentBody > :not(.ce-right) > :first-child {
    padding-left: var(--layout-x-margin);
    background-color: var(--content-background-color-3);
}

#main-content .stylebeigeBGLeft .contentBody > .ce-right .ce-bodytext {
    padding-right: 3%;
    padding-bottom: 3%;
}

#main-content .stylebeigeBGLeft .contentBody > .ce-right .ce-bodytext > :last-child {
    margin-bottom: 0;
}

/* Modifikatorklasse, die den rechten Teil des Content-Blocks grau einfärbt (bis zum Viewportrand) */

#main-content .stylebeigeBGRight {
    padding-right: 0;
}

#main-content .stylebeigeBGRight .contentBody > :not(.ce-left) > :first-child {
    padding-right: var(--layout-x-margin);
    background-color: var(--content-background-color-3);
}

#main-content .stylebeigeBGRight .contentBody > .ce-left > :last-child {
    padding-right: var(--layout-x-margin);
    background-color: var(--content-background-color-3);
}

#main-content .stylebeigeBGRight .contentBody > :not(.ce-left) > :first-child {
    padding-right: var(--layout-x-margin);
    background-color: var(--content-background-color-3);
}

#main-content .stylebeigeBGRight .contentBody > .ce-left .ce-bodytext {
    padding-left: 3%;
    padding-bottom: 3%;
}

#main-content .stylebeigeBGRight .contentBody > .ce-left .ce-bodytext > :last-child {
    margin-bottom: 0;
}

/**/
/* Counter */
/**/

/* Grundlegendes */

#main-content {
    counter-reset: item;
}

#main-content .contentItem header {
    counter-increment: item;
    position: relative;
}

.show-counter #main-content .contentItem header h2 {
    margin-bottom: 0
}

.show-counter #main-content .contentItem header h2::after {
    display: none;
}

/* Header links neben Text oder Bild */

.show-counter #main-content .contentItem:not(.contentItemLayout3) header {
    padding-left: calc(var(--counter-font-size) * 1.75);
    display: flex;
    flex-direction: column-reverse;
}

.show-counter #main-content .contentItem:not(.contentItemLayout3) header::after {
    content: " ";
    display: block;
    width: calc(var(--counter-font-size) * 1.6);
    border: 2px solid var(--h2-font-color);
    position: absolute;
    left: 0;
    top: calc(var(--counter-font-size) * 1.1);
}

.show-counter #main-content .contentItem:not(.contentItemLayout3) header::before {
    content: "0" counter(item);
    color: var(--counter-font-color);
    font-size: var(--counter-font-size);
    line-height: 1em;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

/* Header rechts neben Text oder Bild */

.show-counter #main-content .contentItem.contentItemLayout3 header {
    padding-right: 180px;
    display: flex;
    flex-direction: column-reverse;
    text-align: right;
}

.show-counter #main-content .contentItem.contentItemLayout3 header::after {
    content: " ";
    display: block;
    width: 160px;
    border: 2px solid var(--h2-font-color);
    position: absolute;
    right: 0;
    top: 110px;
}

.show-counter #main-content .contentItem.contentItemLayout3 header::before {
    content: "0" counter(item);
    color: var(--counter-font-color);
    font-size: var(--counter-font-size);
    line-height: 1em;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}

/* Bei Header links oder rechts neben dem Text die Aufteilung von 33% zu 67% ändern in 50% zu 50% */

.show-counter #main-content .contentItem header {
    flex: 50% 0 0;
}

.show-counter #main-content .contentItem .contentBody {
    flex: 50% 0 0;
}

/*------------------------------*/
/* Footer:                      */
/*------------------------------*/

footer {
    color: var(--footer-font-color);
    background-color: var(--footer-background-color);
    padding: var(--footer-layout-y-margin) var(--layout-x-margin) calc(var(--footer-layout-y-margin) / 2) var(--layout-x-margin);
    margin-top: var(--footer-layout-y-margin);
}

.footer-logo {
    text-align: center;
    line-height: 0;
}

.footer-contact {
    margin: var(--footer-layout-y-margin) 0 calc(var(--footer-layout-y-margin) / 2) 0;
}

.footer-contact ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.footer-contact li {
    flex: 1;
    display: flex;
    justify-content: center;
}

.footer-contact i {
    flex: 0;
    font-size: 22px;
    padding-top: 5px;
    padding-right: 15px;
    text-align: right;
}

.footer-contact a {
    flex: 0;
    color: white;
    font-size: var(--font-size);
    display: inline-block;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.footer-social {
    margin: calc(var(--footer-layout-y-margin) / 2) 0;
    text-align: center;
    padding-bottom: calc(var(--footer-layout-y-margin) / 2);
    border-bottom: 1px solid var(--footer-font-color);
}

.footer-social ul {
    list-style-type: none;
    padding: 0;
}

.footer-social li {
    display: inline-block;
    margin: 0 25px;
}

.footer-social a {
    color: white;
    font-size: var(--font-size);
}

/*------------------------------*/
/* Inhalt der Datei extra.css:  */
/*------------------------------*/


main
{
    min-height: 40vh;
}

.two-column-text
{
    display: flex;
}

.two-column-text > *
{
    flex-basis: 320px;
    flex-grow: 1;
}


.tx-powermail fieldset
{
    border: none;
    padding: 0;
    margin: 0;
}

.nolabel  .powermail_label,
.nolabel legend
{
    display: none;
}

form.nolabel
{
    display: grid;
    grid-template-areas:
            "data data textelements"
            "message message textelements"
            "gtc gtc textelements"
            "controls controls textelements";
    grid-template-columns: 1fr 1fr 2fr;
}

form.nolabel > fieldset:nth-of-type(1)
{
    grid-area: data;
}

form.nolabel > fieldset:nth-of-type(2)
{
    grid-area: message;
    margin-top: 2em;
}

form.nolabel > fieldset:nth-of-type(3)
{
    grid-area: gtc;
    margin-top: 2em;
}

form.nolabel > fieldset:nth-of-type(4)
{
    grid-area: controls;
    margin-top: 2em;
}

form.nolabel > fieldset:nth-of-type(5)
{
    grid-area: textelements;
    padding-left: var(--layout-x-margin);
}

form.nolabel > fieldset:nth-of-type(5) > div {
}

form.nolabel > fieldset:nth-of-type(1) {
    display: grid;
    grid-template-areas:
            "first-name last-name"
            "email phone";
    grid-template-columns: 1fr 1fr;
}

form.nolabel > fieldset:nth-of-type(1) > div:nth-of-type(1) {
    grid-area: first-name;
    padding-right: 1em;
}

form.nolabel > fieldset:nth-of-type(1) > div:nth-of-type(2) {
    grid-area: last-name;
}

form.nolabel > fieldset:nth-of-type(1) > div:nth-of-type(3) {
    grid-area: email;
    padding-right: 1em;
    margin-top: 2em;
}

form.nolabel > fieldset:nth-of-type(1) > div:nth-of-type(4) {
    grid-area: phone;
    margin-top: 2em;
}

form.nolabel .powermail_field input:not([type*="submit"]):not([type*="checkbox"]):not([type*="radio"]),
form.nolabel .powermail_field textarea {
    width: 100%;
    padding: 0.5em;
}

form.nolabel .powermail_field input:not([type*="submit"]),
form.nolabel .powermail_field input:not([type*="submit"]):focus-visible,
form.nolabel .powermail_field textarea,
form.nolabel .powermail_field textarea:focus-visible {
    font-family: var(--font-family);
    font-size: var(--font-size);
    border-style: solid;
    border-color: #c4c4c4;
    border-width: 0 0 1px 0;
    outline: none;
}

form.nolabel .powermail_field input:focus-visible,
form.nolabel .powermail_field textarea:focus-visible {
    background-color: var(--content-background-color-1);
}

/* Link-Styles für die Adress-, Phone- und E-Mail-Links im Kontaktformular */

#main-content p.pdf a,
#main-content p.weblink a,
#main-content p.address a,
#main-content p.phone a,
#main-content p.email a {
    border-bottom: 0;
    padding-right: 0;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--font-color);
    background-image: none;
    background-color: transparent;
}

p.pdf,
p.weblink,
p.address,
p.phone,
p.email
{
    position: relative;
    padding-left: 3em;
    margin: 3em 0;
}

#main-content p.pdf:before,
#main-content p.weblink:before,
#main-content p.address:before,
#main-content p.phone:before,
#main-content p.email:before {
    position: absolute;
    top: 0;
    left: 0;
    font-family: "Font Awesome 6 Free";
    font-size: 1.4em;
    border: 0;
    padding: 0;
}

p.pdf:before
{
    content: "\f1c1";
}

p.weblink:before
{
    content: "\f0ac";
}

p.address:before
{
    content: "\f3c5";
}

p.phone:before
{
    content: "\f095";
}

p.email:before
{
    content: "\f0e0";
}

/* Link-Styles für die Adress-, Phone- und E-Mail-Buttons außerhalb des Kontakt-Formulars  */

main:not(:has(.powermail_field)) p.pdf,
main:not(:has(.powermail_field)) p.weblink,
main:not(:has(.powermail_field)) p.address,
main:not(:has(.powermail_field)) p.phone,
main:not(:has(.powermail_field)) p.email {
    display: inline-block;
    margin: 24px 24px 0 0;
    padding: 0;
}

main:not(:has(.powermail_field)) p.pdf:last-of-type,
main:not(:has(.powermail_field)) p.weblink:last-of-type,
main:not(:has(.powermail_field)) p.address:last-of-type,
main:not(:has(.powermail_field)) p.phone:last-of-type,
main:not(:has(.powermail_field)) p.email:last-of-type {
    margin-right: 0;
}

main:not(:has(.powermail_field)) p.pdf a,
main:not(:has(.powermail_field)) p.weblink a,
main:not(:has(.powermail_field)) p.address a,
main:not(:has(.powermail_field)) p.phone a,
main:not(:has(.powermail_field)) p.email a {
    display: inline-block;
    color: var(--link-font-color);
    font-size: 18px;
    line-height: 22px;
    font-weight: normal;
    padding: 28px 52px 28px 72px!important;
    border: 1px solid var(--link-font-color)!important;
    background-color: var(--button-background-color)!important;
    position: relative;
}

main:not(:has(.powermail_field)) p.pdf:hover a,
main:not(:has(.powermail_field)) p.weblink:hover a,
main:not(:has(.powermail_field)) p.address:hover a,
main:not(:has(.powermail_field)) p.phone:hover a,
main:not(:has(.powermail_field)) p.email:hover a {
    background-color: var(--button-hover-background-color)!important;
}

main:not(:has(.powermail_field)) p.pdf:before,
main:not(:has(.powermail_field)) p.weblink:before,
main:not(:has(.powermail_field)) p.address:before,
main:not(:has(.powermail_field)) p.phone:before,
main:not(:has(.powermail_field)) p.email:before {
    content: "";
}

main:not(:has(.powermail_field)) p.pdf a::before,
main:not(:has(.powermail_field)) p.weblink a::before,
main:not(:has(.powermail_field)) p.address a::before,
main:not(:has(.powermail_field)) p.phone a::before,
main:not(:has(.powermail_field)) p.email a::before {
    position: absolute;
    top: 28px;
    left: 28px;
    font-family: "Font Awesome 6 Free";
    font-size: 1.4em;
    border: 0;
    padding: 0;
}

main:not(:has(.powermail_field)) p.pdf a:before {
    content: "\f1c1";
}

main:not(:has(.powermail_field)) p.weblink a:before {
    content: "\f0ac";
}

main:not(:has(.powermail_field)) p.address a:before {
    content: "\f3c5";
}

main:not(:has(.powermail_field)) p.phone a:before {
    content: "\f095";
}

main:not(:has(.powermail_field)) p.email a:before {
    content: "\f0e0";
}

/* Video auf der Startseite */

#teaser figure.video
{
    margin: 0;
}

@media (orientation: portrait)
{
    #teaser
    {
        max-height: calc(100vh - var(--teaserMarginTop));
        overflow: hidden;
    }
    #teaser video,
    #teaser video img
    {
        max-height: 100%;
        height: 100%;
        width: auto;
    }
    
}

/* Coding Freaks Cookie Manager */

:root {
    --cc-btn-primary-bg:       var(--content-background-color-2);
    --cc-btn-primary-hover-bg: var(--content-background-color-3);
    --cc-btn-secondary-bg:     var(--content-background-color-1);
}

.cf-cookie-openconsent {
    width: 50px;
    height: 52px;
}