body {
	margin: 10px 10px 10px 10px;
	font-family:  Verdana, Arial, Helvetica;
	font-size: 80%;
	color: #3F3F3F;
	text-align: left;
	line-height:150%;
	background:#808080;
	/*background:#83d0f5 url("../templates/img/bgverlauf.gif") repeat-x;*/
	background-attachment:fixed;
}

html, body {height: 100%;}
body {margin: 0; padding: 0;}

.main {min-height: 100%; position: relative; }
* html .main {height: 100%;}	
#fragmentScollbarGhost {position:absolute;bottom:-0.1px;}	
	
.main 		{width:1000px;margin:auto;background: #fff;border: solid 1px #888899;}	
.content 	{padding:10px 20px 10px 20px;/*background: url(../img/homebg.jpg) top left  no-repeat;min-height:542px;*/}
.contentlog 	{padding:10px 20px 10px 20px;background: url(../img/homebg.jpg) top left  no-repeat;min-height:542px;}
.footer 		{width:900px;position: absolute;bottom: 0; text-align:center;color:#656766;}
.contentk 	{padding:0px 20px 0px 20px;}	
/*TD:hover {background-color: moccasin;}*/

a img  {border:none;} /*border: solid 1px #888899;*/
a {color:#656766; font-weight:bold;}/*text-decoration:none;*/
a:hover {color:#000;}

h1, h2, h3, h4 {line-height:50%;}
label {cursor: pointer; }	/*cursor: hand;*/
	
	
.button {font-size: 13px; margin-top: 4px; background-color:lime;}

.zeit	{background-color:transparent; border: 0px; color:#555; font-size: 18px;color:#76AC19;}	

.sticky {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  height: 70px;
  width: 100%;
  background: #FFF;
}	

input, select, textarea {
  border-radius: 4px 4px 4px 4px;
  font-size: 14px;
  padding: 5px;
  border: 1px solid #ABADB3;
}
/*
.content input {width:200px;}
.content select {width:204px;}
*/

.content .inp, .contentk .inp {width:200px;background:#fff;}
.content .dr, .contentk .dr {width:203px;background:#fff;border: 1px solid #ABADB3;}
.content .dr_, .contentk .dr_ {width:150px;background:#fff;border: 1px solid #ABADB3;}
.content .dre, .contentk .dre {width:187px;background:#fff;border: 1px solid #ABADB3;}
.drmini_ver {width:30px;background:#fff;border: 1px solid #ABADB3;}
.dr_ver {width:140px;background:#fff;border: 1px solid #ABADB3;}

@media print {
   p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
   } 
    .scr { display: none;}
}

.scr   {margin-left:350px;} 
   



.autocomplete ul, ul li {   
	list-style:none;
	margin:0;
	padding:0;
}   
   
.autocomplete{
	color:#656766;
	background-color: #FFF;
} /*border: 1px solid #000; background-color: #FFF;*/

.autocomplete li:hover{
  color: #000;
  cursor: pointer;
} /* cursor: hand;*/

#accordion 	{width:355px;padding:0;margin:0;}
#accordion  div {overflow:hidden;}	


.kategorie {
	height:542px;
	padding: 135px 20px 0 115px;
	/*padding: 127px 20px 0 95px;*/
	font-size: 75%;
	background: url(../img/homebg.jpg) top left  no-repeat;
}
	
.kategorie a {
	line-height:110%;
	float:left;
	margin:3px 35px 17px 0;
	padding:  0 0 52px 0;
	text-align:center;
	/*width:93px;
	height:15px;*/	
	width:55px;
	height:15px;

}
.kategorie a:hover { color:#e6007c }


.kategorie a {background: url(../img/pr_button.png) bottom left  no-repeat;}
.kategorie a:hover  {background: url(../img/pr_button.png) bottom right no-repeat;}	

.kategorie a.visitenkarten {background: url(../img/visitenkarten.png) bottom  left no-repeat;}
.kategorie a.visitenkarten:hover  {background: url(../img/visitenkarten.png) bottom  right  no-repeat;}	


.kategorie a.broschueredrahtgeheftet {background: url(../img/broschueredrahtgeheftet.png) bottom  left no-repeat;}
.kategorie a.broschueredrahtgeheftet:hover  {background: url(../img/broschueredrahtgeheftet.png) bottom  right  no-repeat;}	

.kategorie a.prospektblaetter {background: url(../img/prospektblaetter.png) bottom left  no-repeat;}
.kategorie a.prospektblaetter:hover  {background: url(../img/prospektblaetter.png) bottom  right  no-repeat;}	

.kategorie .unten{
  clear: both;     /* <- zwingt unter die floats */
  padding-top: 10px; /* optional Abstand */
}

/*
.kategorie a.sonstige {background: url(../img/sonstige.jpg) top  right no-repeat;}
.kategorie a.sonstige:hover  {background: url(../img/sonstige.jpg) top  left no-repeat;}	

.kategorie a.andruck {background: url(../img/andruck.jpg) top  right no-repeat;}
.kategorie a.andruck:hover  {background: url(../img/andruck.jpg) top  left no-repeat;}	

.kategorie a.postkarten {background: url(../img/postkarten.jpg) top  right no-repeat;}
.kategorie a.postkarten:hover  {background: url(../img/postkarten.jpg) top  left no-repeat;}	

.kategorie a.briefbogen {background: url(../img/briefbogen.jpg) top  right no-repeat;}
.kategorie a.briefbogen:hover  {background: url(../img/briefbogen.jpg) top  left no-repeat;}	

.kategorie a.plakate {background: url(../img/plakate.jpg) top  right no-repeat;}
.kategorie a.plakate:hover  {background: url(../img/plakate.jpg) top  left no-repeat;}	

.kategorie a.prospektblaetter {background: url(../img/prospektblaetter.jpg) top  right no-repeat;}
.kategorie a.prospektblaetter:hover  {background: url(../img/prospektblaetter.jpg) top  left no-repeat;}	

*/

/* =========================
   NAVIGATION (modernisiert, ohne Layout-Bruch)
   - Top-Level bleibt wie vorher horizontal (float)
   - 1. Ebene dropdown nach unten
   - 2. Ebene dropdown nach links
   - Hover-Stabilisierung integriert
   ========================= */

#menu  {
	/*background: #ccc url(./img/navi.png) 100% 0 repeat-x;*/
    height: 26px;
    width: 1000px;
    text-align: left;
    border-top: 2px solid #888;
    border-bottom: 2px solid #888;
    background: #fff;

    position: sticky;
    top: 0;
    z-index: 20000;
}

/* Top-Level UL: wie gehabt */
#menu ul, #menu_support ul { 
  margin:0;
  padding: 0 0 0 0px;
  list-style: none;
  z-index: 100;
  display: inline;
} 

body:nth-of-type(1) #menu ul{display: block;}
body:nth-of-type(1) #menu_support ul{display: block;}

/* Top-Level LI: float bleibt -> garantiert horizontal */
#menu li, #menu_support li {
  float: left;
  margin: 0;
  padding: 0;
  height: 1%;
  position: relative; /* Bezugspunkt für absolute Submenüs */
}

/* 1. Ebene Dropdown: nach unten unter den Menüpunkt */
#menu ul ul, #menu_support ul ul {
  display: none !important;
  float: none !important;
  position: absolute !important;

  /* nach unten (wie ursprünglich gedacht) */
  top: 100%;
  left: 0;
  right: auto;

  /* Modernisierung: Dropdown-Box-Look */
  min-width: 200px;
  border: 1px solid #bfc7cf;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  z-index: 10001;
}

/* 2. Ebene Dropdown (ul ul ul): nach links neben das Parent-LI */
#menu ul ul ul, #menu_support ul ul ul {
  top: 0;
  right: 100%;
  left: auto;

  /* Hover-Stabilisierung: minimal überlappen -> kein 1px Spalt */
  margin-right: -1px;
}

/* Submenu-LIs */
#menu ul ul li, #menu_support ul ul li {
  float: none !important;
  background:#CCFFFF !important;
  white-space: nowrap;
}

/* Submenu-Links etwas moderner, ohne deine Maße zu zerstören */
#menu ul ul a, #menu_support ul ul a {
  line-height: 26px;
  padding: 0px 14px; /* etwas kompakter im Dropdown */
}

/* Anzeigen beim Hover (wie gehabt) */
#menu ul li:hover > ul, #menu_support ul li:hover > ul  {
  display: block !important;
  float: none !important;
}

/* ---- Hover-Stabilisierung für 2. Ebene ---- */
/* sorgt dafür, dass beim "seitlich rüberfahren" das Menü nicht zuklappt */
#menu ul ul li,
#menu_support ul ul li {
  position: relative;
}
#menu ul ul li:hover > ul,
#menu_support ul ul li:hover > ul {
  display: block !important;
}

/* Top-Level Links wie gehabt + kleine Modernisierung (Transition) */
#menu a {
  /*background: #ccc url(./img/navi.png) top left repeat-x;*/
  color: #000;
  display: block;
  padding: 0px 18px ; 
  margin: 0;
  text-decoration: none;
  font-size: 95%;
  font-weight: normal;
  line-height: 26px;
  /*border-right: 1px solid #888;*/

  transition: color 120ms linear, background-color 120ms linear;
}  

#menu_support a {
  /*background: #ccc url(./img/navi.png) top left repeat-x;*/
  color: #000;
  display: block;
  padding: 0px 18px; 
  margin: 0;
  text-decoration: none;
  font-size: 95%;
  font-weight: normal;
  line-height: 26px;
  /*border-right: 1px solid #888;*/

  transition: color 120ms linear, background-color 120ms linear;
}  

/* dezenter Hover-Hintergrund (nur optisch, keine Layoutänderung) */
#menu a:hover, #menu_support a:hover {
  background: rgba(0,0,0,0.03);
}

#menu  a:active, #menu  a:hover , #menu .act, #menu_support  a:active, #menu_support  a:hover , #menu_support .act{	
  /*background: #ccc url(./img/navi.png) bottom left repeat-x;*/
  color: #058ac3;
}	

/* =========================
   Ende Navigation
   ========================= */

.fixed-navi {
	height: 26px;
	width:1000px;
	text-align:left;
	border-top: 2px solid #888;
	border-bottom: 2px solid #888;
  top:0px;
  position:fixed !important;
  position:absolute;
  background: #FFFFFF
}
* html .fixed-navi {
  top:expression(documentElement.scrollTop);
}

.versand_status {
	color:#000;
	background: #fff;
	border: solid 1px #888899;
	padding: 0 1px;
}	

.versand_status1 {
	color:#000;
	background: #0f0;
	border: solid 1px #888899;
	padding: 0 1px;
}

.styled-select select {
   background: transparent;
   border: none;
   font-size: 14px;
   height: 29px;
   padding: 5px; /* If you add too much padding here, the options won't show in IE */
   width: 268px;
}
.styled-select {
   background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
   height: 29px;
   overflow: hidden;
   width: 240px;
}
.slate   { background-color: #ddd; }
.green   { background-color: #779126; }
.blue    { background-color: #3b8ec2; }
.yellow  { background-color: #eec111; }
.black   { background-color: #000; }
/* -------------------- Colors: Text */
.slate select   { color: #000; }
.green select   { color: #fff; }
.blue select    { color: #fff; }
.yellow select  { color: #000; }
.black select   { color: #fff; }

.semi-square {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}
	
#info-box {
	float: left;
  width: 240px;
  height: 240px;
	margin:133px 20px 10px 20px;
  background: url(/kal/templates/img/Print.de-Titelbild-.jpg) top left  no-repeat;
  /*min-height:542px;*/
}

#invisible {
    display:block;
    height:240px;
    text-indent:-9999px;
    width:240px;
}

.box1 {
     float: left;
     width: 15%;
     margin-right: 2%;
     padding: 2px;
     /*background: #eee; */
     -moz-box-sizing:border-box;
}
.box2 {
     float: left;
     width: 80%;
     margin-right: 2%;
     padding:  2px;
     /*background: #eee; */
     -moz-box-sizing:border-box;
}

.button2 {
  background-image: url(../kal/img/save.jpg); /* Change url to wanted image */
  /*background-size: cover; */
  border: none;
  width: 27px;
  height: 27px;
  cursor: pointer;
  color: transparent;
  margin-top: 0px;
}



/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: visible;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 41.5px;
  height: 22px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 1px;
  bottom: 1.15px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

.rechtsklick-editierbar{
    border:1px solid #28a745 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rechtsklick-editierbar:hover{
    border-color:#1e7e34 !important;
    box-shadow:0 0 3px rgba(40,167,69,0.6);
}