/* CSS Document */
@charset "utf-8";

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

*,
*:after,
*::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }

html { width:100%; height:100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% }

body {
 font-family: 'Noto Sans', sans-serif;
 font-size: 12px;
 -webkit-text-size-adjust: 100%;
 color: #000000;
 line-height:1.2; 
 background-color:#666; 
 width:100%; height:100%;
 border:0 none; 
 padding:0;
 margin:0 }	

#backgroundContainer div{
z-index:0;
background: #333333;
background-repeat: no-repeat;
background-position:fixed;
background-attachment:fixed;
-o-background-size: cover;
-moz-background-size: cover;       /* Firefox */
-webkit-background-size: cover;   /* Safari, Chrome */
background-size: cover;          /* Opera, IE, W3C Standard */
width:100%; height:100%;
position:fixed;}

.scroller { position:absolute; z-index:100 }
.scroller,.scroller-inner { position:relative }

#data { position:relative; z-index:1; width:100%; }

.container { position:relative; width:100%; overflow:hidden; margin:0px auto }

#head{
 z-index: 90;
 position: relative;	
 height: 100px;
 width: 100%;
 margin:0px auto;	
 background: #666666;
 border-bottom: 1px solid #fff;
 background: url(../layout/bg_head1.jpg); 
 background-repeat:repeat-x;
 -moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 1);
 -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 1);
 box-shadow: 0 2px 15px rgba(0, 0, 0, 1) }

#cont_head{
 position: relative;	
 height: 100px;
 width: 1000px;
 margin:0px auto }
 
#head_bg{	
 position: absolute;
 z-index: 80;
 height: 140px;
 width: 100%;
 top:0px;
 margin:0px auto;	
 background: rgba(200,200,200, 0.25);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) }

#menu { position:absolute; z-index:100; top:10px; left:20px }

.logo {	position:absolute; z-index:99; width:90px; right:880px; top:5px }
.logo_spitze { position:absolute; z-index:90; width:90px; left:0px; top:0px }
.logo_txt {	position:absolute; width:200px; left:90px; top:72px; font-size:12px; font-weight:normal; font-family: 'Noto Sans', sans-serif; color:#888 }
.adresse {position:absolute; left:850px; top:15px; text-align:right; font-size:13px; font-weight:normal; font-family:'Noto Sans', sans-serif; color:#aaa }

#main { position:relative; z-index:1; width:1000px; margin:0px auto }
#cont_main{ position:relative; background:#fff; -moz-box-shadow:1px 1px 6px #000; -webkit-box-shadow:1px 1px 6px #000; box-shadow:1px 1px 6px #000}
#content{ position: relative;z-index:90;width: 960px;text-align:justify;margin:0px auto; padding: 20px 20px 0 20px }
#content2{ position: relative;z-index:90;width: 960px;text-align:justify;margin:0px auto; padding: 80px 20px 0 20px }
 
.cont_bg1{ position:absolute; z-index:1; width:100%; height:auto; bottom:0px; filter: alpha(opacity=60); opacity:0.6 } 
.cont_bg2{ position:absolute; z-index:1; width:100%; height:auto; bottom:-5px; } 

.databox1{ position: relative; text-align:center; margin:0px auto;}

#foot{
 z-index: 90;
 position: relative;	
 height: 250px;
 width: 100%;
 margin:0px auto;	
 background:#444444;
 border-top: 1px solid #fff;
 background: url(../layout/bg_foot1.jpg); 
 background-repeat:repeat-x;
 -moz-box-shadow: 0 1px 15px rgba(0, 0, 0, 1);
 -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 1);
 box-shadow: 0 1px 15px rgba(0, 0, 0, 1) }
 
#cont_foot{ position:relative; height:220px; width:1000px; top:30px; left:0px; margin:0px auto }
 
.mixed1 { 
position:relative; 
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex;
display: flex;  
flex-wrap: wrap;
flex-flow: row wrap;  
-webkit-flex-flow: row wrap;
 justify-content: center }

.mixed2 { 
position:relative; 
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex;
display: flex;  
flex-wrap: wrap;
flex-flow: row wrap;  
-webkit-flex-flow: row wrap;
justify-content:flex-start }

.mixed3 { 
position:relative; 
display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex;
display: flex;  
flex-wrap: wrap;
flex-flow: row wrap;  
-webkit-flex-flow: row wrap;
align-items:flex-start;
justify-content:space-between }

.box1{ position:relative; width:230px; height:auto; padding:10px }
.box2{ position:relative; width:180px; height:auto; padding:10px }
.auswahlbox{ position:relative; width:100%; height:920px }
.auswahlbox2{ position:relative; width:100%; height:400px }

.anibox1{ position:relative; width:700px; height:700px }
.anibox2{ position:relative; width:380px; height:380px }
.anibox3{ position:relative; width:100%; height:auto }
.videotxt1{ position:relative; width:400px; text-align:left; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight:700; color:#444; }
.videonav1{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:400px; height:80px; bottom:100px}
.videonav2{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:400px; height:80px}

.play{ position:relative; left:0px; width:80px; height:80px}
.rplay { position:relative; left:-10px; width:80px; height:80px}
.fastrew{ position:relative; left:-20px; width:80px; height:80px}
.fastfwd{ position:relative; left:-30px; width:80px; height:80px}

.imgbox1{ position:relative; line-height:0px; width:100%; height:auto; margin:0px; padding:0px;
-webkit-box-shadow: 0px 10px 5px -5px rgba(100,100,100,1);
-moz-box-shadow: 0px 10px 5px -5px rgba(100,100,100,1);
box-shadow: 0px 10px 5px -5px rgba(100,100,100,1); }

.imgbox2{ position:relative; width:50%; height:auto; padding:10px;}

.falte1a { position:relative; z-index:99; width:420px; bottom:-5px; height:auto }
.txt400a { position:relative; width:250px; height:auto }

.abstand { line-height:200px }
.abstand2 { line-height:250px }
.tabpunkt1{ position:relative; display:block; border:0; width:26px; height:26px} 
.tabpunkt2{ position:relative; display:block; border:0; width:20px; height:20px} 
.tabzahl1{ position:relative; width:25px; height:25px; } 

.icons1{ position:relative;width:25px; height:auto } 

.tabelle1{ width:100%; border:0; border-spacing:0px 0px; border-collapse:collapse }
.tabelle2{ width:800px; border:0; border-spacing:0px 0px; border-collapse:collapse }
.td1{ width:4%; padding:0px } 
.td2{ display: table-cell; vertical-align: middle; width:96%; font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight:normal; color:#c40 }
.td1b{ width:2%; padding:0 6px 0 0 } 
.td2b{ display: table-cell; vertical-align:middle; width:98%; font-family: 'Noto Sans', sans-serif; font-size: 14px; font-weight:normal; color:#666}
.td1c{ width:160px; padding:0 } 
.td2c{ display: table-cell; vertical-align:top; text-align:left; width:600px; padding-left:20px; font-family: 'Noto Sans', sans-serif; font-size: 18px; line-height: 1.3; font-weight:normal; color:#333}

/* MusikCDs ---------------------------------------------------------------------- */	
.coverbox1 { position:relative; padding:10px;}  
.coverdata { position:relative; width:160px; height:auto; padding:0; }
.new1 { position:absolute; right:-20px; top:-15px; width:60px; height:40px} 

.coverbox2{ position:relative; width:300px; height:auto; -moz-box-shadow: 1px 1px 5px #444; -webkit-box-shadow:1px 1px 5px #444; -khtml-box-shadow:1px 1px 5px #444; box-shadow:1px 1px 5px #444 }
.coverinf1{ position:relative; width:600px; height:auto; padding-left:50px }

.soundcloud { position:relative; width:100%; height:auto; }

.genre { position:relative; width:130px; height:auto; padding:6px }

/* intro ---------------------------------------------------------------------- */	
.intro { position:relative; left:0px; width:100%; padding: 0px; line-height:0px; margin:0px; border:0 none; font-family: 'Noto Sans', sans-serif; }
.intro2 { position:absolute; bottom:49px; left:0px; width:100%;  padding: 0px; margin:0px; border:0 none; font-family: 'Noto Sans', sans-serif; -webkit-filter:brightness(0.65); filter:brightness(0.65);}
 #noscriptfeld { position:absolute; top:45%; text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:38pt; font-weight:bold; width:100%; color:#bbbbbb }
 #noscriptfeld2 { position:relative; text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:38pt; font-weight:bold; width:100%; color:#bbbbbb }

.deko { display:none } 

.introfoot { position:absolute; bottom:0px; width:100%; height:50px; padding:0px; margin:0px; background-color:#a6a6a6 }

/* Videoclips ---------------------------------------------------------------------- */	
.video-container {position:relative; padding-bottom:56.25%; padding-top:0px; height:0; overflow:hidden; border:none; background:#ffffff;
 -webkit-box-shadow: 0px 12px 5px -8px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 12px 5px -8px rgba(0,0,0,0.75);
 box-shadow: 0px 12px 5px -8px rgba(0,0,0,0.75) }

.video-container iframe,
.video-container object,
.video-container embed { position:absolute; top:0; left:0; width:100%; height:100% }
.video-container-wrapper {max-width:100%;width:100%; left:0; right:0; margin:auto }

/* Effekts ---------------------------------------------------------------------- */	
.beff1 { opacity:0.75; filter:alpha(opacity=75); transition-timing-function:cubic-bezier(0.1,0.1,0.1,0.1); transition-property:margin-top; transition-duration:0.4s }
.beff1:hover { margin-top:-15px; opacity:1; filter: alpha(opacity=100) }
.beff2 { transition: transform 2.5s; opacity:0.75; filter:alpha(opacity=75); transition-timing-function:cubic-bezier(0.1,0.1,0.1,0.1);  transition-duration:0.4s }
.beff2:hover { transition: transform .3s; transform: scale(0.9); opacity:1; filter: alpha(opacity=100) }

.hover-container {
width:160px; height:auto;
position: relative;overflow: hidden;
font-family: 'Noto Sans', sans-serif; color:#ffffff; font-size:12px; font-weight:700; 
-moz-box-shadow: 1px 1px 4px #444; /* Firefox */
-webkit-box-shadow: 1px 1px 4px #444; /* Chr, Saf */
-khtml-box-shadow: 1px 1px 4px #444; /* Konqueror */
box-shadow: 1px 1px 4px #444 /* CSS3 */ }

.hover-content {
position: absolute; overflow: hidden;
width:100%; height:50px;
padding-top:20px; margin:0px;
top:0; left:0; text-align:center;
color:rgb(255,255,255);
text-shadow: 1px 1px 1px rgb(30,30,30);
background-color: rgba(200,200,200, 0.8);
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);}

.shade1 {  -webkit-box-shadow:0px 12px 5px -8px rgba(0,0,0,0.5); -moz-box-shadow:0px 12px 5px -8px rgba(0,0,0,0.5); box-shadow:0px 12px 5px -8px rgba(0,0,0,0.5) }
.text1 {  text-shadow: 2px 2px 5px rgb(30,30,30);}

a.hover-content { border-bottom:1px solid #eee; text-decoration:none }

.hover-container:hover .hover-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;}
	
.hover-container img {
display: block;
position: relative;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
opacity:0.80; filter:alpha(opacity=80);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.hover-container2 {
width:160px; height:auto;
position: relative;overflow: hidden;
font-family: 'Noto Sans', sans-serif; color:#ffffff; font-size:12px; font-weight:700; 
-moz-box-shadow: 1px 1px 10px #000; /* Firefox */
-webkit-box-shadow: 1px 1px 10px #000; /* Chr, Saf */
-khtml-box-shadow: 1px 1px 10px #000; /* Konqueror */
box-shadow: 1px 1px 10px #000 /* CSS3 */ }

.hover-container:hover img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
opacity:1;}

.hover-container2:hover .hover-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;}
.hover-container2 img {
display: block;
position: relative;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
opacity:0.90; filter:alpha(opacity=90);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}
.hover-container2:hover img {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100);
opacity:1;}

.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: none; }
.cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; border-top: 1px solid #fff; background: linear-gradient(180deg, rgba(55, 55, 55, 0.7), rgba(110, 110, 110, 0.9));
                 box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5); padding: 20px; display: flex; justify-content: space-between; align-items: center; z-index: 1000; display: none; /* Banner standardmäßig ausblenden */}
.cookie-text { max-width: 60%;  font-size: 16px; font-weight: normal; font-family: 'Noto Sans', sans-serif; color: white; }
.cookie-text a { color: #00bfff; text-decoration: none; }
.cookie-text a:hover { text-decoration: underline; }
.cookie-buttons { display: flex; gap: 10px; /* Abstand zwischen den Buttons */  margin-right:50px; /* Abstand zum rechten Rand */ }
.cookie-button { padding: 10px 20px; border:none; cursor:pointer; font-size:14px; border-radius:5px; transition:background-color 0.3s, transform 0.2s; width:150px; text-align:center; box-sizing:border-box; }
.cookie-button.confirm { background-color: #4caf50;color: white;}
.cookie-button.confirm:hover { background-color: #45a049; transform: scale(1.05); }
.cookie-button.reject { background-color: #f44336; color: white; }
.cookie-button.reject:hover { background-color: #e53935; transform: scale(1.05); }

 /* Style für die Divs, die je nach Zustimmung sichtbar oder unsichtbar sind */
.active-content { display: none; /* Standardmäßig verborgen */}
.active-content a { color: #555; text-decoration: none; }
.active-content a:hover { color: #935051; text-decoration: underline;}
        
 @media (max-width: 768px) {
.cookie-banner { flex-direction: column; padding: 15px;}
.cookie-text { max-width: 100%; font-size: 12px; margin-bottom: 10px; text-align: center; }
.cookie-buttons { display: flex; justify-content: center; gap: 10px; width: 100%; }
.cookie-button { width: 40%; font-size: 14px; padding: 12px; text-align: center;}
}

.change-decision-button::before { content: "Entscheidung ändern"; display:block; width:100%; text-align:left }
.change-decision-button { display:flex; align-items:center; justify-content:flex-start; background-color:#DD6062 ; width:200px; color:white; border:none; padding:10px 10px; 
                     font-size:14px; font-weight:normal; font-family: 'Noto Sans', sans-serif;  border-radius:5px; cursor:pointer; transition: background-color 0.3s ease, transform 0.2s ease; position:relative }
.change-decision-button::after { content: ""; /* Virtuelles Element */ background: url('../menu/speaker1w.svg') no-repeat right center / 40px 40px;
                            width:40px; height:40px; position:absolute; right:10px; top:50%; transform:translateY(-50%) }
.change-decision-button:hover { background-color:#C14D4F; transform:scale(1.05) }
.change-decision-button:active { background-color:#4daaff }


@media only screen 
  and (min-width: 1101px)
  and (max-width: 1200px)
{	
.logo {	position:absolute; width:90px; right:820px; top:5px }
.eff_water { display:none } 

}

/* Tablet Querformat --------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen 
  and (min-width: 901px)
  and (max-width: 1101px)
{
#cont_head{ position:relative; height:100px; width:100%; margin:0px auto }	
	
.logo {	position:absolute; width:90px; right:100px; top:5px }
.adresse {position:absolute; left:120px; top:15px; text-align:left; font-size:13px; font-weight:normal; font-family:'Noto Sans', sans-serif; color:#aaa }

#main { position:relative; z-index:1; width:100%; margin:0px auto }
#cont_main{ position:relative; background:#fff }
#content{ position: relative; z-index:90; width: 100%; text-align:justify; margin:0px auto; padding: 20px 20px 0 20px }	
#content2{ position: relative; z-index:90; width: 100%; text-align:left; margin:0px auto; padding: 80px 20px 0 20px }	


.abstand { line-height:300px }
.abstand2 { line-height:200px }

.td1{ width:2%; padding:0px 5px 0 0 } 
.td2{ display: table-cell; vertical-align:middle; width:98%; font-family: 'Noto Sans', sans-serif; font-size: 18px; font-weight:normal; color:#c40; margin:0px; padding:0px }

#cont_foot{ position:relative; height:220px; width:100%; top:30px; left:0px; margin:0px auto }

.beff1 { opacity:0.75; filter:alpha(opacity=75); transition-timing-function:cubic-bezier(0.1,0.1,0.1,0.1); transition-property:margin-top; transition-duration:0.4s }
.beff1:hover { margin-top:-15px; opacity:1; filter: alpha(opacity=100) }

.box1{ position:relative; width:210px; height:auto; padding:10px }
.box2{ position:relative; width:180px; height:auto; padding:10px }
.auswahlbox{ position:relative; width:100%; height:820px; }
.auswahlbox2{ position:relative; width:100%; height:300px }

.anibox1{ position:relative; width:650px; height:650px }
.anibox2{ position:relative; width:380px; height:380px }
.anibox3{ position:relative; width:100%; height:auto }
.videotxt1{ position:relative; width:300px; text-align:left; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight:700; color:#444; }
.videonav1{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:380px; height:80px; bottom:100px}
.videonav2{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:380px; height:80px}

.falte1a { position:relative; z-index:99; width:420px; left:-5px; height:auto }
    
.eff_water { display:none } 

/* MusikCDs ---------------------------------------------------------------------- */	
.coverbox2{ position:relative; width:300px; height:auto; -moz-box-shadow: 1px 1px 5px #444; -webkit-box-shadow:1px 1px 5px #444; -khtml-box-shadow:1px 1px 5px #444; box-shadow:1px 1px 5px #444 }
.coverinf1{ position:relative; width:500px; height:auto; padding: 0px 0px 20px 0 }
}

/* Tablet Hochformat --------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen 
  and (min-width: 761px)
  and (max-width: 900px)
{
#cont_head{ position:relative; height:100px; width:100%; margin:0px auto }	
	
.logo {	position:absolute; width:90px; right:100px; top:5px }
.adresse {position:absolute; left:120px; top:15px; text-align:left; font-size:13px; font-weight:normal; font-family:'Noto Sans', sans-serif; color:#aaa }

#main { position:relative; z-index:1; width:100%; margin:0px auto }
#cont_main{ position:relative; background:#fff }
#content{ position: relative; z-index:90; width: 100%; text-align:justify; margin:0px auto; padding: 20px 10px 0 10px }	
#content2{ position: relative; z-index:90; width: 100%; text-align:left; margin:0px auto; padding: 80px 10px 0 10px }	

.abstand { line-height:180px }
.abstand2 { line-height:200px }
.tabpunkt1{ position:relative; display:block; width:22px; height:22px} 

.tabelle2{ width:100%x; border:0; border-spacing:0px 0px; border-collapse:collapse }
.td1{ width:2%; padding:0px 5px 0 0 } 
.td2{ display: table-cell; vertical-align: middle; width:98%; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight:normal; color:#c40; margin:0px; padding:0px }
.td1b{ width:2%; padding:0 6px 0 0 } 
.td2b{ display: table-cell; vertical-align:middle; width:98%; font-family: 'Noto Sans', sans-serif; font-size: 14px; font-weight:normal; color:#666}
.td1c{ width:2%; padding:0 } 
.td2c{ display: table-cell; vertical-align:top; width:98%; text-align:left; padding-left:20px; font-family: 'Noto Sans', sans-serif; font-size: 16px; line-height: 1.3; font-weight:normal; color:#333}

#cont_foot{ position:relative; height:220px; width:100%; top:30px; left:0px; margin:0px auto }

.falte1a { position:relative; z-index:99; width:400px; left:-10px; height:auto }

.beff1 { opacity:0.90; filter:alpha(opacity=90); transition-timing-function:cubic-bezier(0.1,0.1,0.1,0.1); transition-property:margin-top; transition-duration:0.4s }
.beff1:hover { margin-top:0px; opacity:1; filter: alpha(opacity=100) }

.box1{ position:relative; width:200px; height:auto; padding:10px }
.box2{ position:relative; width:180px; height:auto; padding:10px }
.auswahlbox{ position:relative; width:100%; height:100%; }
.auswahlbox2{ position:relative; width:100%; height:100% }

.anibox1{ position:relative; width:650px; height:650px }
.anibox2{ position:relative; width:350px; height:350px }
.anibox3{ position:relative; width:100%; height:auto }
.videotxt1{ position:relative; width:300px; text-align:left; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight:700; color:#444; }
.videonav1{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:400px; height:80px; bottom:100px}
.videonav2{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:350px; height:80px}
    
.eff_water { display:none } 

/* MusikCDs ---------------------------------------------------------------------- */	
.coverbox1 { position:relative; padding:10px;}  
.coverdata { position:relative; width:140px; height:auto; padding:0; }
.new1 { position:absolute; right:-20px; top:-15px; width:60px; height:40px} 

.coverbox2{ position:relative; width:300px; height:auto; -moz-box-shadow: 1px 1px 5px #444; -webkit-box-shadow:1px 1px 5px #444; -khtml-box-shadow:1px 1px 5px #444; box-shadow:1px 1px 5px #444 }
.coverinf1{ position:relative; width:400px; height:auto; padding: 0px 0px 10px 0 }

.hover-container { width:140px; height:auto; position: relative;overflow: hidden; font-family: 'Noto Sans', sans-serif; color:#ffffff; font-size:12px; font-weight:700 }
.hover-container img { opacity:0.90; filter:alpha(opacity=90) }
.hover-container2 { width:140px; height:auto; position: relative;overflow: hidden; font-family: 'Noto Sans', sans-serif; color:#ffffff; font-size:12px; font-weight:700 }  
.hover-container2 img { opacity:0.90; filter:alpha(opacity=90) }
 
}

/* Smartphone Querformat --------------------------------------------------------------------------------------- */
@media only screen 
  and (min-width: 481px)
  and (max-width: 760px)
{
#head_bg{	
 position: absolute;
 z-index: 80;
 height: 130px;
 width: 100%;
 top:0px;
 margin:0px auto;	
 background: rgba(200,200,200, 0.25);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) }		
	
#cont_head{ position:relative; height:100px; width:100%; margin:0px auto }	
	
.logo {	position:absolute; width:90px; right:100px; top:5px }
.adresse {position:absolute; left:110px; top:15px; text-align:left; font-size:13px; font-weight:normal; font-family:'Noto Sans', sans-serif; color:#aaa }

#main { position:relative; z-index:1; width:100%; margin:0px auto }
#cont_main{ position:relative; background:#fff }
#content{ position: relative; z-index:90; width: 100%; text-align:justify; margin:0px auto; padding: 20px 10px 0 10px }	
#content2{ position: relative; z-index:90; width: 100%; text-align:left; margin:0px auto; padding: 60px 10px 0 10px }	

.abstand { line-height:100px }
.abstand2 { line-height:220px }
.tabpunkt1{ position:relative; display:block; width:20px; height:20px} 

.tabelle1{ width:100%; border:0; border-spacing:0px 0px; border-collapse:collapse }
.tabelle2{ width:100%; border:0; border-spacing:0px 0px; border-collapse:collapse }
.td1{ width:5%; padding:0px 5px 0 0} 
.td2{ display: table-cell; vertical-align: middle; width:95%; font-family: 'Noto Sans', sans-serif; font-size: 15px; font-weight:normal; color:#c40; margin:0px; padding:0px }
.td1b{ width:5%; padding:0 6px 0 0 } 
.td2b{ display: table-cell; vertical-align:middle; width:95%; font-family: 'Noto Sans', sans-serif; font-size: 14px; font-weight:normal; color:#666}
.td1c{ width:5%; padding:0 } 
.td2c{ display: table-cell; vertical-align:top; width:95%; text-align:left; padding-left:20px; font-family: 'Noto Sans', sans-serif; font-size:15px; line-height:1.3; font-weight:normal; color:#333}

#cont_foot{ position:relative; height:220px; width:100%; top:20px; left:0px; margin:0px auto }

.falte1a { display:none}

.beff1 { opacity:0.90; filter:alpha(opacity=90); transition-timing-function:cubic-bezier(0.1,0.1,0.1,0.1); transition-property:margin-top; transition-duration:0.4s }
.beff1:hover { margin-top:0px; opacity:1; filter: alpha(opacity=100) }

.box1{ position:relative; width:160px; height:auto; padding:10px }
.box2{ position:relative; width:160px; height:auto; padding:10px }
.auswahlbox{ position:relative; width:100%; height:100%; }
.auswahlbox2{ position:relative; width:100%; height:100% }

.anibox1{ position:relative; width:100%; height:100% }
.anibox2{ position:relative; width:380px; height:380px }
.anibox3{ position:relative; width:100%; height:auto }
.videotxt1{ position:relative; width:400px; text-align:left; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight:700; color:#444; }
.videonav1{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:400px; height:70px; bottom:100px}
.videonav2{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:400px; height:70px}

.play{ position:relative; left:0px; width:70px; height:70px}
.rplay { position:relative; left:-10px; width:70px; height:70px}
.fastrew{ position:relative; left:-20px; width:70px; height:70px}
.fastfwd{ position:relative; left:-30px; width:70px; height:70px}

/* MusikCDs ---------------------------------------------------------------------- */	
.coverbox1 { position:relative; padding:10px;}  
.coverdata { position:relative; width:120px; height:auto; padding:0; }
.new1 { position:absolute; right:-20px; top:-15px; width:60px; height:40px} 

.coverbox2{ position:relative; width:300px; height:auto; -moz-box-shadow: 1px 1px 5px #444; -webkit-box-shadow:1px 1px 5px #444; -khtml-box-shadow:1px 1px 5px #444; box-shadow:1px 1px 5px #444 }
.coverinf1{ position:relative; width:100%; height:auto; padding:20px 0px 0 0 }

.hover-container { width:120px; height:auto; position: relative;overflow: hidden; font-family: 'Noto Sans', sans-serif; color:#ffffff; font-size:11px; font-weight:700 }
.hover-container img { opacity:0.90; filter:alpha(opacity=90) }
.hover-container2 { width:120px; height:auto; position: relative;overflow: hidden; font-family: 'Noto Sans', sans-serif; color:#ffffff; font-size:11px; font-weight:700 }  
.hover-container2 img { opacity:0.90; filter:alpha(opacity=90) }
    
.genre { position:relative; width:110px; height:auto; padding:5px }

 #noscriptfeld { position:absolute; top:45%; text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:24pt; font-weight:bold; width:100%; color:#bbbbbb }
    
 /* intro ---------------------------------------------------------------------- */	   
.nl-licht1 { display:none } 
.nl-gif1 { display:none } 
.nl-gif2 { display:none }  
.nl-gif3 { display:none }   
.nl-disco { display:none }  
.eff_water { display:none } 
.nl-sterne { display:none } 
.nl-watercolors { display:none }
    
.eff_water { display:none } 
.intro_cloud1 { display:none } 
.intro_cloud2 { display:none }
.intro_snow2a { display:none }
.intro_snow3a { display:none }
.intro_bg1 { display:none }
.intro_bg2 { display:none } 
.sternen { display:none } 
.deko { display:none } 
    
#cookiebanner a {color:#fff; text-decoration:none;}
#cookiebanner a:hover {text-decoration:underline;}
#cookiebanner div {padding:6px 60px 6px 10px}
#cookiebanner { 
   text-align:left; 
   border-top:1px solid #fff;
   background: #333333; 
   background: -moz-linear-gradient(top, #333333 0%, #666666 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#666666)); 
   background: -webkit-linear-gradient(top, #333333 0%,#666666 100%); 
   background: -o-linear-gradient(top, #333333 0%,#666666 100%);
   background: -ms-linear-gradient(top, #333333 0%,#666666 100%); 
   background: linear-gradient(to bottom, #333333 0%,#666666 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#333333', endColorstr='#666666',GradientType=0 ); 
   position:fixed;
   color:#ffffff;    
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:12px; 
   line-height:16px;}
.cookie-txt {width:90%; }
#cookiebannerCloser {
   color: #aa0000;
   font: 14px/100% arial, sans-serif;
   position: absolute;
   right: 10px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 8px;
   cursor:pointer;
   border-top:1px solid #eeeeee; 
   border-left:1px solid #eeeeee; 
   border-bottom:1px solid #666666; 
   border-right:1px solid #666666; 
   padding:5px;
   background: #cccccc; /* Old browsers */}
#cookiebannerCloser:hover {color: #ff0000; background: #eeeeee; border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #888888; border-left:1px solid #888888;}

#cookiebanner a {color:#fff; text-decoration:none;}
#cookiebanner a:hover {text-decoration:underline;}
#cookiebanner div {padding:6px 60px 6px 5px}
#cookiebanner { 
   text-align:left; 
   border-top:1px solid #fff;
   background: #333333; 
   background: -moz-linear-gradient(top, #333333 0%, #666666 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#666666)); 
   background: -webkit-linear-gradient(top, #333333 0%,#666666 100%); 
   background: -o-linear-gradient(top, #333333 0%,#666666 100%);
   background: -ms-linear-gradient(top, #333333 0%,#666666 100%); 
   background: linear-gradient(to bottom, #333333 0%,#666666 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#333333', endColorstr='#666666',GradientType=0 ); 
   position:fixed;
   color:#ffffff;    
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:11px; 
   line-height:16px;}
.cookie-txt {width:90%; }
#cookiebannerCloser {
   color: #aa0000;
   font: 13px/100% arial, sans-serif;
   position: absolute;
   right: 10px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 8px;
   cursor:pointer;
   border-top:1px solid #eeeeee; 
   border-left:1px solid #eeeeee; 
   border-bottom:1px solid #666666; 
   border-right:1px solid #666666; 
   padding:5px;
   background: #cccccc; /* Old browsers */}
#cookiebannerCloser:hover {color: #ff0000; background: #eeeeee; border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #888888; border-left:1px solid #888888;} 
    
}

/* Smartphone Hochformat ----------------------------------------------------------------------------------------*/
@media only screen 
  and (min-width: 300px)
  and (max-width: 480px)
{
#head_bg{	
 position: absolute;
 z-index: 80;
 height: 120px;
 width: 100%;
 top:0px;
 margin:0px auto;	
 background: rgba(200,200,200, 0.25);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) }	
	
#cont_head{ position:relative; height:100px; width:100%; margin:0px auto }	
#menu { position:absolute; z-index:100; top:10px; left:10px }
	
.logo {	position:absolute; width:90px; right:90px; top:5px }
.adresse {display:none }

#main { position:relative; z-index:1; width:100%; margin:0px auto }
#cont_main{ position:relative; background:#fff }
#content{ position: relative; z-index:90; width: 100%; text-align:justify; margin:0px auto; padding: 20px 10px 0 10px }	
#content2{ position: relative; z-index:90; width: 100%; text-align:left; margin:0px auto; padding: 60px 10px 0 10px }	

.abstand { line-height:100px }
.abstand2 { line-height:180px }
.tabpunkt1{ position:relative; display:block; top:1px; width:15px; height:16px } 

.tabelle1{ width:100%; border:0; border-spacing:0px 0px; border-collapse:collapse }
.tabelle2{ width:100%; border:0; border-spacing:0px 0px; border-collapse:collapse }
.td1{ width:5%; padding:0px 5px 0 0} 
.td2{ display: table-cell; vertical-align: middle; width:95%; font-family: 'Noto Sans', sans-serif; font-size: 14px; font-weight:normal; color:#c40; margin:0px; padding:0px }
.td1b{ width:5%; padding:0 6px 0 0 } 
.td2b{ display: table-cell; vertical-align:middle; width:95%; font-family: 'Noto Sans', sans-serif; font-size: 14px; font-weight:normal; color:#666}
.td1c{ width:5%; padding:0 } 
.td2c{ display: table-cell; vertical-align:top; width:95%; text-align:left; padding-left:20px; font-family: 'Noto Sans', sans-serif; font-size:14px; line-height:1.3; font-weight:normal; color:#333}

#foot{
 z-index: 90;
 position: relative;	
 height: 300px;
 width: 100%;
 margin:0px auto;	
 background:#444444;
 border-top: 1px solid #fff;
 background: url(../layout/bg_foot2.jpg); 
 background-repeat:repeat-x;
 -moz-box-shadow: 0 1px 15px rgba(0, 0, 0, 1);
 -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 1);
 box-shadow: 0 1px 15px rgba(0, 0, 0, 1) }
#cont_foot{ position:relative; height:280px; width:100%; top:20px; left:0px; margin:0px auto }

.falte1a { display:none }

.beff1 { opacity:0.90; filter:alpha(opacity=90); transition-timing-function:cubic-bezier(0.1,0.1,0.1,0.1); transition-property:margin-top; transition-duration:0.4s }
.beff1:hover { margin-top:0px; opacity:1; filter: alpha(opacity=100) }

.box1{ position:relative; width:110px; height:auto; padding:5px }
.box2{ position:relative; width:120px; height:auto; padding:10px }
.auswahlbox{ position:relative; width:100%; height:100%; }
.auswahlbox2{ position:relative; width:100%; height:100% }

.anibox1{ position:relative; width:100%; height:100%; }
.anibox2{ position:relative; width:100%; height:100%; }
.anibox3{ position:relative; width:100%; height:auto }
.videotxt1{ position:relative; width:300px; text-align:left; font-family: 'Noto Sans', sans-serif; font-size: 16px; font-weight:700; color:#444; }
.videonav1{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:300px; height:60px; bottom:-10px}
.videonav2{ 
position:relative; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex; flex-wrap: wrap; flex-flow: row wrap; -webkit-flex-flow: row wrap;
justify-content:flex-start; width:300px; height:60px}

.play{ position:relative; left:0px; width:60px; height:60px}
.rplay { position:relative; left:-10px; width:60px; height:60px}
.fastrew{ position:relative; left:-20px; width:60px; height:60px}
.fastfwd{ position:relative; left:-30px; width:60px; height:60px}

/* MusikCDs ---------------------------------------------------------------------- */	
.coverbox1 { position:relative; padding:5px;}  
.coverdata { position:relative; width:90px; height:auto; padding:0; }
.new1 { position:absolute; z-index:99; right:-20px; top:-15px; width:60px; height:40px} 

.coverbox2{ position:relative; width:300px; height:auto; -moz-box-shadow: 1px 1px 5px #444; -webkit-box-shadow:1px 1px 5px #444; -khtml-box-shadow:1px 1px 5px #444; box-shadow:1px 1px 5px #444 }
.coverinf1{ position:relative; width:100%; height:auto; padding:20px 0px 0 0 }

.hover-container { width:90px; height:auto; position: relative;overflow: hidden; font-family: 'Noto Sans', sans-serif; color:#ffffff; font-size:10px; font-weight:700 }
.hover-container img { opacity:0.90; filter:alpha(opacity=90) }
.hover-container2 { width:90px; height:auto; position: relative;overflow: hidden; font-family: 'Noto Sans', sans-serif; color:#ffffff; font-size:10px; font-weight:700 }  
.hover-container2 img { opacity:0.90; filter:alpha(opacity=90) }
    
.genre { position:relative; width:85px; height:auto; padding:2px }

 #noscriptfeld { position:absolute; top:45%; text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:18pt; font-weight:bold; width:100%; color:#bbbbbb }
 #noscriptfeld2 { position:relative; text-align:center; font-family: Arial, Helvetica, sans-serif; font-size:18pt; font-weight:bold; width:100%; color:#bbbbbb }   
    
 /* intro ---------------------------------------------------------------------- */	   
.nl-licht1 { display:none } 
.nl-gif1 { display:none } 
.nl-gif2 { display:none }  
.nl-gif3 { display:none }   
.nl-disco { display:none }  
.eff_water { display:none } 
.nl-sterne { display:none } 
 .nl-watercolors { display:none }
    
    
.intro_cloud1 { display:none } 
.intro_cloud2 { display:none }
.intro_snow2a { display:none }
.intro_snow3a { display:none }
.intro_bg1 { display:none }
.intro_bg2 { display:none } 
.sternen { display:none } 
.deko { display:none } 
    
#cookiebanner a {color:#fff; text-decoration:none;}
#cookiebanner a:hover {text-decoration:underline;}
#cookiebanner div {padding:6px 60px 6px 5px}
#cookiebanner { 
   text-align:left; 
   border-top:1px solid #fff;
   background: #333333; 
   background: -moz-linear-gradient(top, #333333 0%, #666666 100%); 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#666666)); 
   background: -webkit-linear-gradient(top, #333333 0%,#666666 100%); 
   background: -o-linear-gradient(top, #333333 0%,#666666 100%);
   background: -ms-linear-gradient(top, #333333 0%,#666666 100%); 
   background: linear-gradient(to bottom, #333333 0%,#666666 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient(   startColorstr='#333333', endColorstr='#666666',GradientType=0 ); 
   position:fixed;
   color:#ffffff;    
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
   font-size:10px; 
   line-height:16px;}
.cookie-txt {width:90%; }
#cookiebannerCloser {
   color: #aa0000;
   font: 12px/100% arial, sans-serif;
   position: absolute;
   right: 10px;
   text-decoration: none;
   text-shadow: 0 1px 0 #fff;
   top: 8px;
   cursor:pointer;
   border-top:1px solid #eeeeee; 
   border-left:1px solid #eeeeee; 
   border-bottom:1px solid #666666; 
   border-right:1px solid #666666; 
   padding:5px;
   background: #cccccc; /* Old browsers */}
#cookiebannerCloser:hover {color: #ff0000; background: #eeeeee; border-bottom:1px solid white; border-right:1px solid white; border-top:1px solid #888888; border-left:1px solid #888888;} 

}