@media only screen and (min-width: 601px) and (max-width: 768px) and (orientation:portrait)	
 {
	/* Definition von übergeordneten Variablen */
	:root {
		--grid-template-columns-smartPort: 10vw 90vw;
		--grid-template-rows-smartPort: 13vh 87vh;
		--grid-template-areas:
			'header header'
			'menu main';
		--grid-height-smartPort: 100vh;
		--grid-width-smartPort: 100vw;
	}

	/* Übergeordnete Einstellungen */
	html,
	body {
		height: 100%;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	p:not([hidden]) {
		display: block;
		/*margin-top: 7vh;*/
		margin-bottom: 0;
	}

	h2 {
		font-size: 3vh;
		margin-top: 5vh;
	}

	h3 {
		font-size: 2.5vh;
		margin-top: 5vh;
		margin-bottom: 5vh;
	}

	/*------------------------------------------*/
	/* ------------ GRID CONTAINER ------------ */
	/*------------------------------------------*/
	.grid-container {
		display: grid;
		grid-template-rows: var(--grid-template-rows-smartPort);
		grid-template-columns: var(--grid-template-columns-smartPort);
		grid-template-areas: var(--grid-template-areas);
		height: var(--grid-height-smartPort);
		width: var(--grid-width-smartPort);
	}

	/*------------------------------------------*/
	/* ------------ O V E R L A Y S ----------- */
	/*------------------------------------------*/

	/* Transparenzebene */
	.overlays {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(255,255,255,0.5);
		cursor: pointer;
		z-index: 10000;
	}

	/* Eigenschaften des Willkommensfenster */
	#alert_welcome {
		position: relative;
		padding: 1vh 1vw;
		margin: 0.2vh 0.5vw;
		height: 96.2%;
		width: 94.5%;
		background-color: rgba(255,255,255,1);
		color: black;
		border: 5px solid #003584;
		cursor: auto;
		text-align: center;
		font-size: 2vh;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		z-index: 11000;
	}

	#alert_contact,
	#alert_psearch {
		position: relative;
		padding: 1vh 1vw;
		margin: 0.2vh 0.5vw;
		height: 96.2%;
		width: 94.5%;
		background-color: rgba(255,255,255,1);
		color: black;
		border: 5px solid #003584;
		cursor: auto;
		text-align: center;
		font-size: 1.5vh;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		z-index: 11000;
	}

	#alert_contact,
	#alert_psearch {
		display: none;
	}
	
	#TTG-logo-welcome,
	#TTG-logo-contact,
	#TTG-logo-psearch {
		position: relative;
		display: inline-block;
		top: 1vh;
		max-width: 100%;
		aspect-ratio: calc(480/93);
		vertical-align: middle;
	}

	/* Eigenschaften der Schaltfläche*/
	.closebtn {
		display: inline-block;
		position: relative;
		padding: 1vh 1vw;
		margin-top: 5vh;
		/*height: vh;*/
		width: 75vw;
		color: #33A92F;
		font-weight: bold;
		float: center;
		font-size: 1.8vh;
		text-align: center;
		line-height: 3vh;
		cursor: pointer;
		transition: 0.3s;
		background-color: white;
		border: 2px solid #32738E;
	}

	.closebtn:hover {
		color: rgba(50,118,142,1);
	}

	/* ------------ GRID AREA HEADER | PARENT ELEMENT ------------ */
	.header {
		grid-area: header;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}

	/*------------- H E A D E R   C H I L D R E N -----------------*/
	
	#developer {
		position: absolute;
		top: 1px;
		right: 1px;
		margin-top: 0vh;
		font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
		font-size: 15px;
	}

	#PGG-logo {
		margin: 0;
		position: absolute;
		top: 2px;
		height: 5vh;
		margin-top: 2vh;
		margin-right: 0.4vw;
		float: right;
		right: 2px;
	}

	#TTG-logo {
		position: absolute;
		margin-top: 2px;
		margin-left: 2px;
		max-width: 45vw;
		height: auto;
		top: 2px;
		float: left;
	}

	#projecttitle {
		margin: 0;
		padding-left: 0.4vw;
		padding-right: 0.4vw;
		font-size: 1.65vh;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		cursor: auto;
		width: 100%;
		padding-bottom: 0.5%;
		border-style: none none solid none;
		border-color: #003584;
	}

	/* ------------ GRID AREA MENU | PARENT ELEMENT ------------ */

	.menu {
		grid-area: menu;
		width: 100%;
		
	}

	/*------------- M E N U  C H I L D R E N -----------------*/

	/* M E S S W E R K Z E U G */
	/*Alle Textelemente*/
	.measuretool{
		margin: 2vh -3vw;
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		text-align: left;
		color: #fff;
		cursor: all-scroll;
		overflow: auto;
		word-wrap: break-word;
		padding-left: 1vw;
		padding-right: 1vw;
		width: 58vw;
	}

	/*Auswahl der Messart*/
	.form-select {
		font-size: calc(14px + 0.390625vw);
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		width: 55vw;
		height: auto;
		min-height: 3vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		color: #33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		box-shadow: inset 0vw 0vw 1vw 0vw #75A8C1;
		background: #fff;
	}

	.measurebutton {
		width:3vw;
		height:3vw;
	}

	/*Änderung bei Berührung*/
	.form-select:hover {
		background: white;
		color: #33A92F;
	}

	/*Alle weiteren Schaltflächen*/
	.form-control {
		font-size: auto;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		width: 55vw;
		height: auto;
		min-height: 3vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		box-shadow: inset 0vw 0vw 1vw 0vw #75A8C1;
		text-shadow: inset 0px 0px 0px #75A8C1;
		background:#fff;
	}

	/* und wie sie sich bei Berührung verändern*/
	.form-control:hover{
		background: white;
		color: #33A92F;
	}

	/* K O N T A K T F O R M U L A R */
	/*Eigenschaften des oberen Textelements*/
	.contact{
		margin: 2vh -3vw;
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		color: #fff;
		cursor: all-scroll;
		overflow: auto;
		word-wrap: break-word;
		padding-left: 1vw;
		padding-right: 1vw;
		width: 55vw;
	}

	/*Eigenschaften des übrigen Texts*/
	.contactform-properties{
		margin: 0vh -3vw;
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		color: #fff;
		cursor: all-scroll;
		padding-left: 1vw;
		padding-right: 1vw;
		width: 55vw;
	}

	/*Eigenschaften Eingabe Vorname*/
	#firstname {
		width: auto;
		height: auto;
		min-height: 2.5vh;
		border-width: 0.5vw;
		color:#33A92F;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		font-size: calc(14px + 0.390625vw);
	}

	/* Eigenschaften Eingabe Nachname */
	#lastname {
		width: auto;
		height: auto;
		min-height: 2.5vh;
		border-width: 0.5vw;
		color:#33A92F;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		font-size: calc(14px + 0.390625vw);
	}

	/* Eigenschaften Eingabe E-Mail-Adresse */
	#emailadresse {
		width: auto;
		height: auto;
		min-height: 2.5vh;
		border-width: 0.5vw;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		font-size: calc(14px + 0.390625vw);
	}

	.contactformtext {
		margin-top: 1vh;
	}

	/* Textinput Ihre Nachricht */
	#message {
		width: 55vw;
		height: auto;
		min-height: 20vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		overflow-wrap: break-word;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		font-size: calc(14px + 0.390625vw);
	}

	/* Textinput der Messung */
	#coordField {
		height: auto;
		min-height: 8vh;
		width: 55vw;
		margin: 1vw 0vw;
		overflow-wrap: break-word;
		color:#33A92F;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		font-size: calc(14px + 0.390625vw);
	}

	/* Schaltfläche zum Absenden */
	#sendMessage {
		font-size:16px;
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		width: 55vw;
		height: auto;
		min-height: 3vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		box-shadow: inset 0vw 0vw 1vw 0vw #75A8C1;
		text-shadow: inset 0px 0px 0px #75A8C1;
		background:#fff;
	}

	#measurement.contactbutton {
		width: 3vw;
		height: 3vw;
	}

	/* A D R E S S E N S U C H E */
	/* Eigenschaften der Einleitung */
	p.address-search{
		margin-left: -1vw;
		margin-bottom: 4vw;
	}

	.addresssearch,
	.address-search {
		margin: 2vh -3vw;
		margin-right: 0.5vh;
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		color: #fff;
		cursor: all-scroll;
		overflow: auto;
		word-wrap: break-word;
		padding-left: 1vw;
		padding-right: 1vw;
	}

	.addresssearch-properties{
		margin: 2vh -3vw;
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		color: #fff;
		cursor: all-scroll;
		padding-left: 1vw;
		padding-right: 1vw;
		width: 55vw;
	}

	/* Eingabemaske des Straßennamens */
	#streetform {
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		width: 55vw;
		height: auto;
		min-height: 2.5vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		box-shadow: inset 0vw 0vw 1vw 0vw #75A8C1;
		background:#fff;
	}

	/* Schalftflächen der Adresssuche */
	#nowzoom,
	#mapzoom {
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		width: 55vw;
		height: auto;
		min-height: 3vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		box-shadow: inset 0vw 0vw 1vw 0vw #75A8C1;
		background:#fff;
		margin-left: -2vw;

	}

	/* F L U R S T Ü C K S U C H E */
	p.parcel-search {
		margin-top: 0vh;
	}

	/* Eigenschaften Einleitung*/
	.parcelsearch-properties {
		margin: 2vh -3vw;
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		color: #fff;
		cursor: all-scroll;
		overflow: auto;
		word-wrap: break-word;
		padding-left: 1vw;
		padding-right: 1vw;
	}

	/* Eigenschaften der Inputmasken*/
	#districtform{
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		width: 56.5vw;
		height: auto;
		min-height: 2.5vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		box-shadow: inset 0vw 0vw 1vw 0vw #75A8C1;
		background:#fff;
	}
	#parcelform,
	#plotform,
	#landparcelform {
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		width: 55vw;
		height: auto;
		min-height: 2.5vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		box-shadow: inset 0vw 0vw 1vw 0vw #75A8C1;
		background:#fff;
	}

	/* Eigenschaften der Schaltflächen */
	#nowzoomtoparcel,
	#deletesearchedparcels,
	#showallparcels,
	#parceltomapzoom
	{
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		width: 56vw;
		height: auto;
		min-height: 3vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		box-shadow: inset 0vw 0vw 1vw 0vw #75A8C1;
		background:#fff;
		margin-left: -2vw;
	}

	/* 	P D F   E X P O R T */
	.mapexport {
		margin: 2vh -3vw;
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		color: #fff;
		cursor: all-scroll;
		overflow: auto;
		word-wrap: break-word;
		padding-left: 1vw;
		padding-right: 1vw;
		width: 55vw;
	}

	#export-pdf {
		font-size: calc(14px + 0.390625vw);
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		width: 55vw;
		height: auto;
		min-height: 3vh;
		border-width: 0.5vw;
		margin: 1vw 0vw;
		color:#33A92F;
		border-color:#75A8C1;
		border-top-left-radius: 1.5vw;
		border-top-right-radius: 1.5vw;
		border-bottom-left-radius: 1.5vw;
		border-bottom-right-radius: 1.5vw;
		box-shadow: inset 0vw 0vw 1vw 0vw #75A8C1;
		background:#fff;
		margin-left: -2vw;
	}


	/* ------------ GRID AREA MAIN ------------ */
	.main {
		grid-area: main;
		position: relative;
		height: 100%;
	}

 	/*------------- M A I N  C H I L D R E N -----------------*/
	/* Eigenschaften Text Info Hintergrundkarten */
	/* Basis ist in ol.css unter .ol-attribution ul definiert*/
	
	/* Eigenschaften der Karte*/
	.map {
		position: absolute;
	}

	.ol-viewport {
		grid-area: main;
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
	}

	.ol-viewport canvas {
		grid-area: main;
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	/* Eigenschaften Text Info Hintergrundkarten */
	.ol-attribution ul{
		display: none;
	}

	#backgroundmaps {
		grid-area: main;
		position: fixed;
		bottom: 0vh;
		pointer-events: auto;
		text-align: left;
		width: 90vw;
		height: 8vh;
		z-index: 10;
		font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
		font-size: calc(12px + 0.390625vw);
		color: #000;
		background-color: #ffffffa1;
		padding: 1vw;
	}

	#legend {
		padding-left: 2vw;
		padding-right: 2vw;
		padding-bottom: 0vw;
		padding-top: 1vh;
		grid-area: main;
		position: absolute;
		background-color: #fff;
		border-style: solid;
		border-color: #003584;
		border-width: 2px;
		z-index: 9;
		font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
		font-size: calc(12px + 0.390625vw);
		cursor: auto;
		width: 37.2vw;
		max-height: 69vh;
		bottom: 11.3vh;
		right: 1vw;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		overflow: scroll;
		word-wrap: break-word;		
	}

	#legendControlButton {
		padding-left: 2vw;
		padding-right: 2vw;
		padding-bottom: 0vw;
		grid-area: main;
		position: absolute;
		background-color: #fff;
		border-style: solid;
		border-color: #003584;
		border-width: 2px;
		color: #33A92F;
		font-weight: bold;
		font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
		font-size: calc(12px + 0.390625vw);
		z-index: 10;
		width: 41.9vw;
        min-height: 3vh;
        bottom: 9vh;
        right: 1vw;
        line-height: 1vh;
	}

	.legend-item {
		display: flex;
		align-items: center;
		text-align: left;
		height: 5vh;
		padding-bottom: 2.5%;
	}

	p.legend-name {
		display: inline-block;
		padding: 1% 2% 1% 3%;
		font-size: calc(12px + 0.390625vw);
		margin-top: 0vh;
		margin-bottom: 0;
	}

	.legend-square {
		stroke-linejoin: bevel;
		stroke-width: 3;
		height: 2vh;
		width: 2vh;
		align-items: center;
	}

}