/* ***** Mobiles (first) mit viewport | Portrait **** klein=Smartphones: Breite oder Höhe kleiner 450 (bis iPhone 13 pro) ************ */

body, td {font-family:sans-serif,Verdana,Arial,Helvetica; 
	font-size:4vmin; 
	color:#003366;
	background-color: #f0f4f8;
	margin:3vmin 0 0 3vmin;
}
td {padding:0; background-color: #fbfcfc;}
div,span,input,select,option,textarea {
	font-family:sans-serif,Verdana,Arial,Helvetica;
	border-collapse:separate;
	border:rgba(239, 251, 245, 0.4) 1px;
	border-radius: 0.4rem;
}

input,select,textarea {
	font-size: 4.6vmin; /* warum größer als body, damit es gleich ist? Oder woher?*/
	width:40vmin;
	background-color: white;
	color:#003366; /* muss extra */
	border:solid #C7C5E3 1px;
	padding-left:0.2rem;
}
input {padding-left:0.4rem;} /* voll blöd */
textarea, .full {width:90vmin;}

.send {background-color: #e7f0ff; cursor:pointer; width:auto;}
.send:hover {background-color:white;}
.line {border-bottom: 1px dashed silver; padding-bottom:6px;}
.item {padding-top:3px;}
/* input[type=button]:hover {background-color:white;} */
/* input[type=button]:hover {background-color:white;} */
input[type=submit]:hover {background-color:white;}

a:link    {color:#003366; text-decoration:none}
a:visited {color:#003366; text-decoration:none}
a:active  {color:#ef3366; text-decoration:none}
a:hover   {color:#0077aa; text-decoration:none}
a:focus   {color:#ef3366; text-decoration:none}

/* Scrollbalken schmaler für eigenen Select */
::-webkit-scrollbar {width: 3px; height: 3px;}
::-webkit-scrollbar-thumb {background: #ccc;}
::-webkit-scrollbar-thumb:hover {background: #bbb;}

.seite { position:fixed; 
	overflow:auto; 
	top:10vmin; 
	height:93%;
	}

.filmBox {font-size: 4vmin;
	color:#003366; 
	background-color: #e7f0f8;
	padding:1.5vmin; 
	margin: 4px 2px 4px 2px;	
	vertical-align:top;
	width:91vmin; /* portrait gute einzeilige Füllung */
	height:29vmin;
	border:solid #C7C5E3 1px; 
	display:inline-block;
	white-space:nowrap;
	overflow:hidden;
	cursor:pointer;
}
.filmBox:hover {color:#0077aa;}

.filmTitel {font-size:4vmin;
	font-weight:bold;
	margin-bottom:0.5vmin; 
	/* cursor:pointer; */
}

.headline {font-size:5vmin; font-weight: bold; letter-spacing: 0.6px;}

.plakat {border:0; 
	width:22vmin;
	float:left;
	margin-right:2.5vmin;
}
.fullHD {height: 3.6vmin;}

.infoDiv { position:fixed; 
	display:none;
	overflow: auto;
	background-color: #ffffff; 
	border: 1px solid silver; 
	top:11vmin;
	right:0.2vmin;
	height:87.7%;
	padding:4vmin
}
.infoPlakatDiv {position:relative; /*  wg. dem Down-Button für position:absolute */ 
	width:100%;  /* border:1px solid red; */
	float:left;
	margin:0 0 3vmin 0;	
}
.infoTextDiv {display:inline;}
.infoPlakat {padding:2vmin 1px 1px 1px; width:100%;}

.navi {position:fixed; 
	cursor:pointer; 
	background-color:#ffffff40; /* die letzten beiden sind die Transparenz */
	padding:2vmin 3.4vmin 2vmin 3.4vmin;
	border-collapse:separate;
	border-radius: 5vmin;
}
.home {top:2vmin; 
	left:2vmin;
}
.down { position:absolute; 
	bottom:0%;
	right:45%;
	padding:3vmin 2vmin 3vmin 2vmin;
}
.hoch {	display:none;
	bottom:2%; 
	right:45%; 
	padding:3vmin 2vmin 3vmin 2vmin;
}
.right {top:50%; 
	right:2%; 
}
.left {	top:50%; 
	left: 2%; 
}
.knopf {height:6.4vmin; 
	cursor:pointer; 
}
.rahmen {background-color: white;}  /* border: dotted #aa3366 1.5px; */
.rechts {float: right;}
.rand1 {padding-right:1vmin;}
.rand3 {padding-right:3vmin;}

.knoepfeRechts {display:run-in;
	float:right; 
	padding-right:2.4vmin;
}
/*  border:1px solid red; */
.loeschen {position:fixed;
	display:none;
	top:8%;
	right:3%;
	padding:3vmin;
	background-color: #f0f4f8;
	border:solid #C7C5E3 1px; 
}
.menu { position:absolute; /* scrollt mit im DIV */
	display:none;
	top:10vmin;
	right:8.2vmin;
	font-size: 5vmin; 
	padding:3vmin;
	background-color: #fbfcfc;
	border:solid #C7C5E3 1px;
}
.neu {background-color: #fbfcfc;}
.filtern {right:6.2vmin;}
.favoriten {right:8.2vmin;}
.einstellungen {right:2vmin; top:31vmin;}
.hilfe {right:2vmin;}
.close-button {
	float:right;	
	cursor:pointer; 
	background-color: #ffffff; 
	border-right: 1px solid silver; 
	border-bottom: 1px solid silver;
}

div.selectBox {
	display:none; 
	position:absolute;
	overflow:auto;
	overflow-x: hidden;  /* sonst schlabbert Safari */
	border:solid #C7C5E3 1px; 
	cursor:pointer;
	background-color:white; 
	margin-top:3px; 
	margin-left:24vmin; 
	max-height:52vh; 
	width:40vmin; 
}
.jahr {width:17vmin;}
.HD {width:10vmin;}

#Jahr {margin-top:23px; 
	margin-left:1vmin;
	width:17vmin; 
	max-height:32vh; 
}
#JahrEnde {margin-top:2px; 
	margin-left:47vmin;
	width:17vmin; 
	max-height:32vh; 
}
#HD {margin-top:1px; 
	margin-left:19vmin;
	width:9vmin; 
	max-height:32vh; 
}
.selectField {padding:0.2rem 0.4rem 0.0rem 0.4rem;} 
.selectField:hover {background-color:#e7f0f8}


.doppelZeile {margin-bottom:10px;}

.silver {color:Silver;}
.red {color:crimson;}
.red:hover{color:red;}
.pointer {cursor:pointer;}

	  
hr {border-top: 1px dashed rgb(0,0,0,0.3);}
hr.main {border-top: 1px solid rgb(0,0,0,0.3);}

/* Scrollen der Hauptseite und Scrollbalken verhindern, wenn infoDiv aktiv ist durch aktivieren dieser Klasse */
.stopScrolling {
  overflow: hidden;
}

.tooltip {
  position: fixed;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #e7f0f8;
  font-weight:normal;
  color: #003366;
  border: 1px solid #003366;
  border-radius: 6px;
  padding: 1px 5px 1px 5px;
  /* Position the tooltip */
  position: relative;
  right: 100px;  /* nach links holen über die Briefmarke */
  bottom: 3px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s ease 0.4s;
 }

/* ************** Querformat (alles, außer was unten noch al definiert wird) ****** body{color:red;} zum Testen **************** */

@media only screen and (orientation: landscape)
{
	.show-on-landscape {display: run-in;}
	.show-on-portrait {display: none;}
	.infoDiv {height:80%;}	
	.infoPlakatDiv {
		width:50%;
		margin:0 3vmin 0 0;
/* border:1px solid red; */
	}
	.filmBox {width:29.6vw;}
}
	
/* ************************* Hochformat alle Größen ******** body{color:green;} zum Testen ********  and (max-height:300)  ****************** */

@media only screen and (orientation: portrait) 
{
	.show-on-landscape {display: none;}
	.show-on-portrait {display: inline-block;}
}		

 /* ************************* Mobiles (first) mit viewport **** mittel=Tablets, bisher nicht nötig ******************** */

/* @media only screen and (min-width:770px) and (min-height:770px) {

} */

/* ************************* Notebooks oder PCs, normale Bildschirme, bisher auch Tablets ****************************** */
/*                           Breite und Höhe größer 450 (darunter, also das obige CSS, reicht bis iPhone 13 Pro)         */

@media only screen and (min-width:450px) and (min-height:450px)
{
	body, td {font-family: Verdana, Arial, Helvetica; 
	font-size: 14px; /* alle anderen relativ hierzu mit rem (root em) */
	margin:1rem 0 0 1rem;
	}
	input,textarea,select {font-family:Verdana,Arial,Helvetica; font-size:14px; width:10rem;}
	textarea, .full { width:23rem;}
	/* Scrollbalken schmaler für eigenen Select */
	::-webkit-scrollbar {width: 8px; height: 8px;}
	::-webkit-scrollbar-thumb {background: #ccc;}
	::-webkit-scrollbar-thumb:hover {background: #bbb;}
	
	.seite { position:fixed; 
		/* overflow:auto;  */
		top:3rem; 
		height:93%;
		}
	
	.filmBox {font-size: 0.9rem;
		padding:6px; 
		width:16.2rem;  /*  18.6 */
		height:6.8rem;  /*  115px */

	}
	
	.filmTitel {font-size:16px;
		margin-bottom:4px; 
		margin-top:0px;

	}

	.headline {font-size:26px; font-weight:normal;}
	
	.plakat {width:85px;
		margin-right:10px;
	}
	.fullHD {height: 0.8rem;}

	.infoDiv {
		top:7%; 
		left:0.1rem;
		width:97.6%;
		height:88.3%;  /* 91.7% */
		border: 1px solid silver;
		padding: 1rem;
	}
	.infoPlakatDiv {width:auto; 
		height:100%;
		margin:0 10px 0 0;
	}
	.infoPlakat {
		height:100%; 
		width:auto;
		float:left;
		margin-right:20px;
		padding-top: 0; /* kein Abstand zwischen Bild und oberer Kante, weil Titel rechts */
	}
	.navi {padding: 0.4rem 0.6em 0.4rem 0.6rem;}
	.home {top:1.8rem; 
		left:1.4rem;
	}
	.down { position:absolute; 
		bottom:0%;
		right:45%;
		padding: 0.6rem 0.4em 0.6rem 0.4rem;
	}
	.hoch {	display:none;
		bottom:2%; 
		right:45%; 
		padding: 0.7rem 0.4em 0.7rem 0.4rem;
	}
	.right {top:50%; 
		right:2%; 
		padding: 0.4rem 0.7em 0.4rem 0.7rem;
	}
	.left {	top:50%; 
		left: 2%; 
		padding: 0.4rem 0.7em 0.4rem 0.7rem;
	}
	
	.knopf {padding-right:0; height:1.6rem;}
	.rechts {float: right; margin-top:-0.2rem;} /* hängen sonst zu tief in Menüs */
	.rand1 {padding-right:0.4rem;}
	.rand3 {padding-right:1.2rem;}

	.knoepfeRechts {float:none; 
		padding-left:6em; 
		display:inline;
	}
	
	.menu {
		top:2.5rem;
		padding:0.6rem;
		font-size: 16px; 
		right:auto; 
	}
	.filtern {left:6rem;}
	.favoriten {left:15.6rem;}
	.einstellungen {left:4rem;}
	.hilfe {left:16.4rem;}

	div.selectBox {
		margin-left:5rem; 
		max-height:45vh; 
		width:9.8rem; 
	} 
	.jahr {width:3.6rem;}
	.HD {width:2.6rem;}
	#Jahr {margin-top:20px; 
		margin-left:1.6rem;
		width:3.6rem; 
	}
	#JahrEnde {margin-top:1px; 
		margin-left:11.2rem;
		width:3.6rem; 
	}
	#HD {margin-top:1px; 
		margin-left:3.8rem;
		width:2.8rem; /* für DVD, sonst 2 */
	}

	/* ************************************************** Tooltips über [data-title] ********************** */

	[data-title]:hover:after {
		opacity: 1;
		transition: opacity 0.4s ease 0.4s;  /* all, dann schmiert er rein */
		visibility: visible;
		margin-left: -30px;  /* etwas nach links holen, weil sie rechts folgen  */
	}

	[data-title]:after {
		content: attr(data-title);
		background-color: white;
		color:  #003366;
		font-size: 14px;
		position: absolute;
		padding: 1px 5px 1px 5px;
		top: 2.5rem;
		white-space: nowrap;
		opacity: 0;
		border: 1px solid #003366;
		border-radius: 6px;
		z-index: 2;
		visibility: hidden;
	}
	.kopfzeile [data-title]:after { top: 2.9rem !important;} /* Sonderfall in Überschrift und info.inc: andere Höhe */

	.tooltip:hover .tooltiptext { /* für Titel in FilmBox, ließ sich mit data-line nicht positionieren */
	  visibility: visible;
	  opacity: 1;
	}	
}

@media print {
	body, div, input, select, textarea, .filmBox, .filmTitel {
		color: #000;
		background-color: #fff;
		font-size: 13px;
	}

	.seite { position:static; 
		height:auto;
		}
	.noprint, .knopf, .navi, .tooltip {display: none !important;}

	.headline {font-size: 20px;}
	.header {line-height: 2rem; vertical-align: text-top;}
	
	.filmBox {
		width:29%;
		height:6rem;
		padding:0.4rem;
		margin: 4px 2px 4px 2px;	
	}
	.plakat { height:4.2rem; width: auto;}
	.fullHD {height: 0.6rem;}
	
	.infoDiv {
		position: absolute;
		overflow: visible;
		height: auto;
		border: 1px solid silver; 
	}

	.infoPlakatDiv {
		width:60%;
		padding-right: 20px;
	}
}