/* 
	CSS- Datei: basics.css
*/

/* Grundeinstellungen (box-sizing, generelle Schriftart */
* { box-sizing: border-box; }
html, body { 
	font-family: lato, sans-serif;
	font-size: 4.0vmin;
	line-height: 1.25;
	-webkit-hyphens: auto;
	hyphens: auto;
}

html {
	background-color: rgb(246, 246, 246);
	color: rgb(32, 13, 0);
}
body {
	position: relative;
}

a:link, a:hover, a:visited {
	color: rgb(32, 13, 0);
	text-decoration: none;
}

/* - L O G O - */
#logoTopLeft {
	position: absolute;
	top: 4vmin;
	left: 1.5vmin;
	width: 6vmin;
	height: 6vmin;
}

h1, h2, h3, .nohyphens {
	hyphens: none;
	-webkit-hyphens: none;
}

.noWrap {
	white-space: nowrap;
}
.thirdEmSpacer {
	display: inline-block;
	width: 0.35em;
}
.inlineBlock {
	display: inline-block;
}
.fontBold {
	font-weight: 700;
}
.fontItalic {
	font-style: italic;
}
.emSpace {
	display: inline-block;
	width: 1em;
}
.verticalSpacer {
	min-height: 2.0em;
}
.verticalSpacer4em {
	min-height: 4em;
}
.justifyText {
	text-align: justify;
}
/* 
.breakPoint1020 {
	display: none;
}
 */

.greyNewsNote {					/* verwandt bei h2 */
	font-size: 1.75em;
	color: rgb(183, 190, 207);
	letter-spacing: 0.1em;
	font-variant: small-caps;
	text-align: right;
	margin-bottom: 0.5em;
	padding: 0 6vmin;
}
#imgTitle {
	font-size: 80%;
	font-style: italic;
	letter-spacing: 0.05em;
}

.padBox {
	position: relative;
	padding: 0 1em;
}

.bildspiele {
	text-align: right;
	margin: 0;
	margin-bottom: 1.5vmin;
	margin-top: 1.0vmin;
	line-height: 0.85;
}

.subHeading {
	display: inline-block;
	font-size: 65%;
	font-weight: 400;
}

.headText {
	text-align: justify;
	margin-top: 2em;
}

.spacerUpwards {
	margin-top: 2em;
}

figure {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
}
.space4rotation {
	height: 84vmin;
}
figure .dia {
	display: inline-block;
	position: relative;
	width: 84vmin;
	height: 77.777777vmin;			/* entspricht 92.592592%  der Breite eines Dias
									   und ist seine relative Höhe mit Perforation) */
	background-color: rgb(32, 13, 0);
}
.filmTextTop {
	position: absolute;
	top: -0.2vmin;
	right: 15vmin;
	color: rgb(255, 221, 0);
	font-weight: 700;
	font-size: 3.8vmin;
}
.filmTextBottom {
	position: absolute;
	bottom: 0;
	left: 4.5vmin;
	color: rgb(255, 221, 0);
	font-weight: 700;
	font-size: 3.8vmin;
}
.perforationTop {
	position: absolute;
	left: 0.75vmin;
	top: 4.3vmin;
	width: 100%;
	height: 15.7142857%;
	text-align: left;
	white-space: nowrap;
}
.perforationBottom {
	position: absolute;
	left: 0.75vmin;
	bottom: -1.3vmin;
	width: 100%;
	height: 15.7142857%;
	text-align: left;
	white-space: nowrap;
}
.singlePerforation {
	display: inline-block;
	height: 54%;
	width: 5.1%;
	border-radius: 1vmin;
	margin-right: 3.4vmin;
	background-color: rgb(246, 246, 246);
}
.singlePerforation:last-child {
	margin-right: 0;
}
figure .dia img {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 80vmin;
	height: auto;
}
.counterClockWise {
	transform: rotate(-90deg);
	top: 3.1115vmin;
}
figure .dia img.squareImg {
	width: 64%;
	height: auto;
}
figure .dia img.fourThird {
	width: 86%;
	height: auto;
}
figcaption {
	width: 82%;
	display: block;
	margin: 0 auto;
	text-align: left;
}
figcaption span {
	display: inline-block;
}
.technika {
	margin-left: 0.5em;
	font-style: italic;
	font-weight: 400;
}
.head {
	font-weight: 700;
}
.linkBox {
	text-align: right;
	margin-right: 1em;
}
.more4bp680 {
	display: none;
}
.more4bp1020 {
	display: none;
}
.more4bp1075 {
	display: none;
}
.lessbp1075 {
	display: inline;
}

form {
	margin: 2em 0;
	width: 100%;
	text-align: center;
}
form input {
	width: 100%;
}
.sendButton {
	text-align: right;
	width: 100%;
	margin: 0.85em 0;
	padding-right: 1em;
}

footer {
	color: rgb(246, 246, 246);
	text-align: center;
	background-color: rgb(0, 79, 159);
	padding: 0.25em 0 2em 0;
}
#listOfAllImages {
	display: none;
}


/*
	Gestaltung der Linien (rot, gelb, blau oben, blau unten), inkl. der Breakpoints
*/
.lineRedTop, .lineBlueTop, .lineYellowTop, .lineYellowBottom {
	width: 100%;
	margin: 0;
	display: block;
}
.lineRedTop {
	background-color: rgb(227, 6, 19);
	height: 2.5vmin;		/* 	100% 	*/
}
.lineBlueTop {
	background-color: rgb(0, 79, 159);
	height: 0.75vmin;		/* 	 30% 	*/
	margin-top: 0.8vmin;	/* 	 32% 	*/
}
.lineYellowTop {
	background-color: rgb(255, 221, 0);
	height: 2.5vmin;		/* 	100% 	*/
}
.lineYellowBottom {
	background-color: rgb(255, 221, 0);
	height: 1.0vmin;		/* 	 40% 	*/
	margin-bottom: 0.8vmin;	/* 	 32% 	*/
}

@media only screen and (min-width: 680px) {
	.lineRedTop {
		height: 2.0vmin;		/* 	100% 	*/
	}
	.lineBlueTop {
		height: 0.6vmin;		/* 	 30% 	*/
		margin-top: 0.64vmin;	/* 	 32% 	*/
	}
	.lineYellowTop {
		height: 2.0vmin;		/* 	100% 	*/
	}
	.lineYellowBottom {
		height: 0.8vmin;		/* 	 40% 	*/
		margin-bottom: 0.64vmin;/* 	 32% 	*/
	}
}
@media only screen and (min-width: 780px) {
	.lineRedTop {
		height: 1.2vmin;		/* 	100% 	*/
	}
	.lineBlueTop {
		height: 0.36vmin;		/* 	 30% 	*/
		margin-top: 0.384vmin;	/* 	 32% 	*/
	}
	.lineYellowTop {
		height: 1.2vmin;		/* 	100% 	*/
	}
	.lineYellowBottom {
		height: 0.48vmin;		/* 	 40% 	*/
		margin-bottom: 0.384vmin;/* 	 32% 	*/
	}
}
@media only screen and (min-width: 1020px) {
	body {
		min-height: 100vmin;
	}
	footer {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	
	main.padBox {
		padding-bottom: 8em;
	}
	
	header + .padBox {
		padding-bottom: 8em;
	}
	
	.lineRedTop {
		height: 1.0vmin;		/* 	100% 	*/
	}
	.lineBlueTop {
		height: 0.3vmin;		/* 	 30% 	*/
		margin-top: 0.32vmin;	/* 	 32% 	*/
	}
	.lineYellowTop {
		height: 1.0vmin;		/* 	100% 	*/
	}
	.lineYellowBottom {
		height: 0.4vmin;		/* 	 40% 	*/
		/* margin-bottom: 0.32vmin; 	 32% 	*/
		position: absolute;
		bottom: 6.66vmin;
	}
}
@media only screen and (min-width: 1280px) {
	main.padBox {
		padding-bottom: 10.5vmax;
	}
}
/* --- ENDE LINIEN --- */

/* L I N K s*/
a.runningTextLink {
	cursor: pointer;
}
a.runningTextLink, a.runningTextLink:link, a.runningTextLink:visited {
	color: rgb(0, 79, 159);
	font-weight: 700;
	text-decoration: none;
}
a.runningTextLink:hover, a.runningTextLink:focus {
	text-decoration: underline;
}
a.runningTextLink:active {
	color: rgb(227, 6, 19);
}

nav {
	font-size: 1.3em;
	margin-top: 0.75vmin;
	margin-left: 1.5vmin;
}
nav a.runningTextLink {
	display: inline-block;
	margin-right: 0.5em;
}

.footerLinks {
	margin: 0 0.8em;
	font-size: 90%;
}
a.footerLinks:link, a.footerLinks:visited {
	color: rgb(246, 246, 246);
	text-decoration: none;
}
a.footerLinks:hover, a.footerLinks:focus {
	color: rgb(183, 190, 207);
	text-decoration: underline;
}

/* Buttons */
button {
	font-family: lato, sans-serif;
	font-size: 4.0vmin;
	font-weight: 700;
	font-style: italic;
	border: none;
	border-radius: 1.5vmin;
	padding: 0.25em 0.65em;
	
}
.blueButton {
	color: rgb(246, 246, 246);
	background-color: rgb(0, 79, 159);
	cursor: pointer;
}
.blueButton:hover {
	color: rgb(183, 190, 207);
	/* box-shadow: 0.25vmin 0.5vmin 1.5vmin rgb(183, 190, 207); */
}

/*
	Classes für JavaScript
*/
.margin4landscape {
	margin-top: -0.8em;
}
.margin4portrait {
	margin-top: 0.25em;
}

/* Breakpoints (alles außer der Linien ;-) */
@media only screen and (min-width: 680px) {
	html, body {
		font-size: 2.8vmin;
	}
	.greyNewsNote {
		padding: 0 8vmin;
	}
	button {
		font-size: 3.2vmin;
	}
	.more4bp680 {
		display: inline-block;
	}
	.lt_bp680 {
		display: none;
	}
	form {
		margin: 3em 0;
	}
	.perforationTop, .perforationBottom {
		left: 2.6vmin;
	}

	#logoTopLeft {
		top: 3.6vmin;
		left: 1.5vmin;
		width: 9vmin;
		height: 9vmin;
	}
	
	/*
		Classes für JavaScript
	*/
	.margin4landscape {
		margin-top: -1.5em;
	}
	.margin4portrait {
		margin-top: 0.25em;
	}
}
@media only screen and (min-width: 780px) {
	html, body {
		font-size: 2.3vmin;
	}
	#logoTopLeft {
		top: 1.88vmin;
		left: 0.8vmin;
		width: 6vmin;
		height: 6vmin;
	}
	.headText {
		width: 65%;
		padding-left: 3.2vmin;
		margin-top: 4em;
	}
	.bildspiele {
		font-size: 150%;
		margin-bottom: 0.9vmin;
		margin-top: 0.6vmin;

	}
	figcaption {
		font-size: 120%;
		margin-top: 0.25em;
		padding-left: 0.5em;
		text-align: center;
	}
	form input {
		width: 82%;
		font-size: 120%;
	}
	button {
		font-size: 2.8vmin;
		margin-right: 5%;
	}
	footer {
		font-size: 120%;
	}
	nav {
		position: absolute;
		margin: 0;
		left: 9vmin;
		top: 5.3vmin;
		font-size: 1.05em;
	}
	nav a.runningTextLink:hover, nav a.runningTextLink:focus {
		text-decoration: none;
		color: rgb(227, 6, 19);
	}
}

@media only screen and (min-width: 1020px) {
	html, body {
		font-size: 1.8vmin;
	}
	#logoTopLeft {
		top: 1.8vmin;
		left: 0.8vmin;
		width: 4.5vmin;
		height: 4.5vmin;
	}
	.headText {
		width: 45%;
	}
	.more4bp1020 {
		display: block;
	}
	.browseButton {
		position: absolute;
		top: 0;
		right: 1.3vmin;
		cursor: pointer;
		/* ACHTUNG ! Funktionalität dahinter kann entfernt werden 
		und der Button selbst aus dem HTML-Code */
		display: none;
	}
	.space4rotation {
		height: 50vmin;
	}
	.lessbp1020 {
		display: none;
	}
	figure .dia {
		width: 50vmin;
		height: 46.29629625vmin;	/* 92.59259% von width */
	}
	figure .dia img {
		width: 47.6190475694vmin;	/* 95.23809% von width */
	}
	.filmTextTop, .filmTextBottom {
		font-size: 1.9vmin;
	}
	.filmTextTop {
		top: 0;
		right: 7.5vmin;
	}
	.filmTextBottom {
		bottom: 0.2vmin;
	}
	.counterClockWise {
		top: 0vmin;
	}
	figcaption {
		width: 65%;
	}
	form input {
		width: 65%;
		/* font-size: 120%; */
	}
	.headText {
		margin-top: 1.5em;
	}
	.spacerUpwards {
		margin-top: -11.7vmin;
		margin-bottom: 10vmin;
	}
	button {
		font-size: 2.3vmin;
		margin-right: 5%;
	}
	.perforationTop {
		top: 2.7vmin;
	}
	.perforationBottom {
		bottom: -0.8vmin;
	}
	.perforationTop, .perforationBottom {
		left: 0.35vmin;
	}
	.singlePerforation {
		  height: 54%;
		  width: 5.1%;
		  border-radius: 0.5vmin;
		  margin-right: 2.15vmin;
	}
	figcaption {
		margin-top: -0.25em;
	}
	form {
		margin: 2em 0 1.5em 0;
		text-align: center;
	}
	form input {
		width: 65%;
		display: inline-block;
	}
	.sendButton {
		display: inline-block;
		width: 9.2em;
		padding: 0;
		margin: 0;
		margin-left: 1em;
	}
	button {
		margin: 0;
	}
	nav {
		/* position: fixed; */
		margin: 0;
		left: 7vmin;
		top: 4.3vmin;
		font-size: 1.05em;
	}
	
	/*
		Classes für JavaScript
	*/
	.margin4landscape {
		margin-top: -1.25em;
	}
	.margin4portrait {
		margin-top: -0.25em;
	}
}

@media only screen and (min-width: 1020px) and (orientation: landscape) {
	.headText {
		width: 22%;
		text-align: left;
		padding-left: 1.2vmin;
		position: relative;
		z-index: 120;
	}
	.spacerUpwards {
		position: fixed;
		top: 10.35vmin;
		right: 3.7vmin;
		width: auto;
		padding: 0;
		margin: 0;
	}
	.more4bp1075 {
		display: inline-block;
	}
	h2.greyNewsNote {
		width: 40%;
	}
	.footWrapper1075 {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
	footer {
		padding-bottom: 0.5em;
	}
	figure {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	figcaption {
		padding-left: 0;
	}
	form {
		position: fixed;
		bottom: 12vmin;
	}
	
	/*
		Classes für JavaScript
	*/
	.margin4landscape {
		margin-top: -1.25em;
	}
	.margin4portrait {
		margin-top: -0.25em;
	}
}

/*
Die FARBEN
Blau:
0, 79, 159

Rot:
227, 6, 19

Gelb
255, 221, 0

Grau
183, 190, 207

Hellgrau
235, 233, 233

Weiß
246, 246, 246

Filmschwarz
32, 13, 0
*/