@font-face {
  font-family: "PoorStory";
  src: url('https://bewerty.de/PoorStory-Regular.ttf');
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    background-image: url('../IMG/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    backdrop-filter: blur(160px);
    -webkit-backdrop-filter: blur(160px); 
    font-size: 16pt;
}
#header_link {
	text-decoration: none;
	margin-left: 50px;
}
#header {
    height: 100px;
    width: 100%;
    display: flex;
    position: relative;
    padding-left: 2em;
    padding-right: 2em;
    color: white;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    flex-direction: row;
}
#header_portale {font-size:1.5rem !important;}
#header h1, #copyrite {
	font-family: 'PoorStory';
}
#header h1 {
    text-align: left;
    width: 100%;
    color: #D44013;
    margin: 0;
    font-size: 1rem;
    display: inline;
}

.section_heading {
    display: flex;
    flex-direction: column;
    color: #313f46;
    padding: 3em;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    margin: 0;
    align-items: center;
    background: #ffffffb3;
    margin-bottom: 1em;
}

h1,h2 {text-align: center;font-size:1.2rem;font-family: verdana;font-weight: 500;margin-bottom: 2em;margin-top: 2em;}


#link-wrapper {
    padding-bottom: 3em;
    display: grid;
    justify-items: center;
    grid-template-columns: auto auto;
    row-gap: 5vw;
    column-gap: 5vw;
    justify-content: center;
    padding-top: 1rem;
}

.greyed_out {filter: saturate(0%) brightness(150%);}

#fb_img {
	background-image: url('../IMG/fb.png');background-size: contain;
}
#maps_img {
	background-image: url('../IMG/maps2.png');background-size: contain;
}
#trip_img {
	background-image: url('../IMG/tripadvisor.png');background-size: contain;
}
#werkennt_img {
	background-image: url('../IMG/werkenntdenbesten.png');background-size: contain;
}
#jameda_img {
	background-image: url('../IMG/jameda.png');background-size: contain;
}
#yelp_img {
	background-image: url('../IMG/yelp.png');background-size: contain;
}
#trustpilot_img {
	background-image: url('../IMG/trustpilot.png');background-size: contain;
}

#link-wrapper .img {
    background-position: center;
    background-repeat:no-repeat;
    transition: all 0.2s ease;
    border-radius: 34px;
    box-shadow: 10px 10px 10px 5px rgb(0,0,0,0.4);
    cursor: pointer;
    filter: hue-rotate(169deg) saturate(3.5);
}
#link-wrapper .img:hover {transform:rotate(-1deg);box-shadow: 15px 15px 20px 10px rgb(0,0,0,0.4);}
#link-wrapper .greyed_out .img:hover {cursor: not-allowed;transform: none;box-shadow: 10px 10px 10px 5px rgb(0,0,0,0.4);}

.options_headline {
    margin:0;margin: 10px;
}
.headline_bold {font-weight: 600;}

.sterne {
    font-size: 1.5em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: relative;
    height: 60px;
    align-items: center;
}
.faded {opacity: 0.2;}

.formular {background-color:#b5c3ca;}
.section_body {
	padding-top: 1em;
	padding-bottom: 5em;
	display: flex;
	flex-direction: column;
	row-gap: 50px;
	align-items: center;
}
.formular input {
	font-style:italic;
	color:grey;
	width: 50%;
	position: relative;
	height: 80px;
	border-radius: 12px;
	text-align: center;
	font-size: 1.5em;
	background-color: #ffffff;
	transition: all 0.6 ease-out;
}
.formular input:focus {
	background-color: #f1f1f1;
	box-shadow: 0 0 30px rgba(0,0,0,0.2);
}
.formular input:focus-visible {outline: -webkit-focus-ring-color auto 0px;}
input[type="text" i] {
    padding: 0 0;
}

.formular input::-webkit-input-placeholder {transition:  all 0.45s ease-out;}
.formular input:hover {background-color: #f1f1f1;} 

.formular input:focus::-webkit-input-placeholder {opacity: 0;padding: 0;margin: 0}
.formular .sterne {cursor: pointer;font-size: 3em;}
.formular .stern:hover {opacity: 1;animation: none;}
#formular_absenden {
    padding: 50px;
    padding-top: 35px;
    color: white;
    padding-bottom: 35px;
    background-color: #cb680e;
    border: 3px solid #ac580c;
    border-radius: 24px;
    font-size: 20px;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: all 0.4 ease-out;
}
#formular_absenden:hover {background-color:#ac580c}
.footer {
	height: 60px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 14px;
	background-color: #ECBD9B;
	color:#cb680e;
	font-family: 'PoorStory', Arial, sans-serif;
	overflow: hidden;
}
.footer a {text-decoration: none;color:#cb680e;font-family: 'PoorStory';}

@media (min-width:1200px) {
	#link-wrapper {grid-template-columns: 200px 200px 200px 200px;}
	#link-wrapper .img {height: 200px;width: 200px;border-radius: 38px;}
}
@media (max-width:1199px) {
	#link-wrapper .img {
    	width: 25vw;
    	height: 25vw;
    	border-radius: 50px;
	}
}
@media (max-width:880px) {
	#link-wrapper {grid-template-columns: auto auto;}
	#link-wrapper .img {
    	width: 35vw;
    	height: 35vw;
    	border-radius: 20%;
	}
}

.blinky1 {animation: blinky1 1.5s linear infinite;}

@keyframes blinky1 {
        0% {
          opacity: .0;
        }
        
        100% {
          opacity: 1;
        }
      }
.blinky2 {animation: blinky2 1.5s linear infinite;}

@keyframes blinky2 {
    0% {
      opacity: .0;
    }
    50% { opacity:0.25 }
    100% {
      opacity: 1;
    }
}
.growy1 {
    animation: growy1 0.65s linear infinite;
    position: relative;
}
@keyframes growy1 {
	0% {
	  font-size: 1em;
	  opacity: 0.5;
	}
	50% {
	  font-size: 1.3em;
	  opacity: 1;
	}
	100% {
	  font-size: 1em;
	  opacity: 0.5;
	}
}

.growy_logo {
    animation: growy_logo 18s linear infinite;
}

@keyframes growy_logo {
    0% {
      	transform: rotate(0deg);
    }
    50% {
    	transform: rotate(180deg);
    }
    100% {
      	transform: rotate(360deg);
    }
}