@charset "UTF-8";


@font-face {
    font-family: 'Nuckle';
    src: url('font/Nuckle-Bold.eot');
    src: local('NuckleBold'), local('Nuckle-Bold'),
        url('font/Nuckle-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/Nuckle-Bold.woff2') format('woff2'),
        url('font/Nuckle-Bold.woff') format('woff'),
        url('font/Nuckle-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Nuckle';
    src: url('font/Nuckle-Regular.eot');
    src: local('NuckleRegular'), local('Nuckle-Regular'),
        url('font/Nuckle-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Nuckle-Regular.woff2') format('woff2'),
        url('font/Nuckle-Regular.woff') format('woff'),
        url('font/Nuckle-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}


/* Das alles gehört zum Lichtkasten */

.filmbuehne section{
	overflow:hidden;
	position: absolute;
 	left: 0px;  
 	top: 0px; 
	width:100%;
	height:100%;
	z-index:900;
	display:none;
	
}


.filmbuehne section:target{
	display:flex;
	flex-direction:column;
	flex-flow: column;
	align-items:center;
	justify-content:center;
	background: rgba(20, 20, 20, 0.9); 
  	z-index:990;
}


.lichtkasten  div{
 	overflow: hidden; 
 	position: absolute;
 	left: 0px;  
 	top: 0px; 
	width:100%;
 	height:110%;
	z-index:900;
 	display: none; 
}

.lichtkasten div:target {
	display:flex;
	flex-direction:column;
	flex-flow: column;
	align-items:center;
	justify-content:center;
	background: rgba(0, 0, 0, 0.8); 
  	z-index:990;
}
	
.lichtkasten div:target a{
	color:#fff;
	font-size:2em;
	text-decoration: none;
} 

.lichtkasten div:target img{
	position:relative;
	margin-top:-7vh;
	max-height:60vh;
	max-width:90vw;
	border: 2px solid #ddd;
} 	

.lichtkasten div:target video{
	position:relative;
	margin-bottom:8px;
	max-height:60vh;
	max-width:70vw;
	border:1px solid #666;
} 
		
.lichtkasten div:target span.erklaer{
	padding:0;
	font-size:0.5em;
	float:left;
	font-weight:lighter;	
} 

.lichtkasten div:target span.dasx{
	padding-top:0;
	font-size:0.7em;
	float:right;
	font-weight:bold;
} 
	
/* Hier endet Lichtkasten */


body {background-color:#ccc;font-family:'Nuckle',Verdana,sans-serif;margin:0px;border:none;text-align:center;height:100%}
video {border:none;background:black;max-width: 100%;height: auto;}
img {max-width:100%;}

#kopfzeile{width:100%;max-width:1200px;height:50px;background-color:#aaa;position:fixed;display:flex;top:0px;z-index:99;}
#fusszeile {font-size:0.7em;background-color:#aaa; position:fixed;bottom:0px;width:100%;max-width:1200px;}
#kasten {display:block;max-width:1200px;margin-left: auto;margin-right: auto;background-color:#fff;top:0px;}
#macher{position:relative;display:flex;margin-top:70px;}

.besonders{font-size:1.5em;line-height:1.6}
.besonders:link {font-weight:normal;text-decoration:none;color:#bbb;}
.besonders:visited{font-weight:normal;text-decoration:none;color:#bbb;}
.besonders:hover{font-weight:normal;text-decoration:none;color:#0E66B3;}

.imtext:link {font-weight:normal;text-decoration:none;color:#0E66B3;}
.imtext:visited{font-weight:normal;text-decoration:none;color:#0E66B3;}
.imtext:hover{font-weight:normal;text-decoration:none;color:#DB6500;}

a:link {text-decoration-line: none; color:#000000;}
a:hover {text-decoration-line: none; color: #ff0000;}
a:visited {text-decoration-line: none; color:#000000;}

.normallink{color:blue;text-decoration:underline}
.normal{display:block}
.smart{display:none}


.vorschaubilder {
	width:50%;
	margin-top:70px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	background-color:#fff;
	}
.vorschaubilder500 {
	width:90%;
	margin-top:70px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	background-color:#fff;
	}


.vorschaubilder a{
	text-decoration:none;
	color:#000;
}

.vorschaubilder500 a{
	text-decoration:none;
	color:#000;
}


.vorschaubilder img{
	width:50%;
	height:50%;
	}


.vorschaubilder500 img{
	width:100%;
	}

.BildTextKasten {
		border:1px solid #444;
		display:flex;
		margin-bottom:1em;
		background-color:#ddd;
	}
	
.BildTextKasten500 {
		border:1px solid #444;
		display:block;	
		margin-bottom:1vw;
		background-color:#ddd;
	}
	

.bildunterschrift{
		width:50%;
		font-size:0.75em;
		padding:1em;
		text-align:left;
	}

.bildunterschrift500{
		font-size:2em;
	}

#filme{
	position:relative;
	display:flex;
	justify-content:center;

	}

#filme500{
	display:none;
	}


.table{display:table;padding-left:1.5em; /* Hier wird die Breite der Bilder-Gruppe eingestellt */padding-right:1.5em;margin-left:auto;margin-right:auto;margin-top:70px;border-spacing:0.5em;}
.tab-reihe {display:table-row;}

.table-start {display:table;margin-top:50px}
.table-row-start {display:table-row}
.table-cell-start-left {display:table-cell;width:25%;vertical-align:top}
.table-cell-start-middle {display:table-cell;width:40%;vertical-align:middle;text-align:left}
.table-cell-start-right {display:table-cell;;width:30%;vertical-align:top}

.tab-zelle-q {display:table-cell;width:25%;vertical-align:top;background-color:#ddd;border: 1px solid #999;}
.tab-zelle-q-5 {display:table-cell;width:20%;vertical-align:top;background-color:#ddd;border: 1px solid #999;}
.tab-zelle-h {display:table-cell;width:12.5%;vertical-align:top;background-color:#ddd;border: 1px solid #999;}
.bild{width:100%;vertical-align:bottom}
.bild-h{width:100%;}

.bildtext{text-align:left;font-size:0.8em;color:#222;padding:5px}
.info-text {position:relative;max-width:1200px;font-size:1em;text-align:justify;padding-left:2em;padding-right:2em;line-height:1.5;background-color:#fff;color:#444;}

.ueberschrift {position:relative;text-align:left;font-size:1.4em;top:60px;color:#444;padding-left:1.5em;padding-right:1em;}
.ueberschrift-1 {font-size:2em;color:#fff;padding-top:3px;padding-right:0.5em;}

/*.bildlink {} */


@media (max-width: 1200px){
	#fusszeile {font-size:0.7em;}
	.bildtext{text-align:left;font-size:1vw;color:#222;padding-top:2px;padding-left:5px;padding-bottom:10px}
	.info-text {font-size:1em;}
	.besonders{font-size:2vw;line-height:1.5;}
	
	.vorschaubilder {
	width:70%;
	margin-top:70px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	background-color:#fff;
	}

	.BildTextKasten {
		border:1px solid #444;
		display:flex;	
		margin-bottom:1vw;
		background-color:#ddd;
	}
	
	.bildunterschrift{
		width:50%;
		font-size:1.3vw;
		padding:1vw;
		text-align:left;
	}
	
}


@media (max-width:850px) and (orientation:landscape){
	#fusszeile {display:none}
	.info-text {font-size:0.6em;background-color:#fff;padding-left:3.3em;color:#444;}
	.ueberschrift {top:60px;font-size:1.2em;padding-left:1.7em;}
	.besonders{font-size:2vw;line-height:1.6}
	

	.vorschaubilder {
	width:85%;
	margin-top:70px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	background-color:#fff;
	}

	.BildTextKasten {
		border:1px solid #444;
		display:flex;	
		margin-bottom:1vw;
		background-color:#ddd;
	}
	
	.bildunterschrift{
		width:50%;
		font-size:1.5vw;
		padding:1vw;
		text-align:left;
	}

}

@media (max-width: 500px){	
	
	#dasbild{width:60%;margin-top:0px;margin-left:auto;margin-right:auto}
	#macher{display:block;margin-left:auto;margin-right:auto;}
	#fusszeile {display:none}
	#filme{display:none;}
	#filme500{
		position:relative;
		display:flex;
		justify-content:center;
	}
	
	.normal{display:none}
	.smart{display:block}
	
	.vorschaubilder {
	width:95%;
	margin-top:70px;
	display:flex;
	flex-direction:column;
	justify-content: center;
	}

	.BildTextKasten {
		border:1px solid #444;
		display:flex;	
		margin-bottom:1vw;
		background-color:#ddd;
	}
	
	.bildunterschrift{
		width:95%;
		font-size:3vw;
		padding:1.5vw;
		text-align:left;
	}
	
	.table{max-width:100vw;background-color:#fff}
	.tab-zelle-q {display:block;width:100%;margin-top:5px;margin-left:auto;margin-right:auto;vertical-align:top;background-color:#ccc;border: 1px solid #999; }
	.tab-zelle-q-5 {display:block;width:100%;margin-top:5px;vertical-align:top;background-color:#ccc;border: 1px solid #999;}
	.tab-zelle-h {display:block;width:100%;margin-top:5px;margin-left:auto;margin-right:auto;vertical-align:top;background-color:#ccc;border: 1px solid #999;}

	.table-start {display:block;margin-left:auto;margin-right:auto;}
	.table-row-start {display:block}
	.table-cell-start-left {display:none;margin-left:auto;margin-right:auto;}
	.table-cell-start-middle {display:block;position:relative;top:20px;margin-left:auto;margin-right:auto;width:80%;vertical-align:top;text-align:center;font-size:1.4em}
	.table-cell-start-right {display:block;position:relative;top:40px;margin-left:auto;margin-right:auto;width:60%;vertical-align:top}

	.info-text {font-size:3.5vw;padding-left:1.7em;padding-right:1.5em;padding-top:0em;text-align:left}
	.ueberschrift {text-align:center;top:60px;font-size:1.3em;padding-left:1.5em;padding-right:1.5em;}
	.bildtext{text-align:left;font-size:1em;color:#444;padding:8px}
	.besonders{font-size:1em;line-height:1.6}
	/*.bildlink {position:relative;max-height:90vh;max-width:90vw}*/
	.bild-h{width:50%;border: 1px solid #999;}

}