/* Allgemeine Stile für das Freitext-Widget */
.custom-free-text-widget {
    margin: 20px 0; /* Abstand oben und unten */
    text-align: center; /* Zentrierung des Texts */
}

.custom-free-text-widget label {
    display: block; /* Block-Level-Element */
    margin-bottom: 10px; /* Abstand unter dem Label */
    font-size: 16px; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
}

.custom-free-text-widget .free-text-input {
    width: 100%; /* Volle Breite */
    min-height: 100px; /* Mindesthöhe */
    padding: 10px; /* Innenabstand */
    font-size: 14px; /* Schriftgröße */
    border: 1px solid #ccc; /* Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    resize: vertical; /* Vertikales Anpassen der Größe */
}

/* Stile für den benutzerdefinierten Slider-Container */
.custom-slider {
    width: 100%; /* Volle Breite des Containers */
    max-width: 100%; /* Keine Begrenzung der maximalen Breite */
    margin: 0 auto;
    padding: 0;
}

.elementor-widget-container {
    max-width: 100%; /* Entfernt Begrenzung auf Elementor-Ebene */
    width: 100%; /* Stellt sicher, dass volle Breite genutzt wird */
}

/* Frage-Label über dem Slider */
.custom-slider .question-label {
    display: block; /* Block-Level-Element */
    font-size: 18px; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    margin-bottom: 20px; /* Abstand unter dem Label */
    text-align: center; /* Zentrierung des Labels */
}

/* Slider Wrapper für Zentrierung */
.custom-slider .slider-wrapper {
    display: flex; /* Flexbox für horizontale Anordnung */
    align-items: center; /* Zentrierung vertikal */
    justify-content: space-between; /* Abstand zwischen den Elementen */
    width: 100%; /* Volle Breite */
}

/* Linkes und rechtes Label neben dem Slider */
.custom-slider .slider-label {
    font-size: 14px; /* Schriftgröße */
    width: auto; /* Automatische Breite */
    text-align: center; /* Zentrierung des Texts */
    flex: 0 0 80px; /* Feste Breite von 80px */
}

/* Slider-Container, der den Bereich des Schiebereglers definiert */
.custom-slider .slider-container {
    position: relative; /* Relative Position für Absolute Elemente */
    flex-grow: 1; /* Nimmt verbleibenden Platz im Flex-Container ein */
    width: 100%; /* Volle Breite */
    max-width: none; /* Keine Begrenzung der maximalen Breite */
    padding: 0; /* Optionaler Innenabstand */
}

/* Slider selbst */
.custom-slider .slider {
    width: 100%; /* Volle Breite */
    max-width: none; /* Keine Begrenzung der maximalen Breite */
}

/* Wert-Label direkt über dem Slider */
.custom-slider .value-label {
    position: absolute; /* Absolute Position über dem Slider */
    top: -35px; /* Position über dem Slider */
    left: 50%; /* Zentriert horizontal */
    transform: translateX(-50%); /* Genaues Zentrieren */
    padding: 5px 10px; /* Innenabstand */
    border-radius: 4px; /* Abgerundete Ecken */
    font-size: 14px; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Schatten */
    white-space: nowrap; /* Kein Umbruch */
    pointer-events: none; /* Keine Interaktion */
    transition: left 0.2s ease-in-out; /* Animation bei Verschiebung */
}

/* Styling des Schiebereglers */
.custom-slider input[type="range"] {
    -webkit-appearance: none; /* Standarddarstellung entfernen */
    width: 100%; /* Volle Breite des Containers */
    max-width: none; /* Sicherstellen, dass max-width nicht eingeschränkt ist */
    box-sizing: border-box; /* Ränder und Padding in die Breite einberechnen */
    background: transparent; /* Transparenter Hintergrund */
    cursor: pointer; /* Zeiger als Cursor */
    border: none; /* Entfernt eventuelle Ränder */
}

/* Styling der Schieberegler-Spur für verschiedene Browser */
.custom-slider input[type="range"]::-webkit-slider-runnable-track,
.custom-slider input[type="range"]::-moz-range-track,
.custom-slider input[type="range"]::-ms-track {
    width: 100%; /* Volle Breite */
    height: 4px; /* Höhe der Spur */
    border-radius: 2px; /* Abgerundete Ecken */
    background-color: #0073e6; /* Farbe der Spur */
}

/* Styling des Schieberegler-Griffs für verschiedene Browser */
.custom-slider input[type="range"]::-webkit-slider-thumb,
.custom-slider input[type="range"]::-moz-range-thumb,
.custom-slider input[type="range"]::-ms-thumb {
    -webkit-appearance: none; /* Standarddarstellung entfernen */
    appearance: none; /* Einheitliche Darstellung */
    height: 16px; /* Höhe des Griffs */
    width: 16px; /* Breite des Griffs */
    background-color: #0073e6; /* Farbe des Griffs */
    transform: translateY(calc(-50% + 2px)) rotate(45deg); /* Positionierung und Drehung */
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Schatten */
    border-style: solid; /* Fester Rand */
    border-width: 2px; /* Randbreite */
    border-color: #000; /* Randfarbe */
}

/* Kommentarbereich unter dem Slider */
.custom-slider .comment-section {
    display: flex; /* Flexbox für Anordnung */
    align-items: center; /* Zentrierung vertikal */
    margin-top: 20px; /* Abstand über der Sektion */
}

/* Label für Kommentarbereich */
.custom-slider .comment-label {
    flex: 1; /* Füllt den verfügbaren Raum */
}

/* Eingabefeld für Kommentare */
.custom-slider .comment-field {
    flex: 2; /* Größerer Raum für Eingabefeld */
    padding: 10px; /* Innenabstand */
    font-size: 14px; /* Schriftgröße */
    border: 1px solid #ccc; /* Rahmen */
    border-radius: 4px; /* Abgerundete Ecken */
    resize: vertical; /* Vertikale Größenänderung erlaubt */
    min-height: 100px; /* Mindesthöhe */
    background-color: #f2f2f2; /* Hintergrundfarbe */
    color: #000000; /* Textfarbe */
}