@media (max-aspect-ratio:8/5) { /* width divided by height */


	h2 {
		font-size: 5vh;
		padding: 2.5vh;
		text-align: center;
		font-family: 'comic';
	}

	input {
		height: 4vh;
		resize: none;
		border: 0.1vh solid #000;
		font-size: 3vmin;
		padding: 1vh;
		color: #000000;
	}

	textarea {
		height: 17vh;
		width: 60%;
		resize: none;
		font-size: 3vmin;
		padding: 1vmin;
		border: 0.1vh solid #000;
		color: #000000;
	}

	button {
		display: inline-block;
		border: none;
		padding: 2vh 10vw;
		background-color: var(--thehovergreen);
		color: white;
		text-align: center;
		text-decoration: none;
		font-size: 3vmin;
		border-bottom-left-radius: 3vmin;
		border-top-left-radius: 3vmin;
		border-bottom-right-radius: 3vmin;
		border-top-right-radius: 3vmin;
        transition-property: background-color;
        transition-duration: 600ms;
    }
    button:hover {
        background-color: var(--thegreen);
    }
	tr :first-child {
		padding-right: 0.5em;
	}

	.horizontal {
		display:none;
	}

	.wrapper {
		display:grid;
		grid-template-columns: 1fr 9fr;
		grid-template-rows: 10vh 18vh 72vh 100vh 100vh 100vh 100vh 100vh auto;
		grid-template-areas:
		"hamburger Logo"
		"writing writing"
		"slideshowFrame slideshowFrame"
		"TA TA"
		"OEF OEF"
		"KO KO"
		"MIT MIT"
		"ANFRT ANFRT" 
		"Recht Recht";
	}

		.wrapper .hamburger {
			grid-area: hamburger;
			position: sticky;
			top: 0;
			margin: 0;
			padding: 0;
			z-index: 3;
			background-color: var(--milkglass);
		}
			.wrapper .hamburger > * {
				position: absolute;
				top: 0%;
				left: 0%;
				height: 10vh;
				width: 10vh;
				margin: inherit;
				padding: inherit;
			}
			.wrapper .hamburger #toggler {
				opacity:0;
				z-index:4;
				background-color: var(--milkglass);
			}

		.wrapper .Logo {
			grid-area: Logo;
			z-index: 2;
			position: sticky;
			top: 0;
			margin: 0;
			padding: 0;
			background-color: var(--milkglass);
		}
			.wrapper .Logo svg {
				position:relative;
				right:5vh;
				padding-top: 2%;
				height:100%;
				width:50%;	
			}

		.wrapper .writing {
			grid-area: writing;
			padding: 0;
			margin: 0;
		}
			.wrapper .writing #EBB {
				font-family: 'comic';
				font-size: 4.3vmin;
			}
			.wrapper .writing #PZRR {
				font-size: 3.9vmin;
			}

		.wrapper nav {
			position: fixed;
			top: 10vh;
			z-index: 3;
			width: 85vw;
			height: 90vh;
			transform: translateX(-85vw);
			transition: transform 0.5s ease;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: flex-start;
			background-color: var(--thewhite);
		}
			.wrapper nav > a {
				display: block;
				width:100%;
				text-align: center;
				padding: 2.5vh;
				display: block;
				color: var(--thehovergreen);
				background-color: var(--thewhite);
				text-decoration: none;
			}
				.wrapper nav > a:active {
					color:var(--thewhite);
					transition:color 0.3s ease;
					background-color:var(--thehovergreen);
					transition:background-color 0.3s ease;
				}

		.wrapper .slideshowFrame {
			grid-area: slideshowFrame;
			margin: 0;
			padding: 0;
			border-top-left-radius: 3vmin;
			border-top-right-radius: 3vmin;
			display: block;
			background-color: var(--thehovergreen);
		}
			.wrapper .slideshowFrame .Frame {
				height: 100%;
				width: 100%;
				border-bottom-left-radius: 3vmin;
				border-top-left-radius: 3vmin;
				border-bottom-right-radius: 3vmin;
				border-top-right-radius: 3vmin;
				overflow: hidden;
			}
				.wrapper .slideshowFrame .Frame .Film {
					position: relative; /*relative to its own original position*/
					left: 0%;
					top: 0%;
					transition-property: left;
					transition-duration: 1s;
					width: 1700%;
					height: 100%;
					margin: 0;
					padding: 0;
					display: flex;
					flex-direction: row;
				}
					.wrapper .slideshowFrame .Frame .Film > div {
						height: 100%;
						flex-basis: 100%;
						align-content: center;
						padding-left: 0.5vw;
						padding-right: 0.5vw;
						padding-bottom: 0.5vh;
						padding-top: 0.5vh;
						background-color: var(--thehovergreen);
					}
					.wrapper .slideshowFrame .Frame .Film > div > img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: center center;
						border-bottom-left-radius: 3vmin;
						border-top-left-radius: 3vmin;
						border-bottom-right-radius: 3vmin;
						border-top-right-radius: 3vmin;
					}
					.wrapper .slideshowFrame .Frame .Film div:first-child > img,
					.wrapper .slideshowFrame .Frame .Film div:nth-child(9) > img,
					.wrapper .slideshowFrame .Frame .Film div:nth-child(17) > img {
						object-position: center center;
					}
					.wrapper .slideshowFrame .Frame .Film div:nth-child(2) > img,
					.wrapper .slideshowFrame .Frame .Film div:nth-child(10) > img {
						object-position: 62% center;
					}
					.wrapper .slideshowFrame .Frame .Film div:nth-child(3) > img,
					.wrapper .slideshowFrame .Frame .Film div:nth-child(11) > img {
						object-position: 60% center;
					}
					.wrapper .slideshowFrame .Frame .Film div:nth-child(4) > img,
					.wrapper .slideshowFrame .Frame .Film div:nth-child(12) > img {
						object-position: 58% center;
					}
					.wrapper .slideshowFrame .Frame .Film div:nth-child(5) > img,
					.wrapper .slideshowFrame .Frame .Film div:nth-child(13) > img {
						object-position: 45% center;
					}
					.wrapper .slideshowFrame .Frame .Film div:nth-child(6) > img,
					.wrapper .slideshowFrame .Frame .Film div:nth-child(14) > img {
						object-position: 62% center;
					}.wrapper .slideshowFrame .Frame .Film div:nth-child(7) > img,
					.wrapper .slideshowFrame .Frame .Film div:nth-child(15) > img {
						object-position: 62% center;
					}.wrapper .slideshowFrame .Frame .Film div:nth-child(8) > img,
					.wrapper .slideshowFrame .Frame .Film div:nth-child(16) > img {
						object-position: 62% center;
					}
		.wrapper .slideshowFrame .PictureLinkContainer {
			z-index: 1;
            position: absolute;
			left: 0;
			right:0;
			margin: auto;
            bottom: 2vh;
			height: 14vmin;
			width: 90vmin;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-evenly;
		}
			.wrapper .slideshowFrame .PictureLinkContainer .PictureLink {
				height: 10vmin;
				width: 10vmin;
				border-radius: 50%;
				background-color: var(--milkglass);
				transition-property: background-color, border-radius;
                transition-duration: 800ms;
                transition-timing-function: ease;
			}
				.wrapper .slideshowFrame .PictureLinkContainer > div:first-child {
					background-color:var(--thehovergreen);
				}

		.wrapper .Therapieangebote { 
			grid-area:TA;
			background:var(--thegreen);
		}
			.wrapper .Therapieangebote ul {
				/*list-style-position:inside;*/
				text-align:left;
				margin-left: 1.5em;
				overflow-wrap:break-word;
			}

		.wrapper .foto_treatmentroom {
			grid-area:foto_treatmentroom;
			display:none;
		}

		.wrapper .foto_treatment {
			grid-area:foto_treatment;
			display:none;
		}

		.wrapper .Kontakt { 
			grid-area:KO;
			text-align:center;
			background:var(--thegreen);
			color:#ffffff;
		}


		.wrapper .Oeffnungszeiten { 
			grid-area:OEF;
			text-align:center;
			background:#ffffff;
			color:#000000;
		}
			.wrapper .Oeffnungszeiten table {
				display:table;
				text-align:left;
			}

		.wrapper .Mitteilung { 
			grid-area:MIT;
			text-align:center;
			color:#000000;
			background:#ffffff;
		}
			.wrapper .Mitteilung form {
				width:80%;
				display:flex;
				flex-flow: column nowrap;
				align-items:center;
				justify-content:center;
			}
				.wrapper .Mitteilung form > * {
					width:90%;
					margin-bottom:2%;
				}
				.wrapper .Mitteilung form input:last-of-type {
					transition-property: background-color, color;
					transition-duration: 1s;
					transition-timing-function: ease;
				}


		.wrapper .Anfahrt { 
			grid-area:ANFRT;
			margin-bottom:0;
			background:var(--thegreen);
			color:#ffffff;
		}
			.wrapper .Anfahrt .order {
				height:75%;
				width:100%;
			}
				.wrapper .Anfahrt .order .map {
					z-index: 0;
					height: 75vh;
					width: 100%;
					background-color: var(--milkglass);
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
					.wrapper .Anfahrt .order .map p {
						align-self: center;
					}
					.wrapper .Anfahrt .order .map > button {
						width: 70%;
						margin-top: 8%;
						align-self: center;
					}
				.wrapper .Anfahrt .order .address {
					display: none;
				}

		.wrapper .Recht {
			grid-area: Recht;
			text-align: center;
			color: #000000;
			background: var(--thewhite);
		}
			.wrapper .Recht > button {
				width: 100%;
			}
			.wrapper .Recht h2 {
				margin-top: 10vh;
			}
			.wrapper .Recht .Impressum {
				display: none;
				flex-direction:column; 
				margin: 0;
				text-align: left;
				background: var(--thewhite);
				color: #000000;
			}
			.wrapper .Recht .Datenschutz {
				display: none;
				flex-direction:column;
				margin: 0;
				text-align: left;
				background: var(--thewhite);
				color: #000000;
			}
}