* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; }

:root {
    --anim-speed: 0.6; /* 1.0 ist normal, 2.0 ist doppelt so langsam */
}

body, html {
	background-color: #444;
	margin: 0;
	padding: 0;
	min-height:101%;
	color:{var(--color1);}
	
}


.menuwrapper {
	width:330px;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 9000;
	height:100vh;
	background-image: url(img/mbg.png);
	background-repeat: repeat-y;
	XXbackground-attachment: fixed;
	overflow-y: hidden;
	overflow-x: auto;
}

.menubox {
	width:330px;
	position: absolute;
	left: 0px;
	top: 0px;
	
	display: grid;
	grid-template-columns: repeat(3, 110px);  
    grid-auto-rows: 110px;	
	gap: 0;
}


.menubox a {
	display:block; opacity: 0.6; width:110px; height:110px; overflow:hidden; text-decoration:none; color:#fff; word-break: break-all;

	transform: scale(1);
	
	/*gegen unschoene Rendering-Fehler */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform, opacity;
}

.menubox a:hover, .menubox a.menu-current {color:#fff; text-decoration:none; opacity: 1;}
.menubox a span.mtitle {display:block;  width:128px; height: 130px; margin-left:-2px; overflow:hidden; font-family: "impact", "Oswald",  sans-serif; line-height:30px;}


/* =============================================================
Menue Animation

transition opacity klemmt mit Animation */
body.animation_done .menubox a {transition: 1s opacity; } 


#menu_old {opacity:1; }
#menu_new {opacity:0; }




/* Phase 1: Verschwinden */
.exit-scale { 
    transform: scale(0) !important;
    transition: transform calc(0.6s * var(--anim-speed)) ease-in;
}

/* Phase 2: Fliegen (1.0 Sekunde für die Reise) */
.moving {
    transition: transform calc(1.0s * var(--anim-speed)) cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

/* Grundzustand für neue Items in #menu_new */
#menu_new a.entry-scale {	
    display: block;    /* Wichtig für transform! */
  
    transform: scale(0);
    /* Hier noch KEINE Transition, sonst würden sie beim 
       Laden der Seite langsam auf 0 schrumpfen */
}

/* Der Zielzustand mit der Animation */
#menu_new a.entry-scale.show { 
    transform: scale(1);
    /* Die Transition darf erst hier (oder dauerhaft) aktiv sein */
    transition: transform calc(0.8s * var(--anim-speed)) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.colnr1 {background-color: #cc9933}
.colnr2 {background-color: #6699cc}
.colnr3 {background-color: #993366}
.colnr4 {background-color: #669966}
.colnr5 {background-color: #333366}
.colnr6 {background-color: #669999}
.colnr7 {background-color: #336699}
.colnr8 {background-color: #6699cc}
.colnr9 {background-color: #666633}
.colnr10 {background-color: #996666}
.colnr11 {background-color: #cc6699}
.colnr12 {background-color: #993300}
.colnr13 {background-color: #666633}
.colnr14 {background-color: #669999}
.colnr15 {background-color: #996699}


.bgnr0 {background-image: url(img/bgtrans1.png);}
.bgnr1, .bgnr6 {background-image: url(img/bgtrans1.png);}
.bgnr2, .bgnr7 {background-image: url(img/bgtrans2.png);}
.bgnr3, .bgnr8 {background-image: url(img/bgtrans3.png);}
.bgnr4, .bgnr9 {background-image: url(img/bgtrans4.png);}
.bgnr5, .bgnr10 {background-image: url(img/bgtrans5.png);}





.dingsling  {color:#666 ! important; float:left; font-size: 11px;}


/*content*/
.clearcontent {clear:both;}

.wrapper { margin: 0 0 0 330px; position: relative;}
header {
	background-image: url(img/mbg.png);
	background-repeat: repeat-x;
	position: sticky;
	top: 0; /* Unverzichtbar! */
    z-index: 1000; /* Damit es über dem Content bleibt */
	height:110px; 
	
}
.isstartpage header {height:330px; position: relative;}

#topslider {min-height:330px; }


header .innerheader {
	max-width:1000px;
	height:100%;
	background: #999 url(img/header.jpg) no-repeat  center center ;	
	background-size: cover auto, auto; 
	padding: 0 0 0 2%;
}
.claimbox {background:rgba(0,0,0,0.2); position:absolute; overflow:hidden; padding: 3px 2%; width: 440px; height:110px; left: 0; bottom:0; XXdisplay: grid; XXplace-items: center;}

.claimbox a.logo img {max-height:60px; }
.claimbox b {display:block; font-size:18px; line-height:120%; color:#fff; font-weight:normal;}


.container { padding: 0 0 0 2%; max-width:1000px; overflow:hidden; }

.mainbox {padding: 30px 0 30px 0;}
.contentnarrow {width: 70%; float: left;}
.sidebar {width: 25%; float: right; font-size:0.95em; line-height:140%; padding:10px; margin: 30px 10px 0 0; background-color: rgba(0,0,0,0.4)}
.sidebar p {line-height:120%;}


.footerbox {}

.footerbox .center {width:80%; margin:0 auto;text-align:center; padding-bottom:30px;}
.footerbox .left {width:30px; float:left;}

/* Menü 2 (Impressum, Datenschutz) */
#nav-footer {text-align:center}
#nav-footer a {display: inline-block; padding: 1px 10px; border-left: 1px solid var(--color1); font-size: 0.85rem; text-decoration: none; opacity: 0.9;}
#nav-footer a:first-child {border-left: none;}
#nav-footer a:hover {opacity: 1; }




#go-up {position: fixed; right:20px; bottom:20px; display: grid;   place-items: center; opacity: 0; width: 30px; height: 30px; background: #444; border-radius:50%; border: 2px solid #666; transition: 1s all;}

#go-up.show {opacity: 1;  }
#go-up:hover { bottom: 25px;}
#go-up img {  width: 16px; height: auto; opacity: 0.5;}

/* Login Box */

#showlogin {display:block; float:left; position:relative;  width:30px; padding:0 6px; }
#login-box {position:absolute; width:220px; left:30px; top:-50px; padding:5px; font-size:11px; z-index:2000; background: #444; box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);}
#login-box .loginsubmit {border:0;}
#login-box .inputfield {width:80px; border: 1px solid #c9e8f9; padding:1px;}

a.template_edit_link {width:16px; height:16px; position:absolute; top:10px; right:10px; background:url(img/edit.gif) no-repeat; z-index:5000}


#nav2closer, a.toggleMenu {}
#nav2closer {position:fixed; display:none; width:100%; height:200%; z-index:8888; top: 0; left: 0; background: rgba(0,0,0,0.2); }
a.toggleMenu {position:absolute; display:none;width:40px; height:41px; z-index:9000; top:10px; right:10px;  background: url(img/menuswitch.png) no-repeat top right; transition: 0.5s right;}


/*Extra Colorpicker */
#colorpickericon {display:block; width:24px; height:24px; background: url(img/colorpicker.png) no-repeat; z-index:5000; position: absolute; top:100px; right:0; cursor:pointer;}
#colorpicker {display:none; width:90px; background: #666; position: absolute; top:100px; right:0; z-index:5000; font-size:12px;line-height:100%; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);}
.pickerfield {width:100%; height:40px; float:left;}

.pickerfield input[type="color"] {width:100%; height:20px; padding:0; border:0; cursor:pointer;}
.pickerfield input[type="text"] {width:90%; height:20px; padding:1px 3%; border: 1px solid #999;; cursor:text;}


a.colpick-button {display:block; clear:both; width:80%; margin:10px auto; padding:3px; color: #fff ! important; font-weight:bold; background: rgba(255,255,255,0.2); text-align:center; border: 1px solid #666; border-radius: 15px;  cursor:pointer;}

#colorpicker-info {display:none; position: absolute; width:160px; padding:10px; top:0; left:-180px; background: #555; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.1);}






/* Small devices (tablets, up to 980px) */
@media (max-width: 980px) {
	body, html { background-image: none; }
	.toggleMenuBlock, a.toggleMenu {display:block; } 
	a.toggleMenu {position:fixed; }
	
	
	.menuwrapper { left:-360px;	width:300px; height: 100vh; background: url(img/mbg2.png) repeat-y;  
	box-shadow: 30px 0 60px 0 rgba(0, 0, 0, 0.8); transition: all ease-out 0.5s;}	
	
	.menubox { 
	width:300px;		
	grid-template-columns: repeat(3, 100px);  
    grid-auto-rows: 100px;	
	}
	
	.menubox a {width:100px; height:100px; overflow:hidden;}
	.menubox a span.mtitle {width:110px;}
	
	#menu_old {opacity:0; }
	#menu_new {opacity:1; }
	
	.wrapper {
		margin: 0 0 0 0;
		width:100%;
		transition: all ease 1s;
		
	}
	.contentwide, .contentnarrow, .sidebar {width: 92%; float: none; margin: 10px 4% 10px 4%;}
	.container {    padding: 0 0 0 0; }	
	.menu_is_opened .menuwrapper { left:0; }
	.menu_is_opened .wrapper { margin-left: 250px; }
	.menu_is_opened a.toggleMenu {right:20px; }
	
	.menu_is_opened #nav2closer {display:block};
	
	header { background-image: url(img/mbg2.gif); width: 100%;	height:100px; }
	XXheader .innerheader { max-width: 100%;  height: 180%;  }
	.claimbox {max-width: 50%; padding-top:10px;}
	.claimbox a.logo img { max-height: 50px;}
	
	.isstartpage header {height:200px; position: relative;}
	.isstartpage a.toggleMenu {position:absolute; }
	#topslider {min-height:200px; }	

}

/* Small devices (Smartphone, up to <480px) */
@media (max-width: 479px) {	
		
	.XXmainbox {padding: 30px 5% 30px 5%;}
	
	
	#headerpic { height:100px; }
	.isstartpage #headerpic { height:200px; }
	#go-up {right: 10px;}
    

}