/** Shopify CDN: Minification failed

Line 289:4 "margin-rigt" is not a known CSS property
Line 355:0 Unexpected "<"
Line 379:4 "nox-shadow" is not a known CSS property

**/


.calculator-section {
    background-color: #f4f4f4;
    border-radius: 10px;
    padding: 40px;
    margin: 5% auto 7%; /* Zentrierung vertikal und horizontal */
    max-width: 650px; /* Begrenzen Sie die Breite auf maximal 650px */
}

/* Stile für mobile Geräte */
@media (max-width: 768px) {
  .calculator-section {
    max-width: 95%;
    padding: 15px;
  }
}


/* Überschrift */
h1{
  margin-bottom: 7%
  
}

/* Flex-Container für die Bilder  !!!! Bilder als SVG hochladen oder Größe kleiner machen, weil sonst zu groß auf kleinen Screens !!!!!*/
#bilder-container {
    display: flex;
    justify-content: space-between; /* Gleichmäßiger Abstand zwischen den Bildern */
    align-content: center;
    margin-bottom: 7%;
}

/* CSS für jeden Bild-Label-Container */
#option-label1, #option-label2, #option-label3 {
    flex: 0 0 auto; /* Bilder werden nicht mehr auf eine feste Breite festgelegt */
    width: 28%; /* Setzt eine feste Breite von 30% für jeden Container */
    text-align: center; /* Zentriert den Text */
    border-radius: 50%; /* Fügt den Border-Radius für die Bilder hinzu */
    font-size: 16px;
    margin-top: 20px;
    line-height: 125%
}

/* CSS für die Bilder innerhalb der Container */
#option-label1 img, #option-label2 img, #option-label3 img {
    max-width: 100%; /* Bilder innerhalb der Container passen sich an die Container-Breite an */
    height: auto; /* Das Seitenverhältnis bleibt erhalten */
}






#text-label3{
    display:flex;
}

/* CSS für die Bilder innerhalb des Labels */
.image-label img {
    max-width: 100%; /* Ändert die maximale Breite der Bilder auf 100%, um das Skalieren sicherzustellen */
}

#option1, #option2, #option3{
    border-radius: 50%;  
}



/* CSS für jeden Option-Textcontainer */
#text-option1, #text-option2, #text-option3 {
    flex: 0 0 calc(30% - 3%); /* Ein Drittel der Breite mit 20px Abstand */
    text-align: center; /* Zentriert den Text */
    margin-top: 10px; /* Oberer Abstand zwischen dem Bild und dem Text */
}





/* CSS für Geschlecht-Toggle */
#geschlecht {
  display: flex;
  justify-content: space-between;
  flex: 0 0 calc(50% - 20px); /* Ein Drittel der Breite mit 20px Abstand */
  max-width: calc(50% - 20px); /* Maximale Breite für jedes Bild */
  margin-left: 0; /* Fügen Sie diese Zeile hinzu, um die linke Margin auf 0 zu setzen */
}

#geschlecht input {
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
  margin: 0; /* Fügen Sie diese Zeile hinzu, um alle Margen zu entfernen */
  padding: 0; /* Fügen Sie diese Zeile hinzu, um alle Padding zu entfernen */
}

#geschlecht input:checked + label {
  background: #375541;
  color: white;
  font-weight: 500;
}

#geschlecht label {
  flex: 1;
  height: 50px;
  background-color: white;
  color: black;
  text-align: center;
  font-size: 15px;
  padding: 6px 6px;
  transition: all 0.1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    cursor: pointer;
  }
}



#geschlecht label:first-of-type {
  border-radius: 30px 0 0 30px;
}

#geschlecht label:last-of-type {
  border-radius: 0 30px 30px 0;
}

/* Stile für mobile Geräte */
@media (max-width: 768px) {
  #geschlecht{
    display: flex;
    max-width: 100%;
    margin-top: 30px;
  }
}









/* Input Feld CSS inkl. Einheit */
input[type="text"]#groesse, #alter, #gewicht, #schlafdauer, #sportstunden{
    -webkit-appearance:none!important;
    border:0px solid gray;
    border-right:0px;
    border-radius:40px;
    outline:none;
    padding-left: 20px;
    height: 50px;
    width: 90%;
    z-index: 1;
    text-align: center;

}

/* Stile für mobile Geräte */
@media (max-width: 768px) {
  input[type="text"]#groesse, #alter, #gewicht, #schlafdauer, #sportstunden {
    width: 98%
  }
}




input[type="text"]#einheit-groesse, #einheit-alter, #einheit-gewicht, #einheit-schlaf, #einheit-sport{
    -webkit-appearance:none!important;
    color:black;
    text-align:left;
    width:70px;
    border:0px solid gray;
    border-radius:40px;
    border-left:0px;
    margin:0 0 0 -30%;
    background:white;
    height: 50px; 
    float:right;
    position:relative;
    z-index: 2;
    color: #a6a6a6;
}

/* Stile für mobile Geräte */
@media (max-width: 768px) {
  input[type="text"]#einheit-groesse, #einheit-alter, #einheit-gewicht, #einheit-schlaf, #einheit-sport {
    width: 50px;
  }
}





#input-groesse, #input-alter, #input-gewicht, #input-schlaf, #input-sport{
      flex: 0 0 calc(50% - 20px); /* 50% der Breite mit 20px Abstand */
    max-width: calc(50% - 20px); /* Maximale Breite für jedes Bild */
}

/* Stile für mobile Geräte */
@media (max-width: 768px) {
  #input-groesse, #input-alter, #input-gewicht, #input-schlaf, #input-sport {
    display: block;
    max-width: 100%;
    margin-top: 7%;
  }
}






#input-container5{
  margin-top: 60px;
}

#input-container1, #input-container2,#input-container5{
  display: flex;
  justify-content: space-between; /* Gleichmäßiger Abstand zwischen den Bildern */
  align-content: center;
  margin-bottom: 7%;
}

/* Stile für mobile Geräte */
@media (max-width: 768px) {
  #input-container1, #input-container2,#input-container5 {
    display: block;
  }
}






#groesse, #alter, #gewicht, #schlafdauer, #sportstunden:focus {
  box-shadow: none;
}



/* CSS für Range-Input */
#input-container3, #input-container4 {
    display: flex;
    align-items: center;
    padding-right:10px;
    padding-left:10px;
    margin-top: 5%;


}



#container3-heading {
    margin-left: 3%;
    margin-top: 5%;
}

#container4-heading{
    margin-left: 3%;
    margin-top: 70px;
}

#container3-heading, #container4-heading {
    font-size: 16px;
}

h4 {
    flex: 1;
    text-align: left;
    margin-rigt: 30px;
    font-weight: 500;
    padding-right: 5%;
}

#input-container4{
    margin-bottom:7%;
}

#berufaktivitaet, #freizeitaktivitaet {
    flex: 3;
}


/* CSS für Button */
#CalcButton {
  background-color: #375541;
  color: white;
  font-size: 20px;
  font-weight: 600;
  padding: 2%;
  border-radius: 25px;
  border-color: #375541;
  width: 100%;
  cursor: pointer;
  height: 50px;
  margin-top: 10px;
  box-shadow: none;


}

.ergebnis-section {
    display: none;
    background-color: #f4f4f4;
    border-radius: 10px;
    padding: 40px;
    margin: 5% auto 7%; /* Zentrierung vertikal und horizontal */
    max-width: 650px; /* Begrenzen Sie die Breite auf maximal 650px */
    
}

/* Stile für mobile Geräte */
@media (max-width: 768px) {
  .ergebnis-section {
    max-width: 95%;
    padding: 15px;
  }
}




#ergebnis{
    text-align: left;
    font-weight: bold;
    color: #707070;
    font-size: 30px;
  
}

h3{
  margin-top: -7%;
  margin-bottom: 4%;
}

<hr>{
    margin-top: 0;
}


#mahlzeiten {
    display: flex;
    justify-content: space-between; /* Fügt Platz zwischen den beiden Elementen hinzu */
    align-items: center; /* Zentriert die Elemente vertikal */

}

#mahlzeit-heading{

}

#dropdown-anzahl {
    background: #375541;
    color: white;
    border-radius: 1em;
    border-width: 8px;
    border-color: #375541;
    cursor: pointer;
    outline: none;
    nox-shadow: none;
}

#dropdown-anzahl:active, #dropdown-anzahl:focus {
    box-shadow: none; /* Entfernt den Schatten im aktiven Zustand oder im Fokus */
}



/* Flex-Container für die Mahlzeiten */
#mahlzeiten-container3, #mahlzeiten-container4, #mahlzeiten-container5 {
    display: flex;
    justify-content: space-between; /* Gleichmäßiger Abstand zwischen den Bildern */
    align-content: center;
    padding-right: 7%
    padding-left: 7%
    margin-bottom: 7%;
}

#mahlzeiten-container3 label{
    font-weight: bold;  
}
#mahlzeiten-container4 label{
    font-weight: bold;  
}
#mahlzeiten-container5 label{
    font-weight: bold;  
}

#heading-disclaimer{
    margin-top:9%;
    
}

#link{
  text-style: underline;
  
}

p {
  font-size: 15px;
  text-align: justify;
}


.ziel3-label{
  margin-left: -100px
}



/* CSS für die PopUps */
/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 370px;
  background-color: #375541;
  color: white;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  bottom: 125%;
  left: 0%;
  margin-left: -25px;
  line-height: 180%;
  z-index: 2;


}


/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #375541 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/* CSS für die PopUps */
/* Popup container - can be anything you want */
.popup1 {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup1 .popuptext {
  visibility: hidden;
  width: 150px;
  background-color: #375541;
  color: white;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  bottom: 125%;
  left: 0%;
  margin-left: -50px;
  line-height: 120%;
  z-index: 2;


}


/* Popup arrow */
.popup1 .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: #375541 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup1 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}