/* *
 * * HTML Elements 

 * * * * * * * * * * * * * * * * * * * * * * * * * */
html {overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;}


html, body, div, span, p, img, small, strong, b, u, i, center, ol, ul, li,  article,  figure, figcaption, footer, header, section, menu, nav { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}

/*--html, body, div, span, p, img, small, strong, b, u, i, center, ol, ul, li,  article,  figure, figcaption, footer, header, section, menu, nav { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}----*/


header, menu, nav, .container, .content, article, figure, footer, { display: block; }
figcaption { display: inline-block; }

header, .container, .content {width: 100%; clear: both;}

footer,header,section {display:block}


html, body{
max-width: 2400px;
margin: 0 auto !important;
float: none !important;
background-attachment: fixed; 
height: 100%;
vertical-align: baseline; 
font-family: "Inconsolata", Arial, Helvetica, sans-serif;
color: #666666;
font-size: 100%;
font-weight: normal;
}
												/*  der Inhalt 	background-color:lightgray; */
.content{
	display:table;
	margin:0 auto;/* zentriert Seite. */ 
	width:100%;
	padding:0;
	height: auto;
	text-align:center;
}
	
	
		
header {
margin-left: auto;
margin-right: auto;
display:inline-block;
text-align:center;
background-color:black;}

header:after{content:"";display:table;clear:both}

/*         Hauptbild im Header            */

.fullscreen {
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   background-color: black;  
   width: 100vw;
   height: 100vh;
   display: flex; 
   justify-content: center; 
   align-items: center;
}


	/*         setzt Breite auf 70%;        ;*/
#container {
	width:85%;
	padding:0;
	height: auto;
	text-align:center;
	margin:0 auto;
	background-color:orange;
}

												/*  NAVI  */
 .floating-nav{
    display: block;
    height: 38px;
    margin: 0;
text-align:center;
	width: 100%;
background-color:black;
	position:fixed;
	z-index:1;
}		
	

ul.nav {
max-width:1200px;
text-align:center;
	letter-spacing:6px;
	list-style-type: none;
	margin:0 auto;/* zentriert Seite. */ 
	padding:8px 16px!important;
	overflow: hidden;
	color: #fff;
	top: 0;
	width: 100%;
	z-index:10;
}

/*    background-color:#262626!important;*/	
ul.nav li {border-right:1px solid  #666666;}
ul.nav li:last-child {border-right: none;} 
ul.nav li {width:16.66666%; display:inline-block;}
ul.nav li a {color:inherit; background-color:inherit; text-align:center;cursor:pointer;white-space:nowrap;text-decoration: none;}
ul.nav li a:hover:not(.active) {padding: 14px 16px;color:#9b8535!important;}
ul.nav li a.active{padding: 0px 4px;color: red;}



												/*  BOXEN  */
												
	/*   setzt Breite auf 100%;     border:1px solid silver;box-sizing: border-box;  ;*/
	/*......... altes GOLD 	#7D6E21  */
	/*.............  background-color:gray;   */

/*...                          SCHWARZ Hintergrund  */
.schwarz {
  background-color: black;
  padding:  13px 0 0 0;
}

 .floating-box {
    display: inline-block;
    height: auto;
    margin: 0 0 4em 0;
    text-align:center;
	width: 98%;
}	
.floating-box:after {content:"";display:table;clear:both}

/*...GOLD mit h2   */
.float-top {
    display: inline-block;
    height: auto;
    padding:  0 0 5px 0;
    margin: 0;
    text-align:center;
	width: 100%;
    background-color: #7b692a;	
}	
 .float-top after {content:"";display:table;clear:both}

/*...GOLD ohne h2   */
.float-to {
    display: inline-block;
    height: auto;
    padding:  18px 0 19px 0;
    margin: 0;
    text-align:center;
	width: 100%;
    background-color:#7b692a;	
}	
 .float-to after {content:"";display:table;clear:both}


/*...                          SCHWARZ Trennung   */
.float-blak {
display: inline-block;
height: auto;
padding:  3px 0 3px 0;
margin: 15px 0 0 0;
text-align:center;
width: 100%;
background-color:black;	
}	
.float-blak after {clear:both;}


 
/*        Texte zu den Filmen     ;*/
.box-ho1er{
    width: 73.333333%;
    margin:0 auto;
    padding:0 auto;
    text-align:left;
}
    
/*        Bilder zu den Filmen     ;*/    
.box3er{width: 24.99999%; text-align:center; padding-bottom:0,5%;}

ul.impress {font-size:0.95em; margin:5% 0 0 3%;list-style: none;}
ul.impress li {list-style: none;line-height: 1.2em;}
ul.impress li:last-child {margin-bottom: 0em;}
	/*         ul== ul li:last-child {margin-bottom: 1.0em;}        ;*/
ul{
	list-style: none;
	text-align: left;
	margin:5% 0 0 3%;
	text-decoration: none;
	border : 0 none;}

ul li{
line-height: 1.2em;
font-size:1.0em;
}

 
	/*............             .INDEX, DIVERSES KONTAKT DATEN(links!)  */
	/* .abox img:hover {opacity: 1.0!important; }*/
#abox {text-align: center;}
#abox {margin: 0 auto;}
.abox {
    display: inline-block;
    width:100%; min-width: 400px; max-width: 460px;
    height:auto;
    margin: 10px;
    padding:30px 0 10px 0;
}
.abox p {text-align: left;}

/*            Liste abox       mit Anker           */
.abox ul{list-style: none; padding:0; border:0;}
.abox li {margin: 12px 0 12px 0; line-height: 1.3em;}
.abox li a:link {text-decoration: underline;}
.abox a{text-decoration:underline;}



	/*.....          Buch Verlag     (MITTE!)......   */

#cbox { text-align: center;}
#cbox {margin: 20px auto;}
.cbox {
    display: inline-block;
    width:90%; min-width: 160px; max-width: 270px;
    margin: 20px;
    padding:10px 0 10px 0;
    vertical-align: middle;
}
.cbox p {text-align: left;}

	/*.....         Diashow -OPER......   */
#ebox { text-align: center;}
#ebox {
    margin: 0 auto;}
.ebox {
    display: inline-block;
    width:100%; min-width: 400px; max-width: 460px;
    height:auto;
    padding:30px 0 10px 0;
}

												/*  BEARLINER  */
.drei ul{
  margin-bottom:40px;
  overflow:hidden;

}
.drei li{
  line-height:2.5em;
  float:left;
margin-bottom:20px;
  display:inline;
    vertical-align: middle;  margin: auto;
}

#triple li  { width:28.222%; } 

	/*.....         Diashow -BEARLINER......   */
#dbox { text-align: center;}
#dbox {margin: 0 auto;}
.dbox {
    display: inline-block;
    width:100%; min-width: 400px; max-width: 460px;
    height:auto;
    padding:30px 0 10px 0;
}

												/*  KONTAKT  */
.buch a:link, a:visited{
	text-decoration: underline;
	color: #647e66;
	}

.buch a:hover {
	text-decoration: underline;
	color: #825268;
	}	
.haft{
	font-size:0.8em; 
	line-height: 2em;
	text-decoration:none;
	text-align:justify;
	margin-top: 5.0em;}
.schmal{width: 70%;}	


/*...........          ..EINZELNE FILME   */	
#fbox {text-align: center;}
#fbox {margin: 0 auto;}
.fbox {
    display: inline-block;
    width: 100%; min-width: 410px; max-width: 430px;
    margin: 10px;
    padding:30px 0 10px 0;
}


/*.....Ein Pfeil)......   */
.arrow {
z-index: -1;
  color: red;
  border: solid red;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
/*.....Ende Pfeil......   */

								/*  ANKER FueR DAS DOKUMENT  */	
a{color:black;}
a{background-color:transparent;}
a{text-decoration:none;}
a:active.button{color:#2A4E44;}
a:active,a:hover{outline-width:0}
a:hover{color:#AE3A1C;}
a:visited{color: #2A4E44;}


.zus {white-space: nowrap;}
												/*  BILDER    opacity: 0.6;*/
.image{max-width:100%;height:auto;}
img{max-width:100%;height:auto;}
img:hover {

}


.ita{font-style:italic;}
.dick{font-weight:bold;}
.dickn{font-weight: bold;font-size: 1.05em;letter-spacing:0.2em;}
.nach{margin-bottom: 1.188em;}
.vorh{margin-top: 1.188em;}
.nachm{margin-bottom: 2.188em;}
.rueck{margin-bottom: 5.0em;letter-spacing:0.15em;}
.vorw{margin-bottom: 1.0em;letter-spacing:0.15em;text-transform:uppercase;}
	/*............                      .ANKER FueR ZURueCK   */	
.rueck a:link, a:visited{font-size: 0.9em;text-decoration: underline; color:black; background-color:yellow;}
.rueck a:hover {text-decoration: underline; color: red;}

	/*............                      .ANKER FueR Vorwaerts   */	
.vorw a:link, a:visited{font-size: 0.9em;text-decoration: underline; color:black; background-color:yellow;}
.vorw a:hover {text-decoration: underline; color: red;}


.grau{color: lightgrey;}
.weiss{color: white;}
.sperr{line-height:1.3em; width: 90%;}
.sytextv{line-height: 1.3em; margin-top: 1.5em;}
.mittig{vertical-align: middle; margin: auto;}
.ohne{padding:0; margin:0;}
.klein{font-size:1.0em; letter-spacing:0.12em;}/*  vor h1 Filmtitel */
.unten {margin-bottom:1.5em; vertical-align: bottom;} /*  vor h1 Filmtitel */
/*.unten {margin-bottom:0.8em;}*/
/*.unten{vertical-align: bottom;}*/
.oben{vertical-align: top;}
.mitte{vertical-align: middle;}
.farb{background-color:#262626;}

.fout{margin-bottom: 50px;}
.daten{margin-top: 0; padding-top:0;}
.prodb {margin-top: 20px; }
.libl {background-color: black; text-align:center;}
.rechte{text-align:center;}
												/*  Footer */

						
footer{position:fixed;width:100%;z-index:1;bottom:0; text-align:center;}
footer{padding:0 0 2px 0!important;color:#fff!important;background-color:#000!important;}
footer ul {
	list-style: none;
	margin:0 auto;/* zentriert Seite. */ 
	padding: 0;
	text-decoration: none;
	border : 0 none;
	text-align: center;
	 margin: 2px auto;}
footer ul a{color:#8C8C8C; font-size:0.8125em; letter-spacing:0.12em;}
footer ul a:hover {color:red;}
 footer ul a:visited {color:#8C8C8C;}
footer hr {padding:0; color:grey;}


											/*  kleine mednav  */

ul.mednav {font-size: 0.857em; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #000; position: fixed; top: 0; width: 100%; height:auto;}
ul.mednav li {float: none; border-bottom:1px solid  #666666;font-size: 100%;}
ul.mednav li a {display: block; background-color: #000; letter-spacing:0.1857em; color: #fff; text-align: center; padding: 4px 4px; text-decoration: none;}
ul.mednav li a:hover:not(.active) {color: #000; background-color: lightgray;}
ul.mednav li a.active{color: #000; background-color:#f0f0f0;}

/*         Medienmenu drei Striche        ☰         */
.drei-top{position:fixed;width:100%;z-index:1;top:0}
.xlarge{font-size:24px!important}
.mediabutton{border:1px solid #B3B3B3;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap}
.mediabutton{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}  
.mediabutton:disabled{cursor:not-allowed;opacity:0.3}
.mediabutton:first-child{background-color:#000;color:#fff}
.mediabutton:hover{color:#000!important;background-color:#ccc!important}
.media-links{float:right!important}
											/*  ENDE MEDIEN NAVIGATION */


/* @media screen and (min-width: 600px){
 .drei-top {display: none;}
}*/

/*---            Medienmenu drei Striche      ☰      ----*/
/*---            Medienmenu drei Striche      ☰      ----*/
 @media screen and (min-width: 600px){
.mednav  {display: none; z-index: -1}
.drei-top {display: none;}
}
 
/*---Mobel-phone--- 320px 600px  768px 1024px 1224px 1824 px  ----*/
/*---Mobel-phone--- 320px 600px  768px 1024px 1224px 1824 px  ----*/
/*--      background-color:white!important;   ----*/

@media only screen and (min-width:460px){
    .cbox { width:30%; }
    .cbox { vertical-align: top; }
}

/*---alles was kleiner ist als 600----*/
@media (max-width:600px){
.nav {display: none; z-index: -1!important;}
.floating-nav{display: none; z-index: -1!important;}
.floating-box{display:block!important;}
.floating-box: h2{word-wrap:break-word!important;}
.box3er{margin:0 auto!important;width:91.66666%!important;}
.box-ho1er{margin:0 auto!important;width:85.66666%!important;}
.vorw{padding-top:5%!important;}
}

/*     alles was groesser ist   ( Test= .abox {background-color:green!important;} )  */
@media only screen and (min-width:680px){
    .cbox:last-child { margin: 10px 0 10px 10px}
    .cbox:first-child { margin: 10px 10px 10px 0}
}


@media (min-width: 600px) and (max-width:1224px){
.box3er{margin:0 auto!important;width:33.33333%!important;}
.vorw{padding-top:2%!important;}
   }
/*---alles was kleiner ist als 768-.--abox {background-color:green!important;}---*/
@media (max-width:768px){
.fbox {width: 80%; min-width: 380px; max-width: 382px!important;}
.fbox img{max-width:95%;height:auto!important;}
.fbox .image{max-width:95%;height:auto!important;}
.abox {width: 80%; min-width: 380px; max-width: 382px!important;}
.abox img{max-width:95%;height:auto!important;}
.abox .image{max-width:95%;height:auto!important;}
.dbox {width: 80%; min-width: 380px; max-width: 382px!important;}
.dbox img{max-width:90%;height:auto!important;}
.dbox .image{max-width:90%;height:auto!important;}
.ebox {width: 80%; min-width: 380px; max-width: 382px!important;}
.ebox img{max-width:90%;height:auto!important;}
.ebox .image{max-width:90%;height:auto!important;}
.box-1 {margin:0 auto!important;width:85.66666%!important;}
.box3er{margin:0 auto!important;width:91.66666%!important;}
.box3er{padding-bottom:4%!important;}
.box-ho1er{margin:0 auto!important;width:85.66666%!important;}
.box-2l{width:91.66666%!important;}
.box-2r{width:91.66666%!important; margin-right:3%!important;}
.sperr{ font-size:95%!important;}
.daten{width:80%!important;}
p{margin-left: 5%;margin-right: 5%!important;}
   }

@media (max-width:992px){
ul.nav li a{font-size:0.8em!important;}/*knopf*/
ul.nav {letter-spacing:1px!important;}
ul.nav li:first-child {width:8.88888%!important;}
h2 {font-size: 1.05em; 	letter-spacing:0.10em!important;}
nav ul li{color: #666666;}
} 



/*---alles was kleiner ist als 1224----*/
@media (max-width:1224px){
ul.nav {letter-spacing:2px!important;}
ul.nav li:first-child {padding:0!important;}
.box-ho1er{margin:0 auto!important;width:91.66666%!important;}
figcaption{font-size: 80%!important;}
.box3er{padding-bottom:4%!important;}
.box3er{padding-bottom:2%!important;}
}
	
/*        andere bilder fuer kopfbild
@media (max-width: 1259px) {
.fullscreen { background-image: url("image-980.jpg"); }
}

@media (min-width:1260px) {
.fullscreen { background-image: url("image-1960.jpg"); }
}
*/

.clearfix:after{clear:both; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; }
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}