@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light+Two&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Give+You+Glory&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&display=swap');

body { margin: 1em auto; max-width: 75em; font-family: 'Open Sans', cursive; }



/* Hintergrundlogo verkleinert sich bei kleinen Viewports und verschwindet bei Touchscreens */

@media (hover: none) {
        #bodyResponse { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
}

@media (hover: hover) and (max-width: 550px) { 
        #bodyResponse { background-image: url("img/logo.png"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: 310px auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }         
}

@media (hover: hover) and (min-width: 550px) { 
        #bodyResponse { background-image: url("img/logo.png"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: 600px auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }         
}

#bodyResponseNHP { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }



/* Kopfbereich der Homepage */

#head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); background-color: white; }

#socialMedia { grid-column: 1 / -1; text-align: center; padding: 1em; }

#logo { grid-column: 1 / -1; text-align: center; padding-top: 1em; }

#titel { grid-column: 1 / -1; text-align: center; font-size: 2.5em; font-family: 'Indie Flower', cursive; padding-top: 1em; }

#nav { grid-column: 1 / -1; text-align: center; color: rgb(107,127,127); background: white; width: 100%; font-size: 1em; font-family: 'Open Sans', cursive; padding-top: 1em; padding-bottom: 1em; position: sticky; top: 0; z-index: 2; }

a:link { color: rgb(107,127,127); text-decoration: none; }

a:visited { color: rgb(107,127,127); text-decoration: none; }

a:active { color: rgb(221,231,229); }



/* 1. Block: Philosophie und Ansatz */

@media (hover: none) {
#intro { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-left: 0em; margin-right: 0em; margin-bottom: 6em; background: rgb(221,231,229); }
}

@media (hover: hover) {
#intro { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-left: 0em; margin-right: 0em; margin-bottom: 9em; background: rgb(221,231,229); }
}

@media (min-width: 1010px) { 
#introPic { grid-column: 1/3; grid-row: 1; width: 100%; padding-bottom: 700px; margin-left: 2.5em; background-image: url("img/introPic.jpg"); background-repeat: no-repeat; background-position: left center; background-size: 420px auto;}
}

@media (min-width: 900px) and (max-width: 1010px) { 
#introPic { grid-column: 1/2; grid-row: 1; width: 100%; padding-bottom: 700px; background-image: url("img/introPic.jpg"); background-repeat: no-repeat; background-position: center; background-size: 420px auto;}
}

@media (min-width: 550px) and (max-width: 900px) { 
#introPic { grid-column: 1/-1; width: 100%; padding-bottom: 700px; background-image: url("img/introPic.jpg"); background-repeat: no-repeat; background-position: center; background-size: 420px auto;}
}

@media (max-width: 550px) { 
#introPic { width: 100%; padding-bottom: 550px; background-image: url("img/introPic.jpg"); background-repeat: no-repeat; background-position: center; background-size: 310px auto;}
}

@media (min-width: 1070px) {
#introText { grid-column: 2/4; grid-row: 1; margin-top: 12em; font-size: 1em; font-family: 'Open Sans', cursive; padding-left: 9em; padding-right: 5em; }
#quote { padding-left: 1.5em; padding-right: 1.5em; font-style: italic; color: rgb(59,71,71); font-size: 1.5em; font-family: 'Shadows Into Light Two', cursive; }
#mission { grid-column: 1/-1; grid-row: 1;  }
#textMission { margin-left: 6em; margin-top: 2em; margin-right: 1.5em; padding: 0.5em; background: rgb(221,231,229); color: rgb(59,71,71); font-size: 2em; font-weight: bold; font-family: 'Open Sans', cursive; }
}

@media (min-width: 1010px) and (max-width: 1070px) {
#introText { grid-column: 2/4; grid-row: 1; margin-top: 12em; font-size: 1em; font-family: 'Open Sans', cursive; padding-left: 10em; padding-right: 3em; }
#quote { padding-left: 1.5em; padding-right: 1.5em; font-style: italic; color: rgb(59,71,71); font-size: 1.5em; font-family: 'Shadows Into Light Two', cursive; }
#mission { grid-column: 1/-1; grid-row: 1;  }
#textMission { margin-left: 6em; margin-top: 2em; margin-right: 1.5em; padding: 0.5em; background: rgb(221,231,229); color: rgb(59,71,71); font-size: 2em; font-weight: bold; font-family: 'Open Sans', cursive; }
}

@media (min-width: 900px) and (max-width: 1010px) {
#introText { grid-column: 2/3; grid-row: 1; margin-top: 12em; font-size: 1em; font-family: 'Open Sans', cursive; padding-left: 1em; padding-right: 2em; }
#quote { padding-left: 1.5em; padding-right: 1.5em; font-style: italic; color: rgb(59,71,71); font-size: 1.5em; font-family: 'Shadows Into Light Two', cursive; }
#mission { grid-column: 1/-1; grid-row: 1;  }
#textMission { margin-left: 3em; margin-top: 2em; margin-right: 1.5em; padding: 0.5em; background: rgb(221,231,229); color: rgb(59,71,71); font-size: 2em; font-weight: bold; font-family: 'Open Sans', cursive; }
}

@media (max-width: 900px) {
#introText { grid-column: 1/-1; margin-top: 2em; font-size: 1em; font-family: 'Open Sans', cursive; padding-left: 30px; padding-right: 30px; }
#quote { padding-left: 1em; padding-right: 1em; font-style: italic; color: rgb(59,71,71); font-size: 1.5em; font-family: 'Shadows Into Light Two', cursive; }
#mission { grid-column: 1/-1;  }
#textMission { grid-column: 1/-1; margin-left: 30px; margin-right: 30px; background: rgb(221,231,229); color: rgb(59,71,71); font-size: 2em; font-weight: bold; font-family: 'Open Sans', cursive; }
}

#txIntro { line-height: 1.4em; margin-top: 1em; font-size: 1em; font-family: 'Open Sans', cursive; }

#txIntro2 { line-height: 1.4em; margin-top: 1em; margin-bottom: 1em; font-size: 1em; font-family: 'Open Sans', cursive; }



/* 2. und 3. Block: Angebote für Kinder und Erwachsene */

#kidsPic { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); padding-bottom: 68.55%; background-image: url("img/kids.jpg"); background-size: 100% auto; background-repeat: no-repeat; }

#scrollBodyKids { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

#scrollTitelKids { background: white; grid-column: 1 / -1; padding-left: 0.5em; }

div.scrollOfferKids { background: white; grid-column: 1 / -1; }

@media (hover: hover) {
#adults { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-top: 9em; width: 100%; padding-bottom: 52.27%; background-image: url("img/adults.jpg"); background-size: 100% auto; background-repeat: no-repeat; }
}

@media (hover: none) {
#adults { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-top: 6em; width: 100%; padding-bottom: 52.27%; background-image: url("img/adults.jpg"); background-size: 100% auto; background-repeat: no-repeat; }
}

#scrollBodyAdults { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

#scrollTitelAdults { background: white; grid-column: 1 / -1; padding-left: 0.5em; }

div.scrollOfferAdults { background: white; grid-column: 1 / -1; }




/* 2. und 3. Block: Schaltflächen bei Notebook und Swipe bei Touchscreen */

@media (hover: none) {
#container { background: white; grid-column: 1 / -1; display: grid; overflow: auto; white-space: nowrap; }
#containerAdult { background: white; grid-column: 1 / -1; display: grid; overflow: auto; white-space: nowrap; }
#absoluteContainer { position: absolute; }
#absoluteContainerAdult { position: absolute; }
@media (max-width: 550px) {
div.scrollOfferKids offerKids { display: inline-block; vertical-align: top; white-space: normal; margin-right: 20px; background: rgb(221,231,229); width: 310px; height: 610px; padding-left: 0.5em; padding-right: 0.5em; }
div.scrollOfferAdults OfferAdults { display: inline-block; vertical-align: top; white-space: normal; margin-right: 20px; background: rgb(221,231,229); width: 310px; height: 845px; padding-left: 0.5em; padding-right: 0.5em; }
}
@media (min-width: 550px) {
div.scrollOfferKids offerKids { display: inline-block; vertical-align: top; white-space: normal; margin-right: 30px; background: rgb(221,231,229); width: 420px; height: 500px; padding-left: 0.5em; padding-right: 0.5em; }
div.scrollOfferAdults offerAdults { display: inline-block; vertical-align: top; white-space: normal; margin-right: 30px; background: rgb(221,231,229); width: 540px; height: 530px; padding-left: 0.5em; padding-right: 0.5em; }
}
#slide { float: right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; border: 0; border-radius: 0; outline: 0; }
#slideSmall { float:right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; border: 0; border-radius: 0; outline: 0; }
#slideBack { float:right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; border: 0; border-radius: 0; outline: 0; }
#slideBackSmall { float:right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; border: 0; border-radius: 0; outline: 0; }
#slideAdult { float: right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; border: 0; border-radius: 0; outline: 0; }
#slideSmallAdult { float:right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; border: 0; border-radius: 0; outline: 0; }
#slideBackAdult { float:right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; border: 0; border-radius: 0; outline: 0; }
#slideBackSmallAdult { float:right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; border: 0; border-radius: 0; outline: 0; }
}







@media (hover: hover) {
#container { background: white; grid-column: 1 / -1; display: grid; overflow: hidden; white-space: nowrap; }
#containerAdult { background: white; grid-column: 1 / -1; display: grid; overflow: hidden; white-space: nowrap; }
@media (min-width: 75em) {
#absoluteContainer { width: 75em; position: absolute; }
}
@media (max-width: 75em) {
#absoluteContainer { width: 100%; position: absolute; }
}
@media (max-width: 1160px) {
#absoluteContainerAdult { width: 100%; position: absolute; }
@media (max-width: 550px) {
#slideAdult { margin-top: 185px; margin-right: 0; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideAdult:hover { color: white; background: rgb(245,245,245,0.7); background-image: url("img/slide.png"); background-repeat: no-repeat; background-size: 0 0; background-position: center; }
#slideSmallAdult { float:right; margin-right: 0; min-width: 90px; width: 90px; height: 945px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideSmallAdult:hover { color: white; background: rgb(245,245,245,0.7); background-image: url("img/slide.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
#slideBackAdult { margin-top: 185px; margin-left: 0px; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBackAdult:hover { color: white;  background: rgb(245,245,245,0.7); background-image: url("img/slideBack.png"); background-repeat: no-repeat; background-size: 0 0; background-position: center; }
#slideBackSmallAdult { float: left; margin-left: 0px; min-width: 90px; width: 90px; height: 945px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBackSmallAdult:hover { color: white;  background: rgb(245,245,245,0.7); background-image: url("img/slideBack.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
}
@media (min-width: 550px) {
#slideAdult { float:right; margin-right: 0; min-width: 90px; width: 90px; height: 630px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideAdult:hover { color: white; background: rgb(245,245,245,0.7); background-image: url("img/slide.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
#slideSmallAdult { margin-top: 135px; float:right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideSmallAdult:hover { color: white; background: rgb(245,245,245,0.7); background-image: url("img/slide.png"); background-repeat: no-repeat; background-size: 0 0; background-position: center; }
#slideBackAdult { margin-left: 0px; min-width: 90px; width: 90px; height: 630px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBackAdult:hover { color: white;  background: rgb(245,245,245,0.7); background-image: url("img/slideBack.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
#slideBackSmallAdult { margin-top: 135px;  margin-left: 0px; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBackSmallAdult:hover { color: white;  background: rgb(245,245,245,0.7); background-image: url("img/slideBack.png"); background-repeat: no-repeat; background-size: 0 0; background-position: center; }
}
}
@media (min-width: 1160px) {
#absoluteContainerAdult { width: 75em; position: absolute; }
#slideAdult { float:right; margin-right: 0; min-width: 90px; width: 90px; height: 630px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideAdult:hover { color: white; background: rgb(245,245,245,0.7); background-image: url("img/slide.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
#slideBackAdult { float: left; margin-left: 0px; min-width: 90px; width: 90px; height: 630px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBackAdult:hover { color: white;  background: rgb(245,245,245,0.7); background-image: url("img/slideBack.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
#slideSmallAdult { float: left; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBackSmallAdult { float: left; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
}  
@media (max-width: 550px) {
div.scrollOfferKids offerKids { display: inline-block; vertical-align: top; white-space: normal; margin-right: 20px; background: rgb(221,231,229); width: 310px; height: 610px; padding-left: 0.5em; padding-right: 0.5em; }
#slide { margin-top: 185px; margin-right: 0; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slide:hover { color: white; background: rgb(245,245,245,0.7); background-image: url("img/slide.png"); background-repeat: no-repeat; background-size: 0 0; background-position: center; }
#slideSmall { float:right; margin-right: 0; min-width: 90px; width: 90px; height: 580px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideSmall:hover { color: white; background: rgb(245,245,245,0.7); background-image: url("img/slide.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
#slideBack { margin-top: 185px; margin-left: 0px; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBack:hover { color: white;  background: rgb(245,245,245,0.7); background-image: url("img/slideBack.png"); background-repeat: no-repeat; background-size: 0 0; background-position: center; }
#slideBackSmall { float: left; margin-left: 0px; min-width: 90px; width: 90px; height: 580px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBackSmall:hover { color: white;  background: rgb(245,245,245,0.7); background-image: url("img/slideBack.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
div.scrollOfferAdults OfferAdults { display: inline-block; vertical-align: top; white-space: normal; margin-right: 20px; background: rgb(221,231,229); width: 310px; height: 845px; padding-left: 0.5em; padding-right: 0.5em; }
}
@media (min-width: 550px) {
div.scrollOfferKids offerKids { display: inline-block; vertical-align: top; white-space: normal; margin-right: 30px; background: rgb(221,231,229); width: 420px; height: 500px; padding-left: 0.5em; padding-right: 0.5em; }
#slide { float:right; margin-right: 0; min-width: 90px; width: 90px; height: 470px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slide:hover { color: white; background: rgb(245,245,245,0.7); background-image: url("img/slide.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
#slideSmall { margin-top: 135px; float:right; margin-right: 0; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideSmall:hover { color: white; background: rgb(245,245,245,0.7); background-image: url("img/slide.png"); background-repeat: no-repeat; background-size: 0 0; background-position: center; }
#slideBack { margin-left: 0px; min-width: 90px; width: 90px; height: 470px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBack:hover { color: white;  background: rgb(245,245,245,0.7); background-image: url("img/slideBack.png"); background-repeat: no-repeat; background-size: auto 60px; background-position: center; }
#slideBackSmall { margin-top: 135px;  margin-left: 0px; min-width: 0px; width: 0px; height: 0px; background: rgb(245,245,245,0); border: 0; border-radius: 0; outline: 0; }
#slideBackSmall:hover { color: white;  background: rgb(245,245,245,0.7); background-image: url("img/slideBack.png"); background-repeat: no-repeat; background-size: 0 0; background-position: center; }
div.scrollOfferAdults offerAdults { display: inline-block; vertical-align: top; white-space: normal; margin-right: 30px; background: rgb(221,231,229); width: 540px; height: 530px; padding-left: 0.5em; padding-right: 0.5em; }
}
}


/* 4. Block: Über mich */

@media (hover: hover) {
#about { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-left: 0em; margin-right: 0em; margin-top: 9em; background: rgb(245,245,245); }
}

@media (hover: none) {
#about { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); margin-left: 0em; margin-right: 0em; margin-top: 6em; background: rgb(245,245,245); }
}

@media (min-width: 1010px) { 
#aboutPic { grid-column: 1/3; grid-row: 1; width: 100%; padding-bottom: 700px; margin-left: 2.5em; background-image: url("img/aboutMe.jpg"); background-repeat: no-repeat; background-position: left center; background-size: 420px auto;}
}

@media (min-width: 900px) and (max-width: 1010px) { 
#aboutPic { grid-column: 1/2; grid-row: 1; width: 100%; padding-bottom: 700px; background-image: url("img/aboutMe.jpg"); background-repeat: no-repeat; background-position: center; background-size: 420px auto;}
}

@media (min-width: 550px) and (max-width: 900px) { 
#aboutPic { grid-column: 1/-1; width: 100%; padding-bottom: 700px; background-image: url("img/aboutMe.jpg"); background-repeat: no-repeat; background-position: center; background-size: 420px auto;}
}

@media (max-width: 550px) { 
#aboutPic { grid-column: 1/-1; width: 100%; padding-bottom: 550px; background-image: url("img/aboutMe.jpg"); background-repeat: no-repeat; background-position: center; background-size: 310px auto;}
}

@media (min-width: 1070px) {
#aboutText { grid-column: 2/4; grid-row: 1; margin-top: 4em; font-size: 1em; font-family: 'Open Sans', cursive; padding-left: 9em; padding-right: 5em; }
#aboutHeadline { grid-column: 1/-1; grid-row: 1;  }
#textAboutHeadline { margin-left: 5em; margin-top: 2em; margin-right: 1.5em; padding: 0.5em; background: rgb(245,245,245); color: rgb(59,71,71); font-size: 2em; font-weight: bold; font-family: 'Special Elite', cursive; }
}

@media (min-width: 1010px) and (max-width: 1070px) {
#aboutText { grid-column: 2/4; grid-row: 1; margin-top: 4em; font-size: 1em; font-family: 'Open Sans', cursive; padding-left: 10em; padding-right: 3em; }
#aboutHeadline { grid-column: 1/-1; grid-row: 1;  }
#textAboutHeadline { margin-left: 5em; margin-top: 2em; margin-right: 1.5em; padding: 0.5em; background: rgb(245,245,245); color: rgb(59,71,71); font-size: 2em; font-weight: bold; font-family: 'Special Elite', cursive; }
}

@media (min-width: 900px) and (max-width: 1010px) {
#aboutText { grid-column: 2/3; grid-row: 1; margin-top: 4em; font-size: 1em; font-family: 'Open Sans', cursive; padding-left: 1em; padding-right: 2em; }
#aboutHeadline { grid-column: 1/-1; grid-row: 1;  }
#textAboutHeadline { margin-left: 3em; margin-top: 2em; margin-right: 1.5em; padding: 0.5em; background: rgb(245,245,245); color: rgb(59,71,71); font-size: 2em; font-weight: bold; font-family: 'Special Elite', cursive; }
}

@media (max-width: 900px) {
#aboutText { grid-column: 1/-1; margin-top: 2em; font-size: 1em; font-family: 'Open Sans', cursive; padding-left: 30px; padding-right: 30px; }
#aboutHeadline { grid-column: 1/-1;  }
#textAboutHeadline { grid-column: 1/-1; margin-left: 30px; margin-right: 30px; background: rgb(245,245,245); color: rgb(59,71,71); font-size: 2em; font-weight: bold; font-family: 'Special Elite', cursive; }
}

#aboutParagraph { font-style: italic; font-size: 1.2em; font-family: 'Shadows Into Light Two', cursive; }


/* Kontaktseite und Formular */

#conHead { grid-column: 1 / -1; background: rgb(221,231,229); font-size: 1.3em; padding: 1em 0.5em 1em 0.5em; }

#feather { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); background: url("img/contact.jpg") center no-repeat; background-size: cover;}

#conBackground { grid-column: 1/-1; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); background: rgb(221,231,229); }

@media (min-width: 1010px) { 
#conPhone { grid-column: 1/3; grid-row: 1;  text-align: left; padding-left: 7em; font-size: 1.3em; padding-top: 0.5em; padding-bottom: 0.5em; }
#conMail { grid-column: 2/4; grid-row: 1; text-align: right; padding-right: 7em; font-size: 1.3em; padding-top: 0.5em; padding-bottom: 0.5em; }
}

@media (max-width: 1010px) { 
#conPhone { text-align: center; font-size: 1.3em; padding: 0.5em; }
#conMail { text-align: center; font-size: 1.3em; padding: 0.5em; }
}

form { grid-column: 1 / -1; height: 500px; padding-top: 3em; }

input[type=text] { margin-left: 3em; margin-bottom: 1.9em; padding: 0.5em; background-color: rgb(245,245,245,0.2); width: 60%; min-width: 250px; max-width: 360px; height: 1.8em; font-family: 'Open Sans', cursive; border: 1px solid white; border-radius: 0.5em; font-size: 1em; color: white; }

input[type=text]:valid { background-color: rgb(245,245,245,0.7); color: rgb(35,41,41); }

input[type=text]:focus { background-color: rgb(245,245,245,0.7); color: rgb(35,41,41); }

input[type=email] { margin-left: 3em; margin-bottom: 1.9em; padding: 0.5em; background-color: rgb(245,245,245,0.2); width: 60%; min-width: 250px; max-width: 360px; height: 1.8em; font-family: 'Open Sans', cursive; border: 1px solid white; border-radius: 0.5em; font-size: 1em; color: white; } 

input[type=email]:valid { background-color: rgb(245,245,245,0.7); color: rgb(35,41,41); }

input[type=email]:focus { background-color: rgb(245,245,245,0.7); color: rgb(35,41,41); }

textarea { margin-left: 3em; margin-bottom: 1.9em; padding: 0.5em; background-color: rgb(245,245,245,0.2); width: 70%; min-width: 250px; max-width: 500px; height: 9.3em; font-family: 'Open Sans', cursive; border: 1px solid white; border-radius: 0.5em; font-size: 1em; color: white; }

textarea:focus { background-color: rgb(245,245,245,0.7); color: rgb(35,41,41); }

textarea:valid { background-color: rgb(245,245,245,0.7); color: rgb(35,41,41); }

#boxBorder { display: flex; margin-left: 3em; margin-bottom: 1.9em; padding: 0.5em; background-color: rgb(245,245,245,0.2); width: 60%; min-width: 250px; max-width: 360px; height: 1.8em; border: 1px solid white; border-radius: 0.5em; align-items: center; }

input[type=checkbox] { }

label { padding-left: 0.5em; font-family: 'Open Sans', cursive; color: white; }

button { margin-left: 3em; background-color: rgb(245,245,245,0.2); width: 63%; min-width: 268px; max-width: 378px; font-family: 'Open Sans', cursive; border-radius: 0.5em; font-size: 1em; color: white; }

@media (max-width: 550px) {
::placeholder { color: black; font-style: italic; font-weight: bold; }
}

@media (min-width: 550px) {
::placeholder { color: white; font-style: italic; }
}

@media (max-width: 550px) {
#afterForm { grid-column: 1 / -1; height: 500px; padding-top: 5em; padding-left: 3em; font-size: 1.3em; font-weight: bold; color: black; font-family: 'Open Sans', cursive; }
}

@media (min-width: 550px) {
#afterForm { grid-column: 1 / -1; height: 500px; padding-top: 5em; padding-left: 3em; font-size: 1.3em; color: white; font-family: 'Open Sans', cursive; }
}


/* Datenschutzerklärung und Impressum */

#dataProtect { grid-column: 1 / -1; padding: 2em; background-color: rgb(221,231,229); }

#dPStyle:link { color: white; text-decoration: underline; }

#dPStyle:visited { color: white; text-decoration: underline; }

#dPStyle:active { color: rgb(221,231,229); text-decoration: underline; }



/* Allgmeine Formatierungen */

#space { background: white; grid-column: 1 / -1; height: 2em; width: 100%; }

h1 { font-size: 2em; font-family: 'Special Elite', cursive; color: rgb(59,71,71); }

h2 { font-size: 1.4em; font-family: 'Indie Flower', cursive; color: rgb(59,71,71); }

#dates { font-style: italic; font-size: 0.9em; font-weight: bold; color: rgb(59,71,71); }

#tx { margin-top: 1em; font-size: 1em; font-family: 'Open Sans', cursive; }

#txbr { margin-top: 1em; font-size: 1em; font-family: 'Open Sans', cursive; word-wrap: break-word;}

#txbottom { margin-top: 1em; margin-bottom: 1em; font-size: 1em; font-family: 'Open Sans', cursive; }
  
#txbold { margin-top: 1em; font-size: 1em; font-family: 'Open Sans', cursive; font-weight: bold; }

#txsmall { margin-top: 1em; font-size: 0.6em; font-family: 'Open Sans', cursive; }

#accent { font-size: 1.5em; font-family: 'Give You Glory', cursive; }

ul.arrow { margin-left: 1em; list-style-image: url("img/arrow.png");  }

ul.arrowLine { margin-left: 1em; list-style-image: url("img/arrowline.png");  }