@charset "utf-8";
/* CSS Document */

/*Farben*/

:root{
  --tuerkis: #6fb2ba;  
  --textgrau: #5d767c;
  --schwarz: #000; 
  --rot: #7c1246; 
}
@font-face {
    font-family: 'Alef-Bold';
    src: url(' "../fonts/Alef-Bold.eot"Alef-Bold.eot');
    src: url('../fonts/Alef-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Alef-Bold.woff2') format('woff2'),
        url('../fonts/Alef-Bold.woff') format('woff'),
        url('../fonts/Alef-Bold.ttf') format('truetype'),
        url('vAlef-Bold.svg#Alef-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alef';
    src: url('../fonts/Alef-Regular.eot');
    src: url('../fonts/Alef-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Alef-Regular.woff2') format('woff2'),
        url('../fonts/Alef-Regular.woff') format('woff'),
        url('../fonts/Alef-Regular.ttf') format('truetype'),
        url('../fonts/Alef-Regular.svg#Alef-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manjari';
    src: url('../fonts/Manjari-Regular.eot');
    src: url('../fonts/Manjari-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Manjari-Regular.woff2') format('woff2'),
        url('../fonts/Manjari-Regular.woff') format('woff'),
        url('../fonts/Manjari-Regular.ttf') format('truetype'),
        url('../fonts/Manjari-Regular.svg#Manjari-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


*{
  transition: all 0.3s ease-out;
}

body{
	color:var(--textgrau);
}
a, a:link{
	color: var(--tuerkis);
}
img{
	width: 100%;
}
.kontaktformular .captcha-row img{
	width: auto;
}
nav{
	height:100px;
}
.rot{
	color:var(--rot);
}

.nav-link{
	text-transform: uppercase;
}
.navbar-light .navbar-nav .nav-link {
  color: var(--tuerkis);
}
.nav-item{
	margin-right: 1rem;
	margin-left: 1rem;
}

.navbar-light .navbar-nav .active > .nav-link{
	color:var(--rot);
	
}
.navbar-nav a.btn.btn-rezept{
	text-transform: uppercase;
	color: #fff;
	background-color: var(--tuerkis);
  border-color: var(--tuerkis);

}
.navbar-nav a.btn.btn-rezept:hover{
	background-color:var(--rot);
}
.kontaktformular #send .senden {
	background-color:var(--tuerkis);
}
.kontaktformular #send .senden:hover {
	background-color:var(--rot);
}

/*---------------animated hamburger (quelle: https://mdbootstrap.com/docs/b4/jquery/navigation/hamburger-menu/#animations)*/
.animated-icon1 {
  width: 30px;
  height: 20px;
  position: relative;
  margin: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
.animated-icon1 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
.animated-icon1 span {
  background: var(--tuerkis);
}
.animated-icon1 span:nth-child(1) {
 top: 0px;
}

.animated-icon1 span:nth-child(2) {
  top: 10px;
}

.animated-icon1 span:nth-child(3) {
  top: 20px;
}
.animated-icon1.open{
	top: 20px;
}

.animated-icon1.open span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.animated-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.animated-icon1.open span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.navbar-light .navbar-toggler {
  color: transparent;
  border-color: transparent;
}
button:focus {
    outline: none;
    box-shadow: none;
}

/*-Ende*/

.bg_tuerkis{
	background: rgb(111,178,186);
background: linear-gradient(58deg, rgba(111,178,186,1) 50%, rgba(255,251,251,1) 100%);
	padding: 1.5rem 0 1.2rem;
	margin-top: 100px;
}
.bg_tuerkis h2, .bg_tuerkis h3{
	color:#fff;
	font-family:"Alef";
	font-weight: normal;
}
.bg_tuerkis h2 {
	font-size: 1.4rem; 
}
.bg_tuerkis h3 {
	font-size: 1.2rem; 
}
.bg_tuerkis .adresse h3{
	font-size:1.1rem;
}
section.willkommen{
	padding: 3rem 0 1rem;
}
section.alert{
	margin-bottom: 2rem;
}
h1, h2, h3, h4{
	font-family:"Alef", sans-serif;
}
h1{
	font-size: 2.0rem;
	margin-bottom: 2rem;
}
h2{
	font-size: 1.7rem;
}
h3{
	font-size: 1.5rem;
	margin-top: 2rem;
}
.border-rot{
	border: 2px solid var(--rot);
	padding: 1rem;
}
hr{
	border-top: 10px solid var(--tuerkis);
	
}
table td{
	vertical-align: top; 
	padding: 0 0.5rem 0 0;
	font-size: 0.9rem;
}
dl{
	margin-bottom: 0.5rem;
}
dd{
	text-align: center;
	color: var(--rot);
}

/*----leistungen-------*/
ul.leistungen {
	padding-left: 4px;
}
ul.leistungen li {
  list-style: none;
  list-style-image: none;
  list-style-image: url("../images/bullet.png");
  padding-left: 10px;
  margin-bottom: 10px;
}

/*-----------------------footer----------*/
footer{
	background-color: #e8e9eb;
	border-top: 10px solid var(--tuerkis);
	padding-top: 2rem;
	margin-top: 3rem;
}
footer .col-lg-2.logo{
	display: flex;
    align-items: center;
}
footer h4{
	border-bottom: 1px solid var(--rot);
    display: inline;
	font-size: 1.2rem;
}
footer p, footer table{
	margin-top: 1rem;
}
footer p, footer li{
	font-size: 0.9rem;
}
footer .bg_tuerkis{
	background: var(--tuerkis);
	display: block;
	padding: 5px 0;
	margin-top: 20px;
	margin-right:0;
	margin-left:0;
}
footer .bg_tuerkis p{
	color:#fff;
}
footer ul{
	padding-left: 10px;
}
footer ul li{
	text-transform: uppercase;
}
footer ul li a{
	color: var(--tuerkis);
	font-weight: 700;
}
footer p.important{
	font-weight: bold;
	border: 1px solid var(--rot);
	display: inline-block;
	padding: 3px;
}
@media only screen and (max-width:991px){
	.navbar-collapse.w-100{
		background-color:#fff;
		padding-bottom: 1rem;
	}
	
	button.navbar-toggler{
		position: absolute;
		top: 0;
		right: 20px;
	}
	
	
}
@media only screen and (max-width:576px){
	
	.bg_tuerkis h3{
		margin-top:0;
	}
	.bg_tuerkis .col-lg-4{
		text-align: left !important;
	}
	h1{
		font-size: 1.75rem;
	}
	h2{
	font-size: 1.5rem;
	}
	h3{
	font-size: 1.3rem;
	}
	h4{
	font-size: 1.1rem;
	}
	p {
  	word-wrap:break-word;
	}
	nav div.my-2{
		width: 100%;
	}
	
	
	ul.leistungen {
    padding-left: 9px;
}
	footer {
		margin-top: 1rem;
	}
	
}