@charset "utf-8";
/* CSS Document */
* {
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    transition: 1s;
}
:root {
	--hellorange: #ffd5c9;
	--rosa: #e0c7d3;
	--gruen: #dfebc5;
	--hellblau: #ccd4de;
	--rot: #c23d33;
}
html {
  scroll-behavior: smooth;
}
*{
  padding: 0;
  margin: 0;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  transition: 1s;
  
}

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

body{
	font-family:'poppins';
	color:#000;
}
a, a:hover{
	color:#000;
	text-decoration: none;
}
.footer a:hover{
	text-decoration: underline;
}

img{
	width: 100%;
	height: auto;	
}
.bg_orange{
	background-color:var(--hellorange);
	text-align: center;
	padding: 30px 20px 20px;
	margin: 0 10px 10px 0;
	height: 100%;	
}
#termine .bg_orange{
	width: 100%;
}


#legal .bg_orange, #termine .bg_orange{
	text-align: left;
	margin-right:0;
	padding: 60px 50px 50px;
	
}
#termine .bg_orange{
	padding: 0;
	
}

#termine .bg_orange a{
	position: absolute;
    top: 68.0%;                 /* Abstand vom unteren Bildrand */
    left: 40%;
    transform: translateX(-40%);        
    font-size: clamp(11px, 1.5vw, 20px);  /* passt die Schriftgröße an */
	text-decoration: underline;
}

#legal .bg_orange ul, #termine .bg_orange ul{
	list-style-position: inside;
}
.bg_orange .text{
	/*padding: 30px 60px 50px 70px;*/
	padding: 0 0 5px 0;
	text-align: left;
}
.bg_orange .text h2{
	padding-left: 70px;
}
.bg_orange .text h5{
	padding-right: 70px;
}

.adresse, .instagram, .termine{
	padding: 20px 60px 0 70px;	
}

.bg_rosa{
	background-color:var(--rosa);	
	padding: 80px 50px 20px;
	margin: 0 0 10px 0;
	height: 100%;
	width: 100%;
}
#legal .bg_rosa {
	padding-top: 60px;
}
#legal .bg_rosa .col-md-7 {
	padding-left:0;
}
.bg_rosa h2{
	text-align: right;
    margin-right: 2rem;
}


.bg_rosa h3{
	font-size: 1.2rem;
	font-family: 'Poppins', sans-serif;
	line-height: 1.5;
}
hr{
	border-top: 1px solid rgba(0, 0, 0, 0.6);
  width: 60%;
  text-align: center;
  margin: 0 auto;	
}
.bg_hellblau{
	background-color:var(--hellblau);
	padding: 30px 50px 20px;
	margin: 0 0 10px 0;
}
.bg_hellblau img{
	margin-left:-20px;
}
.bg_hellgruen{
	background-color:var(--gruen);
	padding: 30px 50px 20px;
	text-align: center;
}
.bg_hellgruen h3{
	font-family:'MinionPro', serif;
}
.small{
	font-size: 50%;
}
.bg_hellgruen hr{
	
}
.img-kippen{
	transform: rotate(-3deg);
	border: 8px solid #fff;
	box-shadow: 5px 5px 8px rgba(0,0,0,0.8);
	width: 300px;/* Kippt das Bild 10 Grad nach links */
	margin-top: 30px;
}
.col-md-5, .col-md-7{
	
}

.col-md-5 .wrapper, .col-md-7 .wrapper{
	background-color:antiquewhite;
	margin:0 10px;
	padding: 0 40px;
	
	
}
.row{
	margin-bottom: 10px;
}
#legal .row{
	margin-bottom:0;
}
h1{
	font-size:3.5rem;
}
h2{
	font-size: 2.8rem;
}
h4{
	text-align: center;
	color:var(--rot);
	font-weight: bold;
	margin-top: 0;
}
h4 a{
	color: var(--rot);
	text-decoration: underline;
}
h4 a:hover{
	color: var(--rot);
	text-decoration: none;
}
.bg_hellgruen h2{
	margin-bottom: 2rem;
}

h2 span, h5 span, .bg_hellbau h3{
	display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 1px 10px 2px 60px;
font-family: 'Poppins Light';
	font-size: 80%;
}
.bg_rosa h2 span{
	padding: 1px 10px 5px 90px;
	font-size: 95%;
}
#termine h2 span{
	padding-left: 120px;
}

.bg_hellgruen h2 span{
	padding: 2px 10px 0 60px;
	margin-left: 20px;
}
.bg_hellblau h2 span{
	padding: 2px 10px 0 90px;
	margin-left: 20px;
	
}
.bg_hellgruen h3{
	font-size:3rem;
	line-height: 1;
}
h5 span{
	padding-left: 40px;
}
.arrow{
	text-align: center;
	padding: 30px 0;
}
.arrow img{
	padding-bottom: 30px;
	width: auto;
}
.bg_orange hr, .bg_hellgruen hr{
	width: 85%;
	margin: 0 auto;
	border-top: 1px solid rgba(0, 0, 0, 0.8);
}
.bg_hellgruen hr{
	width: 75%;
}
.bg_orange .instagram img{
	width: 50px;
}
.footer, .text-right{
	width: 100%;
}
@media only screen and (max-width: 991px) {
	.img-kippen{
		width: 100%;
	}
	h1{
		font-size: 2.5rem;
	}
	h2{
		font-size: 2.3rem;
	}
	.bg_rosa{
		padding: 80px 20px 50px;
	}
	.adresse, .instagram, .termine{
		padding-left:0;
		padding-right:0;
		font-size:0.9rem;
	}
	.bg_orange .text h2{
		padding-left:20px;
	}
	.bg_orange .text h5 {
       padding-right: 0;
    }
	.bg_hellgruen {  
        margin: 0;
		padding-left: 20px;
}
	.bg_hellgruen h3{ 
		font-size: 2.3rem;
	}
	.parent {
      min-height: 100vh; /* oder eine andere minimale Höhe */
     }

    .child {
     flex: 1; /* Nimmt verfügbaren Platz ein */
    }
	#termine .bg_orange a{
		left: 35%;
      transform: translateX(-30%);
	}
}
@media only screen and (max-width: 768px) {
	.container{
		margin-top:0 !important;
	}
	
	.bg_orange{
		margin-right:0;
	}
	#termine .bg_orange{
		padding: 40px 10px 40px;
	}
	#termine .bg_rosa{
		padding-left: 10px;
	}
	.img-kippen {
    width: 80%;
  }
	
	h1{
		font-size: 3.0rem;
	}
	 h2 {
    font-size: 2.0rem;
  }
    
	.bg_hellgruen {  
        margin: 0 0 10px 0;
		padding-left: 20px;
}
	.bg_hellgruen h3{ 
		font-size: 2.3rem;
	}
		
	.bg_hellblau{
		margin-top: 10px;
		padding: 30px 30px 20px;
	}
	.bg_hellblau h2 span{
		font-size: 1.3rem !important;
	}
	.bg_rosa{
		margin-top: 10px;
		padding-left: 20px;
	}
	.adresse, .instagram, .termine, bg_orange .text h2  {
  		padding-left: 20px;
	}
	.parent {
      min-height: auto; /* oder eine andere minimale Höhe */
     }
	.bg_hellblau img {
      margin-left: 0;
}
	.adresse, .bg_orange .text h2, .instagram, .termine{
		padding-left: 50px;
	}
	.bg_orange .text h5{
		margin-left: 130px;
		text-align:left !important;
	}
	#legal .bg_hellblau, #legal .bg_orange {
		padding-left: 20px;
		padding-right: 20px;
	}
	#termine .bg_orange a {  
  		top: 66.9%;
	}
	#termine .bg_orange span{
		display: none;
	}
	
}


@media only screen and (max-width: 450px) {
	h1{
		font-size: 2.5rem;
	}
	h2 {
        font-size: 2.2rem;
    }
	
	.adresse, .instagram, .termine, .bg_orange .text h2{
	padding: 20px 20px 0 20px;	
   }
	.bg_rosa, .bg_hellgruen {
		padding: 30px 30px 20px;
	}
	.bg_hellblau img {
  margin-left: 0;
    }	
	.bg_orange{
		word-break: break-word;
		padding: 30px 15px 20px;
	}
	#termine .bg_orange a{
		top:66.1%;
		font-size: 11px;
		left: 50%;
        transform: translateX(-50%);
	}
	
	.bg_rosa h2 span {
  padding: 1px 10px 5px 40px;
  font-size: 90%;
}
	
}

@media only screen and (max-width: 340px) {
	
	h1{
		font-size: 2.1rem;
	}
	h2 {
        font-size: 1.3rem;
		display: inline-block;
    }
	
	
	.bg_hellgruen h3 {
    font-size: 1.6rem;	
     }
	.bg_hellgruen h2 span{
		font-size: 1.1rem !important;
		padding-left: 40px;
	}
	.bg_hellblau { 
  padding: 30px 20px 50px;
	}
	.bg_hellblau h2 span {
    font-size: 1.1rem !important;
	padding: 2px 10px 0 26px;
    margin-left: 10px;
  }
	.bg_rosa, .bg_hellgruen {
		padding: 30px 20px 20px;
	}
	.bg_rosa h2 span{
		margin-left: 20px;
		padding: 1px 10px 5px 50px;
		font-size: 1.5rem;
	}
	.bg_orange .text h5{
		font-size: 1.3rem;
		margin-left:110px;
	}	
	#termine .bg_orange a{
		top:65.8%;
		
	}
	
}