Html Änderung

data/index.html

       <div class="slider">
         <input type="range" class="regler" value="50" min="1" max="100"
           oninput="this.nextElementSibling.value = this.value">
+
         <output>50</output>
       </div>
     </div>
   <div class="ueberschrift">
     Helligkeit bei Dunkelheit
-      <!--<label id="label_geschwindigkeit">
+      <!--<label id="label_pwm_dark">
       </label>-->
       <div class="slider">
       <input type="range" class="regler" value="50" min="1" max="100"
 
     <div class="ueberschrift">
       Licht-An-Zeit
-       <!--  <label id="label_geschwindigkeit">
+       <!--  <label id="label_time">
         </label>-->
         <div class="slider">
           <input type="range" class="regler" value="50" min="1" max="100"

data/style.css

   font-size: 16px;
   font-family: sans-serif, Arial, Helvetica;
   background-color: #d4d4d4;
+  height: 100%;
+  background-image: url('Background.png');
+  background-repeat: no-repeat;
+  background-size: 150% 150%;
 }
 
 .topbar {
   padding: 1em;
   background-color: #1f1f1f;
-
   color: white;
   font-size: x-large;
   text-align: center;
 }
 
-.control {
-  padding: 1em;
-}
-
 .ueberschrift{
   color: #ffffff;
   font-size: 50px;
   width: 100%;
-
   text-align: center;
 }
 
   width: 4%;
   border-radius: 30px;
 }
+.slider {
+  width: 100%;
+}
 
 .kopfzeile{
   color: #1f1f1f;
   font-size: 50px;
   width: 100%;
   background-color: #8d8a8a;
-
 }
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
-
 
 body {
+  height: 100%;
   margin: 0 auto;
   border: none;
   border-radius: 3;
-  background-image: url('Background.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
 }
 
 
+/*-------------------------------------------------------*/
 
-/* The switch - the box around the slider */
+
+/*Switch:
 .switch {
   position: relative;
   display: inline-block;
   height: 34px;
 }
 
-/* Hide default HTML checkbox */
+Hide default HTML checkbox
 .switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }
-
+*/
 /* The slider */
-.slider {
-  width: 100%;
-}
 
-/*.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
-}*/
 
-input:checked + .slider {
+/*input:checked + .slider {
   background-color: #04AA6D;
 }
 
 input:focus + .slider {
   box-shadow: 0 0 1px #04AA6D;
-}
-
+}*/
+/*
 input:checked + .slider:before {
   -webkit-transform: translateX(26px);
   -ms-transform: translateX(26px);
   transform: translateX(26px);
 }
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
-}
-.slider.round:before {
-  border-radius: 50%;
-}