/* Sonder SCSS */

/* DASKTOP */

@media (min-width:1100px) {


.higru-rot /* Hintergrund rot und weiße Schrift */ {
	background-color: var(--rot);
	color: #FFFFFF !important;
	padding: 50px;
	
	h1, h2, h3, h4, h5, h6 {
		padding-top: 0 !important;
		margin-top: 0 !important;
		color: #FFFFFF !important;
		text-transform: uppercase;
	}
	
	a {
		color: #FFFFFF !important;
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}
}

/* Grid */

.grid-wetter {
	display: grid;
    grid-template-columns: 1fr 350px;
    grid-template-rows: auto auto auto;
    grid-gap: 0 50px;
	
	.adresse-wetter {
		grid-row: 1; grid-column: 2;
	}
	.text-wlan {
		grid-row: 1; grid-column: 1;
	}	
}

.grid-arrangements {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 50px;
}

.grid-wellness {
	display: grid;
    grid-template-columns: 390px 1fr;
    grid-template-rows: auto 350px;
    grid-gap: 0 50px;
	
	    figure {
	        overflow: hidden;
		}
	
	    img {
	    	object-fit:cover; 
	    	width:500px; 
	    	height:390px;
    	}
}

.grid-golf {
	display: grid;
    grid-template-columns: 390px 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0 50px;
	
	    .ce_image {
			margin: 30px 0;
			height:450px;
	        overflow: hidden;
		}
	
	    img {
	    	object-fit: cover; 
	    	width: 500px; 
	    	height: 500px;
    	}
}

.corona {
	display: grid;
	grid-template-columns: 1fr 350px;
	grid-template-rows: auto;
	grid-gap: 50px 0;
	justify-items: stretch;
	align-items: stretch;
	align-content: space-around;
	background-color: var(--rot);
	.badekur {
		text-align: center;
		text-transform: uppercase;
		color: #ffffff;
		font-family: var(--hdrei);
		margin-top: 20px;
		transform: rotate(8deg);
		.zeile-eins, .zeile-drei {
			font-size: 1.5em;
			line-height: 1.1em;
		}
		.zeile-zwei {
			font-size: 3em;
			line-height: 1em;
		}
		.zeile-vier.badekur-button {
			button {
				font-size: 1.2em;
				line-height: 1em;
				color: #ffffff;
				text-transform: uppercase;
				padding: 20px;
				margin-top: 15px;
				border: 2px solid #ffffff;
				border-radius: 10px;
				background-image: none !important;
				background-color: var(--rot);
				cursor: pointer;
			}
		}
	}
}

.uberschrift /* Überschrift über ganze Breite */ {
	grid-row: 1; 
	grid-column: 1 / 3;
}


.grid-gallery-3 ul {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-gap: 10px 15px;
}
.ce_gallery.zimmergrundriss ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-gap: 20px 20px;
	justify-items: stretch;
	align-items: stretch;
	align-content: space-around;
	li {
		background-color: #e7e7e7;
		padding: 20px;
	}
	figure {
		height: 100%;
		img {
			width: 600px;
			height: 300px;
			object-fit: contain;
		}
	}
	figcaption {
		text-align: center;
		color: var(--rot);
		font-weight: bold;
		font-family: var(--hdrei);
		text-transform: uppercase;
		font-size: 1.1em;
		letter-spacing: 2px;
	}

}

.galerieheight {
	height: 350px;
	margin-top: 40px;
	
	.ce_image {
			margin: 30px 0;
			height: 350px;
	        overflow: hidden;
		}
	
	    img {
	    	object-fit: cover; 
	    	width: 500px; 
	    	height: 350px;
    	}
}

article {
	float: left;
	width: calc(50% - 25px);
	margin-right:50px;
}

article:last-child {
	margin-right: 0 !important;
}

}


/* TABLET */

@media (min-width:767px) and (max-width:1099px) {


.higru-rot /* Hintergrund rot und weiße Schrift */ {
	background-color: var(--rot);
	color: #FFFFFF !important;
	padding: 25px;
	
	h1, h2, h3, h4, h5, h6 {
		padding-top: 0 !important;
		margin-top: 0 !important;
		color: #FFFFFF !important;
		text-transform: uppercase;
	}
	
	a {
		color: #FFFFFF !important;
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}
}

/* Grid */

.grid-wetter {
	display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto auto auto auto;
    grid-gap: 0 50px;
	
	.adresse-wetter {
		grid-row: 1; grid-column: 1 / 3;
		margin: 0 180px;
	}
	
	.text-wlan {
		grid-row: 2; grid-column: 1 / 3;
	}	
}

.grid-arrangements, article {
	max-width: 500px;
	margin: 0 auto;
}

/*.grid-wellness {
	display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0 50px;
}*/

.uberschrift /* Überschrift über ganze Breite */ {
	grid-row: 1; 
	grid-column: 1 / 3;
}


.grid-gallery-3 ul {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-gap: 10px 15px;
}

.galerieheight {
	height: 350px;
	margin-top: 40px;
	
	.ce_image {
			margin: 30px 0;
			height: 350px;
	        overflow: hidden;
		}
	
	    img {
	    	object-fit: cover; 
	    	width: 500px; 
	    	height: 350px;
    	}
}

.corona {
	display: grid;
	grid-template-columns: 1fr 350px;
	grid-template-rows: auto;
	grid-gap: 50px 0;
	justify-items: stretch;
	align-items: stretch;
	align-content: space-around;
	background-color: var(--rot);
	.badekur {
		text-align: center;
		text-transform: uppercase;
		color: #ffffff;
		font-family: var(--hdrei);
		margin-top: 20px;
		transform: rotate(8deg);
		.zeile-eins, .zeile-drei {
			font-size: 1.5em;
			line-height: 1.1em;
		}
		.zeile-zwei {
			font-size: 3em;
			line-height: 1em;
		}
		.zeile-vier.badekur-button {
			button {
				font-size: 1.2em;
				line-height: 1em;
				color: #ffffff;
				text-transform: uppercase;
				padding: 20px;
				margin-top: 15px;
				border: 2px solid #ffffff;
				border-radius: 10px;
				background-image: none !important;
				background-color: var(--rot);
				cursor: pointer;
			}
		}
	}
}



}


/* MOBIL - HANDY */

@media (max-width:766px) {


.higru-rot /* Hintergrund rot und weiße Schrift */ {
	background-color: var(--rot);
	color: #FFFFFF !important;
	padding: 25px;
	
	h1, h2, h3, h4, h5, h6 {
		padding-top: 0 !important;
		margin-top: 0 !important;
		color: #FFFFFF !important;
		text-transform: uppercase;
	}
	
	a {
		color: #FFFFFF !important;
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}
}

/* Grid */

/*.grid-wetter {
	display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto auto auto auto;
    grid-gap: 0 50px;
	
	.adresse-wetter {
		grid-row: 1; grid-column: 1 / 3;
		margin: 0 180px;
	}
	
	.text-wlan {
		grid-row: 2; grid-column: 1 / 3;
	}	
}*/

/*.grid-arrangements, article {
	width: 500px;
	margin: 0 auto;
}*/

/*.grid-wellness {
	display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0 50px;
}*/

.uberschrift /* Überschrift über ganze Breite */ {
	grid-row: 1; 
	grid-column: 1 / 3;
}


.grid-gallery-3 ul {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-gap: 10px 15px;
}

.galerieheight {
	height: 150px;
	margin-top: 40px;
	
	.ce_image {
			margin: 30px 0;
			height: 150px;
	        overflow: hidden;
		}
	
	    img {
	    	object-fit: cover; 
	    	width: 300px; 
	    	height: 150px;
    	}
}

.corona {
	/*display: grid;
	grid-template-columns: 1fr 350px;
	grid-template-rows: auto;
	grid-gap: 50px 0;
	justify-items: stretch;
	align-items: stretch;
	align-content: space-around;*/
	background-color: var(--rot);
	.badekur {
		text-align: center;
		text-transform: uppercase;
		color: #ffffff;
		font-family: var(--hdrei);
		margin-top: 20px;
		transform: rotate(8deg);
		.zeile-eins, .zeile-drei {
			font-size: 1.5em;
			line-height: 1.1em;
		}
		.zeile-zwei {
			font-size: 3em;
			line-height: 1em;
		}
		.zeile-vier.badekur-button {
			button {
				font-size: 1.2em;
				line-height: 1em;
				color: #ffffff;
				text-transform: uppercase;
				padding: 20px;
				margin: 15px 0 50px 0;
				border: 2px solid #ffffff;
				border-radius: 10px;
				background-image: none !important;
				background-color: var(--rot);
				cursor: pointer;
			}
		}
	}
}



}






