@media (min-aspect-ratio: 1/1) {
	/* Landscape */
	html, body {
		min-height: 100dvh;
		overflow: hidden;
		max-height: 100%;
	}
	
	#nav-tab {
		flex-shrink: 0;
	}
	
	#nav-tabContent {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 0;
		overflow-y: auto;      /* vertikal scrollen */
		overflow-x: hidden;    /* horizontal NIE scrollen */
		max-width: 100vw;      /* nie breiter als der Viewport */
		box-sizing: border-box;
	}
	
	.fullwindow {
		height: 100dvh;
		display: flex;
		flex-direction: column;
	}
	
	.grid-container { /* Landscape */
		width: 100%;
		height: 100%;
		overflow: hidden;
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: 1rem;
	}
	
	.board-pane { /* Landscape */
		width: min(100%, calc(100dvh - 60px - 2rem));
		aspect-ratio: 1 / 1;
		max-width: 100%;
		max-height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.input-pane { /* Landscape */
		min-width: 450px;
		height: min(100%, calc(100dvh - 60px - 2rem));
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
}

/*	PORTRAIT MODUS	*/
@media (max-aspect-ratio: 1/1) {
	/*	PORTRAIT MODUS	*/
	html, body {
		min-height: 100vh;
		overflow-y: scroll;
	}
	
	.fullwindow {
		height: auto;
		display: block;
	}
	
	.grid-container {
		display: grid;
		width: 100%;
		gap: 3px;
		justify-items: center;
		/* grid-template-rows: auto auto; // optional */
	}
	
	.board-pane {
		display: flex;
		align-items: center;
		justify-content: center;
		aspect-ratio: 1 / 1;
		width: min(100vw - 2rem, 100dvh - 60px - 2rem - 300px);
		max-width: 100%;
		max-height: 100%;
	}
	
	.input-pane {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-self: stretch;
		min-height: 300px;
		/* KEINE height, KEIN min-height, KEIN flex, KEIN overflow! */
	}
	
}