body {font-family:arial, sans-serif; font-size:80%; margin:0; padding:0;} /* Festlegen der Websiteweiten Schriftart */
p, div, ul, li {margin:0; padding:0}
img, a img {border:none; padding-left:8px; padding-bottom:2px;} /* Abstände von links und nach unten zum jeweiligen image */
ul li {}

/* Main */
/* #main {position:absolute; width:600px; height:580px; top:53%; left:50%; margin-left:-300px; margin-top:-300px; background:url(dateien/combionic_without_line.jpg) top left no-repeat} */
/* #schriftzug {position:absolute; top:180px; left:50px; width:700px; height:30px; font-size:110%; color:rgb(255,255,255)} */

/* Navigation - Menüsteuerung */
/* #navigation {
   position:absolute; 
   width:235px; 
   height:345px; 
   top:210px; 
   left:25px;
   font-size:110%; */
   /* border: 1px solid red; sichtbar machen der Containergröße */
     /*       } */
/*            
#navigation ul li a {color:rgb(190,190,190); text-decoration:none}
#navigation ul li a:hover {color:rgb(255,255,255); text-decoration:none}
#navigation ul li a.aktiv {color:rgb(255,255,255)} */

/* Formatierung Navigationsebene 1 */
/* ul#navigation_1 {list-style-type:none; margin-top:15px; margin-left:25px;  color:white} */
/* Formatierung Navigationsebene 2 */
/* ul#navigation_2 {list-style-type:none; margin-top:40px; margin-left:25px;  color:white; text-align:left;} */

/* Abstand zwischen den Navigationspunkten 1 und 2 */
ul#navigation_1 li, ul#navigation_2 li {margin-bottom:5px} 

/* Formatierung Navigationsebene 3 */
ul#navigation_3 {list-style-type:none; width:120px; height:30px; position:absolute; top:302px; left:-10px; } 
ul#navigation_3 li#kontakt {position:absolute; top:3px; left:33px}    /* Position von "Kontakt" */
ul#navigation_3 li#impressum {position:absolute; top:3px; left:110px} /* Position von "Impressum" */

/*Position des Textfeldes, optional Scrollbalken */
#content {position:absolute; width:360px; height:325px; top:210px; left:220px; overflow:auto;}
#content_padding {margin:0 7px 0 0; }    /* 7px Abstand zum rechten Scrollbalken */


/* Content - Inhaltsformatierung */
#content h1 {font-size:115%}
#content h2 {font-size:100%}
/* #content p {margin:10px 0 15px 0;}
#content ul {}
#content ul li {margin-left:5px; padding-left:0px; list-style-type:none;}
#content img {} */

/* Hyperlinks, Formatierung */
a.class1:link {color: black; font-size:100%;}
a.class1:visited {color: black; font-size:100%;}
a.class1:hover {color:#950000; font-size:100%;}
a.class1:active {color: black; font-size:100%;}                  

/* Hyperlink für Datenschutz (DSGVO), Formatierung */
a.dsgvo:link {text-decoration:none; padding-left: 20px; color: #950000; font-weight: bold; font-size:100%;}
a.dsgvo:visited {color: #950000; font-size:100%;}
a.dsgvo:hover {color:#191970; font-size:100%;}
a.dsgvo:active {color: black; font-size:100%;} 


input.checkboxinput { color: red; 
                      width:5px; 
                      align:left; 
                    } 


@keyframes hover-color {
  from {
    border-color: #c0c0c0; }
  to {
    border-color: green; } }    /* Checkbox deaktiviert und Hover */

.magic-radio,
.magic-checkbox {
  position: absolute;
  display: none; }

.magic-radio[disabled],
.magic-checkbox[disabled] {
  cursor: not-allowed; }

.magic-radio + label,
.magic-checkbox + label {
  position: relative;
  display: block;
  padding-left: 30px;        
  cursor: pointer;
  vertical-align: middle; }
  .magic-radio + label:hover:before,
  .magic-checkbox + label:hover:before   { padding: -9px 0px 2px 0px; color: white; background: green; content: 'ok'; font: bold; font-size: 13px;
                                                                                             
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-name: hover-color; }     
  .magic-radio + label:before,
  .magic-checkbox + label:before {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 17px;                  /* breite box*/
    display: inline-block;
    width: 25px;
    height: 24px;
    content: '';
    border: 2px solid #191970; }
  .magic-radio + label:after,
  .magic-checkbox + label:after {
    position: absolute;   
    display: none;        
    content: '\2714'; }

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {
  cursor: not-allowed;
  color: #e4e4e4; }
  .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
  .magic-checkbox[disabled] + label:hover,
  .magic-checkbox[disabled] + label:before,
  .magic-checkbox[disabled] + label:after {      
    cursor: not-allowed; }
  .magic-radio[disabled] + label:hover:before,
  .magic-checkbox[disabled] + label:hover:before {
    border: 1px solid #e4e4e4;
    animation-name: none; }
  .magic-radio[disabled] + label:before,
  .magic-checkbox[disabled] + label:before {
    border-color: #e4e4e4; }

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {  
  animation-name: none; }

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
  display: block; }

.magic-radio + label:before {
  border-radius: 50%; }

.magic-radio + label:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3e97eb; }

.magic-radio:checked + label:before {
  border: 1px solid : #990033; }

.magic-radio:checked[disabled] + label:before {
  border: 1px solid #c9e2f9; }

.magic-radio:checked[disabled] + label:after {  
  background: #c9e2f9; }

.magic-checkbox + label:before {  
  border-radius: 3px; }

/* Checkbox aktiviert per Klick */
.magic-checkbox + label:after {
  top: 0px;
  left: 0px;
  background: green;           color: white;
              width: 26px;
    height: 25px;                 top: 0;
    left: 0;
    padding-left: 4px;   
  transform: rotate(0deg);     font-size: 16px;
  border-width: 2px;
  border-style: solid;        
  border-color: #fff;          
  border-top: 0;
  border-left: 0; }

/* wenn Box aktiviert und danach hover */
.magic-checkbox:checked + label:before {
  border: #3e97eb;  
  border-bottom: 5px solid #990033; 
  background: #3333CC; }         /* Bei Klick ändert sich Farbe Hintergrund */

.magic-checkbox:checked[disabled] + label:before {
  border: #c9e2f9;              
  background: #c9e2f9; }