html, body {margin: 0px;  padding: 0px;  height: 100%; width: 100%;}
a {text-decoration: none; color: black;}
li {list-style-type: none;}
ol {list-style-type: none;}

p {font-family: 'Raleway', sans-serif; font-size: 0.9rem; color: black;}
h1, h2, h3, h4 {font-size: 20px; font-family: 'Amatic SC', cursive; color: #494949; text-transform: uppercase; padding-top: 8%; margin-bottom: 2px;}
h3 {font-size: 40px; text-align: center;}
h5 {font-size: 25px; font-family: 'Amatic SC', cursive; color: #494949; margin-bottom: 10px; margin-left: 25px; margin-top: -2px;}
h6 {font-size: 25px; font-family: 'Amatic SC', cursive; text-align: center; color: black; margin-bottom: 1%;}
h7 {font-size: 25px; font-family: 'Amatic SC', cursive; text-align: center; color: black; margin-bottom: 10%;}

hr {width: 300px; height: 1px; background: #494949; border: 0; margin: 0 auto 20px auto;}
li, #logo, img {transition: all 300ms;}

@media screen and (max-width: 800px) {#logo {width: 50%; height: auto;}}
@media screen and (max-width: 520px) {#text {display: none;} #logo img {width: 10%;}}
@media screen and (max-width: 1200px) {#text_mobil {display: none;}}
@media screen and (max-width: 1200px) {#facebook {display: none;}}
@media screen and (max-width: 1200px) {#instagram {display: none;}}

@media screen and (max-width: 1200px) {header nav {display: none;}}

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

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

/* HEADER ************/

header {width: 100%; height: 13%; position: fixed; top: 0px; left: 0px; background-color: white; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4); z-index: 1;}

#logo {width: 15%; float: right; margin-right: 3%; margin-top: -0.90%;}
#logo:hover {opacity: 0.9;}
#logo img {width: 100%;}

header nav {width: 74%; float: left; margin-top: -9.5%; margin-left: 13%;}
header nav ul li {float: left; margin-bottom: 1%; margin-left: 2px;}
header nav ul li a {color: black; font-family: 'Raleway', sans-serif;}

#text {width: 25%; float: left; margin-top: -9.25%; margin-left: 2%;}
#text h2 {font-size: 32px; color: black; width: 100%; position: fixed;}

#text_mobil {width: 25%; float: left; margin-top: -2.25%; margin-left: 10%;}
#text_mobil h6 {font-size: 22px; color: #494949; width: 100%; position: fixed;}

#facebook {width: 50px; float: left; margin-left: 2%; margin-top: -8.6%;}
#facebook img {width: 2%; border-radius: 5px; position: fixed;}

#instagram {width: 50px; float: left; margin-left: 4%; margin-top: -8.6%;}
#instagram img {width: 2%; border-radius: 5px; position: fixed;}

.button {
    width: 115px;
    position: sticky;
    background-color: white;
    border: 1px solid grey;
    border-radius: 20px;
    color: black;
    padding: 8% 20%;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    -webkit-transition-duration: 0.6s; /* Safari */
    transition-duration: 0.6s;
    cursor: pointer;}
.button:hover {background-color: #ffb6c1; color: black;}

/* STARTSEITE ************/
#startseite {background: url(img/1.jpg); background-position: top; background-size: cover; background-attachment: fixed; min-height: 100%;}


/* URLAUBSBETREUUNG ************/
#betreuung p {width: 65%; margin: 0 auto 0 25%; text-align: justify; color: black;}
#betreuung {float: center; height: 100%;}


/* SERVICE ************/
#service {background-color: #F6CEF5; height: 1050px; text-align: center;}
#service p {font-size: 1.0rem; color: black;}

#wrap_service_spalten {width: 65%; float: center; margin: 0 auto 0 25%; text-align: left;}
#wrap_service_spalte-1 {width: 80%; float: left; text-align: justify;}
#wrap_service_spalte-2 {width: 35%; float: left; margin: 0 auto 0 0; text-align: justify;}
#wrap_service_spalte-3 {width: 35%; float: right; margin: 0 22% 0 auto; text-align: justify;}
#wrap_service_spalte-4 {width: 80%; float: left; text-align: justify;}
#wrap_service_spalten hr {width: 40%; height: 1px; background: #494949; border: 0; margin: 0 auto 20px auto;}
#service_img {background: url(img/2.jpg); background-position: center center; background-size: cover; background-attachment: fixed; height: 80%;}


/* PREISE ************/
#wrap_preise_spalten {width: 80%; float: center; margin: 0 auto 0 auto;}
#wrap_preise_spalte-1 {width: 40%; float: left; margin: 0 auto 0 10%; text-align: left;}
#wrap_preise_spalte-2 {width: 40%; float: right; margin: 0 10% 0 auto; text-align: right;}
#wrap_preise_spalte-3 {width: 80%; float: left; margin: 0 auto 0 10%; text-align: justify;}
#preise {height: 115%;}
#preise a {color: black;}


/* ÜBER MICH ************/
#about img {display: block; float: left; margin-left: 18%; margin-right: 2%; max-width: 30%; border-radius: 0px;}
#about p{width: 80%; height: 90%; margin: 0 35% 0 12%; text-align: justify;}
#about {background-color: #F6CEF5;}
#about {min-height: 115%;}
#about img:hover{transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);}
#about_img {background: url(img/3.jpg); background-position: center center; background-size: cover; background-attachment: fixed; height: 80%;}


/* GALERIE ************/
#galerie {height: 80%; width: 100%;}
#galerie p {width: 65%; height: 80%; margin: 0 auto 0 auto; text-align: center;}
#galerie li {float: center; margin: 0 2px 0 auto; text-align: center; font-weight: bold; font-size: 10px;}
#galerie img {width: auto; height: 150px; display: block; margin: 0 auto 0 auto; padding: 1px; border: 1px solid black; border-radius: 20px;}
#galerie img:hover{transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);}

/* GALERIE UNTERSEITE************/
#galerie_site {width: 100%; min-height: 500%;}
#galerie_site p {width: 65%; height: 100%; margin: 0 auto 0 auto; text-align: center;}
#galerie_site ul {margin-left: 15%; width: 70%;}
#galerie_site ul li {float: left; margin: 0 2px 0 auto; text-align: center; font-weight: bold; font-size: 10px;}
#galerie_site ul li img {width: auto; height: 140px; display: block; padding: 1px; border: 1px solid black; border-radius: 20px;}


/* KONTAKT ************/
#kontakt p {width: 65%; text-align: left; color: black; margin-left: 39%;}
#kontakt {height: 85%; width: 100%; background-color: #F6CEF5;}



/* DATENSCHUTZ ************/
#datenschutz p{width: 800px; margin: 0 auto 0 auto; text-align: left;}


/* IMPRESSUM ************/
#impressum p{width: 800px; margin: 0 auto 0 auto; text-align: left;}

/* FOOTER *************/
footer{width: 100%; height: 30px; text-align: right;}
footer p{margin-top: -30px; margin-bottom: 0px; margin-right: 20px}
footer{background-color: #FBEFF5;}

#footer{margin-top: 30px}

footer nav {width: 100%; height: 30px; float:left; margin: -32px auto 20px auto;}
footer nav ul li {float:left; margin-right: 20px;}
footer nav ul li a {font-size: 14px; color: black; font-family: 'Raleway', sans-serif; text-transform: uppercase;}
footer nav ul li:hover{padding-top: 2px}


/* COOKIE HINWEIS ***********/
.cc_container .cc_btn {
background-color: #FE2EC8 !important; /* Farbe des Buttons */
color: black !important; /* Textfarbe des Buttons */
}

.cc_container {
background: white !important; /* Hintergrundfarbe des gesamten Bereichs */
color: black !important; /* Schriftfarbe des gesamten Bereichs */
font-size: 12px !important;
}

.cc_container a {
color: #FE2EC8 !important; /* Textlink-Farbe "Mehr Infos" */
}