@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: "Lato";
    src: url("../../../fonts/Lato-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Playfair Display";
    src: url("../../../fonts/PlayfairDisplay-VariableFont_wght.ttf");
    font-weight: 400;
    font-style: normal;
}

:root
{
    /**** colours ***/
    --primaryclr:#ec7404;
    --secondaryclr: #b5d8af;
    --kbblack: #2E2E3E;
    --kbgrey: #A5ACAF;
    --kblightGrey: #E3E1E2;
    --bs-primary: #b5d8af;
    --bs-secondary: #666666;
    --bs-dark: #1E1E1E;
    --bs-brown: #b6280e;
    --bs-transparent: transparent;
    --bs-light: #E3E1E2;
    --bg-clr: #F0F0F0;
    --orange: #e94f2d;
    --red: #DD2222;
    --imgTextRightBG: #666666;
    --imgTextLeftBG: #1E1E1E;
    --imgTextLeftColor: #ffffff;
    --mobileMainMenuBG: transparent;

    /*** sizes ***/
    --maxMobileMenuWidth: 440px;
    --contentWidth: 75rem;
    --headerHeight: 8rem;
    --logoWidth: 10rem;
    --logoHeight: 4rem;
    --stoererSMIconWidth: 2.5em;

    /*** fonts ***/
    --baseFontSize: 16px;
    --stoererFontSize: 1rem;
    --defaultFont: 'Lato', Arial, sans-serif;
    --headerFont: 'Playfair Display', sans-serif;

    /*** other, timer, etc. ***/
    --mobileMenuTransitionTime: 0.5s;
}

body#page.unconfigured
{
    --teaserHeight: calc(95vh - 200px);
    padding-top: 0;
}

.unconfigured #teaserWrapper
{
    top: 0;
}

a
{
    color: var(--bs-primary);
}

main a:hover,
#teaser a:hover
{
    border-bottom: 3px var(--red) solid;
    color: var(--red);
}

h1, h2, h3
{
    color: var(--kbblack);
}

#logo
{
    display: flex;
    align-items: center;
    top: 0.1rem;
    left: -0.1rem;
    margin-right: auto;
    height: var(--logoHeight);

    transition: all 0.8s ease-in-out;
    transition-delay: 0.4s;
}

#logo img
{
    padding: 0.2em 0.3em;
    box-shadow: unset;
    background-color: white;
}

#headerWrapper
{
    background-color: var(--bs-primary);
}

#header
{
    gap: 1.5em;
    justify-content: flex-start;
    background-color: var(--bs-transparent);
    height: calc(var(--headerHeight) - var(--logoHeight));
}

#topBarWrapper
{
    position: relative;
    display: flex;
    height: calc(var(--logoHeight) + 0.3rem);
    background-color: white;
    color: var(--red);
}

#topBarWrapper *
{
    color:inherit;
}

#topBar
{
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: var(--contentWidth);
    margin-left: auto;
    margin-right: auto;
}

#topBar div.csc-frame-default
{
    display: revert;
    width: fit-content;
}

.topContent
{
    max-height: 100%;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-top: 0.4em;
    border-right: 1px #AAA solid;
    overflow: hidden;
}

.topContent:last-child
{
    border-right: none;
}

.topContent,
.topContent .content
{
    width: fit-content;
}

.topContent header
{
    display: none;
}

.topContent p
{
    padding-top: 0;
    line-height: 1;
}

.topContent p:last-child
{
    padding-bottom: 0;
}

.topContent a,
.topContent a:visited
{
    font-weight: 900;
}

.topContent a:hover
{
    color: var(--bs-brown);
    border-bottom: 3px var(--bs-brown) solid;
}

#menuOuterWrapper
{
    flex-grow: 1;
    max-width: var(--contentWidth);
}

#mainMenu
{
    gap: 0;
}

#mainMenu li.level1:hover a.menuLinkLevel1
{
    background-color: #FFFFFF;
    color: var(--primaryclr);
}

#mainMenu a.menuLinkLevel1
{
    color: #FFFFFF;
}

#mainMenuWrapper li.level1
{
    text-align: left;
}

#mainMenu a:hover
{
    color: var(--bs-primary) !important;
}

.toggle-button
{
    right: 0.6em;
    top: 1.35em;
    font-size: 0.8em;
    transform: scale(0.8);
}

#teaserWrapper
{
    z-index: 1;
}

.teaserText
{
    background-color: rgba( 240, 240, 240, 0.8 );
}

.teaserHeader
{
    color: var(--bs-dark);
    letter-spacing: 3px;
}

.teaserHeader.text-center
{
    margin-left: auto;
    margin-right: auto;
}

.teaserHeader.text-right
{
    margin-left: auto;
}

h1.teaserHeader
{
    text-transform: uppercase;
}

#mainContent
{
    position: relative;
}


#unconfiguredContent
{
    position: relative;
    min-height: 50vh;
    padding-top: 3.5rem;
    background-color: var(--mainContentBG);
    z-index: 1;
}

#wave
{
    top: 0;
    bottom: auto;
    margin-bottom: 0.5em;
    background-image: url("images/wavebg-grey.png");
    transform: translate(0, -66%);
    opacity: 0.99;
}

.blueWave #wave
{
    background-image: url("images/wavebg-blue.png");
}

a.moreLink,
a.moreLink:visited
{
    padding-left: 1.2em;
    padding-right: 1.2em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
    background: var(--bs-primary);
    color: white;
}

a.moreLink:hover
{
    background: var(--bs-secondary);
    /*color: var(--primaryclr);*/
    border-bottom: none;
}

#footerWrapper
{
    background-color: var(--bs-secondary);
}

#footer
{
    flex-flow: column;
    gap: unset;
    background-color: inherit;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

#footerComponents
{
    flex-flow: row;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
}

#footerComponents > *
{
    flex-shrink: 1;
}

#bottom-menu
{
    width: fit-content;
}

.footerAddressHeader
{
    padding-top: 0;
    padding-bottom: 0.4em;
    font-size: 1.2em;
    letter-spacing: 2px;
}

.footerAddress,
.footerAddressBody
{
    display: flex;
    flex-flow: column;
    gap: 0;
}

.footerAddressBody > p
{
    margin: 0;
}

.footerAddressBody p.phone,
.footerAddressBody p.address,
.footerAddressBody p.email
{
    padding-left: 1.4em;
}

.footerAddressBody p.pdf:before,
.footerAddressBody p.weblink:before,
.footerAddressBody p.address:before,
.footerAddressBody p.phone:before,
.footerAddressBody p.email:before
{
    top: 0.3em;
    font-size: 0.9em;
}

@media only screen and (max-width: 800px)
{
    #wave
    {
        top: -2em;
        background-size: 100% auto;
    }
}

@media only screen and (max-width: 760px)
{
    #header
    {
        max-width: 100%;
    }
    #menuOuterWrapper
    {
        position: relative;
        margin-left: 1.5em;
    }
    #mainMenuWrapper ul.level1
    {
        background-color: var(--bs-light);
        border-bottom-left-radius: 0.5em;
    }

    #mainMenu a.menuLinkLevel1
    {
        display: block;
        padding-top: 0.9rem;
        color: var(--kbblack);
    }
    #mainMenu a.menuLinkLevel1:hover
    {
        color: var(--bs-primary)
    }
    #footer
    {
        text-align: left;
    }
    .teaserHeader
    {
        letter-spacing: 2px;
    }
}

@media screen and (max-width: 760px)
{
    #menuOuterWrapper
    {
        margin-right: 0.5em;
    }
     #mainMenuWrapper
     {
         background-color: white;
     }
    .toggle-button .bar
    {
        background-color: var(--secondaryclr);
    }
}

@media only screen and (max-width: 580px)
{
    .teaserHeader
    {
        word-break: unset;
    }
}

@media (aspect-ratio <= 1.33)
{
    :root
    {
        --teaserHeight: calc(75vh - var(--headerHeight) - 3rem);
    }
    .teaserTextWrapperType8,
    .teaserTextWrapperType9,
    .teaserTextWrapperType10
    {
        bottom: 1rem;
    }
}

@media (aspect-ratio >= 1.65)
{
    :root
    {
        --teaserHeight: calc(85vh - var(--headerHeight) - 3rem);
    }
    .teaserTextWrapperType8,
    .teaserTextWrapperType9,
    .teaserTextWrapperType10
    {
        bottom: 1rem;
    }
}

@media (aspect-ratio >= 2)
{
    :root
    {
        --teaserHeight: calc(100vh - var(--headerHeight) - 1rem);
    }
}
@media (max-height: 400px)
{
    :root
    {
        --teaserHeight: calc(100vh - var(--headerHeight) - 3rem);
    }
}

@media (max-height: 360px)
{
    :root
    {
        --teaserHeight: calc(100vh - var(--headerHeight) - 1rem);
    }
    .teaserTextWrapperType8,
    .teaserTextWrapperType9,
    .teaserTextWrapperType10
    {
        bottom: -1rem;
    }
}

@media (min-height: 2200px)
{
    :root
    {
        --teaserHeight: 45vh;
    }
}