:root {
  --width: 940px;
  --txt-color: #a0a0a0;
  --hl-color: #313131;
  --space: 14px;
}

@font-face { 
	font-family: 'Sansation'; 
	src: url('fonts/Sansation_Regular.ttf') format('truetype');

	font-family: 'Sansation'; 
	src: url('fonts/Sansation_Bold.ttf') format('truetype');
	font-style: bold;
	
	font-family: 'Sansation'; 
	src: url('fonts/Sansation_Light.ttf') format('truetype');
	font-style: light;
}

body {
	font-family: Sansation, sans-serif;
	color: var(--txt-color);
	font-size: 14px;
	padding: 0px;
	margin: var(--space);
}

div#menue {
	width: var(--width);
	height: 105px;
	margin-left:auto;
	margin-right:auto;
	white-space:nowrap;
	position: relative;
}

div#menueleiste {
	display:inline-flex;
	gap: var(--space);	
	flex-direction: row;
	align-items: flex-end;
}

div#menueleiste, div#bildleiste {
	width: 100%;
	position: absolute;
	bottom: 0px;
}

div#m1, div#m2, div#m3 {
	flex: 1 0 calc((var(--width) - 2 * var(--space)) / 3); /* 304px; */
}

div#bilder {
	overflow: hidden;
	//text-align: center;
	
	display: flex;
	gap: calc(var(--space) / 3); /* 5px; */
	align-items: flex-start;
	justify-content: center;
}

div#icon_menu {
	margin-top: var(--space);
	//visibility: hidden;
}

#m4_wrap { 
	position:absolute;
	left: calc(var(--width) + var(--space));
	bottom: calc(var(--space) / 2);
	visibility: hidden;
}

div#m2_sub {
	display:none;
}

div#hauptfenster {
	margin-top: var(--space);
	margin-left:auto;
	margin-right:auto;
	width: var(--width);
	
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space);
}

.clickable {
	cursor:pointer;
}

div#hauptfenster img {
	border: 0;
	margin: 0;
	max-width: min(100%, var(--width));
}

iframe {
	border: 0;
	margin: 0;
	width: min(100%, var(--width));

}

img.logo {
	content:url(images/pages/system/Logo.png);
	margin-bottom: calc(var(--space) * -1);
	//position: relative;
}

div#menueleiste, img.selected {
	border-color: var(--hl-color);
	border-bottom: 2px solid;
	padding-bottom: calc(var(--space) / 2);
}

a:link,a:visited {
	text-decoration: none;
	color: var(--txt-color);
}

a:hover,a:active,a:focus, .current {
	text-decoration: none;
	color: var(--hl-color);
}

div#menueleiste a, div#m4 a {
	display: block;
	padding-bottom: initial;
}

.transparent {
	opacity: 0.3;
}

.large { /* title of image, inside-gallery, avant/apres */
	font-size: 16px;
	font-weight: bold;
}

/************************************************ 

	start of responsive design for mobile devices

*************************************************/

div#toggle_mobile {
	visibility: hidden;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	padding: var(--space);
	background-color: white;
	color: var(--hl-color);
	font-size: 28px;
	
	//border-bottom: 1px solid;
	-webkit-box-shadow: 0 0 8px 0 rgba(140,140,140,1);
	-moz-box-shadow: 0 0 8px 0 rgba(140,140,140,1);
	-box-shadow: 0 0 8px 0 rgba(140,140,140,1);
}

/*@media (hover:none), (hover:on-demand) {*/
@media (pointer: coarse) or (orientation: portrait) {
	
	div#toggle_mobile {
		visibility: visible;			
	}
	
	div#icon_menu {
		position: fixed;
		top: var(--space);
		right: var(--space);	
		visibility: initial;
		z-index: 2;
		background-color: white;
		margin: 0px;
		padding: var(--space);
	}
	
	div#menue {
		margin-top: 74px;
		height: auto;
		width: auto;
	}
	
	div#bildleiste {
		position: relative;
	}
	
	div#menueleiste {
		border: 0;
	}
	
	div#hauptfenster {
		width: auto;
		//margin-top:74px;
		margin-left: 0;		
	}
	
	div#m1 {
		visibility: hidden;
		position: fixed;
		top: 66px; /* 74px; */
		left: 0px;
		height: 100%;
		width: auto;
		//padding: var(--space);
		background-color: white;
		font-size: 16px;
		font-weight: bold;
		z-index:1;
	}
	
	div#m1 a {
		color: var(--hl-color);
		padding: calc(var(--space)/2);
	}
	
	div#m4 {
		position: fixed;
		left: 49px;
		top: 25px;
		z-index: 2;
	}
	
	div#m4 a {
		display: inline;
		padding-left: 7px;
		padding-right: 7px;
		font-weight: bold;
		border-right: 1px solid var(--txt-color);		
	}
	
	div#m4 a:last-child {
		border-right: 0;
	}
	
	div#m2_sub {
		padding-left: calc(var(--space));
		display: block;
	}

	div#m2_sub a::before {
		content: "› ";
	}
	
	img.logo {
		display: none;
	}
}