body { background:  #ffffff;margin: 0 auto; padding: 0;	height:100%; width:100%;font-size: 1.8em;	font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif; font-size: 100%; list-style: none; margin: 0; padding: 0; line-height: 100%;	color: #004a87;	}


img {max-width:100%; height:auto;}

/* ----- typography ----- */
h1 {color: #004a87; font-size: clamp(1rem, 1.2vw + 1rem,16rem); font-family: 'TiltWarp', sans-serif; font-weight: 400; line-height:1.5em;   font-style: italic; }
h2 {color: #004a87; font-size: clamp(1rem, 0.8vw + 0.5rem, 16rem); font-family: 'TiltWarp', sans-serif; font-weight: 400;   line-height: 100%;}
h3 {color: #004a87; font-size: clamp(1rem, 0.5vw + 0.5rem, 16rem); font-family: 'TiltWarp', sans-serif; font-weight: 400; line-height: 100%; }
h4 {font-size: 1.4em; font-family: 'Arimo', serif; font-weight: 200; color: #004a87; line-height: 120%; padding:0px ; margin: 20px 0px 0px 0px;}
h5 {font-size: 1.2em; font-family: 'Arimo', sans-serif; font-weight: 600; color: #ffffff; line-height: 100%; padding:0px 0px 0px 0px; margin: 0px;}
h6 {font-size: 1.4em; font-family: 'Arimo', sans-serif; font-weight: 400; color: #004a87; line-height: 120%; padding: 0px 0px 0px 0px; margin: 5px 0px 5px 0px;}

p {
	/*text-align:justify;*/
	color:#333333  ;
	line-height:1.1em;
	margin:0 0 0.8em 0;
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

a {color: #333333; text-decoration: none; line-height: inherit; font-weight: bold; }
a:hover {color: #004a87; text-decoration: underline; }
a:focus {color: #004a87; outline: none; }

hr{
	border:solid #004a87 1px; height:1px;
	clear:both;
}

li {
	padding-bottom: 4px;
}

ul {
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;
	list-style-type: square
}

#djbuddy {
  position: absolute;
  top: 0px; /* 500 Pixel vom oberen Rand des Elternelements entfernt */

}

ol {
	margin-top: 0;
	margin-bottom: 10px;
	margin-left: 0.9em;
	padding-left: 0.9em;
}

.BMmain { width: 100%; }
.BMheader  {
	font-size: 16px;  color: #ffffff; text-align: left; margin: 0; font-weight: bold ; padding:8px;  background: url(/media/img26/dj_kachel_headline3.jpg) #2f5881  repeat-x;
}
.BMlink  {
	width: auto;
	vertical-align: middle;
	text-align: left;
}
.BMlink img {
	border: none;
}

.zoom-bild {
  width: 15%;
  height: auto;
  transform-origin: left center;
  transition: transform 0.4s ease; }
.zoom-bild:hover {
  transform: scale(4.2);
}

#topmenubox {position:fixed;  width: 100%; height:180px;  transition: 0.5s all; z-index:1000;  /*background:  url(/media/img26/header.jpg) no-repeat center top ; */
  background-image: url(/media/img26/header.jpg);
     background-size: cover;   /* Bild skaliert, bis es den gesamten Bereich ausfüllt */
  background-position: center top;     /* Zentriert das Bild im Browserfenster */
  background-repeat: no-repeat;    /* Verhindert das Kacheln/Wiederholen des Bildes */
   /* (Optional) Hintergrund bleibt beim Scrollen starr */
        /* Stellt sicher, dass das Element mindestens die Bildschirmhöhe nutzt */
  margin: 0;
-webkit-box-shadow: 15px 1px 15px 0px rgba(50, 50, 50, 0.90);
	         -moz-box-shadow: 15px 1px 15px 0px rgba(50, 50, 50, 0.90);
	          box-shadow:      15px 1px 15px 0px rgba(50, 50, 50, 0.90);}
			  
#topmenubox .m_inner {position:relative; max-height:180px; height:100%; z-index:101;  width: 90%; max-width: 1200px; margin: 0 auto 0 auto;  }
.logo img { max-height:95%; max-width:95%; position: absolute ; }
 #topmenubox.reduced {height:110px; transition: 0.5s all;}
.smedia  {float: right;  position: absolute; bottom: 5px; right: 15px; height:40px; z-index: 2500; }
.mainmenue  {float: left;  position: absolute; bottom: 0px; left: 0px; height:40px;}
.spacer {padding-top: 180px;  width:100%; }

#menuswitch {display:none; }
#leftbox {display:none; }
#rmenu {display:none; }

.imageborder{background:  url(/media/img26/pola.jpg) no-repeat center top; margin:5px; padding:15px; height:185px; width: 170px; text-align: center; max-width: 170px; width: 100%;}
.wrapper { width: 100%; min-height:900%;}


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

#icontainer { position:relative; top: 0px; left: 0px; max-width:100%; height:auto ! important; z-index:0; display: flex; justify-content: flex-end; }
#icontainer img {  max-width:100%; height:auto ! important;}
.imgbuddy img{ width: 300px; max-width: 90%;  float: right; margin: 0px 0px 0px 0px;  z-index:991;}
.infobox {  position:absolute; bottom: 40%; left: 5%; width:90%;  z-index: 997; }
.infotitel {  z-index: 998;  position:relative;  height:100%; z-index:101;  width: 90%; max-width: 1200px; margin: 0 auto 0 auto; }

.welcom  { color: #e75113; font-size: clamp(1rem, 2.5vw + 1rem, 32rem); font-family: 'TiltWarp', sans-serif; font-weight: 400; line-height:1.5em;   font-style: italic; -webkit-text-stroke: 2px #ffffff; paint-order: stroke fill;
 text-shadow: 
    -0px -0px 0 rgba(50, 50, 50, 0.3),  
     0px -0px 0 rgba(50, 50, 50, 0.3),
    5px  5px 0 rgba(50, 50, 50, 0.3),  
     5px  5px 0 rgba(50, 50, 50, 0.3); }
.welcomtext { color: #ffffff; font-size: clamp(1rem, 1vw + 1rem, 1.5rem); font-family: 'Arimo', sans-serif; font-weight: 800;  line-height:1.5em;
 text-shadow: 
    -0px -0px 0 rgba(50, 50, 50, 0.3),  
     0px -0px 0 rgba(50, 50, 50, 0.3),
    5px  5px 0 rgba(50, 50, 50, 0.3),  
     5px  5px 0 rgba(50, 50, 50, 0.3);  }
.welcomtext2 {  display: flex;
  align-items: center; color: #333333; font-size: clamp(1rem, 1vw + 1rem, 1.5rem); font-family: 'Arimo', sans-serif; font-weight: 800;  line-height:1.5em;  }

.terminbut { 
position:absolute;
background:#004a87;  
color: #ffffff; 
font-size: clamp(1rem, 1vw + 1rem, 1.0rem); 
font-family: 'Arimo', sans-serif; 
font-weight: 600;  
line-height:1.5em; 
padding: 5px;

margin: 10px 0px 10px 0px;
 width: max-content; 
-webkit-box-shadow: 5px 1px 4px 0px rgba(50, 50, 50, 0.3);
	         -moz-box-shadow: 5px 1px 4px 0px rgba(50, 50, 50, 0.3);
	          box-shadow:      5px 1px 4px 0px rgba(50, 50, 50, 0.3);
			  border-radius: 5px; }
.terminbut  a:link, .terminbut a:visited, .terminbut a:active  { color: #ffffff; }
.terminbut a:hover  { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow:none;
			 }
.float {
animation: float-right 1s ease-out;
-webkit-animation: float-v 1s ease-out;
-moz-animation: float-right 1s ease-out;}

@keyframes float-left {0% { opacity: 0; transform: translateX(50%); }100% { opacity: 1; transform: translateX(0%); }}
@-webkit-keyframes float-left {0% { opacity: 0; -webkit-transform: translateX(50%); }100% { opacity: 1; -webkit-transform: translateX(0%); }}
@-moz-keyframes float-left {0% { opacity: 0; -moz-transform: translateX(50%); } 100% { opacity: 1; -moz-transform: translateX(0%); }}
@keyframes float-right {0% { opacity: 0; transform: translateX(-50%); }100% { opacity: 1; transform: translateX(0%); }}
@-webkit-keyframes float-right {0% { opacity: 0; -webkit-transform: translateX(-50%); }100% { opacity: 1; -webkit-transform: translateX(0%); }}
@-moz-keyframes float-right {0% { opacity: 0; -moz-transform: translateX(-50%); } 100% { opacity: 1; -moz-transform: translateX(0%); }}

.vcontain {   
	 display: flex;
  justify-content: center; /* Horizontal */
overflow: hidden; 
width: 100%;
  max-width: 1920px;

}
video {  width: 100%;
  max-width: 3840px; /* Die maximale Größe des Containers */

  margin: 0 auto; /* Zentriert den Container */
  overflow: hidden; /* Schneidet überstehende Teile bei Größenänderung ab */  
  }
#bgVideo {
  width: 100%;
  height: 100%;
   max-height: 500px;
  object-fit: cover;

}



.contentbox {position:relative;  width:100%;     background: #ffffff;  }
.container {  width: 90%; max-width: 1200px; margin: 50px auto 0px auto;   min-height:300px; padding: 0px ;  z-index:999; }
.container img { max-width:100%; height:auto ! important; z-index:990;}
.clearcontent {height:20px; clear:both; }


.footer {margin: 0 auto 0px auto; width: 100%;  padding: 0px; min-height:120px;  background: #eeeeee;}
.containerf { width: 90%; max-width: 1200px;  margin: 10px auto 0px auto; 
    display: flex;
    gap: 20px;     
}
.impressb{  flex: 1 1 30%;  min-width: 250px; margin:20px 0px 20px 0px;  }


.impressb a:link, .impressb a:visited, .impressb a:active  {font-weight: 300;  color: #004a87;  display: block;}
.impressb a:hover  {color: #004a87;}
.imanhead{    font-weight: 600; margin: 0px; }
.imantext{     font-weight: 300;  color: #004a87;   padding-bottom:3px;}

.adressef {  display: flex;
  align-items: center;  padding-right: 5px; }



form {margin: 0;}
ul li {padding-bottom: 0px; list-style-type:square;} 
ul {line-height: 150%; margin-top: 0; margin-bottom: 10px;	margin-left: 0.7em;	padding-left: 0.7em;}
ol {line-height: 150%;	margin-top: 0;	margin-bottom: 10px;	margin-left: 0.9em;	padding-left: 0.9em;}


/*Show and Hide Responsive*/
	

	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	@media screen and (max-width: 900px) {



.lboxl {width: 170px;}
.lboxm {width: 170px;}
.lboxr {width: 170px;}
.lboxa {width: 170px;}
}

	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media screen and (max-width: 900px) {
.infobox {  position:absolute; bottom: 10%; width:90%;  z-index: 997;  }
.bannern { display:none;}
.container {  width:90%; margin:  50px auto;  min-height:500px; padding: 20px ; }
.topmenubar {display:none  ;  }
.mainmenue  {display:none  ;}
.spacer {display:none  ; }

.innerwrap { border:0px solid #ff0000; max-width: 70px; width:100%; }

#topmenubox {position:relative;  width: 100%; height:160px;  transition: 0.5s all; z-index:1000; background:  -webkit-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.65); 
	-moz-box-shadow: 0px 0px 0px 0px rgba(50, 50, 50, 0.65);
	box-shadow:      0px 0px 0px 0px rgba(50, 50, 50, 0.65);}
#topmenubox .m_inner {  margin: 0 auto 0 auto;  width:100%;  }
.logo   {   position:absolute; max-width:900px;  width:95%; margin: 0 auto 0 auto; text-align: center;  z-index: 1900; }
.logo img { max-height:150px;  position: relative; margin-top: 20px; max-width:auto;   }
#menuswitch {  position: absolute; display:block;    margin:25px 0px 0px 10px; z-index: 3000; }
#menuswitch img{ }





#leftbox {position: absolute; list-style: none; text-align: left; margin:100px 0px 0px 0px;  z-index: 2000; background:  url(/media/img26/k80.png) #ffffff; max-width:75%; width:auto ! important;
          -moz-box-shadow: 2px 4px 5px #333333;
          -webkit-box-shadow: 2px 4px 5px #333333;
           box-shadow: 2px 4px 5px #333333;
          -moz-border-radius: 5px;
          -webkit-border-radius: 5px;
          -khtml-border-radius: 5px;
         border-radius: 5px; 
		 animation: float-right 1s ease-out;
		-webkit-animation: float-right 1s ease-out;
		 -moz-animation: float-right 1s ease-out;

 }


#rmenu { display:block; min-height:200px; transition:0.5s all;  }
#rmenu a {list-style-type: none; color: #e84e0f;}
#rmenu a:hover  {list-style-type: none; color: #ffffff; background:#004a87;}
#rmenu ul  {list-style-type: none; margin: 0px 5px 0px -10px;	}
#rmenu li a {list-style-type: none;color: #666666; font-size:1.4em; display: block; padding: 10px; }
#rmenu li li a {list-style-type: none; color: #e84e0f;font-size:1.0em; padding: 5px 5px 5px 15px;	}
#rmenu li li li a {list-style-type: none; color: #e84e0f; font-size:1.0em; padding: 5px;	}
.topwrapper{ padding:0px 0% 0px 0%;  margin: 0px auto;}
.contentbox img {max-width:100%; height:auto ! important;}

.infobox {  position:absolute; top: 20px; width:90%;  z-index: 997; }

}
@media screen and (max-width: 768px) {
#bgVideo {
  width: 100%;
  height: 100%;
   min-height: 250px;
  object-fit: cover;

}
.containerf { flex-direction: column; align-items: flex-start;}
.impressb{  font-size: clamp(1rem, 0.9vw + 1rem,2rem); width: 100%;   line-height: 1.5; }
.imgbuddy img{ max-width: 100%px; width:300;  float: none;  margin: 0px 0px 0px 0px;  z-index:991;}
    .mod_bookmark_list li, .bookmark-list li {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {


.container {  width:100%; margin:  50px auto;  min-height:500px; padding: 5px ; border: 0px solid #eeeeee;}

}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media print {
	.container{width:100%;}
	#mobilemenu, .topmenubar, #mobilemenu {display: none ! important; }
	.footer{display: none; }
	html, body, .container, .header,  .mainbox, .contentbox, .contentbox .innenb {background-image: none ! important;}
	body, html {background-color: #fff ! important;}
	.contentbox .innenb, .rightbox .innenb, .footer .innenb, .infobox h3 {color: #000! important;}
	
	h1, h2 {text-shadow: none ! important; }
}