body 		{
    		font-family: Open Sans, sans-serif;
			margin: 0;
			padding: 0;
			font-size:12px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			}

scrollbar {
   -moz-appearance: none;
   background: rgb(0,255,0);
}

::-webkit-scrollbar { 
			display: none;
			}
		
a 			{
			color: #FFFFFF;
			outline: none;
			text-decoration: none;
			}
		
a:hover 	{
			color: #DFAA00;
			}
.site 		{
			background: #efefef url('../img/bkg.png') repeat 0 0;
			transition: 1s;
			}
		
.header 	{ 
			height: 135px;
			padding-top: 60px;
			text-align: center;
			width: 100%;
			overflow-y: hidden;
			}
#banner {
			font-family: Open Sans, sans-serif;
			font-size: 54px;
			letter-spacing: -1px;
			word-spacing: 0px;
			color: #5d5d5d;
			font-weight: 700;
			text-decoration: none;
			font-style: normal;
			font-variant: normal;
			text-transform: uppercase;
			line-height: 0em;
			}
#subbanner {
			font-family: Open Sans, sans-serif;
			font-size: 22px;
			letter-spacing: 0px;
			word-spacing: 0px;
			color: #999999;
			font-weight: 100;
			text-decoration: none;
			font-style: normal;
			font-variant: normal;
			line-height: 1.4em;
			}

.filmheader	{ 
			font-size: 25px;
			align: center;
			valign: center;
			text-align: center;
			width: 100%;
			overflow-y: hidden;
			}


.mood		{
			margin: 25px auto 0px auto;
			width:1280px;
			font-size: 14px;
			text-align:justify
			}

.films		{
    margin: 0px auto 0px auto;
    width: 95%;
	max-width: 1280px;
    font-size: 14px;
    text-align: justify;
    color: #787878;
}

.films a {
			color:#414141;
}
.films a:hover	{ 
			color: #DFAA00;
			}
.thumbs		{
			margin: 0px auto 0px auto;
			width: 95%;
			height:150px;
			font-size: 14px;
			text-align: justify;
			color: #787878;
}
.filmbox {
		margin-top: 0px;
		margin-bottom: 10px;
		margin-right:20px;
		max-width: 240px;
		width:20%;
		text-align: center;
		font-size: 14px;
		color: #787878;
		float:left;
}

.filmbox img {

		opacity: 1;
		margin-bottom:5px;
}
.filmbox a:hover img {
		opacity: .75;
		
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
}
.filmbox:last-child {
		margin-right: 0px;
}
.bons		{
			margin: 25px auto 0px auto;
			width:1330px;
		
			}

.titles		{
			color: #FFFFFF;
			outline: none;
			text-decoration: none;
			}


*{
    box-sizing: border-box;
}
/* Create three equal columns that floats next to each other */
.box {
    float: left;
    width: 426.6666px;
    padding: 10px;
}
.filmsbox0 {
    float: left;
    width: 23%;
    padding-right: 1%;
    padding-left: 1%;
    padding-top: 10px;
    padding-bottom:10px;
}
.filmsbox1 {
    float: left;
    width: 45%;
    padding-right: 1%;
    padding-left: 1%;
}
.filmsbox2 {
    float: left;
    width: 32%;
    padding-right: 1%;
    padding-left: 1%;
}
.upbox1 {
    float: left;
    width: 38%;
    padding-left: 1%;
	padding-right: 2%;
    padding-bottom:1%;
}
.upbox2 {
    float: left;
    width: 30%;
    padding-right: 1%;
    padding-left: 1%;
}
.upbox3 {
    float: left;
    width: 32%;
    padding-right: 1%;
    padding-left: 1%;
}

.filmstext:after {
    content: "";
    display: table;
    clear: both;
	}
/* Clear floats after the columns */
.text:after {
    content: "";
    display: table;
    clear: both;
}

.headline	{
	margin: 5px auto 10px auto;
    width:426.6666px;
    font-size: 18px;
    text-align:center;
    }

.filmsheadline	{
    margin: 5px auto 10px auto;
    font-size: 25px;
    text-align: left;
    color: #616161;
    font-weight: 500;
    text-transform: uppercase;
}
.crew {
    color: #414141;
	font-weight:400;
}

.logos	{
			margin: 40px 10px 15px 10px;
			font-size: 18px;
			text-align:center;
			}
.logos2	{
			margin: 5px 5px 25px 5px;
			font-size: 18px;
			text-align:center;
			}
.bild {
	width:100%;
	height:auto;
}

.yt_box{
  position: relative;
  max-width: 1280px; /* wie breit soll das Video maximal sein */
  margin: auto;
}
.yt_box:before{
  content: "";
  display: block;
  padding-top: 56%; /* 16:9 Format */
}
.yt_box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;;
  left: 0;
  right: 0;
  bottom: 0;
}

.yt_box_rh{
  position: relative;
  max-width: 1280px; /* wie breit soll das Video maximal sein */
  margin: auto;
  max-height: 640px;
}
.yt_box_rh:before{
  content: "";
  display: block;
  padding-top: 70%; /* 16:9 Format */
}
.yt_box_rh iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;;
  left: 0;
  right: 0;
  bottom: 0;
}

.yt_box_egdgw{
  position: relative;
  max-width: 1280px; /* wie breit soll das Video maximal sein */
  margin: auto;
  max-height: 534px;
}
.yt_box_egdgw:before{
  content: "";
  display: block;
  padding-top: 70%; /* 16:9 Format */
}
.yt_box_egdgw iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;;
  left: 0;
  right: 0;
  bottom: 0;
}

.yt_box_dkc{
  position: relative;
  max-width: 1280px; /* wie breit soll das Video maximal sein */
  margin: auto;
  max-height: 692px;
}
.yt_box_egdgw:before{
  content: "";
  display: block;
  padding-top: 70%; /* 16:9 Format */
}
.yt_box_egdgw iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;;
  left: 0;
  right: 0;
  bottom: 0;
}

.logo {
    float: left;
    width: 210px;
    padding: 0px;
}
.rewe {
	    float: left;
	width:41px;
	padding: 8px;
}
/* Clear floats after the columns */
.grid:after {
    content: "";
    display: table;
    clear: both;
}
.nav	 	{
			margin: 0 auto;
			text-align: center;
			width: 100%;
			}

.footer	{
			margin: 15px auto 30px auto;
			max-width:1280px;
			width:95%;
			border-top: 1px solid #BBB;
			}

.imp	{
			margin: 20px 0px 0px 10px;
			float: left;
			}
.implink	{
			color: #777777;
			}

.contact 	{ 
			width: 210px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 11px 15px 11px 15px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			text-align:center;
			color: #444444;
			font-size:11px;
			line-height: 12px;
			}
			
.imprint 	{ 
			width: 600px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 10px 15px 10px 15px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			text-align:justify;
			color: #444444;
			font-size:10px;
			line-height: 12px;
			}

.aboutme1 	{ 
			width: 230px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 0px 0px 0px 0px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			text-align:justify;
			color: #444444;
			font-size:10px;
			line-height: 12px;
			float: left;
			}
.aboutme2 	{ 
			width: 370px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 0px 10px 0px 10px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			color: #444444;
			font-size:13px;
			line-height: 16px;
			float: left;
			}
.dse 	{ 
			width: 600px;
			background: #efefef url('../img/bkg.png') repeat 0 0;
			padding: 10px 15px 10px 15px;
			font-family: Helvetica, Arial, Verdana, Century Gothic;
			text-align:justify;
			color: #444444;
			font-size:10px;
			line-height: 12px;
			}
.dse a	{ 
			color: #777777;
			}
.dse a:hover	{ 
			color: #DFAA00;
			}
.imprint a	{ 
			color: #777777;
			}
.imprint a:hover	{ 
			color: #DFAA00;
			}
ul#filters 	{
			display: inline-block;
			margin-bottom: 10px;
			}

#info 		{
			-webkit-border-radius:0px;
			-moz-border-radius:0px;
			border-radius:0px;				
			background:#DFAA00;
			border:0px solid  #fbeed5;
			width:95%;
			max-width:900px;
			margin:0 auto 40px auto;
			font-family:arial;
			font-size:12px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			}

#info .info-wrapper {
			padding:10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			}
	
#info a		{
			color:#DFAA00;
			text-decoration:none;
			}

#info p		{
			margin:5px 0 0 0;
			}

.container 	{ 
			position: relative; 
			max-width: 1280px;
			margin: 10px auto 0px auto;
			-webkit-transition: all 1s ease;
			-moz-transition: all 1s ease;
 			-o-transition: all 1s ease;
 			transition: all 1s ease;	
			}
 
#filters 	{
			margin:0%;
			padding:0;
			list-style:none;
			}

#filters li {
			float:left;
			}
	
#filters li span {
			display: block;
			padding:3px 10px;		
			text-decoration:none;
			color:#666;
			cursor: pointer;
            margin: 0px 5px 0px 5px;
            border-radius: 5px;
			}
			
#filters li span:hover {
			color:#FFF;
			background: #666;
			}
	
#filters li span.active {
			background: #DFAA00;
			color:#FFF;
			}

#filters li span.active[data-filter="film"] {
    background: #4B9CCC; /* Farbe für Film/Serie */
    color: #FFFFFF;
}

#filters li span.active[data-filter="trailer"] {
    background: #DFAA00; /* Farbe für Trailer */
    color: #FFFFFF;
}

#filters li span.active[data-filter="ad"] {
    background: #CB4C4F; /* Farbe für Werbung */
    color: #FFFFFF;
}
  
#portfoliolist .portfolio {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-o-box-sizing: border-box;
			width:24.2%;
			margin:0.4%;
            border-radius: 5px;
			display:none;
			float:left;
			overflow:hidden;
			box-shadow: 1px 1px 2px #C3C3C3;
			}

#portfoliolist {
    min-height: 100px; /* Adjust based on your layout */
    overflow: hidden; /* Prevent content from overflowing */
    transition: height 1s ease; /* Smooth transition for height changes */
}

.portfolio-wrapper {
			overflow:hidden;
			position: relative !important;
			background: #c7c7c7;
			}

.portfolio img {
			width:100%;
			height:100%;
			transition: all 0.5s ease;
			transform: scale3d(1, 1, 1);
			
			}
.portfolio img:hover {
			transition: all 0.5s ease;
			transform: scale3d(1.05, 1.05, 1.05);
			
			}
.portfolio .label {
			position: absolute;
			width: 100%;
			bottom:-169px;
			}

.portfolio .label-bg {
			background: #000;
			opacity: 0.75;
			width: 100%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
			}
	
.portfolio .label-text {
			color:#ffffff;
			position: relative;
			text-align: center;
			valign:middle;
			z-index:500;
			padding:5px 8px;
			font-weight: 500;
			}
			
.portfolio .text-category {
			display:block;
			font-size:11px;
			color: #C0C0C0;
			font-weight: 400;
			}
			
.portfolio .text-title {
			display:block;
			font-size:12px;
			color: #969696;
			}
			
.portfolio .text-title:hover {
			color: #DFAA00;
			}
	
/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media (orientation:portrait) {
.container 	{ 
			width: 95%; 
			}


#portfoliolist .portfolio {
			width:48%;
			margin:1%;
			}		

#ads 		{
			display:none;
			}
}

.portfolio {
    display: none; /* Alle Portfolio-Elemente ausblenden */
}

/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media (orientation: landscape) {
.container 	{
			width: 95%;
			}
	
#ads 		{
			display:none;
			}
}

/* #Clearing */
/* Self Clearing Goodness */
.container:after { 
			content: "\0020"; 
			display: block; 
			height: 0; 
			clear: both; 
			visibility: hidden; 
			}

.clearfix:before,.clearfix:after,.row:before,.row:after {
  			content: '\0020';
 			display: block;
  			overflow: hidden;
  			visibility: hidden;
  			width: 0;
  			height: 0; 
			}
			
.row:after,.clearfix:after {
  			clear: both;
			}

.row,.clearfix 
			{
  			zoom: 1;
			}

.clear 		{
 			clear: both;
 			display: block;
  			overflow: hidden;
 			visibility: hidden;
  			width: 0;
 			height: 0;
			}
.static {
  position:absolute;
  background: white;
}

.static:hover {
  position:absolute;
  opacity:0;
}


.figure {
    position: relative;
  }
  .figure img.Sirv.image-hover {
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    transition: all 0.5s ease;

  }
  .figure:hover img.Sirv.image-hover {
    opacity: 1;
	transform: scale3d(1, 1, 1);  
    transition: all 0.5s ease;	  
	cursor: pointer;
  }


  
  
  #vimeo-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
  }
  
  #vimeo-lightbox.active {
	opacity: 1;
	pointer-events: all;
  }

  
  .lightbox-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
  }
  
  .lightbox-inner {
	position: relative;
	background: white;
	padding: 1px;
	z-index: 2;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	transition: all 0.4s ease;
  }
  
  #vimeo-container {
	width: 100%;
	height: 100%;
  }
  
  #vimeo-container iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
  }
  
  .close-button {
	position: absolute;
	top: -10px;
	right: -10px;
	font-size: 1rem;
	background: white;
	color: black;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	cursor: pointer;
	z-index: 3;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
  }

  .lightbox-inner {
	position: relative;
	background: white;
	padding: 1px;
	z-index: 2;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	transition: all 0.4s ease;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
  }
  
  .nav-buttons {
	position: absolute;
	top: 50%;
	left: 10px;
	right: 10px;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	padding: 0 10px;
	opacity: 0;
	transition: opacity 0.2s ease 0.4s; /* Verzögerung beim Ausblenden */
	pointer-events: none;
  }
  
  .nav-arrow {
	font-size: 1.2rem;
	color: white;
	background: rgba(0,0,0,0.5);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	cursor: pointer;
	pointer-events: all;
	user-select: none;
	transition: background 0.2s ease;
  }
  
  .nav-arrow:hover {
	background: rgba(255,255,255,0.3);
  }
  
  .lightbox-inner:hover .nav-buttons {
	opacity: 1;
	transition: opacity 0.2s ease 0s; /* sofort einblenden */
	pointer-events: all;
}
  
  .lightbox-title {
	margin-top: 10px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	z-index: 3;
  }