/*----------------------------------------------*/ 
/*	ZUM TESTEN 
	20-speichenrechner.html

1): .jzmel-overlay2, .jzmel-wrap2, section#manage {visibility: hidden}; auskommentieren

2): spr.jz.10.speichenrechner.js 
	SECURE 2 + SECURE 3 
	auskommentieren

/*----------------------------------------------*/






/*-----------------------------*/ 
/*	JAN
/*-----------------------------*/

.bxh {
background-color: #d8c52d;
color: #181818;
padding: 10px;
position: fixed;
right: 0;
bottom: 0;
right: 0;
/*left: 0;
bottom: 55px;*/
width: 180px;
z-index: 5000;
opacity:1;
font-size: 1em;
text-align: left;
font-size: 16px;
/*display: none;*/
}







/*----------------*/ 
/*	GLOBAL 
/*----------------*/

html {
/*font-size: 100%;*/
/*-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;*/
/*height: 100%;*/
/*overflow-y: scroll;*/
}

body {
/*height: 100%;*/
font: 400 85%/1.4 'Ubuntu', sans-serif;
/*color: rgba(69, 71, 70, 1);
background-color: rgb(222, 222, 222);*/
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:100%;
}

body#speichenrechner_solo {
background-color: #c7d0d6;
}

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




/*--------------------------*/ 
/*	3 OBJEKTE OBEN
/*--------------------------*/

/*.jzmel-overlay2,
.jzmel-wrap2,
section#manage {
visibility: hidden;
}*/


/*--------------------------*/ 
/*	RAHMEN
/*--------------------------*/

.jzmel-overlay2 { 
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2005;
overflow: hidden;
position: fixed;
background-color: rgb(24, 31, 36);
}

.jzmel-wrap2 {
position:fixed;
left:50%;
top:50%;
transform: translate(-50%, -50%) ;
z-index: 2006;
overflow: hidden;
}


.jzmel-content2 {}
.jzmel-popup2 {}







/*--------------------------------------------*/ 
/*	MANAGE 
/*--------------------------------------------*/

section#manage {
position:fixed;
right:20px;
top:20px;
z-index: 2007;
}

@media only screen and (max-width: 540px) {
	section#manage {
	right:0;
	top:0;
	}
}




/*-----------------------------*/ 
/*	BUTTON SHOW SPR ANFANG
/*-----------------------------*/

button#showSPR {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*visibility: hidden;*/

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border-width: 0;
border-style: none;
border: none;
cursor: pointer;
text-align: center;
font: 14px 'Ubuntu', sans-serif;
margin: 0;
color: #87a2b8;
background: -webkit-linear-gradient(top, #354859 0%, #1b2f42 100%) #344657;
background: -moz-linear-gradient(top, #354859 0%, #1b2f42 100%) #344657;
background: -ms-linear-gradient(top, #354859 0%, #1b2f42 100%) #344657;
background: linear-gradient(to bottom, #354859 0%, #1b2f42 100%) #344657;
border-top: 1px solid #566574;
border-right: 1px solid #041627;
border-left: 1px solid #041627;
border-bottom: 1px solid #041627;
text-shadow: 0 -1px 0 #000000;
-moz-box-shadow: 0 1px 0 #041627;
box-shadow: 0 1px 0 #041627;
padding: 20px 30px;
}

button#showSPR:hover {
border-top: 1px solid #6b7f8f;
border-left: 1px solid #071e33;
border-bottom: 1px solid #1c3346;
background-image: -webkit-linear-gradient(top, #4f6779 0%, #385166 100%);
background-image: -moz-linear-gradient(top, #4f6779 0%, #385166 100%);
background-image: -ms-linear-gradient(top, #4f6779 0%, #385166 100%);
background-image: linear-gradient(to bottom, #4f6779 0%, #385166 100%);
color: #dae5e2;
}




/*-------------------*/ 
/*	BUTTON CLOSE 
/*-------------------*/

button#closeSPR {
float: right;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding: 0;
text-align: center;
border-width: 0;
border-style: none;
border: none;
cursor: pointer;
font: 11px 'Ubuntu', sans-serif;

color: #87a2b8;

background: -webkit-linear-gradient(top, #354859 0%, #1b2f42 100%) #344657;
background: -moz-linear-gradient(top, #354859 0%, #1b2f42 100%) #344657;
background: -ms-linear-gradient(top, #354859 0%, #1b2f42 100%) #344657;
background: linear-gradient(to bottom, #354859 0%, #1b2f42 100%) #344657;

background: -webkit-linear-gradient(top, #3f4e5b 1.2%, #273039 100%);
background: -moz-linear-gradient(top, #3f4e5b 1.2%, #273039 100%);
background: -ms-linear-gradient(top, #3f4e5b 1.2%, #273039 100%);
background: linear-gradient(to bottom, #3f4e5b 1.2%, #273039 100%);


/*border-top: 1px solid #566574;*/
border-right: 1px solid #041627;
border-left: 0px solid #041627;
border-bottom: 1px solid #041627;
/*text-shadow: 0 -1px 0 #000000;
-moz-box-shadow: 0 1px 0 #041627;
box-shadow: 0 1px 0 #041627;*/
margin: 0;
height: 40px;
width: 70px;
}

/*button#closeSPR:before { 
content: '\f405';
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'Genericons';
vertical-align: top;
color: #87a2b8;
text-indent: 0 !important;
/*padding: 9px 30px 9px;*!/
}*/

button#closeSPR:before {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font: normal normal 15px/15px 'iconmoon_spr'!important;
content: "\e903";
color: #87a2b8;
top: 0;
}



button#closeSPR:hover {
/*border-top: 1px solid #6b7f8f;*/
border-bottom: 1px solid #1c3346;
border-right: 1px solid #1c3346;
background-image: -webkit-linear-gradient(top, #4f6779 0%, #385166 100%);
background-image: -moz-linear-gradient(top, #4f6779 0%, #385166 100%);
background-image: -ms-linear-gradient(top, #4f6779 0%, #385166 100%);
background-image: linear-gradient(to bottom, #4f6779 0%, #385166 100%);
color: #dae5e2;
}

button#closeSPR:hover:before { 
color: #dae5e2;
}



/*---------------------------------------*/ 
/*	BUTTONS CALIB 
/*---------------------------------------*/

#console_kalib {
float: right;
/*background-color: #d017c2;*/
/*height: 40px;*/
}

@media only screen and (max-width: 1500px) {
	
	#console_kalib {
	display: none;
	}
	
	button#closeSPR {
	border-radius: 20px;
	}
	
}

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

	button#closeSPR {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	height: 45px;
	width: 60px;
	}
	
}







.bluespokes button.calibration {
border-width: 0;
border-style: none;
border: none;
cursor: pointer;
text-align: center;
font: 11px 'Ubuntu', sans-serif;
margin: 0;
/*line-height: 33px;*/	
padding-right: 0;
padding-left: 0;
width: 136px;
color: #87a2b8;
background: -webkit-linear-gradient(top, #354859 0%, #1b2f42 100%) #344657;
background: -moz-linear-gradient(top, #354859 0%, #1b2f42 100%) #344657;
background: -ms-linear-gradient(top, #354859 0%, #1b2f42 100%) #344657;
background: linear-gradient(to bottom, #354859 0%, #1b2f42 100%) #344657;

background: -webkit-linear-gradient(top, #3f4e5b 1.2%, #273039 100%);
background: -moz-linear-gradient(top, #3f4e5b 1.2%, #273039 100%);
background: -ms-linear-gradient(top, #3f4e5b 1.2%, #273039 100%);
background: linear-gradient(to bottom, #3f4e5b 1.2%, #273039 100%);


/*border-top: 1px solid #566574;*/
border-right: 1px solid #041627;
border-left: 1px solid #041627;
border-bottom: 1px solid #041627;
float: left;
/*text-shadow: 0 -1px 0 #000000;
-moz-box-shadow: 0 1px 0 #041627;
box-shadow: 0 1px 0 #041627;*/
height: 40px;
}

.bluespokes button.calibration#kalibrieren {
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

.bluespokes button.calibration.rund {
width: 50px;
border-right: none;
visibility: hidden;
}

.bluespokes button.calibration.rund#calib_minus {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}

.bluespokes button.calibration.rund:before {
position: relative;
font: normal normal 15px/15px 'iconmoon_spr'!important;
content: "\e905";
color: #87a2b8;
top: 1px;
left: 2px;
}

.bluespokes button.calibration.rund#calib_plus:before {
content: "\e904";
}


.bluespokes button.calibration.rund#calib_minus:hover:before,
.bluespokes button.calibration.rund#calib_plus:hover:before {
color: #dae5e2;
}

.bluespokes button.calibration:hover {
border-left: 1px solid #071e33;
border-bottom: 1px solid #1c3346;
background-image: -webkit-linear-gradient(top, #4f6779 0%, #385166 100%);
background-image: -moz-linear-gradient(top, #4f6779 0%, #385166 100%);
background-image: -ms-linear-gradient(top, #4f6779 0%, #385166 100%);
background-image: linear-gradient(to bottom, #4f6779 0%, #385166 100%);
color: #dae5e2;
}






/*--------------------------*/ 
/*	CALIB
/*--------------------------*/

.calib {
/*width: 300px;*/
/*width: 1300px;
height: 500px;*/
/*overflow: hidden;*/
/*background-color: rgba(98, 17, 166, 0.64);*/
/*margin-right: auto;
margin-left: auto;*/
}

@media only screen and (max-width: 1500px) {
	
	.jzmel-wrap2 .calib {
	display: none;
	}
	
}



/*
1 mm = 3.779528 px
325 mm  =  1228.346457 pixel
1 px = 0.264583 mm
*/

/* 
viewbox > calib : svg kleiner
viewbox < calib : svg größer
*/

/*

1,02915951972556

360
349,8000000000006
1,02915951972556

80
77,73333333333346
1,02915951972556

100
97,16666666666643
1,02915951972556

*/


svg#spokesbox {
background-color: rgba(18, 39, 138, 0);
display: block;
}

svg#spokesbox2 {
background-color: rgba(18, 39, 138, 1);
display: block;
}

svg {
display: block;
}








/*--------------------------*/ 
/*	MODAL
/*--------------------------*/

#lineal_blau {
visibility: hidden;		
}

.l280 {
background-color: rgb(29, 168, 229);
fill: none;
stroke: rgba(29, 168, 229, 1);
stroke-width: 0.23;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-dasharray: 0.5, 0.8;
}




/* line */
.li1 {
background-color: rgb(79, 101, 120);
fill: none;
stroke: rgba(79, 101, 120, 1);
stroke-width: 0.2;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-miterlimit: 4;
stroke-opacity: 1;
stroke-dasharray: 0.5, 0.8;
}


/* rect hell */
.r1 {
background-color: rgb(55, 65, 74);
fill: rgba(55, 65, 74,0.5);			
}

/* rect dunkel */
.r2 {
background-color: rgb(24, 31, 36);
fill: rgb(24, 31, 36);			
}

#lgr6 {
background-color: rgba(8, 32, 59, 1);
color: #102940;
}




/*--------------------------*/ 
/*	SPEICHE
/*--------------------------*/

.dontshow {
opacity: 0;	
}


/* stroke 
#TEIL_1
#TEIL_3
#TEIL_5
*/

#master {
opacity: 0;
stroke: #91d305;
}

/* gewinde */

.rectpattern {
fill:  #87c20a;
}

.lpattern {
stroke-width: 1px;
stroke: rgb(91, 119, 33);
}


/* füllung */

.speichenfillx {
background-color: #a214ee;
}

.speichenfill {
stroke: none;
fill: #91d305;			
}

.speichenfilltest {
stroke: none;
fill: #a214ee;			
}

/* einzel */

#TEIL_0 {}
#TEIL_1 {}
#TEIL_5 {}

#TEIL_0 {
/*stroke: #d44b0b;
stroke-opacity: 0.5;*/
}


#TEIL_2,
#TEIL_6 {
/*fill:  #87c20a;*/
/*fill:  #d44b0b;*/
}

/*#TEIL_4 {
stroke: #87c20a;
}*/

/*#TEIL_7 {
stroke: #c23fc0;
}

#TEIL_8 {
fill:  #a214ee;
}*/

#linse {
stroke: none;
}



/*-----------------------------------------------------------------*/ 
/*	CONSOLE oben
/*-----------------------------------------------------------------*/

.console.oben {
margin-top: 0;
margin-bottom: 40px;
padding: 0;
}

/*text oben*/

.console.oben .atn {
color: rgb(131, 162, 179);
margin: 0;
padding: 0 0 15px;
font-size: 14px;
border: none;
line-height: 1.2;
font-weight: normal;
}

.console.oben .atn span {
/*color: rgba(144, 211, 5, 1)*/;
opacity: 0;
color: rgb(131, 162, 179);
}


/*darunter gross*/

.console.oben .console_flex {
display: flex;
align-items: center;
}

/*Artikelnummer*/

.console.oben p#artikelnummer {
margin: 0;
color: rgba(144, 211, 5, 1);
font-size: 22px;
padding: 10px 20px;
background-color: rgba(144, 211, 5, 0.13);
border-radius: 5px;
}

/*Warenkorb*/

.console.oben button#console_warenkorb {
border-width: 0;
border-style: none;
border: none;
position: relative;
background-color: rgba(144, 211, 5, 0.13);
margin: 0 0 0 5px;
color: rgba(144, 211, 5, 1);
font-size: 20px;
border-radius: 5px;
width: 65px;
height: 50px;
cursor: pointer;
}

.console.oben button#console_warenkorb:before {
font: normal normal 35px/50px 'iconmoon_spr'!important;
content: "\e900";
color: rgba(144, 211, 5, 1);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

@media only screen and (max-width: 540px) {
	
	.console.oben {
	margin-bottom: 25px;
	}
	
	.console.oben .atn {
	padding: 0 0 9px;
	font-size: 13px;
	}
	
	.console.oben .console_flex {
	display: block;
/*	flex-direction: column-reverse;
	flex-direction: column;*/
	}
	
	.console.oben p#artikelnummer {
	font-size: 18px;
	padding: 8px 0;
	text-align: center;
	}
	
	.console.oben button#console_warenkorb {
	position: relative;
	margin: 3px 0 0;
	width: 100%;
	height: 52px;
	}
	
}






/*Hovertext*/

.console.oben div#console_HoverTxt {
color: rgb(131, 162, 179);
margin: 0 0 0 18px;
opacity: 0;
}





/*-----------------------------------------------------------*/ 
/*	CONSOLE unten
/*-----------------------------------------------------------*/

.console.unten {
margin-top: 45px;
margin-bottom: 0;
background-color: rgba(39, 39, 255, 0);
padding: 0;
/*width: 1372px;*/
}


/*-----------------------------------------------------------*/ 
/*	GRID ROW NEU
/*-----------------------------------------------------------*/

.console.unten .gridrow {
display:grid;
background-color: rgba(155, 55, 202, 0);
grid-template-columns: 0.95fr 0.95fr 0.95fr 0.7fr 0.7fr 1.5fr;
gap: 20px;
}


@media only screen and (max-width: 1500px) {
	
	.console.unten {
	width: 500px;
	}
	
	.console.unten .gridrow {
	display:grid;
	background-color: rgba(201, 160, 55, 0);
	grid-template-columns: 1fr 1fr;
	gap: 0 15px;  /* row-gap column gap */
	}
	
}


@media only screen and (max-width: 540px) {
	
	.console.unten {
	width: 300px;
	margin-top: 0;
	}
	
	.console.unten .gridrow {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 0 12px;
	}
	
	.console.unten .gridrow section.x_1,
	.console.unten .gridrow section.x_3 {
	grid-column-end: span 7;
	}
	
	.console.unten .gridrow section.x_2,
	.console.unten .gridrow section.x_4 {
	grid-column-end: span 5;
	}
	
	.console.unten .gridrow section.x_5{
	grid-column-end: span 4;
	}
	
	.console.unten .gridrow section.x_6 {
	grid-column-end: span 8;
	}
	
}






/*-----------------------------------------------------------*/ 
/*	ROW ALT
/*-----------------------------------------------------------*/

/*.console .row {
display:block;
overflow:hidden;
clear:both;
width:100%;
background-color: #cb3899;
margin-left:-1%;

}*/






/*----------------*/
/*.console .cols {
float:left;
display:block;
padding-right: 1%;
padding-left: 1%;
min-height: 1px;
}

.console .one {width:8.33333333333333%;}
.console .oneh {width:12.5%;}
.console .two {width:16.66666666666666%;}
.console .twoh {width:20.83333333333334%;}
.console .three {width:25%;}

console .four{width:33.33333333333332%;}
.console .five {width:41.66666666666665%;}
.console .six {width:50%;}
.console .seven {width:58.33333333333331%;}
.console .eight {width:66.66666666666664%;}
.console .nine {width:75%;}
.console .ten {width:83.3333333333333%;}
.console .eleven {width:91.66666666666663%;}
.console .twelve {width:100%;}*/




/*--------------------------*/ 
/*	SUBTEXT
/*--------------------------*/


#subtext {
margin-top: 28px;
/*color: rgba(144, 211, 5, 1);*/
height: 36px;
}

#subtext p {
margin: 0;
padding: 6px 12px 5px;
font-size: 14px;
display: none;
margin-right: 0;
/*background-color: rgba(144, 211, 5, 0.13);*/
/*color: rgba(144, 211, 5, 1);*/
background-color: rgba(160, 197, 233, 0.07);
color: rgba(126, 144, 161, 0.66);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

#subtext p#version {
color: rgb(126, 145, 161, 0.66);
display: inline-block;
background-color: rgba(160, 197, 233, 0.07);
float: right;
}


@media only screen and (max-width: 1500px) {
	#subtext {
	margin-top: 12px;
	height: 65px;
	}
	#subtext p {
	margin: 0 0 3px;
	}
}

@media only screen and (max-width: 540px) {
	#subtext {
	display: none;
	}
}






/*-------------------------*/ 
/*	????
/*-------------------------*/

img.mm_hor2 {
max-width:none;
}