﻿:root {
 --linkhover: #fbd5be; /*#ffd2b7;*/ 
 --linkfarbe: #e0b69d; /*#d9b098;*/
 
 
  --linkfarbe_darkhover: #8c7262; /*55%*/
  --linkfarbe_dark: #735d50; /*45%*/
  --linkfarbe_dark2:#4f4037; /*31%*/

  --linkhover_sm: #cca58f; /*80%*/
  --linkfarbe_sm: #b3917d; /*70%*/

  --bgcolor: #3c302a;/*#3f332d;*/
  --reccolor: #273040;
  --labelcolor: #412527;/*#452729*/ 
  --menucolor: #222221;
  --cdbgcolor: #404040;
  
  --padconstX: 18px;
  --padconst: 18px;
  --padCDconst: 18px;
  --blockconst: 70px;
  
  --rundeecken: 7px;
  --rundeecken_sm: 5px;
  
}

  @keyframes fadeIn {
	from {opacity: 0;}
    to {opacity: 1; }
  }
   
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0;
}

a[href].white:link, a[href].white:active, a[href].white:visited {
	color: white;
	outline: 0 none;
	text-decoration: underline;
}

a[href].white:hover, a[href].white:focus {
	color: var(--linkhover);
}

		
a[href]:link, a[href]:active, a[href]:visited {
	color: var(--linkfarbe);
	font-weight:400;
	outline: 0 none;
	text-decoration: underline;
}

a[href]:hover, a[href]:focus {
	color: var(--linkhover);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.p_maintitle {
vertical-align:top;
 font-size: 28px;
 color: white;
 letter-spacing:0.2px;
 font-weight:400;
 line-height:32px;
 margin-top:-4px;
 padding-bottom:10px;
}


.p_maintitle2 {
vertical-align:top;
 font-size: 18px;
 color: silver;
 letter-spacing:0.4px;
 font-weight:400;
 line-height:24px;
 padding-top:10px;
}


.p_noflash {
 /*text-align:left;*/
 vertical-align:top;
 font-size: 22px;
 letter-spacing:0.4px;
 font-weight:400;
 line-height:27px;
 margin-top:-3px;
 color:white;
}

.p_noflash_si {
 text-align:left;
 vertical-align:top; 
 font-size: 22px;
 letter-spacing:0.4px;
 font-weight:400;
 line-height:30px;
 margin-top:-3px;
 color:#AAAAAA;
}

.p_noflash2 {
 text-align:left;
 vertical-align:top;
 font-size: 18px;
 letter-spacing:0.5px;
 font-weight:300;
 line-height:24px;
 margin-bottom:-3px;
 color:white;
}

.p_noflash2_si {
 text-align:left;
 vertical-align:top;
 font-size: 18px;
 letter-spacing:0.4px;
 font-weight:400;
 line-height:24px;
 margin-bottom:-3px;
 color:silver;
}


.p_noflash3 {
 text-align:left;
 vertical-align:top;
 font-size: 16px;
 letter-spacing: 0.7px;
 font-weight:300;
 line-height:20px;
 color:white;
}

.p_noflash3_si {
 text-align:left;
 vertical-align:top;
 font-size: 16px;
 letter-spacing: 0.6px;
 font-weight:400;
 line-height:20px;
 color:silver;
}


.p_noflash3_dark {
 font-size: 16px;
 font-weight:normal;
 letter-spacing:0.6px;
 font-weight:400;
 line-height:20px;
 color:#929292;
}

.p_float_si {
 text-align:left;
 vertical-align:top;
 font-size: 16px;
 letter-spacing: 0.7px;
 font-weight:400;
 line-height:20px;
 color:silver;
}

.p_float_si b, strong {
	color: #eee;
	letter-spacing: 0.8px;
}

.p_smallfont {
	font-size: 14px;
	line-height:12px;
	color: silver;
} 

.p_dropdown1 {
	background-color: rgba(35,15,15,0.5);
	color: white; 
	border: 1px solid #000; 
	height:28px; 
	width: 123px;
	font-size: 16px; 
	font-weight: 300;
    letter-spacing: 0.6px;
	padding-bottom:2px;
}
.p_dropdown2 {
	background-color: rgba(35,15,15,0.5); 
	color: white; 
	border: 1px solid #000; 
	height:28px;
	width: 103px;
	font-size: 16px; 
	font-weight: 300;
    letter-spacing: 0.6px;
	padding-bottom:2px;
}

.bigger {
	font-weight:500 !important; 
}

.normal {
	font-weight:400 !important; 
}	
	
.smaller {
	font-weight:300 !important; 
}


.p_white {
	color:white;
}

.p_silver {
	color:silver;
}


.p_orange {
	color: var(--linkfarbe);
}

.p_line28 {
	line-height:3silver	
}
silverline16 {
	line-height:16px;
	
}

.p_mb15 {
	margin-bottom:13px;
}

.p_mb30 {
	margin-bottom:30px;
}


/* altes homeDIV.css ____________________________________________ */

.background_plain {
  width: 100%;
  height: 100vh;
}

.background_title {
  width: 100%;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  }


.backtonormal { 
      position: absolute;
      top: 0%;
      left: 50%;
      transform: translate(-50%, 0%);
      width: 100%;
  }

/* icomoon */

.img_home {
	margin: 7px 0 9px 3px;
	margin-left:3px;
	width:26px; 
	height:24px;
	transition:0.3s;
}

.img_icons, .img_icons_w {

	width:22px; 
	height:24px;
	transition:0.3s;
}

.img_bin {
	background:none; 
	border:none; 
	cursor:pointer; 
	padding:0px; 
	margin-left:0px;
	transition:0.3s;
}

.img_home:hover, .img_icons:hover, .img_bin:hover, .cart_image {
     filter: brightness(65%) sepia(100%) hue-rotate(340deg);
      -webkit-filter: brightness(65%) sepia(100%) hue-rotate(340deg);
      -moz-filter: brightness(65%) sepia(100%) hue-rotate(340deg);
      -o-filter: brightness(65%) sepia(100%) hue-rotate(340deg);
      -ms-filter: brightness(65%) sepia(100%) hue-rotate(340deg);
}

.img_youtube {
	width:80px; 
	height:80px;
	margin-right: 18px;
	opacity: 70%;
	filter: saturate(70%);
      -webkit-filter: saturate(70%);
      -moz-filter: saturate(70%);
      -o-filter: saturate(70%);
      -ms-filter: saturate(70%);
	transition:0.3s;
}


.img_youtube:hover {
	opacity: 100%;

     filter: saturate(100%);
      -webkit-filter: saturate(100%);
      -moz-filter: saturate(100%);
      -o-filter: saturate(100%);
      -ms-filter: saturate(100%);

} 

.img_youtube_container {
	position: relative;
	display: block;
	width:100%;
	max-width: 327px;
  aspect-ratio: 16/11;
}

.img_youtube_container:hover .img_youtube_text{
	background-color:#000;
}

.img_youtube_container img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.img_youtube_text {
  position: absolute;
  padding: 8px;
  border-radius: var(--rundeecken);
  left: 10%; /* Horizontal zentrieren */
  top: 50%;
  text-align:center;
  color:white;
  line-height:22px;
  transform: translate(-6%,-50%); /* Zentrieren */
  z-index: 2; /* Text über dem Bild */
  transition:0.3s;
}


/* für Footer */

.site {
	height: auto; 
	min-height: 100%;
}

main {
	padding-top:0px; /* Abstand */
	padding-bottom:80px; /* Höhe des Footers */
} 

footer {
    height:80px;
	margin-top: -80px; /* Höhe des Footers */

    transition: 0.4s ease-in-out;
    width: 100%;
	background-color: black; 
}


.nav-down {
	background-color:transparent;
}

.blackcontainer {
	width: 100%;
	background-color: rgba(0,0,0,0.4);
	padding: var(--padconst) var(--padconstX);
	margin:  var(--padconst) 0;
	border-radius: var(--rundeecken);
}


.cinema {
	width: 100%;
	border-radius: var(--rundeecken);
}


.picture_flexbox {
	/*background-color:#333;*/
	width: 100%;
	display: flex; 
	flex-wrap: wrap;
	justify-content: space-between;
}

.pfb { 
	padding: var(--padCDconst);
    margin-bottom: var(--padCDconst);
	width: 24%; 
	background-color: rgba(0,0,0,0.4);
    border-radius: var(--rundeecken);
}

.cd_small {
	width: 85%;
	min-width: 240px;
	max-width: 280px;
	aspect-ratio: 1/1; 
	margin-bottom: 40px;
	border: 1px solid var(--linkfarbe_dark2);
	border-radius: var(--rundeecken);
	
    animation: fadeIn 0.5s;
}

.pic_small {
	aspect-ratio: 4/5;
	object-fit: cover;
	width:80%;
	min-width: 205px;
	max-width: 260px;
	border: 1px solid var(--linkfarbe_dark2);
	border-radius: var(--rundeecken);
	margin-bottom:30px;

    animation: fadeIn 0.5s;

}

.pictureborder {
	border:1px solid #383838;
}

.textfb {
	padding: 0px 3% 0px 3%;
    width: 460px;

}	
.textfb3a {
	padding: 0px 3% var(--padconst) 3%;
    width: 360px;
}	
.textfb3b {
	padding: 0px 3% 0px 3%;
    width: 280px;
}

*.scale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
*.scale:hover {
	-webkit-transform: scale(1.04) translate(1.9%, 1.9%);
	-moz-transform: scale(1.04) translate(1.9%, 1.9%);
	-ms-transform: scale(1.04) translate(1.9%, 1.9%);
	-o-transform: scale(1.04) translate(1.9%, 1.9%);
	transform: scale(1.04) translate(1.9%, 1.9%);
}

*.scale_button {
      filter: brightness(100%);
      -webkit-filter: brightness(100%); 
      -moz-filter: brightness(100%);
      -o-filter: brightness(100%);
      -ms-filter: brightness(100%);
	  	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	
}

*.scale_button:hover {
      filter: brightness(130%);
      -webkit-filter: brightness(130%); 
      -moz-filter: brightness(130%);
      -o-filter: brightness(130%);
      -ms-filter: brightness(130%);
	  	-webkit-transform: scale(1.04);
	-moz-transform: scale(1.04);
	-ms-transform: scale(1.04);
	-o-transform: scale(1.04);
	transform: scale(1.04);
}


*.transition {
	-webkit-transition: all 0.15s linear;
	-moz-transition: all 0.15s linear;
	-ms-transition: all 0.15s linear;
	-o-transition: all 0.15s linear;
	transition: all 0.15s linear;				
}

.recpic {
	max-width:750px;
	width:100%;
	margin: auto;
	border-radius: var(--rundeecken);
}


.kombibox_2 {
	display:flex; 
	width:100%;
}

.leftbar {
	width:auto;
	margin:0 var(--padconstX) 0 0;
	
}


.picture400_2 {
	margin:0;
	width:402px;
	
	border-radius: var(--rundeecken);

    animation: fadeIn 0.5s;
}

.sidebar {
	margin:0; 
	flex:1;
}


.kombibox_3 {
	display:flex; 
	width:100%;
}


.leftbar3 {
	width:auto;
	margin:0 var(--padconstX) 0 0;
}	

.rightbar {
	margin:0 0 0 var(--padconstX);
	min-width: 31%;
	max-width: 33%;
}	
	

.leftbar_height{
	height:100%;
}

.picture400_3 {
	margin:0;
	width:389px;
	/*aspect-ratio: 1/1;*/
	border-radius: var(--rundeecken);
	
    animation: fadeIn 0.5s;
}


.middlebar3 {
	margin:0; 
	flex:1;
}

.player400 {
	margin:0 0 0 var(--padconst); 
	width:425px;

}



.searchfield {
	WIDTH: 140px; 
	HEIGHT: 24px;
	font-size:14px; 
	color: #fff; 
	background-color: transparent; 
	border: 1px solid silver;
	border-radius: var(--rundeecken_sm);	
	margin-left: 13px; 
	margin-top: 7px; 
}

.dropdown_DIV1 {
	width:100%;  
	display:flex;  
	justify-content: space-between;	
}

.dropdown_DIV1b {
	width:360px; 
	display:flex; 
	justify-content: space-between; 
	margin: 0 0 0 auto;
}	


.dropdown_DIV2 {
	width:100%;  
	display:flex;  
	justify-content: space-between;	
}


.dropdown_DIV2b {
	display:flex; 
	justify-content: space-between; 
	margin: 6px auto 0px 20px;
}	


.dropdown_DIV3 {
	width:100%;  
	display:flex;  
	justify-content: space-between;	
}

.dropdown_DIV3b {
	display:flex;
	margin:0 0 0 auto;
	width:140px;
	justify-content: end;
	}	

.dropdown_DIV3c {
	display:flex;
	margin:0 0 0 auto;
	width:250px;
	justify-content: end;
	}	

.show_dummy_pics_3 {
	display: none;
}

.show_dummy_pics_4 {
	display: block;
}

.playlist-height {
	height: 200px; 
	overflow-y: auto;
	scrollbar-color: #444 #797979;
	border-radius: var(--rundeecken);

}

.ecken {
	border-radius: var(--rundeecken);
}

.ecken_small {
	border-radius: var(--rundeecken_sm);
}

.cartclass {
	display: none;
}

.cartclass_xs {
	display: none;
}

.cart_collapse {
	display:flex;
	align-items:flex-start;
}


@media only screen and (max-width: 1499px) {
.picture400_3 {	width:294px;}
.player400 {width: 330px;}
.pfb {width: 32.2%; }
.show_dummy_pics_3 {display: block;}
.show_dummy_pics_4 {display: none;}

}

@media only screen and (max-width: 1199px) {
.leftbar3 { flex:1; margin:0;}
.leftbar_height{height:inherit;}
.picture400_3 {	width:385px;}
.player400 {width: 400px;}
.pfb {width: 32%; }
.picture400_2 {width:302px;}
.searchfield {
	WIDTH: 110px;
	margin-left:9px;
}
.site-navbar .site-navigation .site-menu > li > a {
	padding: 10px 6px !important;
}
.site-navbar .site-navigation .site-menu .has-children > a:before {
	right: -9px !important;
}
}

@media only screen and (max-width: 991px) {
.picture400_3 {	width:325px;}
.player400 {width: 310px;}
.kombibox_2 {display: block;}
.leftbar {margin:0; padding-bottom:40px;}
.dropdown_DIV1 {display:block;}
.dropdown_DIV1b {margin:35px 0 4px auto;}
.dropdown_DIV3 {display:block;}
.dropdown_DIV3b {padding-top:12px;}
.dropdown_DIV3c {padding-top:15px;}
.pfb {width: 48.7%; }
.picture400_2 {width:402px;}
.show_dummy_pics_3 {display: none;}
.searchfield {
	WIDTH: 140px;
	margin-left:12px;
}
}

@media only screen and (max-width: 767px) {
.kombibox_3 {display:block;}
.p_dropdown1 {width: 110px;}
.p_dropdown2 {width: 80px;}
.dropdown_DIV1b {width:310px;}	
.picture400_3 {width: 385px;}
.player400 {width: 100%; margin:var(--padconst) 0 0 0;}
.textfb {width: 100%; }
.textfb3a {width: 100%;}
.textfb3b {width: 43%;}
.cinema {aspect-ratio: 12/7; object-fit: cover;}
.pfb {width: 48.2%; }
.cd_small {	width: 100%; min-width: inherit;}
.pic_small { width: 100%; min-width: inherit;}
.playlist-wrap { height:350px !important;}

:root {--padCDconst: 18px;}

*.scale:hover {
	-webkit-transform: scale(1.04);
	-moz-transform: scale(1.04);
	-ms-transform: scale(1.04);
	-o-transform: scale(1.04);
	transform: scale(1.04);
}

}

@media only screen and (max-width: 575px) {
.background_title {background-image: none !important;}

.p_maintitle {
 font-size: 26px;
 line-height:31px;
}
.searchfield {
	WIDTH: 110px;
}

.cart_collapse {
	display: block;
}

.cart_collapse_padding {
	padding-top:8px;
}


}


@media only screen and (max-width: 479px) {

.container_100 {padding-right: 0 !important;  padding-left: 0 !important;}
.picture400_2 {width:100%;}
.kombibox_3 {width:100%;}
.picture400_3 {width:100%;}
.textfb3b {width: 100%;}
.pfb {width: 100%; }
.cd_small { width:80%; max-width: 280px; }
.pic_small { width:80%; max-width: 260px; }
:root {--padconstX: 16px;}

*.scale:hover {
	-webkit-transform: scale(1.04) translate(1.9%, 1.9%);
	-moz-transform: scale(1.04) translate(1.9%, 1.9%);
	-ms-transform: scale(1.04) translate(1.9%, 1.9%);
	-o-transform: scale(1.04) translate(1.9%, 1.9%);
	transform: scale(1.04) translate(1.9%, 1.9%);
}
.searchfield {
	width: 75px;
	margin-left: 12px;
}
.cartclass {
	margin-left: 16px !important;
}


}

@media only screen and (max-width: 419px) {

.xxs-none {
	display:none !important;
}
.cartclass {
	display: none !important;
}

}


@media only screen and ((min-width: 420px) OR (max-width: 359px)){

.cartclass_xs {
	display: none !important;
}

}

 

	

