<style>
.grn-On {
    display: block;
    height: 23px;
    width: 23px;
    background-color: #2d2;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    -khtml-border-radius: 14px;
    border-radius: 14px;
    margin-left: 1px;
    background-image: gradient(linear, 0% 0%, 0% 90%, from(rgba(46, 184, 0, 0.8)), to(rgba(148, 255, 112, .9)));
    border: 2px solid #ada;
    box-shadow: rgba(11, 140, 27, 0.5) 0px 5px 8px;
    }
.grn-Off {
    display: block;
    height: 28px;
    width: 28px;
    background-color: #040;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    -khtml-border-radius: 14px;
    border-radius: 14px;
    margin-left: 1px;
    -webkit-box-shadow: rgba(11, 140, 27, 0.5) 0px 5px 8px;
    -moz-box-shadow: rgba(11, 140, 27, 0.5) 0px 5px 8px;
    box-shadow: rgba(11, 140, 27, 0.5) 0px 5px 8px;
    }
.grn-glare {
      position: relative;
      top: 1;
      left: 5px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 12px;
      height: 5px;
      width: 15px;
      padding: 6px 0;
      background-color: rgba(120, 240, 120, 0.25);
      background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
    }
.red-On {
    display: block;
    height: 23px;
    width: 23px;
    background-color: #f00;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    -khtml-border-radius: 14px;
    border-radius: 14px;
    margin-left: 1px;
    background-image: gradient(linear, 0% 0%, 0% 90%, from(rgba(184, 46, 0, 0.8)), to(rgba(255, 148, 112, .9)));
    border: 2px solid #c44;
    box-shadow: rgba(140, 11, 27, 0.5) 0px 5px 8px;
    }
.red-Off {
    display: block;
    height: 28px;
    width: 28px;
    background-color: #400;
    -moz-border-radius: 14px;
    -webkit-border-radius: 14px;
    -khtml-border-radius: 14px;
    border-radius: 14px;
    margin-left: 1px;
    -webkit-box-shadow: rgba(140, 11, 27, 0.5) 0px 5px 8px;
    -moz-box-shadow: rgba(140, 11, 27, 0.5) 0px 5px 8px;
    box-shadow: rgba(140, 11, 27, 0.5) 0px 5px 8px;
    }
.red-glare {
      position: relative;
      top: 1;
      left: 5px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -khtml-border-radius: 10px;
      border-radius: 12px;
      height: 4px;
      width: 12px;
      padding: 6px 0;
      background-color: rgba(240, 200, 200, 0.25);
      background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
    }
.bt-grn {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #888888; text-shadow: 3px 3px 6px #000; font-size: 60px;
  background-color: #42BF40;
  border: 1px;
  border-radius: 45px;
  box-shadow: 2px 5px #777;
}
.bt-grn:before { content: \"\"; position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-image-source: radial-gradient(ellipse closest-side, rgba(255,250,255,0.6) 0%, rgba(0,0,0,0) 100%);
  border-image-slice: 2% fill; border-image-width: 60px 45px 30px 45px;
  border-width: 1; }
.bt-grn:after { content: attr(data-label); position: absolute;
  top: 6px; left: 18px; right: 18px; height: 36px;
  border-radius: 36px 36px 0 0 / 24px 24px 0 0;
  background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.2));
  text-align: center; color: white; text-shadow: 3px 3px 6px black; font-size: 60px; }
.bt-grn:hover { background: #30E048; }
.bt-grn:hover:before { border-image-source: radial-gradient(ellipse closest-side, rgba(255,200,255,1) 0%, rgba(0,0,0,0) 100%); }
.bt-grn:active {   transform: translateY(3px) translateX(2px); background: #55EE55; }
.bt-grn:active:before { border-image-source: radial-gradient(ellipse closest-side, rgba(255,200,255,1) 0%, rgba(0,0,0,0) 100%); }
.bt-red {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #888888; text-shadow: 3px 3px 6px #000; font-size: 60px;
  background-color: #CF3230;
  border: 1px;
  border-radius: 45px;
  box-shadow: 2px 5px #777;
}
.bt-red:before { content: \"\"; position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-image-source: radial-gradient(ellipse closest-side, rgba(0,255,255,0.6) 0%, rgba(0,0,0,0) 100%);
  border-image-slice: 2% fill; border-image-width: 60px 45px 30px 45px;
  border-width: 1; }
.bt-red:after { content: attr(data-label); position: absolute;
  top: 6px; left: 18px; right: 18px; height: 36px;
  border-radius: 36px 36px 0 0 / 24px 24px 0 0;
  background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.2));
  text-align: center; color: white; text-shadow: 3px 3px 6px black; font-size: 60px; }
.bt-red:hover { background: #F04038; }
.bt-red:hover:before { border-image-source: radial-gradient(ellipse closest-side, rgba(200,255,255,1) 0%, rgba(0,0,0,0) 100%); }
.bt-red:active {   transform: translateY(3px) translateX(2px); background: #EE5555; }
.bt-red:active:before { border-image-source: radial-gradient(ellipse closest-side, rgba(250,255,255,1) 0%, rgba(0,0,0,0) 100%); }
.bt-blu {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #888888; text-shadow: 3px 3px 6px #000; font-size: 48px;
  background-color: #4240CF;
  border: 1px;
  border-radius: 45px;
  box-shadow: 2px 5px #777;
}
.bt-blu:before { content: \"\"; position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-image-source: radial-gradient(ellipse closest-side, rgba(255,255,0,0.6) 0%, rgba(0,0,0,0) 100%);
  border-image-slice: 2% fill; border-image-width: 60px 45px 30px 45px;
  border-width: 1; }
.bt-blu:after { content: attr(data-label); position: absolute;
  top: 6px; left: 18px; right: 18px; height: 36px;
  border-radius: 36px 36px 0 0 / 24px 24px 0 0;
  background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.2));
  text-align: center; color: white; text-shadow: 3px 3px 6px black; font-size: 48px; }
.bt-blu:hover { background: #3048E8; }
.bt-blu:hover:before { border-image-source: radial-gradient(ellipse closest-side, rgba(255,255,200,1) 0%, rgba(0,0,0,0) 100%); }
.bt-blu:active {   transform: translateY(3px) translateX(2px); background: #5555EE; }
.bt-blu:active:before { border-image-source: radial-gradient(ellipse closest-side, rgba(255,255,200,1) 0%, rgba(0,0,0,0) 100%); }
ul {
   height:100%; 
   list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: gray;
  font-size: 32px; font-weight: bold; font-style: italic;
  text-decoration: underline; color: #333333;
/*  border: 1px; */
  border-radius: 15px;
}
li { float: left; }
li a { display: inline-block;
    color: #ee0;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  border: 1px;
  border-radius: 15px;
  border-left: 5px solid; /* Ein optischer Trennungsstrich */
  border-color: red;
}
li a:hover { background-color: #232; }
button { position:absolute;
  margin: 5px; width: 275px; height: 90px; border-radius: 45px;
  background: #019DFF;
  box-shadow: inset 6px 6px 12px rgba(255,255,255,0.6), inset -6px -6px 12px rgba(0,0,0,0.6);
  border: none; border-bottom: 1px solid white; }
button::-moz-focus-inner { border: 0; }
.tata {
    height: 100%;
    -webkit-background-size: 100% 21px;
    background-color: transparent;  /*#1288aa; */
/*    background-color: #1288aa;  */
    background-image: -webkit-gradient(linear, left top, right top,
    color-stop(.75, transparent),
    color-stop(.75, rgba(255,255,255,.1)) );
    -webkit-background-size: 7px;
    -webkit-text-size-adjust: none;
    border-radius: 10px;
    position:relative;
   }
.dete {
    background: linear-gradient(to top right, #bbddbb 25%, #ddeedd 100%);
    padding: 20px;
    border: 2px solid gray;
    border-radius: 15px;
    margin: 0;
    position:absolute;
}
.unuce {
    background: linear-gradient(to top right, #556677 25%, #abcdef 100%);
    padding: 20px;
    border: 2px solid gray;
    border-radius: 15px;
    margin: 0;
    position:relative;
}
.praunuce {
    background: linear-gradient(to top right, #dd2233 25%, #dd33dd 100%);
    padding: 20px;
    border: 2px solid gray;
    border-radius: 15px;
    margin: 0;
    position:absolute;
}
.hed1 {
    text-align: center;
    font-size: 40px; font-weight: bold; font-style: italic;
    line-height: 34px;
    margin: 0;
    text-shadow: 1px 1px 3px #3ff;
   }
ul {
   height:100%; 
   list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: gray;
  font-size: 32px; font-weight: bold; font-style: italic;
  text-decoration: underline; color: #333333;
/*  border: 1px; */
  border-radius: 15px;
}
li { float: left; }
li a { display: inline-block;
    color: #ee0;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 24px; font-weight: bold; font-style: italic;
  border: 1px;
  border-radius: 15px;
  border-top: 2px solid; /* Ein optischer Trennungsstrich */
  border-right: 5px solid; /* Ein optischer Trennungsstrich */
  border-color: #dde;
}
li a:hover { background-color: #232; }
</style>
<style>
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
/* Colors */
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#bbb!important}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#ffeb3b!important}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
.w3-text-amber{color:#ffc107!important}
.w3-text-aqua{color:#00ffff!important}
.w3-text-light-blue{color:#87CEEB!important}
.w3-text-brown{color:#795548!important}
.w3-text-cyan{color:#00bcd4!important}
.w3-text-blue-grey,.w3-text-blue-gray{color:#607d8b!important}
.w3-text-light-green{color:#8bc34a!important}
.w3-text-indigo{color:#3f51b5!important}
.w3-text-khaki{color:#b4aa50!important}
.w3-text-lime{color:#cddc39!important}
.w3-text-orange{color:#ff9800!important}
.w3-text-deep-orange{color:#ff5722!important}
.w3-text-pink{color:#e91e63!important}
.w3-text-purple{color:#9c27b0!important}
.w3-text-deep-purple{color:#673ab7!important}
.w3-text-sand{color:#fdf5e6!important}
.w3-text-teal{color:#009688!important}
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#bbb!important}
</style>
