@charset "utf-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
.articleContainer {
	margin: auto;
	width: 95%;
	display: grid;
	grid-row-gap: 50px;
	grid-column-gap: 10px;
	grid-template-columns: auto auto auto;
}
.innerContainer{
	display: flex;
	text-align:center;
	align-self: auto;
	margin:30px auto 20px auto;
}
.articlepic {
	width: 400px;
	height: 220px;
	background-position: center;
	background-size: cover;/* Bild wird im div selbst über style="background-image: url(...)" geändert */
}
.moreText {
	padding-left: 15px;
	text-align:left;
	color: #39353D;
	font-family: 'Poppins', sans-serif;
}
.iconWrapper {
	margin: -100px 15px 15px 15px;
	position: relative;
}
.iconText {
	width: 100px;
	text-align: center;
	font-size: 14px;
	margin: 10px -20px 0 -22px;
	color:#39353D;
	font-family: 'Poppins', sans-serif;
}.iconText-P {
	width: 100px;
	text-align: center;
	font-size: 14px;
	margin: 10px -20px 0 -22px;
	color:#fff;
	font-family: 'Poppins', sans-serif;
}
.moreText-P {
	padding-left: 15px;
	text-align:left;
	color: #fff;
	font-family: 'Poppins', sans-serif;
}
/* 1 Room */
.articleBox-1R {
	width: 400px;
	height: 400px;
	border: 3px solid #E1E1E0;
	background-color: #E1E1E0;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-1R {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #E1E1E0;
	position: static;
	top: 240px;
}
.articleInfo-1R h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
}
.icons-1R {
	font-size: 30px;
	color: #E1E1E0;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-1R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #E1E1E0;
}
.iconCircle2-1R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #E1E1E0;
}
.iconCircle3-1R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #E1E1E0;
}
.iconCircle4-1R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #E1E1E0;
}
/* 2 Rooms */
.articleBox-2R {
	width: 400px;
	height: 400px;
	border: 3px solid #BDDFCF;
	background-color: #BDDFCF;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-2R {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #BDDFCF;
	position: static;
	top: 240px;
}
.articleInfo-2R h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
}
.icons-2R {
	font-size: 30px;
	color: #BDDFCF;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-2R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #BDDFCF;
}
.iconCircle2-2R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #BDDFCF;
}
.iconCircle3-2R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #BDDFCF;
}
.iconCircle4-2R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #BDDFCF;
}
/* 3 Rooms */
.articleBox-3R {
	width: 400px;
	height: 400px;
	border: 3px solid #C9C1B3;
	background-color: #C9C1B3;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-3R {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #C9C1B3;
	position: static;
	top: 240px;
}
.articleInfo-3R h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;

}
.icons-3R {
	font-size: 30px;
	color: #C9C1B3;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-3R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #C9C1B3;
}
.iconCircle2-3R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #C9C1B3;
}
.iconCircle3-3R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #C9C1B3;
}
.iconCircle4-3R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #C9C1B3;
}
/* 4 Rooms */
.articleBox-4R {
	width: 400px;
	height: 400px;
	border: 3px solid #BBE2EF;
	background-color: #BBE2EF;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-4R {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #BBE2EF;
	position: static;
	top: 240px;
}
.articleInfo-4R h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
}
.icons-4R {
	font-size: 30px;
	color: #BBE2EF;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-4R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #BBE2EF;
}
.iconCircle2-4R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #BBE2EF;
}
.iconCircle3-4R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #BBE2EF;
}
.iconCircle4-4R {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #BBE2EF;
}
/* Premium/Prestige */
.articleBox-P {
	width: 400px;
	height: 400px;
	border: 3px solid #BCB3F2;
	background-color: #BCB3F2;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-P {
	width: 400px;
	height: 171px;
	background-color: #BCB3F2;
	position: static;
	top: 240px;
}
.articleInfo-P h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
	color: #FFFFFF;
}
.icons-P {
	font-size: 30px;
	color: #BCB3F2;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-P {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #BCB3F2;
}
.iconCircle2-P {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #BCB3F2;
}
.iconCircle3-P {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #BCB3F2;
}
.iconCircle4-P {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #BCB3F2;
}
/* Premium Modelle */
#azalee{
	border: 3px solid #f4a0a3;
	background-color: #f4a0a3;
}
#azaleeIcon{
	color: #f4a0a3;
}
#azaleeIconBorder{
	border: 3px solid #f4a0a3;
}
#capucine{
	border: 3px solid #f6a86e;
	background-color: #f6a86e;
}
#capucineIcon{
	color: #f6a86e;
}
#capucineIconBorder{
	border: 3px solid #f6a86e;
}
#magnolia{
	border: 3px solid #da83b5;
	background-color: #da83b5;
}
#magnoliaIcon{
	color: #da83b5;
}
#magnoliaIconBorder{
	border: 3px solid #da83b5;
}
#violette{
	border: 3px solid #afa6d2;
	background-color: #afa6d2;
}
#violetteIcon{
	color: #afa6d2;
}
#violetteIconBorder{
	border: 3px solid #afa6d2;
}
#jasmin{
	border: 3px solid #d4dc80;
	background-color: #d4dc80;
}
#jasminIcon{
	color: #d4dc80;
}
#jasminIconBorder{
	border: 3px solid #d4dc80;
}
#flieder{
	border: 3px solid #c897c5;
	background-color: #c897c5;
}
#fliederIcon{
	color: #c897c5;
}
#fliederIconBorder{
	border: 3px solid #c897c5;
}
#peony{
	border: 3px solid #eaadcf;
	background-color: #eaadcf;
}
#peonyIcon{
	color: #eaadcf;
}
#peonyIconBorder{
	border: 3px solid #eaadcf;
}
#sa{
	border: 3px solid #fbd96d;
	background-color: #fbd96d;
}
#saIcon{
	color: #fbd96d;
}
#saIconBorder{
	border: 3px solid #fbd96d;
}
#st{
	border: 3px solid #f1c274;
	background-color: #f1c274;
}
#stIcon{
	color: #f1c274;
}
#stIconBorder{
	border: 3px solid #f1c274;
}
/* Access */
.articleBox-access {
	width: 400px;
	height: 400px;
	border: 3px solid #A7F2BC;
	background-color: #A7F2BC;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-access {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #A7F2BC;
	position: static;
	top: 240px;
}
.articleInfo-access h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
}
.icons-access {
	font-size: 30px;
	color: #A7F2BC;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-access {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #A7F2BC;
}
.iconCircle2-access {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #A7F2BC;
}
.iconCircle3-access {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #A7F2BC;
}
.iconCircle4-access {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #A7F2BC;
}
/* Ohara 2-Rooms */
.articleBox-O2 {
	width: 400px;
	height: 400px;
	border: 3px solid #FFDDB1;
	background-color: #FFDDB1;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-O2 {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #FFDDB1;
	position: static;
	top: 240px;
}
.articleInfo-O2 h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
}
.icons-O2 {
	font-size: 30px;
	color: #FFDDB1;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-O2 {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #FFDDB1;
}
.iconCircle2-O2 {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #FFDDB1;
}
.iconCircle3-O2 {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #FFDDB1;
}
.iconCircle4-O2 {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #FFDDB1;
}
/* Ohara 2-Baths */
.articleBox-O2B {
	width: 400px;
	height: 400px;
	border: 3px solid #DC8F86;
	background-color: #DC8F86;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-O2B {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #DC8F86;
	position: static;
	top: 240px;
}
.articleInfo-O2B h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
}
.icons-O2B {
	font-size: 30px;
	color: #DC8F86;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-O2B {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #DC8F86;
}
.iconCircle2-O2B {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #DC8F86;
}
.iconCircle3-O2B {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #DC8F86;
}
.iconCircle4-O2B {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #DC8F86;
}
/* Ohara 3-Rooms */
.articleBox-O3 {
	width: 400px;
	height: 400px;
	border: 3px solid #94C69A;
	background-color: #94C69A;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-O3 {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #94C69A;
	position: static;
	top: 240px;
}
.articleInfo-O3 h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
}
.icons-O3 {
	font-size: 30px;
	color: #94C69A;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-O3 {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #94C69A;
}
.iconCircle2-O3 {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #94C69A;
}
.iconCircle3-O3 {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #94C69A;
}
.iconCircle4-O3 {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #94C69A;
}
/* Ohara KW */
.articleBox-KW {
	width: 400px;
	height: 400px;
	border: 3px solid #feda9e;
	background-color: #feda9e;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-KW {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #feda9e;
	position: static;
	top: 240px;
}
.articleInfo-KW h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
}
.icons-KW {
	font-size: 30px;
	color: #feda9e;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-KW {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #feda9e;
}
.iconCircle2-KW {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #feda9e;
}
.iconCircle3-KW {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #feda9e;
}
.iconCircle4-KW {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #feda9e;
}
/* Coco */
.articleBox-coco {
	width: 400px;
	height: 400px;
	border: 3px solid #FFC666;
	background-color: #FFC666;
	overflow: hidden;
	border-radius: 2%;
}
.articleInfo-coco {
	width: 400px;
	height: 171px;
	color: white;
	background-color: #FFC666;
	position: static;
	top: 240px;
}
.articleInfo-coco h3 {
	font-size: 28px;
	color: #39353D;
	font-family: "Merienda", cursive;
	padding: 15px;
	margin-top: 60px;
	text-align:left;
}
.icons-coco {
	font-size: 30px;
	color: #FFC666;
	text-align: center;
	padding-top: 5px;
}
.iconCircle1-coco {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -185px 0px 0px 15px;
	border: 3px solid #FFC666;
}
.iconCircle2-coco {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0 0 107px;
	border: 3px solid #FFC666;
}
.iconCircle3-coco {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 200px;
	border: 3px solid #FFC666;
}
.iconCircle4-coco {
	background-color: white;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: -60px 0px 0px 290px;
	border: 3px solid #FFC666;
}

 @media screen and (max-width: 1270px) {
	 .articleContainer {
 grid-template-columns: auto auto;
	
}
 }
 @media screen and (max-width: 850px) {
 .articleContainer {
 grid-template-columns: auto;
}
}