/** globale Definitionen **/
:root {
    --fontFamily: Bitter, Arial, Verdana, Helvetica, sans-serif;

    --textColor: rgb(25, 51, 73);
    --borderColor: #000;
    --bulletColor: #000;

    --aColor: rgb(4, 65, 82);
    --aHoverColor: #00f;

    --btnBackColor: #00f;
    --btnBackHoverColor: #00f;
    --btnTextColor: #fff;
    --btnTextHoverColor: #fff;

    --fontSize: 18px;
    --lineHeight: 27.6px;

    --h1Size: 40px;
	--h1LineHeight: 48px;
    --h1Color: var(--black);
    --h1BackColor: transparent;

    --h2Size: 21px;
	--h2LineHeight: 31.5px;
    --h2Color: var(--blue);
    --h2BackColor: transparent;

    --h3Size: 21px;
	--h3LineHeight: 31.5px;
    --h3Color: var(--black);
    --h3BackColor: transparent;

    --padding: 46px; /* 4% of 900px */

    --aniCount: 3;
    --aniDelay: 3s;

    /* WebColors */
    --bgColorGrayLight: color-mix(in oklab, rgba(255, 255, 255, 1) 90%, rgba(37, 37, 37, 1) 3%); /*box background light gray*/
}

/** Schriften **/
@font-face {
    font-family: "Montserrat";
    src: url(../fonts/Montserrat-latin-basic.woff2) format("woff2");
    unicode-range: U+0020-007F,U+2000-206F;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/Montserrat-latin-supplement.woff2) format("woff2");
    unicode-range: U+00A0-00FF;
}

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/Montserrat-other.woff2) format("woff2");
    unicode-range: U+0100-1FFF,U+2070-E007F;
}

@font-face {
    font-family: "Inter";
    src: url(../fonts/Inter-latin-basic.woff2) format("woff2");
    unicode-range: U+0020-007F,U+2000-206F;
}

@font-face {
    font-family: "Inter";
    src: url(../fonts/Inter-latin-supplement.woff2) format("woff2");
    unicode-range: U+00A0-00FF;
}

@font-face {
    font-family: "Inter";
    src: url(../fonts/Inter-other.woff2) format("woff2");
    unicode-range: U+0100-1FFF,U+2070-E007F;
}

@font-face {
    font-family: "Bitter";
    src: url(../fonts/bitter-v39-latin-regular.woff2) format("woff2");
}


/** Reset **/
* {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
}

html,
body {
    background-color: #fff;
}

p {
    padding: 0;
    margin-bottom: 16px;
}

ul,
ol {
    padding: 0;
}

/** Standards **/
#wrapper {
    margin: auto;
    max-width: 900px;
    font-family: var(--fontFamily);
    font-family: "Bitter";
    font-size: var(--fontSize);
    font-weight: 200;
    line-height: var(--lineHeight);
    background-color: #fff;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    unicode-bidi: isolate;
}

h2:empty,
div:empty,
p:empty,
section:empty {
    display: none;
}

strong, b {
    font-weight: bold;;
}

a[href^="tel:"] {
    white-space: nowrap;
}
a {
    color: var(--aColor);
    font-weight: bold;
    text-decoration: none;
    text-decoration-line: none;

    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);

}
main a:hover {
    opacity: .75;
    transition-duration: .15s;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}

ul li::marker {
    color: var(--bulletColor);
}

body {
    color: var(--textColor);
}

h1 {
    color: var(--h1Color);
    background-color: var(--h1BackColor);
    font-family: "Montserrat", sans-serif;
    font-size: var(--h1Size);
    font-weight: bold;
	line-height: var(--h1LineHeight);
    margin-top: 36px; /* 56px */
    margin-bottom: 8px; /* 12px */
}
h2 {
    color: var(--h2Color);
    background-color: var(--h2BackColor);
    font-family: "Montserrat", sans-serif;
    font-size: var(--h2Size);
    font-weight: bold;
	line-height: var(--h2LineHeight);
    margin-bottom: 4.25px;

}
h3 {
    color: var(--h3Color);
    background-color: var(--h3BackColor);
    font-family: "Montserrat", sans-serif;
    font-size: var(--h3Size);
    font-weight: bold;
	line-height: var(--h3LineHeight);
}

.btn {
    background-color: var(--btnBackColor);
    color: var(--btnTextColor);
}

.btn:hover {
    background-color: var(--btnBackHoverColor);
    color: var(--btnTextHoverColor);
}

.noWrap {
    white-space: nowrap;
}

/* start slider 3 images */

#imgHeader {
    display: grid;
    grid-template-columns: 100%;
    img {
        grid-row-start: 1;
        grid-column-start: 1;
    }
    img:not(:first-child) {
        opacity: 0;
    }
}

#slider_1 {
    width: 100%;
    animation: fade calc( var( --aniDelay ) * var( --aniCount ) ) infinite ease-in-out;
}
#slider_2 {
    width: 100%;
    animation: fade calc( var( --aniDelay ) * var( --aniCount ) ) infinite ease-in-out;
    animation-delay: calc( var( --aniDelay ) );
}
#slider_3 {
    width: 100%;
    animation: fade calc( var( --aniDelay ) * var( --aniCount ) ) infinite ease-in-out;
    animation-delay: calc( var( --aniDelay ) * 2 );
}

@keyframes fade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    30%  { opacity: 1; }
    40%  { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade2 {
    0%   { width: 100%; margin-left: 0;}
    10%  { width: 100%; margin-left: 0;}
    30%  { width: 120%; margin-left: -2.5%; }
    40%  { width: 100%; margin-left: -2.5%; }
    100% { width: 100%; margin-left: -2.5%; }
}
/* end slider 3 images */

header {

}

header #logos {
    padding: 25px; /* 4% */
    padding-top: 25px;
    padding-bottom: 19px;

    /*display: flex;*/
    gap: var(--padding); /* 4% */

    background-image: url(../img/header/bg_header_max_900x1000.png);
    background-size: 150% auto;
    background-position-x: 186px;
    background-position-y: 2px;
}

header #logos #dzaLogo {
    height: 66px;
    margin-left: 26px;
}

#claim {
	min-height: 100px;
    height: auto;
	width: 60%;

    margin-top: -167px;
    margin-bottom: 36px;
    margin-left: -32px;

    padding: var(--padding); /* 4% */

    background: #00bdb3;
    background: linear-gradient(120deg, #00bdb3 0%, #06657f 30%, #1c3d4d 60%, #34303d 100%);
    /*clip-path: polygon(0 0%, 100% 0, 93% 100%, 6% 100%);*/
    clip-path: polygon(0 0, 100% 4%, 95% 100%, 7% 100%);
    color: #fff;
    z-index: 1;
}

#claim h2 {
    font-family: "Montserrat", sans-serif;
    font-size: var(--h1Size);
    font-size: 30px;
    font-weight: bold;
	line-height: 36px;
}

#claim p {
     font-family: "Bitter", sans-serif;
     margin-bottom: 0;
}

.desktop {
    display: block;
}

.mobile {
    display: none;
}

main {
    padding: var(--padding); /* 4% */
    padding-bottom: 0;

    border-left: 1px solid #00bdb3;
    border-image: linear-gradient(
		to bottom, #34303d, #00bdb3 100%
	) 0 100 0 100 stretch;

    border-right: 1px solid #34303d;

    /*margin-bottom: 36px;*/
}

section {
    margin-bottom: 18px;
}

#title {
    margin-bottom: 5px;
}

#title h2 {
    font-family: Bitter;
    font-weight: 400;
    font-size: 23px;
    line-height: 30px;
    margin-top: -6px;
    margin-bottom: 16px;
}

ul {
    margin: 26.25px 0;
    margin-block-end: 26.25px;
    margin-block-start: 26.25px;

    padding-inline-start: 34.125px;
    padding-left: 21.125px /*34.125px*/; /* 1.5% of 900px */

    list-style-position: outside;
    list-style-type: disc;

    tab-size: 4;
}

section div ul:first-child {
    margin-top: 0;
}

li {
    margin-bottom: 4px; /* 10.5px 1.5% 0 */
}

#spacer {
    height: 0;
}

#application div {
    margin-right: 55px;
    padding-bottom: 6px;
}

#application,
footer {
    padding: var(--padding); /* 4% */
    margin-left: calc(var(--padding) * -1); /* 4% */
    margin-right: calc(var(--padding) * -1); /* 4% */
    margin-bottom: 0;
}

#application a,
footer a {
    color: #fff;
}

#application {
    background: #00bdb3;
    background: linear-gradient(120deg, #00bdb3 0%, #06657f 30%, #1c3d4d 60%, #34303d 100%);
    color: #fff;
    padding-bottom: 32px;
    /* font-weight: 800; */
}

.button {
    border: 1px solid #fff;
    font-weight: 800;
    min-height: 48px;
    display: inline-block;
    padding: 15px 30px;
    background: transparent;
    transition: all .3s ease-in-out;
    color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
}

.button:hover {
    background: #029eb2;
    background-color: rgb(2, 158, 130);
     color: #fff;
}

.button::selection {
     background-color: rgb(2, 158, 130);
     color: #fff;
}

.button p {
    margin-bottom: 0;
}

footer {
    background: rgb(25, 51, 73);
    color: #fff;
    padding-top: 12px;
    padding-bottom: 12px;
}

footer p {
    margin-bottom: 0;
}

footer a {
    transition: all .3s ease-in-out;
}

footer a:active {
    background: #029eb2;
}

footer a:hover {
    color: #21BDD2;
}

footer:visited {
    transition: all .3s ease-in-out;
}

@media screen and (max-width: 600px ) {
    #claim {
        width: 90%;
        margin-left: 0;
        margin-top: -123px;
    }

    main {
        padding: 24px;
    }

    #application, footer {
       margin-right: -24px;
    }
}

@media screen and (max-width: 500px ) {
    /*
    #claim {
        clip-path: none;
        width: 100%;
    }
        */
}

@media screen and (max-width: 420px ) {
    #claim {
        padding: 33px;
        padding-top: 22px;
        padding-bottom: 22px;
        margin-top: -80px;
        margin-top: -22%;
    }
    #claim h2 {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 0;
    }

     #claim p {
        font-size: 0;
        line-height: 0;
     }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    header #logos #dzaLogo {
        margin-left: 6px;
    }

    h1 {
        font-size: 32px;
        line-height: 38px;
    }

    footer {
        display: none;
    }
    footer p a {
        font-size: 12px;
    }
}