[data-tab-content] {
    display: none;
  }
  
.active[data-tab-content] {
  display: grid;
  grid-template-rows: auto; 
  grid-template-columns: repeat(6, 1fr); 
  gap: 2px; 
  width: 100%;
  padding: 5px;
}

  
body {
  padding: 3;
  margin: 3;
  font-family: 'Arial', sans-serif;
  background-color: #f7f7f7;
  color: #333; 
  line-height: 1.6; 
}

.tabs {
  display: flex;
  justify-content: space-around; 
  align-items: center;
  list-style-type: none; 
  margin: 10px 0;
  padding: 5px 10px; 
  border-bottom: 1px solid #ccc; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #e0e0e0; 
  border-radius: 4px; 
}
  
.tab {
  cursor: pointer;
  padding: 10px 15px; 
  color: #333; 
  border: 2px solid #444; 
  border-radius: 6px; 
  background-color: #f0f0f0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  transition: all 0.3s ease; 
  margin: 5px;
}
  
.tab.active {
  background-color: #b0b0b0; 
  color: #111; 
  border: 2px solid #444; 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
}

  
.tab:hover {
  background-color: #b0b0b0; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}
  
.tab-content {
  margin: 20px; 
  padding: 15px; 
  background-color: #e0e0e0; 
  border: 2px solid #ccc; 
  border-radius: 6px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  font-size: 1.1rem; 
  color: #333; 
  transition: all 0.3s ease; 
}

/* Table container styling for .tableFront */
.tableFront {
  padding: 5px;
  background: #e0e0e0;
  border: 1px solid #ccc; 
  border-radius: 4px;
}



/* Table styling for .tableFront */
.tableFront table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px; /* Reduced font size */
}

.tableFront th,
.tableFront td {
  border: 1px solid #ccc;
  padding: 4px; 
  text-align: left;
}

.tableFront th {
  background-color: #d0d0d0; 
}


/* die header sind in div gewrapped, die tablefront items sind also kinder davon und deshalb applie dincht, guck da smal an
/* Header styling within .tableFront */
.tableFront h2,
.tableFront h3 {
  margin: 0 0 10px 0; 
  padding: 8px; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  background-color: #d0d0d0; 
  font-weight: bold;
  color: #333;
}

.tableFront h2 {
  font-size: 18px; /* Adjust size for h2 */
}

.tableFront h3 {
  font-size: 16px; /* Adjust size for h3 */
}

/*startitems*/
.start-item-1 {
  grid-column: 1 / 7;
  grid-row: 1; 
  background-color: #e0e0e0; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  padding: 10px; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
  font-size: 1.2rem; 
  color: #333; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
}

.start-item-2 {
  grid-column: 1 / 4; 
  grid-row: 2; 
  background-color: #e0e0e0; 
}
/*grid items*/


/* Styling for grid items */
.grid-item-1 {
  grid-column: 1 / 7;
  grid-row: 1; 
  background-color: #e0e0e0; 
  border: 1px solid #ccc; 
  border-radius: 4px; 
  padding: 10px; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
  font-size: 1.2rem; 
  color: #333; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center; 
}

.grid-item-2 {
  grid-column: 1 / 4; 
  grid-row: 2; 
  background-color: #e0e0e0; 
}
.grid-item-2 {
  grid-column: 1 / 4; 
  grid-row: 2; 
  background-color: #e0e0e0; 
}

.grid-item-3 {
  grid-column: 1 / 4; 
  grid-row: 3; 
  background-color: #e0e0e0; 
}

.grid-item-31 {
  grid-column: 1 / 4;
  grid-row: 4;
}

.grid-item-32 {
  grid-column: 1 / 4;
  grid-row: 4;
}

.grid-item-4 {
  grid-column: 1 / 4; 
  grid-row: 5; 
  background-color: #e0e0e0; 
}

.grid-item-5 {
  grid-column: 1 / 4; 
  grid-row: 6;
  background-color: #e0e0e0; 
}

.grid-item-6 {
  grid-column: 1 / 4; 
  grid-row: 7;
  background-color: #e0e0e0; 
}

.grid-item-7 {
  grid-column: 5 / 6; /* Occupies the fifth column */
  grid-row: 3 / 7; /* Spans from the third to the seventh row */
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack child elements vertically */
  align-items: center; /* Center child elements horizontally */
  justify-content: center; /* Center child elements vertically */
  text-align: center; /* Center text alignment */
  margin: 20px;
}

.grid-item-7 h3 {
  background-color: #d0d0d0; /* Slightly darker grey background for header */
  color: #333; /* Dark grey text */
  padding: 8px; /* Padding around the text */
  border-radius: 4px; /* Rounded corners */
  margin: 0 0 10px 0; /* Remove margin around header and add spacing below */
  font-size: 1.2rem; /* Font size for emphasis */
  font-weight: bold; /* Bold text for header */
}

.grid-item-8 {
  grid-column: 5 / 6;
  grid-row: 2;
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack child elements vertically */
  align-items: center; /* Center child elements horizontally */
  justify-content: center; /* Center child elements vertically */
  text-align: center; /* Center text alignment */
  margin: 15px;
}


/* quelle items*/
.quell-item-1 {
  grid-column: 1 / 7; /* Occupies columns 1 to 6 */
  grid-row: 1; /* Positioned in the first row */
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
  display: flex; /* Flexbox for centering text */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
  text-align: center; /* Center text alignment */
}

.schadstoff-button {
  background-color: #2e4b42; /* Gedämpftes dunkles Grün */
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.schadstoff-button:hover {
  background-color: #253d36; /* Noch etwas dunkler beim Hover */
}


.quell-item-2 {
  grid-column: 1 / 7; /* Now spans only one column */
  grid-row: 3; /* Positioned in the third row */
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 8px; /* Reduced padding inside the item */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Reduced shadow for depth */
  font-size: 1.1rem; /* Slightly smaller font size for less emphasis */
  color: #333; /* Dark grey text color */
  align-items: center; /* Center items vertically */
  justify-content: center; /* Center items horizontally */
}

.quell-item-3 {
  grid-column: 1 / 7;
  grid-row: 4;

}

.quell-item-4 {
  grid-column: 1 / 7;
  grid-row: 5;
  display: flex;
  background-color: #e0e0e0; /* Light grey background for quelle items */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 8px; /* Reduced padding for a more compact item */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Reduced shadow for depth */
  font-size: 1.1rem; /* Slightly smaller font size for less emphasis */
  color: #333; /* Dark grey text color */
}

.quell-item-5 {
  grid-column: 1 / 6;
  grid-row: 7;
  background-color: #e0e0e0; /* Light grey background for quelle items */
}

.quell-item-6 {
  grid-column: 1 / 6;
  grid-row: 7;
  background-color: #e0e0e0; /* Light grey background for quelle items */
}

.quell-item-7 {
  grid-column: 1 / 6;
  grid-row: 9;
  background-color: #e0e0e0; /* Light grey background for quelle items */
}

.quell-item-8 {
  grid-column: 1 / 6;
  grid-row: 11;
  background-color: #e0e0e0; /* Light grey background for quelle items */
}

.quell-item-9 {
  grid-column: 1 / 6;
  grid-row: 13;
  background-color: #e0e0e0; /* Light grey background for quelle items */
}

.transport-item-1 {
  grid-column: 1 / 7; /* Occupies columns 1 to 6 */
  grid-row: 1; /* Positioned in the first row */
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
  display: flex; /* Flexbox for centering text */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
  text-align: center; /* Center text alignment */
}

.transport-item-2 {
  grid-column: 1 / 7; 
  grid-row: 2; 

}

.transport-item-3 {
  grid-column: 1 / 7;
  grid-row: 2;
  display: none;
}

.tables-item-1 {
  grid-column: 1 / 7; /* Occupies columns 1 to 6 */
  grid-row: 1; /* Positioned in the first row */
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
  display: flex; /* Flexbox for centering text */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
  text-align: center; /* Center text alignment */
}

.tables-item-2 {
  grid-column: 1 / 7; /* Occupies columns 1 to 6 */
  grid-row: 2; /* Positioned in the first row */
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
  display: flex; /* Flexbox for centering text */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
  text-align: center; /* Center text alignment */
}

.tables-item-3 {
  grid-column: 1 / 7; 
  grid-row: 3; 
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
}

.tables-item-4 {
  grid-column: 1 / 7; 
  grid-row: 4; 
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
}

.impressum-item-1{
  grid-column: 1 / 7; 
  grid-row: 1 / 7; 
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
}

.berechnung-item-1{
  grid-column: 1 / 7; 
  grid-row: 1; 
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
}


.berechnung-item-3 {
  grid-column: 1 / 7; 
  grid-row: 2; 
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */ 
}
.berechnung-item-4 {
  grid-column: 1 / 7; 
  grid-row: 3; 
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
}

.berechnung-item-6 {
  grid-column: 1 / 7; 
  grid-row: 5; 
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
}
.berechnung-item-7 {
  grid-column: 1 / 7; 
  grid-row: 7; 
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
}
.berechnung-item-8 {
  grid-column: 1 / 7; 
  grid-row: 6; 
  background-color: #e0e0e0; /* Light grey background */
  border: 1px solid #ccc; /* Light grey border for subtle definition */
  border-radius: 4px; /* Rounded corners for a softer look */
  padding: 10px; /* Padding inside the item */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-size: 1.2rem; /* Slightly larger font size for emphasis */
  color: #333; /* Dark grey text color */
}





/* skizze*/
 
#container {
  position: relative;
  width: 100%;
  height: 100%; /* Adjust height as needed */
}

.box {
  position: absolute;
  width: 100%;
  height: 100px; /* Adjust height as needed */
  text-align: center;
  line-height: 100px; /* Align text vertically */
  border: 1px solid #333; /* Darker grey border */
  padding: 0; /* Ensure no extra padding */
}

.red {
  border: 2px solid #444; /* Slightly thicker, darker border for emphasis */
  border-radius: 6px; /* Rounded corners for a softer appearance */
  padding: 8px; /* Adds padding for a more spacious look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  font-size: 1.1rem; /* Adjust font size for better readability */
  background-color: lightcoral;
  top: 0;
}

.blue {
  border: 2px solid #444; /* Slightly thicker, darker border for emphasis */
  border-radius: 6px; /* Rounded corners for a softer appearance */
  padding: 8px; /* Adds padding for a more spacious look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  font-size: 1.1rem; /* Adjust font size for better readability */  background-color: lightskyblue;
  bottom: 0;
}

.layer {
  position: absolute;
  width: 100%; /* Same width as the container and boxes */
  background-color: #e0e0e0; /* Light grey background */
  border: 2px solid #444; /* Darker grey border for emphasis */
  box-sizing: border-box; /* Ensure border is included in the element’s total width/height */
  border-radius: 6px; /* Rounded corners for a smoother appearance */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  color: #333; /* Dark grey text color */
  font-size: 1.1rem; /* Adjust font size as needed */
  padding: 10px; /* Spacing inside the element maybe delete?*/
  display: flex; /* Use flexbox to center text */
  align-items: center; /* Center text vertically */
  justify-content: center; /* Center text horizontally */
  text-align: center; /* Center text horizontally in case of multiline text */
}

/*pop up*/

dialog{
  padding: 0;
}


dialog1{
  padding: 0;
  
}
dialog1 .wrapperPopUp {
  
  padding: 16px;
  background-color: #f0f0f0; /* Light grey background for the popup */
}

#container1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Drei gleich große Spalten */
  grid-auto-rows: minmax(auto,auto); /* Zeilenhöhe basiert auf dem minimalen Inhalt */
  gap: 20px; /* Abstand zwischen den Grid-Elementen */
  background-color: #f9f9f9; /* Heller Hintergrund für den Container */
  border: 1px solid #ccc; /* Dünner Rahmen um den Container */
  align-items: center;     /* vertikal zentrieren */
  justify-content: center; /* horizontal zentrieren */
}

.Pop-Up-Item-1 {
  grid-column: 1 / 2; /* Über zwei Spalten */
  grid-row: 1; /* In der ersten Zeile */
  background-color: #fff; /* Hintergrundfarbe */
  border: 1px solid #ddd; /* Rahmen */
}

.Pop-Up-Item-2 {
  grid-column: 1; /* In der ersten Spalte */
  grid-row: 2; /* In der zweiten Zeile */
  background-color: #fff; /* Hintergrundfarbe */
  border: 1px solid #ddd; /* Rahmen */
  align-self: start;
}

.Pop-Up-Item-3 {
  grid-column: 2; /* In der zweiten Spalte */
  grid-row: 2; /* In der zweiten Zeile */
  background-color: #fff; /* Hintergrundfarbe */
  border: 1px solid #ddd; /* Rahmen */
  align-self: start;
}

.Pop-Up-Item-4 {
  grid-column: 3; /* In der dritten Spalte */
  grid-row: 2; /* In der zweiten Zeile */
  background-color: #fff; /* Hintergrundfarbe */
  border: 1px solid #ddd; /* Rahmen */
  align-self: start;
}

.Pop-Up-Item-5 {
  grid-column: 1; 
  grid-row: 2; 
  background-color: #fff;
  border: 1px solid #ddd; 
  align-self: start;
}

.Pop-Up-Item-6 {
  grid-column: 2; 
  grid-row: 2;
  background-color: #fff; 
  border: 1px solid #ddd; 
  align-self: start;
}

.Pop-Up-Item-7 {
  grid-column: 3; 
  grid-row: 2; 
  background-color: #fff; 
  border: 1px solid #ddd; 
  align-self: start;
}

.tableFront1 {
  height: auto;
  width: auto; 
  border-collapse: collapse; 
  table-layout: auto; 
  overflow: auto;
}

.tableFront1 th, .tableFront1 td {
  border: 1px solid #ccc; 
  padding: 8px; 
  text-align: left; 
}

.tableFront1 th {
  background-color: #f2f2f2; 
  font-weight: bold; 
  position: sticky;
  top: 0;
}

.tableFront1 tr:hover {
  background-color: #e9e9e9; /* Hover-Effekt für Zeilen */
}

/* Stil für das ausgewählte Element */
.tableFront1 td.selected {
  background-color: #d3f8d3; /* Heller Grünton für die Auswahl */
  border-color: #84c084; /* Etwas stärkerer Rahmen für das ausgewählte Element */
}

.tableFront1 td.selected:hover {
  background-color: #a1e5a1; /* Hover-Effekt für das ausgewählte Element */
}









/* Slider container styling */
.sliderContainer {
  display: flex;
  flex-direction: column; 
}

.optionSondierungen {
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s;
  color: #333;
}

.optionSondierungen.active {
  font-weight: bold;
  opacity: 1;
  color: #000;
}

.optionSondierungen.inactive {
  opacity: 0.5;
}

.sliderRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #ccc; 
  padding: 10px; 
  border-radius: 4px;
}


/* Slider styling */
.slider {
  width: 50px;
  height: 25px;
  background-color: #bbb;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.slider.active {
  background-color: #888;
}

.slider.active::before {
  transform: translateX(25px);
}

/* Slider für Tabelle */
/* Slider container styling */
.sliderContainer1 {
  display: flex;
  flex-direction: column; 
}

.optionTabelle {
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s;
  color: #333;
}

.optionTabelle.active {
  font-weight: bold;
  opacity: 1;
  color: #000;
}

.optionTabelle.inactive {
  opacity: 0.5;
}

.sliderRow1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #ccc; 
  padding: 10px; 
  border-radius: 4px; 
}


.slider1 {
  width: 50px;
  height: 25px;
  background-color: #bbb;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slider1::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.slider1.active {
  background-color: #888;
}

.slider1.active::before {
  transform: translateX(25px);
}


/*Slider für pop up*/
/* Slider container styling */
.sliderContainer2 {
  display: flex;
  flex-direction: column; 
}

.optionPopUp {
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s;
  color: #333; 
}

.optionPopUp.active {
  font-weight: bold;
  opacity: 1;
  color: #000;
}

.optionPopUp.inactive {
  opacity: 0.5;
}

.sliderRow2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}


/* Slider styling */
.slider2 {
  width: 50px;
  height: 25px;
  background-color: #bbb;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slider2::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}

.slider2.active {
  background-color: #888;
}

.slider2.active::before {
  transform: translateX(25px);
}

.sliderContainer3 {
  display: flex;
  flex-direction: column; 
}

.sliderRow3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #ccc;
  padding: 8px; 
  border-radius: 4px;
}

.slider3 {
  width: 50px;
  height: 25px;
  background-color: #bbb;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slider3::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
}



.slider3.active::before {
  transform: translateX(25px);
}

/* Options Styling */
.optionWasserhaushalt {
  font-size: 16px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s;
  color: #333;
}

.optionWasserhaushalt.active {
  font-weight: bold;
  opacity: 1;
  color: #000;
}

.optionWasserhaushalt.inactive {
  opacity: 0.5;
}

.input-error {
  border: 2px solid red;
}

/*berechnung slider*/
.container5 {max-width: 720px;}
.group {margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px;}
.note {font-size: 0.9em; color: #555;}


.info-cell {
  position: relative;
  text-align: center;
  cursor: help;
  color: #0077cc;
  font-weight: bold;
}

.info-cell .tooltip-text {
  visibility: hidden;
  opacity: 0;

  position: absolute;
  z-index: 1000;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);

  max-width: 260px;
  background-color: #333;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: left;

  transition: opacity 0.2s ease;
}

/* Hover */
.info-cell:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Pfeil */
.info-cell .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

.makeBiggerButton {
    padding: 12px 24px; /* Innenabstand */
    font-size: 18px;    /* Schriftgröße */
    border-radius: 8px; /* optional: abgerundete Ecken */
    cursor: pointer;    /* Zeigt die Hand beim Hover */
}

.hidden {
  display: none;
}