/*
Theme Name: Kadence Block-Theme
Author: Jan Pferdmenges, KP&Z Werbeagentur GmbH
Author URI: http://www.kp-z.de/team.php
Description: Template für Kadence
Version: 0.1
License: commercial
*/



:root {
    --color-cyan: #009fe3;
    --color-gelb: #fdc100;
    --color-sky: #9ad5ef;
    --color-lightCyan: #cde9f5;
    --color-lighterCyan: #d7edf7;
    --color-lightestCyan: #e6f7fe;
	--color-text: #303030;
	--color-textCyan: #008fcc;
	--color-link: #0d4271;
	--color-hover: #FF8000;
	--color-line: #444;
	--color-shadow: #444;
    
    
    --bs-padding: 16px;
}


@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oregano:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap');



/*
**         FONTs Laden
*/

@font-face {
  font-family: 'Days One';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/days-one-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Days One'), local('DaysOne-Regular'),
       url('fonts/days-one-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/days-one-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/days-one-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/days-one-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/days-one-v7-latin-regular.svg#DaysOne') format('svg'); /* Legacy iOS */
}


/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-condensed-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-condensed-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v25-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}


/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}



/*
**   ALLGEMEINE CSS
*/


html, body {padding: 0; margin:0; background: white;  min-height: 100%;}
body {line-height: 1.6em;  color: var(--color-text); font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 18px; font-style: normal; }
h1, h2, h3, h4 {font-family: 'Days One', serif; color: var(--color-textCyan);}
h1,h2 { line-height: 1.1em; font-weight: 400;  margin-top:0; margin-bottom: 1em; font-size: 2rem;}
h3 {font-weight: 700; font-size: 1.3rem; line-height: 1.1em;}
:where(h1, h2, h3, h4) + p {margin-top:0;}
:where(h1, h2, h3, h4).colorWhite {color:white;}
a {color: var(--color-cyan); transition: 300ms; }
a:hover {color: var(--color-hover);}

p {margin-bottom: 0.5rem;}
figure {padding:0; margin:0;}
img {display: block;}
*, ::before, ::after {box-sizing: border-box;}


/*
**		Hintergründe
*/

.bgCyan {
    background-color: var(--color-cyan); color: white;
    h1, h2, h3, h4 {color: white;}
}
.bgLightCyan {background-color: var(--color-lightCyan);}
.bgLighterCyan {background-color: var(--color-lighterCyan);}
.bgLightestCyan {background-color: var(--color-lightestCyan);}


/*
 *     SECTIONS
 */

section {padding: 50px 0; position: relative; z-index:1;}

section:where(.bgLightCyan, .bgWhite, .bgLighterCyan, .bgLightestCyan, .bgCyan) {
    padding-bottom: 9.5vw; padding-bottom: calc(50px+ 8vw);
    &::before { /* top right bottom left */ 
        content: ''; position: absolute; top: calc(-8vw + 1px); left: 0; width: 0; height: 0;  border-style: solid; border-width: 0 0 8vw 100vw; border-color: transparent transparent var(--color-lightCyan) transparent;
    }
}

section.bgSky::before { border-color: transparent transparent var(--color-sky) transparent; }
section.bgWhite::before { border-color: transparent transparent white transparent; }
section.bgLighterCyan::before { border-color: transparent transparent var(--color-lighterCyan) transparent; }
section.bgLightestCyan::before { border-color: transparent transparent var(--color-lightestCyan) transparent; }
section.bgCyan::before { border-color: transparent transparent var(--color-cyan) transparent; }

section:nth-of-type(odd)::before {
  transform: scaleX(-1);
}

section:last-of-type::after {
    content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 0;  border-style: solid; border-width: 0 0 8vh 100vw; border-color: transparent transparent var(--color-textCyan); transparent;
}
section:last-of-type:nth-of-type(even)::after {
    transform: scaleX(-1);
}


/*
**		Header, TopBar und Primary Navigation
*/
header {margin-bottom: 60px;}

#EiLogo {
    width: 150px; position: fixed; right: -35px; top: -45px; z-index: 9999;
    img {width: 100%; height: auto; filter: drop-shadow(0 5px 8px rgba(0,0,0,0.35));}
}
#Topbar {
    height:60px; border-bottom: 1px solid var(--color-lighterCyan); position: fixed; top:0; left: 0; width: 100%; z-index:3; transition-duration: 300ms;
    .slogan {
        color: white; font-size: 1.2rem;
        > span {color: var(--color-gelb); font-weight: 700;}
    }
    .container { height: 100%;
        > div {display: flex; align-items: center; height: 100%; }
    }
}
.smallTopbar #Topbar {height: 40px;
    .slogan {font-size: 1.1rem; padding-top: 1px;}
}

#MenuIcon {display: block; padding-right: 10px; 
    > img {width: 40px; height: auto; display: block; transition-duration: 300ms;}
}
.smallTopbar #MenuIcon { padding-right: 7px;
    > img {width: 30px;}
}
#MainMenu {position: fixed; top: 60px; width: 0; bottom:0; z-index: 2; transition: background-color 1s;
    > ul {
        width: 400px; aspect-ratio: 4 / 5; position: fixed; top: 100px; left: 100px; background-image: url("img/ei.svg"); background-size: contain;  background-repeat: no-repeat; padding: 70px 40px 25px 120px; list-style: none; display: flex; flex-direction: column; justify-content: space-between; transition-duration: 1s; transform: translateX(-500px);
        > li {
            padding: 8px 10px;
            > a {color: white; text-decoration: none; font-size: 1.5rem;}
        }
    }
}
.smallTopbar #MainMenu {top: 40px;}
#MenuCheckBox:checked ~ #MainMenu {
    background-color: rgba(255,255,255,0.8); width: 100%;
    > ul {transform: translateX(0); }
}


/*
**		SLIDER 
*/

.bgSlider {background-color: var(--color-cyan);}

.kpzSlide1 {font-size: 9.5vw;}
.kpzSlide2 {font-size: 6.8vw;}
.kpzSlide3 {font-size: 4vw;}
:where(.kpzSlide1, .kpzSlide2, .kpzSlide3) {line-height: 1.05em; color: white;}
:where(.kpzSlide1, .kpzSlide2, .kpzSlide3) > mark {color: var(--color-gelb)!important; font-weight: 700;}

/*
**		Footer
*/


footer {
    padding-top: 50px; background-color: var(--color-textCyan); color: white; font-size: 0.85rem; line-height: 1.3em; overflow: hidden; 
    .logo {width: 100%; height:auto; display: block; max-width: 300px;}
    .kontaktDaten span {display: inline-block; width: 60px;}
    .bottomLine {background-color: black; display: flex; justify-content: space-between; color: #666; margin-top: 50px; font-size: 0.75rem;
        > div {padding: 5px 10px;}
        a {color: #888;}
    }
    .navigation {display: flex; flex-direction: column; justify-content: space-between;}
    nav > ul {padding:0; margin: 0; text-align: right;
        > li {margin-bottom: 10px; list-style: none;
            &:last-of-type {margin-bottom: 0;}
            a {color: white; text-transform: uppercase; text-decoration: none;}
        }
    }
    .footerSocial {margin-top: 60px; text-align: right;
        .footerSocialIcons {display: flex; justify-content: flex-end;
            img {width: 40px; height: 40px; object-fit: contain;}
            a {margin-left: 15px;}
        }
        .footerSocialHeadline {margin-bottom: 5px;}
    }
}


/*
**		Cookie-Banner
*/

#JhpCookieBanner {position: fixed; bottom:0; width: 90%; z-index: 10; left: 5%; background-color: black; color: white; border-radius: 15px 15px 0 0; padding: 15px; display:flex; justify-content: space-between; transition: 500ms; transform: translateY(100%);}
#JhpCookieBanner.active {transform: translateY(0); transition-delay: 1500ms;}

#JhpCookieBanner .cookieButton {margin-left: 15px; display: block; background-color: var(--color-red); padding: 5px 20px; border-radius: 5px; cursor: pointer; transition-duration: 300ms}
#JhpCookieBanner .cookieButton:hover {transform: scale(1.05);}
#JhpCookieBanner a {color: var(--color-red);}





/*
**		404 Error-Page
*/

.jhp404 h1>span {display: block; font-size: 3em; line-height: 1em;}
.jhp404Image {width: 100%; height: auto; max-width:80px;}


/*
**		Kontaktformular
*/

.checkBox { position: relative;
    input {display: none!important;}
    label {padding-left: 26px!important; position: relative;
        &::before {content: url("img/checkboxOff.png"); position: absolute; left:0; top: 3px;
        }
    }
    input:checked ~ label::before {content: url("img/checkboxOn.png");}
}


/*
**		weitere Elemente
*/

.borderBox {border: 2px solid var(--color-cyan); box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.15); border-radius: 15px; position: relative; }
.overflowHidden {overflow: hidden;}
.numberEgg {position: absolute; width: 60px; height: 75px; background-image: url("img/ei.svg"); background-repeat: no-repeat; background-size: contain; color: white; font-family: 'Days One', serif; font-size: 2.4rem; text-align: center; padding-top: 25px; padding-left: 2px; left: 50%; top: 0; transform: translate(-50%,-70%);}
.listNumbers {width: 100%; aspect-ratio: 1 / 1; color: white; background-color: var(--color-cyan); text-align: center; border-radius: 50%; font-weight: 700; font-size: 24px; padding-top: 9px; padding-left: 2px;}


/*
**
**      RESPONSIVE
**
*/

@media (min-width: 520px) {
    #EiLogo {width: 200px; top: -75px; right: 1vw;}
    #Topbar .slogan {font-size: 1.5rem;}
    .smallTopbar #Topbar .slogan {font-size: 1.3rem;}
}

    
@media (min-width: 768px) {
    
    section {padding: 100px 0;}
    h1, h2 {font-size: 3rem; margin-bottom: 0.7em;}
    h3 {font-size: 1.6rem;}

    .desktop {display: inherit!important;}
    .mobile {display: none!important;}
    
    #EiLogo {width: 250px; top: -100px; right: 5vw;}
    #Topbar .slogan {font-size: 1.8rem;}
    #MenuIcon {padding-right: 15px;}
    #MainMenu {position: fixed; top: 60px; width: 0; bottom:0; z-index: 2; transition: background-color 1s;
    > ul {
        width: 320px; aspect-ratio: 4 / 5; position: fixed; top: 80px; left: 40px; background-image: url("img/ei.svg"); background-size: contain;  background-repeat: no-repeat; padding: 60px 30px 20px 100px; list-style: none; display: flex; flex-direction: column; justify-content: space-between; transition-duration: 1s; transform: translateX(-500px);
        > li {
            padding: 8px 10px; 
            > a {color: white; text-decoration: none; font-size: 1.3rem;}
        }
    }

}

@media (min-width: 1024px) {

    section {padding: 125px 0;}
    section.grasnarbe {padding-top: 175px; }
    
    #EiLogo {width: 280px; top: -105px; }
}


@media (min-width: 1400px) {
    html, body {font-size: 20px;}
    h1 {font-size: 4rem; margin-botton: 0.5em;}
    section {padding: 150px 0;}
    #EiLogo {width: 330px; top: -125px; }


}