/* styles.css */
body, html {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
    user-select: none; /* Verhindert die Textauswahl auf der gesamten Seite */
}

.container {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1, h2 {
    text-align: center;
}

.slider-container {
    margin: 20px 0;
}

.slider-container label {
    display: block;
    margin-bottom: 10px;
}

/* Abgerundeter Slider */
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 12px;
    background: #ddd;
    outline: none;
    border-radius: 6px;
    transition: background 0.3s;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    border: 2px solid #0056b3;
}

input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #007bff;
    cursor: pointer;
    border: 2px solid #0056b3;
}

input[type="range"]:hover {
    background: #ccc;
}

/* Stil für die Checkboxen */
.checkbox-container {
    margin: 20px 0;
}

.checkbox-container label {
    display: flex;
    align-items: center; /* Zentriert Inhalt vertikal */
    margin-bottom: 10px;
    cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
    position: absolute;
    opacity: 0; /* Unsichtbar machen */
}

.checkbox-container .custom-checkbox {
    width: 24px;  /* Größe der Checkbox */
    height: 24px;
    border: 2px solid #007bff;
    border-radius: 4px; /* Leicht abgerundete Ecken */
    display: inline-block;
    margin-right: 10px;
    background: white;
    transition: background 0.3s, border-color 0.3s;
    position: relative; /* Position relativ setzen */
    box-sizing: border-box; /* Box-Sizing einstellen */
}

/* Häkchen, wenn die Checkbox ausgewählt ist */
.checkbox-container input[type="checkbox"]:checked + .custom-checkbox {
    background: #007bff; /* Blau, wenn ausgewählt */
    border-color: #007bff; /* Blau für den Rand */
}

.checkbox-container input[type="checkbox"]:checked + .custom-checkbox:after {
    content: '';
    position: absolute;
    left: 6px; /* Position des Häkchens horizontal */
    top: 1px; /* Position des Häkchens vertikal */
    width: 7px;
    height: 12px;
    border: solid white; /* Häkchen in weiß */
    border-width: 0 2px 2px 0; /* Häkchenform */
    transform: rotate(45deg); /* Drehen */
}

/* Stil für den Info-Kasten */
.info-box {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

/* Stil für die Info-Box um die erste Option */
.info-box-option {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    display: inline-block;
    margin-left: 10px; /* Abstand zur Checkbox */
}

/* Toggle-Switch */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.switch {
    position: relative;
    display: inline-block;
    width: 53px;
    height: 27px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px; /* Abgerundeter Hintergrund */
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 1.9px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 47%; /* Abgerundeter Schalter */
}

input:checked + .slider {
    background-color: #007bff; /* Blau, wenn aktiviert */
}

input:checked + .slider:before {
    transform: translateX(26px); /* Schalter bewegen, wenn aktiviert */
}

/* Modal */
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.hidden {
    display: none;
}

/* Button-Stil */
.button-container {
    text-align: center;
    margin-top: 20px;
}

button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* Link-Stil */
.link {
    color: #007bff;
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

/* Center the toggle-container */
.toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    text-align: center; /* Center the content */
}

/* Center the checkbox-container for additional options */
.checkbox-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the checkboxes horizontally */
    text-align: center;
}

.custom-checkbox {
  border: 1px solid black;
  padding: 10px;
}

/* Für alle Elemente den Fokus-Rahmen entfernen */
*:focus {
    outline: none; /* Entfernt den Standard-Fokus-Rahmen */
    box-shadow: none; /* Entfernt den Standard-Schatten */
}

.checkbox-container label[style="display: flex; align-items: flex-start;"] .custom-checkbox {
    margin-top: 18px; /* Passt die Position des Kästchens an */
    margin-left: 1px;  /* Verschiebt das Kästchen 1 Pixel nach rechts */
}

h1 {
    text-align: center;
    margin-bottom: 50px; /* Den Abstand erhöhen (vorher 20px oder weniger) */
}

/* Stil für die Info-Blase */
.info-bubble {
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 250px;
    text-align: center;
    z-index: 1000;
    top: 200px; /* Abstand nach unten von Profil 1 */
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    display: none; /* Standardmäßig versteckt */
}

/* Stil für das Info-Bild (Fragezeichen) */
#infoToggle {
    width: 20px;  /* Bildbreite */
    height: 20px; /* Bildhöhe */
    cursor: pointer; /* Zeigt den Cursor beim Hover */
}

/* Optional: Bild beim Hover verändern */
#infoToggle:hover {
    opacity: 0.8; /* Bild leicht verblassen, wenn die Maus darüber ist */
}

#infoBubble {
    display: none; /* Standardmäßig verstecken */
}

/* Anpassung für Touch-Geräte */
@media (pointer: coarse) {
    #infoBubble {
        top: 150px;  /* Neue Position für Touch-Geräte */
        left: 190px;  /* Beispielhafte Position für Touch-Geräte */
        /* Hier kannst du noch weitere Styles anpassen */
    }
}

/* Info-Blase */
#infoBubble {
    position: absolute;
    top: 200px; /* Du kannst diese Position anpassen */
    left: 969px; /* Beispielhafte Position */
    display: none;
    background-color: #f9f9f9;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    z-index: 1000; /* Hoch genug, um über anderen Inhalten zu sein */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 250px;
}

/* Pseudo-Element für den Pfeil (Desktop, nach oben zeigend) */
#infoBubble::after {
    content: "";
    position: absolute;
    top: -10px; /* Pfeil oberhalb der Box platzieren */
    left: 50%; /* Pfeil mittig oberhalb der Box */
    transform: translateX(-50%); /* Exakte Zentrierung */
    border-width: 0 10px 10px 10px; /* Pfeil nach oben */
    border-style: solid;
    border-color: transparent transparent #f9f9f9 transparent; /* Pfeil in Blasenfarbe */
}

/* Um den Rand des Pfeils mit dem Box-Rand abzugleichen */
#infoBubble::before {
    content: "";
    position: absolute;
    top: -11px; /* Ein Pixel weiter oben als der Pfeil selbst */
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 11px 11px 11px; /* Rand etwas größer als der Pfeil */
    border-style: solid;
    border-color: transparent transparent #ccc transparent; /* Randfarbe der Box */
}

/* Anpassungen für mobile Geräte */
@media (max-width: 600px) { /* Beispiel: 600px als Grenze für mobile Geräte */
    #infoBubble {
        top: 125px; /* Neue Position für Handys */
        left: 220px; /* Neue Position für Handys */
        max-width: calc(100% - 40px); /* Maximalbreite für Handys */
    }

    /* Pseudo-Element für den Pfeil (Mobil, nach unten zeigend) */
    #infoBubble::after {
        top: auto; /* Die vorherige Position wird zurückgesetzt */
        bottom: -10px; /* Pfeil unterhalb der Box platzieren */
        border-width: 10px 10px 0 10px; /* Pfeil nach unten */
        border-color: #f9f9f9 transparent transparent transparent; /* Pfeil in Blasenfarbe */
    }

    /* Um den Rand des Pfeils mit dem Box-Rand abzugleichen */
    #infoBubble::before {
        top: auto; /* Die vorherige Position wird zurückgesetzt */
        bottom: -11px; /* Rand etwas größer als der Pfeil */
        border-width: 11px 11px 0 11px; /* Rand etwas größer als der Pfeil */
        border-color: #ccc transparent transparent transparent; /* Randfarbe der Box */
    }
}

.slider-container {
    margin-bottom: 20px; /* Abstand zwischen den Balken */
}

.info-icon {
    width: 20px; /* Größe des Fragezeichen-Icons */
    height: 20px;
}

.info-bubble {
    background-color: rgba(0, 0, 0, 0.7); /* Hintergrundfarbe der Info-Blase */
    color: white;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    display: none; /* Blase wird erst bei Hover angezeigt */
}

.info-bubble.hidden {
    display: none; /* Versteckt die Blase, wenn sie die Klasse 'hidden' hat */
}