html,body{padding: 0;margin: 0}
body{font-family: Tahoma, Arial,sans-serif; min-width: 360px;}
a, a:visited, a:hover {text-decoration:none; color:#333}

header{width:90%; max-width:75em; margin:2em auto;}
.ui-panel{ position: relative; width:2.5em;height:2.5em; overflow:hidden;background-color: #fff; box-shadow: 0 .5em 3em 0 rgba(0,0,0,.2);border-radius:1.25em; transition:box-shadow .4s}
.ui-panel.open{box-shadow:0 1em 3em rgba(0,0,0,.1)}

.ui-panel__content{opacity: 0;transform: scale(.9);transition:all .2s}
.ui-panel__content.open{opacity: 1; transform: scale(1);}

.button--setup{position: absolute; top:0; left:50%; margin-left:-1.25em}
.ui-farben svg{max-width: 10em;}
.ui-dreieck{max-width: 3.3333em; display: block; margin-left:auto; margin-right: auto; margin-bottom: 1em;}

.l-size{width:3em;height: 3em; margin-left:auto; margin-right: auto; margin-bottom: 1em; text-align: center; box-shadow: 0 0 0 2px inset #ccc}
.l-size, .l-size span{display:block; position:relative}
.l-size span{position: absolute; top: 0; right: 0;bottom: 0;left: 0; line-height:3em}
.l-size:before,.l-size:after, .l-size span:before,.l-size span:after{position: absolute;content:"";background-color: #777}

.l-h:before,.l-h:after{top:1em;bottom:1em;width:2px}
.l-h span:before,.l-h span:after {top:50%;margin-top:-1px;height:2px;width:.75em}
.l-h:before,.l-h span:before{left:0}
.l-h:after,.l-h span:after{right:0}

.l-v:before,.l-v:after{left:1em;right:1em;height:2px}
.l-v span:before,.l-v span:after {left:50%;margin-left:-1px;height:.75em;width:2px}
.l-v:before,.l-v span:before{top:0}
.l-v:after,.l-v span:after{bottom:0}

.wait{position:absolute; top:55%; left:23%; right:23%;opacity:0}
.wait.on{opacity:1}
.wait i{position:absolute;top:0;width:.4em;height:.4em;margin-top:-.2em;margin-left:-.2em;background:#888;animation: bounce .8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;border-radius:9em}
.wait i:nth-child(1){left:0;    animation-delay:-0.4s}
.wait i:nth-child(2){left:50%;  animation-delay:-0.2s}
.wait i:nth-child(3){left:100%; animation-delay:-0.0s}

.ui-settings{}
.ui-unit{}
.ui-unit input[type="range"]{max-width:90%}

.button{position:relative}
.button-wrap{display:inline-block;margin:0 1em}
.button--rund{display:inline-block;width:2em;height:2em;border-radius:9em; background-color: #fff}
.button--large{width:2.5em;height:2.5em}

.button--reload, .button--reload svg{transition:all .5s cubic-bezier(0.215, 0.61, 0.355, 1)}

.icon{width:100%;height: 100%;margin:0}

.poster svg{width: 100%; height: 100%}
#canvas{display:none}

.m-t{margin-top: 2em}
.m-b{margin-bottom: 2em}

.mitte{margin-left: auto;margin-right: auto;}
.pad{padding:2em}
.center{text-align: center;}
.sch{box-shadow: 0 .5em 3em 0 rgba(0,0,0,.2);}
.outline{box-shadow: 0 0 0 .125em #ccc;}

.fr{float:right;}
.group:after {content:"";clear:both;display:table}
.hide{display:none}
.o0{opacity:0}

@keyframes bounce {
0% { animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) /* Aufbewegung: easeOutQuad */ }
50% { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53) /* Fallbewegung: easeInQuad */ }
}

/* tablet */
@media only screen and (min-width:  700px  ) {


}


/* laptop */
@media only screen and (min-width:  1024px  ) {


}


/* desktop */
@media only screen and (min-width:  1400px  ) {


}