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

* {
          margin:0;
          padding:0; 
        }
        body {
          font-size:62.5%;
		  /*background-image: url('img/fondo_1.png'); */
          background:#FFFFFF;
          color:#000000;
          font-family: Montserrat, Sans-serif;
          margin:0;
        }
        .content {
          max-width: 960px;
          margin:0 auto;
          font-size:1.5em;
        }
/*ADDED */
/* Style for the popup overlay */
    .popup-overlay {
      position:fixed;
      width:100%;  
      inset: 0; /* top:0; right:0; bottom:0; left:0; */      padding: 20px;
      /*margin: auto;*/
      background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black background */
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999; /* ensure the overlay is on top of other elements */
      opacity: 0;
      pointer-events: none; /* prevent clicking on elements below the overlay */
      transition: opacity 0.5s ease-in-out; /* add smooth transition effect */
    }

	.popup-box {
      /*height: 640px;
      width:600px;
      border-radius: 15pt;
      overflow: hidden;      
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      transition: opacity 0.5s ease-in-out;  add smooth transition effect */
      width: 600px;       /* feste Breite */
	  max-width: 100%;
	  max-height: 90vh;   /* Höhe passt sich Viewport an */
	  border-radius: 15px;
	  background: #fff;
	  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
	  overflow: hidden;
	  position: relative;
	  display: flex;      /* wichtig für vertikale Zentrierung des Inhalts */
	  flex-direction: column;
    }

    /* Style for the popup content */
    .popup-content {
      background-color: rgba(255, 255, 255, 1);      
      padding: 20px;
      text-align: center;
      border-radius: 15px;
      /*width:90%;*/
      width: 600px;
      min-height:300px;
      /*overflow-y:scroll;*/
      /*overflow-y:auto;*/
      min-height:250px;
      max-height:600px;
      transition: opacity 0.5s ease-in-out; /* add smooth transition effect */

    }
    
    /* Style for the close button */
    .popup-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
    
    .imgbtn{
    justify-content: center;
    align-items: center;
    }

	.imgbtn{
	    transition: transform .3s;
	    height:95px;
	    margin:0 auto;
	    border-radius: 10px;    
	    }
	
	.imgbtn:hover{
	    transform:scale(1.25);
	    }


        h1 {
          color:#f60;
          text-align: center;
          margin: 0.25em auto;
          font-size:2em;
        }

        h2 {
          color:rgb(79,99,103);
          text-align: center;
          margin-bottom: 1em;
          font-size:1.5em;
          font-family: Montserrat, Sans-serif;
          font-weight: 100;
        }
        .white-txt {color:#FFFFFF;}

        h3 {
          color: rgb(79, 99, 103);
          text-align: center;
          /*margin-bottom: 1em;*/
          font-size:1.5em;
          font-family: Montserrat, Sans-serif;
          font-weight: 600;
        }
        .white-txt {color:#FFFFFF;}

        header, nav, footer {
          background-color: #FFFFFF;
          margin: 0.5em auto;
          padding: 0.25em;
          text-align: center;
        }

        header .logo {
          float:right;
          width:100px;
          margin-right:1em;
        }
		.button-blue {
          border-radius: 15px;
          border:none;
          height: 44px;
          width: 220px;
          font-family:Montserrat, Sans-serif;
          font-size:1.0em;
          font-weight:400;
          color:#FFFFFF;
          background-color: rgb(79,99,103);
		  box-shadow: 0px 5px 4px -4px rgba(0,0,0,0.5);
		  text-align:center;
		  margin:auto;
        }
        .button-blue:hover {
          /*background-color: rgb(168, 213, 186) !important;*/
          background-color: rgb(79,99,103);
          cursor: pointer;
        }
        .maptools:hover {
          /*background-color: rgb(168, 213, 186) !important;
          background-color: rgb(79,99,103);*/
          cursor: pointer;
        }

        .button-red {
          margin: 0 auto;
          border-radius: 15px;
          border:none;
          height: 44px;
          width: 200px;
          font-family:Montserrat, Sans-serif;;
          font-size:20;
          font-weight:900;
          color:#FFFFFF;
          background-color: rgb(234, 27, 10);
        }
        .button-red:hover {
          background-color: rgb(176, 4, 2);
        }
        .button-consumption-1 {
          background:url('img/1pi.png');
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;
          background-color: rgb(137, 168, 149);	
          color:#FFFFFF;		  
		  /* #FFFFFF no-repeat top center; */
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-1:hover {
          background-color: rgb(168, 213, 186);
        }
        .button-consumption-2 {
          background:url('img/2pi.png');
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;		  
          background-color: rgb(137, 168, 149);		  
          color:#FFFFFF;		  
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-2:hover {
          background-color: rgb(168, 213, 186);
        }
        .button-consumption-3 {
          background:url('img/3pi.png');
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;		  
          background-color: rgb(137, 168, 149);		  
          color:#FFFFFF;		  
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-3:hover {
          background-color: rgb(168, 213, 186);
        }
        .button-consumption-4 {
          background:url('img/4pi.png'); 
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;		  
          background-color: rgb(137, 168, 149);		  
          color:#FFFFFF;		  
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-4:hover {
          background-color: rgb(168, 213, 186);
        }
        .button-consumption-5 {
          background:url('img/5pi.png');
		  background-position: center top;
		  background-repeat: no-repeat;
		  background-size: auto 27px;		  
          background-color: rgb(137, 168, 149);		  
          color:#FFFFFF;		  
          border:1px solid rgb(102, 55, 102);
          padding:25px 8px 0px 8px;
          border-radius: 10px;
        }
		.button-consumption-5:hover {
          background-color: rgb(168, 213, 186);
        }

        #content {
          margin: 0 auto;
          padding: 10;
          text-align: left;
          margin:2em 1em 0em 1em;
        }
        #principal {
          background-color: #ed4c62;
          border-radius: .5em;
          display: inline-block;
          margin: 0 auto;
          min-height: 200px;
          padding: .25em 0;
          text-align: center;
          vertical-align: top;
          width: 100%;
        }
        article {

          /*border: 1px solid #AAAAAA;*/
		  box-shadow: 0px 0px 10px 0px rgba(83,83,83, 0.3);
		  background-color: #FFFFFF;
          border-radius: 4px;
          padding: 1em;
          margin:0em 0em 25px 0em;
        }

        .blue-bg {
          background-color: rgb(30, 162, 177);
          border:none !important;
          padding:1em;
        }
        .white-area{
          border:none !important;
          background-color: #FFFFFF;
          border-radius: .5em;
          display: inline-block;
          margin: 0 auto;
          padding: 1em;
          text-align: center;
          vertical-align: top;
          width: 50%;
        }
        .white-area p {
          font-size:.75em;
          color:#000000;
        }
        .power {
          font-weight:900;
          color:rgb(234, 27, 10);
        }
        .eon-color-separator {
            width: 100%;
            height: 4px;
            position: relative;
            display: flex;
            margin:0 !important;
        }
        .eon-first-color {
            width: 60%;
            height: 100%;
            background-color: rgb(30, 162, 177);
        }
        .eon-second-color {
            width: 10%;
            height: 100%;
            background-color: rgb(227, 224, 0);
        }
        .eon-third-color {
            width: 30%;
            height: 100%;
            background-color: rgb(234, 27, 10);
        }

        .eon-input-s { 
            font-family: Montserrat, Sans-serif;
            font-weight: 400;
            position: relative;
            margin:0 auto;
            width: 80%;
            min-height: 24px;
            line-height: 18px;
            padding-top: 3px;
            padding-bottom: 3px;
            padding-left: 6px;
            font-size: 10px;
            display: block;
            border: 1px solid rgb(102, 55, 102);
            box-shadow: 0 0px 0 2px var(--borderColor);
            border-radius: 6px;
            background: #FFFFFF;
        }

        .eon-input { 
            font-family: Montserrat, Sans-serif;
            font-weight: 100;
            position: relative;
            margin:0 auto;
            width: 80%;
            min-height: 34px;
            line-height: 22px;
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 12px;
            font-size: large;
            display: block;
            border: 1px solid rgb(102, 55, 102);
            box-shadow: 0 0px 0 2px var(--borderColor);
            border-radius: 6px;
            background: #FFFFFF;
        }

        .eon-input-80w {
          width:80% !important;
          line-height: 5px !important;
          margin-bottom:10px !important;
        }
		
        .eon-input-20w {
          line-height: 5px !important;
        }
        .eon-input-30w {
          width:30% !important;
          /* line-height: 5px !important; */
		  height: 34px;
          /* margin-bottom:10px !important; */
        }
        .eon-input-40w {
          width:40% !important;
          line-height: 5px !important;
          margin-bottom:10px !important;
        }
        .eon-input-50w {
          width:50% !important;
          line-height: 5px !important;
          margin-bottom:10px !important;
        }
        .eon-input-65w {
          width:65% !important;
          line-height: 5px !important;
          margin-bottom:10px !important;
        }

		.slidecontainer {
		  width: 100%;
		  position: relative;
		}
		/* The slider itself */
		.slider {
		  /*-webkit-appearance: none;   Override default CSS styles */
		  /*appearance: none;
		  width: 100%; /* Full-width */
		  height: 5px; /* Specified height */
		  background: #d3d3d3; /* Grey background */
		  /*outline: none; /* Remove outline */
		  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
		  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
		  transition: opacity .2s;
		}
		
		/* Mouse-over effects */
		.slider:hover {
		  opacity: 1; /* Fully shown on mouse-over */
		}
		
		/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
		.slider::-webkit-slider-thumb {
		  -webkit-appearance: none;  Override default look */
		  /*appearance: none;
		  /*width: 25px;  Set a specific slider handle width */
		  /*height: 25px;  Slider handle height */
		  background: rgb(234, 27, 10); /* Green background */
		  cursor: pointer; /* Cursor on hover */
		}
		
		.slider::-moz-range-thumb {
		   /*width: 25px; Set a specific slider handle width */
		   /*height: 25px; Slider handle height */
		  background: rgb(234, 27, 10); /* Green background */
		  cursor: pointer; /* Cursor on hover */
		}

        fieldset {
          border:none;
          padding-top:15px;
        }

        form p {
          text-align: left;
          width: 80%;
        }

        #map {
          width:100%;
          height:400px;
          background-color:#DDDDDD;
          z-index: 1 !important;
        }
        .alert {background-color:rgb(227, 224, 0); font-size:16px; padding:15px; color:#B00402; font-weight:900}

        #pvtable {
          width:80%;
          margin:0 auto;
          text-align:center;
          margin-top:25px;
        }
        #pvtable {border:1; bordercolor:#0000FF; cellspacing:10; cellpadding:10;}
        #pvtable td, #pvtable th {padding:7px;}
        #pvtable td {color:#000000; border:1px solid #CCCCCC;}

        #pvtable th {color:white; background-color: rgb(234, 27, 10);}
        th.hidden {display:none;}
        td.hidden, td.td-total {border:none !important;}
        td.td-total {font-weight:bold; padding-top:30px !important;}

        #pvtable td.td1 {background-color: #E1EDED;}
        #pvtable td.td2 {background-color:  #B0DADE;}

        label {font-size:16px; color:#000000;margin-top: 10px; text-align:justify}

        .apartment {margin:15px 0px;}
        .apartment p {width:50%; margin:0 auto; margin-bottom:5px; padding:5px; text-align:center; font-weight:900; color:rgb(234, 27, 10); font-size:14px; background-color:#E8E8E8;}

    .checkbox-container {
      display: flex;
      flex-direction: column;
      margin-bottom:15px;
    }
    .checkbox-item {
      display: flex;
      align-items: center;
      /*margin-bottom: 10px;*/
    }
    .checkbox-item label {
      /*margin-left: 10px;
      font-size:14px !important;*/
      margin:0;
    }
    .offer {margin-top:.25em; padding: 1em; text-align:left !important;}

    a {color:rgb(102, 55, 102);}

    .saving-ammount {font-size:16px !important}

    .offer-aside {width:30%; float:left; padding:1em; background-color: #E1EDED; margin-right: 1em; font-size:14px;}

    .offer-main {padding: 1em;}

    .offer-main h3 {text-align:left !important;}
    .offer-main h3 span {color:#000000;}
    .offer-main p {font-size:14px !important;}

    .offer-info {margin-top:1em;}
    .offer-info tr td {background-color:#FFFEC6; padding: 1em; font-size:12px !important; text-align:left;}
    .offer-info tr th {background-color:#E3E000; padding: .50em; width:25%; font-size:12px !important; font-weight: 900; text-align: left;}

    .savings {margin-top: 1em;}

    .savings tr td {text-align:center; font-size:14px; padding:0px 6px 10px 6px;}

    .savings tr td.savings1 {color:#1EA2B1; background-color: #DDF1F3;}
    .savings tr td.savings1 hr {
      margin:10px 0px; 
      border: none;
      height: 1px;
      background-color: #1EA2B1;}
    .savings tr td.savings2 {color:#A5A300; background-color: #FFFFE4;}
    .savings tr td.savings2 hr {
      margin:10px 0px; 
      border: none;
      height: 1px;
      background-color: #A5A300;}
    .savings tr td.savings3 {color:#76020D; background-color: #EBD9DB;}
    .savings tr td.savings3 hr {
      margin:10px 0px; 
      border: none;
      height: 1px;
      background-color: #76020D;}

    .total-savings {background-color: rgb(234, 27, 10); padding:25px !important; color:white;}

    .clearer {clear:both;}

.apartment-grid {
    margin: 0 auto;
    text-align: center;
    border-collapse: separate;
    border-spacing: 10px;
}

.apartment-grid td {
    vertical-align: middle;
}

		.apartment-buttons {
		  width:400px !important;
		  margin: 0 auto !important;
		  text-align: center !important;
		}
		
		.average-consumption {
		  list-style-type: none;
		  margin: 15px 0 0 0;
		  padding: 0;
		}
		
		.average-consumption li {
		  float: left;
		  margin: 0 5px 0 0;
		  width: 75px;
		  height: 60px;
		  position: relative;
		}
		.average-consumption li p {
		  font-family: Montserrat, Sans-serif;
		  font-size:12px;
		  width:100%;
		  margin:0 auto;
		  text-align:center;
		}
	
.average-consumption label,
.average-consumption input[type=radio] {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
}

.average-consumption input[type=number] {
    position: relative;
    z-index: 200;
    margin-top: 40px;
    width: 75px;
    height: 40px;
    text-align: center;
}		
		.average-consumption input[type=radio] {
		  opacity: 0.01;
		  z-index: 100;
		
		}
		
		.average-consumption input[type=radio] {
		  opacity: 0.01;
		  /*z-index: 100;*/
		
		}
		
		.average-consumption input[type=radio]:checked + label.bg1, .Checked + label.bg1 {
		  background:url('img/1pi.png') rgb(250, 173, 102) no-repeat top center;
		  color:#FFFFFF;
		}
		.average-consumption input[type=radio]:checked + label.bg2, .Checked + label.bg2 {
		  background:url('img/2pi.png') rgb(234, 27, 10) no-repeat top center;
		  color:#FFFFFF;
		}
		.average-consumption input[type=radio]:checked + label.bg3, .Checked + label.bg3 {
		  background:url('img/3pi.png') rgb(234, 27, 10) no-repeat top center;
		  color:#FFFFFF;
		}
		.average-consumption input[type=radio]:checked + label.bg4, .Checked + label.bg4 {
		  background:url('img/4pi.png') rgb(234, 27, 10) no-repeat top center;
		  color:#FFFFFF;
		}
		.average-consumption input[type=radio]:checked + label.bg5, .Checked + label.bg5 {
		  background:url('img/5pi') rgb(234, 27, 10) no-repeat top center;
		  color:#FFFFFF;
		}
		
		.average-consumption label.bg1 {
		  background:url('img/1pi.png') #FFFFFF no-repeat top center;
		  background-color: rgb(250,173,102);
		  border:1px solid rgb(234, 27, 10);
		  padding:25px 8px 0px 8px;
		  border-radius: 10px;
		  /*z-index: 90;*/
		}
		.average-consumption label.bg2 {
		  background:url('img/2pi.png') #FFFFFF no-repeat top center;
		  background-color: rgb(250,173,102);
		  border:1px solid rgb(234, 27, 10);
		  padding:25px 8px 0px 8px;
		  border-radius: 10px;
		  /*z-index: 90;*/
		}
		.average-consumption label.bg3 {
		  background:url('img/3pi.png') #FFFFFF no-repeat top center;
		  border:1px solid rgb(234, 27, 10);
		  padding:25px 8px 0px 8px;
		  border-radius: 10px;
		  /*z-index: 90;*/
		}
		.average-consumption label.bg4 {
		  background:url('img/4pi.png') #FFFFFF no-repeat top center;
		  border:1px solid rgb(234, 27, 10);
		  padding:25px 8px 0px 8px;
		  border-radius: 10px;
		  /*z-index: 90;*/
		}
		.average-consumption label.bg5 {
		  background:url('img/5pi.png') #FFFFFF no-repeat top center;
		  border:1px solid rgb(234, 27, 10);
		  padding:25px 8px 0px 8px;
		  border-radius: 10px;
		  /*z-index: 90;*/
		}
		.average-consumption::after {
		  content: "";
		  display: block;
		  clear: both;
		  height: 0;
		  visibility: hidden;    	  
        }
        .average-consumption input[type=number] {
		    position: relative;
		    margin-top: 40px;
		    width: 75px;
		    height: 40px;
		    text-align: center;
		}
		.buttondelete {
		  background:url('img/del.png');
		  height:20px;
		  width:20px;
		}
		
		select:required:invalid {
		  color: gray;
		}
		option[value=][disabled] {
		  display: none;
		}
		option {
		  color: black;
		}
		
		.switch {
		  position: relative;
		  display: inline-block;
		  width: 30px;
		  height: 17px;
		}
		
		.switch input { 
		  opacity: 0;
		  width: 0;
		  height: 0;
		}
		
		.sliderred {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #ccc;
		  -webkit-transition: .4s;
		  transition: .4s;
		}
		
		.sliderred:before {
		  position: absolute;
		  content: "";
		  height: 13px;
		  width: 13px;
		  left: 2px;
		  bottom: 2px;
		  background-color: white;
		  -webkit-transition: .4s;
		  transition: .4s;
		}
		
		input:checked + .sliderred {
		  background-color: rgb(234,27,10);
		}
		
		input:focus + .sliderred {
		  box-shadow: 0 0 1px rgb(234,27,10);
		}
		
		input:checked + .sliderred:before {
		  -webkit-transform: translateX(13px);
		  -ms-transform: translateX(13px);
		  transform: translateX(13px);
		}
		
		/* Rounded sliders */
		.sliderred.round {
		  border-radius: 17px;
		}
		
		.sliderred.round:before {
		  border-radius: 50%;
		}

        /* MEDIA QUERY */
        @media screen and (min-width: 44em) {
          h1 {
            font-size:2em;
          }
          #principal {
            width: 100%;
          }
        }

        /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
        @media only screen and (max-width: 580px) {

          table tr td, table tr th {font-size:12px;}
          .checkbox-item label {margin-left:15px; font-size:14px !important;}
          .offer-aside {width:100%; float:none; margin-right: none;}

        }
        
       .tooltip {
		  position: relative;
		  display: inline-block;
		  /*border-bottom: 1px dotted black;*/
		  cursor: pointer;
		}
		
		.tooltiptext {
		  visibility: hidden;
		  width: 300px;
		  box-shadow: 0px 0px 10px 0px rgba(83,83,83, 0.3);
		  background-color: rgb(255,234,170);
          border-radius: 4px;
          padding: .8em;
          margin:0em 0em 0em 0em;
          
		  color: rgb(79,99,103);
		  font-size:0.8em;
		  text-align: left;
		  position: absolute;
		  z-index: 1;
		  bottom: 140%;
		  left: 50%;
		  margin-left: -155px;
		  opacity: 0;
		  transition: opacity 0.5s ease;
		}
		
		.tooltiptext::after {
		  content: "";
		  position: absolute;
		  top: 100%;
		  left: 50%;
		  margin-left: -15px;
		  border-width: 15px;
		  border-style: solid;
		  border-color: #FFEAAA transparent transparent transparent;*/
		}
		
		.tooltiptext.visible {
		    visibility: visible !important;
		    opacity: 1 !important;
		}
				
		.tooltip:hover .tooltiptext {
		  visibility: visible;
		  opacity: 1;
		} 

		.tooltiptext.closed {
		  visibility: hidden !important;
		  opacity: 0 !important;
		}    
		
		.size_of_img{
          width:30px}
          
		        
    /* Indicator with overview */
    .indicator{
      /*
      position:fixed;left:1rem;top:1rem;z-index:9999;
      background:#fff;border:1px solid #e5e7eb;
      padding:12px 16px;border-radius:10px;
      font-size:.9rem;width:160px;*/
      
      position:fixed;
      left:2rem; top:0;
      z-index:9999;
      background:#fff;border:1px solid #e5e7eb;
      padding:8px 10px;border-radius:8px;
      box-shadow:0 4px 12px rgba(0,0,0,0.08);
      font-size:0.75rem;
      display:flex; flex-direction:column;
      justify-content:left;
      text-align:left;
      max-width:calc(2rem + 200px);
      box-shadow:0 4px 12px rgba(0,0,0,0.08);
    }

     .steps-overview{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
     .step-item{opacity:.45;font-weight:500;}
    .step-item.active{opacity:1;font-weight:700;}