/* Bestehende Stile für Unterkategorie-Buttons (aus vorheriger Antwort) */



.unterkategorie-button {
    height: 57px;
    background-color: hsla(0, 0%, 100%, 0.44);
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    margin-left: 2%;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 30%;
    float: left;
    min-width: 250px;
    box-sizing: border-box;
}

/* Media Query für kleine Bildschirme */
@media (max-width: 768px) {
    .unterkategorie-button {
        width: 48%;
        min-width: 230px;
        margin-left: 1%;
        margin-bottom: 15px; /* Mehr Abstand zwischen Buttons */
    }

    /* Filterbereich nach unten verschieben */
    .filter-options {
        margin-top: 20px; /* Abstand oberhalb des Filterbereichs */
        clear: both; /* Verhindert Überlappung mit gefloateten Buttons */
        width: 100%;
        box-sizing: border-box;
    }

    /* Sicherstellen, dass Unterkategorie-Container gestapelt werden */
    #richtung2, #richtung3, #richtung4 {
        clear: both;
        margin-top: 10px;
        margin-bottom: 40px;
		height: auto;
		
    }

    /* Untergruppe-Container anpassen */
    #untergruppefloatrechts {
        width: 100%;
        overflow: hidden; /* Verhindert Überlappung durch float */
		margin-bottom: 30px;
    }

    .sortiert {
        width: 100%;
        display: flex;
        flex-wrap: wrap; /* Buttons stapeln sich bei Bedarf */
        justify-content: flex-start;
		height: 100%;
    }
}
.submenu li {
    list-style: none;
}
/*############################ dropdown ####################*/
button {
	border: none;
	width: 25%; 
	
	min-width: 200px;
	color: rgba(255,255,255,1.00);
	text-align: center;
    transition: background 0.3s;
    cursor: pointer;

    float: left;
    height: 40px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    margin-left: 2%;
   
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    position: relative;
    box-sizing: border-box;
}

button #richtung {
    border: none;
    width: 30%; /* Angepasst für bessere Skalierung */
    min-width: 170px; /* Reduziert für kleinere Bildschirme */
    color: rgba(255,255,255,1.00);
    text-align: center;
    transition: background 0.3s;
    cursor: pointer;
    float: left;
    height: 40px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    margin-left: 2%;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    position: relative;
    box-sizing: border-box;
}

#richtung4 {
    display: flex;
	   flex-wrap:wrap; 
	justify-content: flex-start;
	width: 100%;

}

/* Basis-Styling für #sektion1 */
#sektion1 {
    display: flex; /* Flexbox für Hauptelemente */
    flex-direction: row; /* Nebeneinander im Desktop-Modus */
    flex-wrap: wrap; /* Erlaubt Umbruch, falls nötig */
    gap: 20px; /* Abstand zwischen den Elementen */
    align-items: flex-start; /* Oben ausrichten */
    float: none; /* Float entfernen */
    width: 100%; /* Volle Breite */
    max-width: 1000px; /* Maximale Breite für bessere Kontrolle */
    min-height: 289px;
    padding: 0;
    margin: 0;
    position: relative;
}

/*#sektion1 {
	float: left;
	height: auto;
	z-index: 1;
	min-height: 289px;
/*	background-color: rgba(245,141,9,1.00); */
	
/*	width: 95%;
	max-width: 1000px;
    padding: 0; /* Entfernt zusätzliches Padding */
/*    margin: 0; /* Entfernt zusätzlichen Margin */
/*    position: relative;
    background: none; /* Sicherstellen, dass keine Farbe übrig ist */
/*  }  */
/* Eltern-Container spezifisch für Alter */
#sektion1 #altersortierung {
    position: relative;
    height: auto;
   /* width: 26%; */
    min-width: 200px; /* Angepasst */
    float: left;
 /*   background: hsla(359,59%,67%,1.00); */
}

/* Nur der Alter-Button */
#sektion1 ul#alterbutton {
    text-align: center;
    transition: background 0.3s;
    cursor: pointer;
    width: 26%;
    float: left;
    height: 60px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
	padding-top: 20px;
	padding-bottom: 10px;
    margin-left: 2%;
	margin-bottom: 10px;
    min-width: 200px; /* Angepasst */
    vertical-align: middle;
    line-height: 40px;
    position: relative;
    box-sizing: border-box;
  /*  background: rgba(251,32,36,0.76); */
}

/* Label innerhalb des Alter-Buttons */
#sektion1 ul#alterbutton label.label1 {
    transition: background 0.3s;
    cursor: pointer;
    display: flex; /* Flexbox für Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    width: 100%;
    height: 100%;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
    color: rgba(255, 255, 255, 1);
   /* background: rgba(158,25,247,0.79); */
}

/* Hover- und Checked-Zustand */
#sektion1 #alterbutton:hover {
    background-color: hsla(0,0%,100%,0.57);
}

#sektion1 #check01:checked ~ #alterbutton {
    background-color: hsla(0,0%,100%,1.00);
}

ul#alterbutton > li {
    list-style-type: none;
    position: relative;
    padding-left: 0px;
    width: 100%;
}

label.label1 {
    transition: background 0.3s;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 20px;
/*	background: rgba(158,25,247,0.79); */
}

/* Sicherstellen, dass input#check01 keinen Platz einnimmt */
#sektion1 input#check01 {
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}
 /* Auswahl-Container (Alter und Stadtumgebung) */
#auswahl-container {
    display: flex;
    flex-direction: column; /* Alter und Stadtumgebung nebeneinander */
    flex-wrap: nowrap; /* Kein Umbruch innerhalb von #auswahl-container */
    gap: 20px; /* Abstand zwischen Alter und Stadtumgebung */
    width: auto; /* Breite automatisch anpassen */
    position: relative;
    float: none; /* Float entfernen */
}

/* Altersortierung */
#altersortierung {
    flex: 0 0 auto; /* Nimmt nur den nötigen Platz ein */
    margin-right: 0; /* Margin durch gap ersetzt */
}

/* Stadtumgebung */
#stadtumgebung {
    display: flex;
        flex-direction: column;
    flex: 0 0 auto; /* Nimmt nur den nötigen Platz ein */
    position: relative;
    transition: margin-top 0.5s ease-in-out; /* Bestehende Animation beibehalten */
    width: auto; /* Breite automatisch anpassen */
    min-width: 0; /* Min-Width zurücksetzen */
}
#stadtumgebung {
    position: relative;
}
/*############################ UMWELT  ####################*/

#sektion1 #stadtumgebung {
    width: 22%;
    
    position: relative;
  /*  background: rgba(83,3,229,0.80); */
    z-index: 41; /* Höher als das Submenu */
}

#stadtsuchemenu {
    float: left;
}

#umgebung {
    float: left;
}
#musisch {
    float: left;
    position: relative;
}

#sport {
    float: left;
    position: relative;
}
#weitere {
    float: left;
    position: relative;
}
.punkte {
    text-align: center;
    padding-left: 0%;
    float: left;
    padding-bottom: 0px;
    padding-top: 0px;
    width: 212px;
    margin-left: 1vh;
}
.punkte2 {
    text-align: center;
    padding-left: 0%;
    float: left;
    padding-bottom: 0px;
    padding-top: 0px;
    width: 212px;
    margin-left: 1vh;
    margin-top: -22px;
}

.punkte3 {
    text-align: center;
    padding-left: 0%;
    float: right;
    padding-bottom: 0px;
    padding-top: 0px;
    width: 212px;
    margin-left: 1vh;
    position: relative;
}

input[name="su"] {
    position: absolute;
    visibility: hidden;
}

input[name="a"] {
    position: absolute;
    visibility: hidden;
}

/*############################ UMWELT ENDE ####################*/

/*------------------------   popup                      ---------------------*/


.standort-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  /*  padding: 10px;*/
}

.standort-input input[type="text"] {
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    color: #333 !important;
    caret-color: #333;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 3px;
    background-color: hsla(0, 0%, 100%, 0.9);
    width: 100%; /* Volle Breite */
    max-width: 300px; /* Optional: Maximale Breite begrenzen */
    padding: 5px;
    box-sizing: border-box;
    white-space: pre-wrap; /* Textumbruch erlauben */
    word-wrap: break-word; /* Lange Wörter umbrechen */
    min-height: 30px; /* Mindesthöhe, damit nichts abgeschnitten wird */
}

.standort-input input[type="text"]::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}

.standort-input #standort {
    width: 100%;
    max-width: none;
    text-align: center;
    white-space: pre-wrap; /* Textumbruch für Ausgabe */
    word-wrap: break-word;
    padding: 5px;
    box-sizing: border-box;
}

.standort-input button {
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: 1px solid #ddd;
    /*border-radius: 3px; */
    background-color: hsla(0, 0%, 100%, 0.44);
    color: rgba(255, 255, 255, 1.00);
    cursor: pointer;
    transition: background 0.3s;
}

.standort-input button:hover {
    background-color: hsla(0, 0%, 100%, 0.57);
}

#map-popup {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#map-overlay {
    transition: opacity 0.3s ease; /* Sanfte Einblendung */
}

#map-popup {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999;
}

.standort-input button#confirm-map {
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: hsla(0, 0%, 100%, 0.44);
    color: rgba(255, 255, 255, 1.00);
    cursor: pointer;
    transition: background 0.3s;
    padding: 5px 10px;
}

.standort-input button#confirm-map:hover {
    background-color: hsla(0, 0%, 100%, 0.57);
}

/*-----------------------     popup ENDE                ---------------------*/

/*----------------------         Regler Radius           --------------------*/

/*-- CSS für die Submenüs --*/






.standort-submenu, .umkreis-submenu {
    position: absolute;
    padding: 10px;
    z-index: 30;
    transition: all 0.3s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  /*  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
}

.standort-submenu {
    top: -130px;
    left: 470px;
    width: 300px;
}

.umkreis-submenu {
    top: -120px;
    left: 800px;
    width: 250px;
}


.standort-input,
.umkreis-input {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
}

.umkreis-input {
    align-items: center; /* Umkreis bleibt zentriert */
}

.standort-input {
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}


#stadtumgebung label.button_menu {
    flex: 0 0 auto;
    width: 25%;
    min-width: 200px;
    max-width: 250px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    text-align: center;
    background-color: rgba(255, 255, 255, 1.00);
    float: none; /* Float entfernen, falls vorhanden */
    margin-left: 2%; /* Margin zurücksetzen, um unerwartete Abstände zu vermeiden */
}
#stadtumgebung label.button_menu {
    cursor: pointer;
    width: 25%;
    min-width: 200px;
    max-width: 250px;
    color: rgba(255,255,255,1.00);
    text-align: center;
    transition: background 0.3s;
    float: left;
    height: 40px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    margin-left: 2%;
    vertical-align: middle;
    padding-top: 1em;
    padding-bottom: 2.5em;
    margin-bottom: 10px;
    position: relative;
    box-sizing: border-box;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
}





/* Initial ausblenden */


#stadtumgebung label.button_menu, /* Standort und Umkreis */
#richtung label.button, /* Musisch und Sport */
#richtung label.buttonweiter /* Weitere */ {
    display: none;
}

/* Alter-Button immer sichtbar */
#altersortierung ul#alterbutton {
    display: block !important;
}

/* Klasse für sichtbare Buttons */
#stadtumgebung label.button_menu.visible,
#richtung label.button.visible,
#richtung label.buttonweiter.visible {
    display: block;
}

/* Alters-Anzeige: kein weißes Input-Feld — gehört zum Regler-Layout */
#inputreglerposition {
    overflow: visible;
}

.alters-regler-titel {
    position: absolute;
    top: -1.35em;
    left: 50%;
    transform: translateX(10%);
    margin: 0;
    padding: 0;
    font-size: 1.04rem;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    line-height: 1.2;
    z-index: 5;
    width: max-content;
    max-width: none;
}

#inputreglerposition #alterOutput.alter-display-input,
#output #alterOutput.alter-display-input {
    width: auto;
    min-width: 7.5em;
    max-width: 12em;
}

#inputreglerposition #alterOutput,
#output #alterOutput {
    display: inline-block;
    width: calc(1.5em + 10px);
    min-width: 0;
    max-width: calc(2em + 10px);
    margin: 0 0.1em;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: thin solid hsla(121, 97%, 77%, 1) !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    font: inherit;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

#inputreglerposition #alterOutput::-webkit-outer-spin-button,
#inputreglerposition #alterOutput::-webkit-inner-spin-button,
#output #alterOutput::-webkit-outer-spin-button,
#output #alterOutput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Begrenzter Hinweis-Puls: weiches Außen-Glühen (kein harter Rahmen) */
@keyframes ki-hint-glow {
    0%, 100% {
        filter:
            drop-shadow(0 0 2px rgba(255, 255, 255, 0.28))
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.14));
        box-shadow:
            0 0 4px 0 rgba(255, 255, 255, 0.18),
            0 0 10px 2px rgba(255, 255, 255, 0.08);
    }
    50% {
        filter:
            drop-shadow(0 0 3px rgba(255, 255, 255, 0.85))
            drop-shadow(0 0 8px rgba(255, 255, 255, 0.45))
            drop-shadow(0 0 14px rgba(255, 255, 255, 0.22));
        box-shadow:
            0 0 6px 1px rgba(255, 255, 255, 0.45),
            0 0 14px 4px rgba(255, 255, 255, 0.22),
            0 0 22px 8px rgba(255, 255, 255, 0.1);
    }
}

/* Glow an der äußeren Button-Kante (Alter = ul#alterbutton) */
#alterbutton.ki-hint-pulse,
#stadtsuchemenu.ki-hint-pulse,
#umkreismenu.ki-hint-pulse,
#richtung.ki-hint-pulse {
    position: relative;
    z-index: 2;
    overflow: visible !important;
    animation: ki-hint-glow 0.7s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    #alterbutton.ki-hint-pulse,
    #stadtsuchemenu.ki-hint-pulse,
    #umkreismenu.ki-hint-pulse,
    #richtung.ki-hint-pulse {
        animation: none;
    }
}

/* Standort: Block in der Mitte — Typo zentriert über der Button-Spalte (nicht über a/b/c) */
.standort-kopf,
.standort-option {
    display: grid;
    grid-template-columns: 1.75em minmax(0, 280px);
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    width: 100%;
    margin: 0 auto 12px;
}

.standort-kopf {
    align-items: start;
    margin-bottom: 10px;
}

.standort-kopf-spacer {
    grid-column: 1;
    visibility: hidden;
}

.standort-kopf-inhalt {
    grid-column: 2;
    width: 100%;
    text-align: center;
}

.standort-optionen-titel {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.35;
    text-align: center;
    width: 100%;
}

.standort-optionen-hinweis {
    display: block;
    margin-top: 0.1em;
    font-size: 0.88em;
    font-weight: 300;
    line-height: 1.35;
}

.standort-kopf-inhalt #standort {
    width: 100%;
    max-width: none;
    text-align: center;
    margin-top: 8px;
    padding: 5px 0;
    box-sizing: border-box;
}

.standort-option {
    row-gap: 4px;
    text-align: center;
}

.standort-option-label {
    grid-column: 1;
    justify-self: end;
    font-weight: 400;
    color: #fff;
    line-height: 1.4;
}

.standort-option .standort-option-body {
    grid-column: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.standort-option label[for="standort-manual"] {
    display: block;
    font-size: 12px;
    margin: 0;
    text-align: center;
    width: 100%;
}

.standort-option .standort-option-body input[type="text"] {
    width: 100%;
    max-width: 280px;
}







#unteruppefloatrechts .sortiert {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#untergruppefloatrechts .sortiert button {
    flex: 0 0 auto;
}

#radius {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 10px;
    height: 250px;
    border-radius: 50%;
    background-color: hsla(121,97%,77%,1.00); /* Gleiche Farbe wie Altersregler */
    -webkit-appearance: none;
    position: relative;
    margin: 10px 0;
    z-index: 30;
}

#radius::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    background: #0075ff; /* Angepasste Farbe */
    border-radius: 50%;
    cursor: pointer;
}

#radius::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #0075ff; /* Angepasste Farbe */
    border-radius: 50%;
    cursor: pointer;
}

/* Sicherstellen, dass der Griff auch im Ruhezustand die richtige Farbe hat */
#radius::-webkit-slider-thumb:not(:active) {
    background: #0075ff;
}

#radius::-moz-range-thumb:not(:active) {
    background: #0075ff;
}

/* Altersregler-Punkt (Thumb) – analog zu #radius */
#groesse::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #0075ff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

#groesse::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #0075ff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Hinweis-Glow auf dem Regler-Punkt (Thumb), wenn Alter/Umkreis geöffnet */
@keyframes ki-hint-thumb-glow {
    0%, 100% {
        box-shadow:
            0 0 3px 1px rgba(255, 255, 255, 0.25),
            0 0 6px 2px rgba(0, 117, 255, 0.35);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 6px 2px rgba(255, 255, 255, 0.95),
            0 0 12px 4px rgba(0, 117, 255, 0.75),
            0 0 18px 7px rgba(255, 255, 255, 0.35);
        transform: scale(1.25);
    }
}

#groesse.ki-hint-thumb-pulse::-webkit-slider-thumb,
#radius.ki-hint-thumb-pulse::-webkit-slider-thumb {
    animation: ki-hint-thumb-glow 0.7s ease-in-out;
}

#groesse.ki-hint-thumb-pulse::-moz-range-thumb,
#radius.ki-hint-thumb-pulse::-moz-range-thumb {
    animation: ki-hint-thumb-glow 0.7s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    #groesse.ki-hint-thumb-pulse::-webkit-slider-thumb,
    #radius.ki-hint-thumb-pulse::-webkit-slider-thumb,
    #groesse.ki-hint-thumb-pulse::-moz-range-thumb,
    #radius.ki-hint-thumb-pulse::-moz-range-thumb {
        animation: none;
    }
}

#radius-value {
    text-align: center;
    display: inline-block;
    color: rgba(255,255,255,1.00);
}

#radius-output {
    position: absolute;
    top: 50%;
    left: 160px; /* Angepasst, um im sichtbaren Bereich zu bleiben */
    width: auto;
    min-width: 50px;
    transform: translateY(-50%);
    font-size: 14px;
    white-space: nowrap;
    padding-right: 10px;
    border-bottom: thin solid hsla(121, 97%, 77%, 1.00);
    color: rgba(255,255,255,1.00);
}

#radius-output #radius-value {
    display: inline-block;
    width: calc(1.5em + 10px);
    min-width: 0;
    max-width: calc(2.5em + 10px);
    margin: 0 0.1em 0 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    font: inherit;
    line-height: inherit;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

#radius-output #radius-value::-webkit-outer-spin-button,
#radius-output #radius-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#radius-output #radius-value:focus {
    outline: none;
    background: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

#radius-label {
    position: absolute;
    top: 10px;
    left: 160px; /* Wie in deiner Version */
    font-size: 12px;
    white-space: nowrap;
    padding-right: 10px;
   color: rgba(255,255,255,1.00);
}

/* Styling für die Tick-Markierungen */
.radius-wrapper {
    position: relative;
    height: 250px; /* Höhe des Sliders */
    width: 60px; /* Extra Platz für Beschriftungen */
}

.radius-ticks {
    position: absolute;
    left: 10px; /* Rechts vom Regler */
    height: 250px; /* Gleiche Höhe wie der Slider */
   /* width: 10px; */
    width: 30px;
    top: 0px;
    z-index: 10; /* Sicherstellen, dass die Ticks sichtbar sind */
}

.radius-ticks .tick {
    position: absolute;
    width: 10px;
    height: 2px;
    background: white;
    left: 0;
    display: block; /* Sicherstellen, dass die Ticks sichtbar sind */
}

/* Positionierung der Ticks basierend auf dem Detail-Screenshot */
.radius-ticks .tick[data-value="0.5"] {
    bottom: -5px; /* 0.5 km */
}

.radius-ticks .tick[data-value="1"] {
    bottom: 16px; /* 1 km */
}

.radius-ticks .tick[data-value="5"] {
    bottom: 115px; /* 5 km */
}

.radius-ticks .tick[data-value="10"] {
    bottom: 135px; /* 10 km */
}

.radius-ticks .tick[data-value="50"] {
    bottom: 237px; /* 50 km */
}


/* Beschriftungen hinzufügen */
.radius-ticks .tick::before { /* ::before statt ::after, um links zu platzieren */
    content: attr(data-value) " km"; /* Fügt den Wert und "km" hinzu */
    position: absolute;
    right: 25px; /* Links vom Strich */
    transform: translateY(-50%); /* Vertikal zentrieren */
    font-size: 12px;
    color: rgba(255, 255, 255, 1.00);
    white-space: nowrap;
}




#suchen {
    width: 25%;
    min-width: 200px;
    margin-left: 2%;
    float: left;
}

.standort-input label, .umkreis-input label {
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    color: rgba(255,255,255,1.00);
}

.standort-input #standort {
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    color: rgba(255,255,255,1.00);
    white-space: pre-wrap; /* Erlaubt Zeilenumbrüche */
}

.standort-input button {
    padding: 5px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
     /*border: 1px solid #ddd;
    border-radius: 3px; */
    background-color: hsla(0,0%,100%,0.44);
    color: rgba(255,255,255,1.00);
    cursor: pointer;
    transition: background 0.3s;
}

.standort-input button:hover {
    background-color: hsla(0,0%,100%,0.57);
}


/*----------------------       Regler Radius ENDE        --------------------*/

/* Media Query für kleine Bildschirme */
@media (max-width: 768px) {
    #auswahl-container {
        flex-direction: column;
    }

    #altersortierung {
        width: 100%;
    }

    #stadtumgebung {
        width: 100%;
        margin-top: 0; /* Standardmäßig kein Abstand */
    }

   /*s #sektion1 #alterbutton .submenu {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        margin-top: 10px;
    }*/
	/* Submenu nur für den Alter-Button */
#sektion1 #alterbutton .submenu {
    max-height: 0;
   /* padding: 0; */
    list-style-type: none;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0;
    position: absolute;
    min-width: 100%;
    z-index: 40;
    left: 79px;
    width: 360px;
    top: 0px;  /* ursprünglich -40px */
}

    input[type="range"].vertikal {
        position: relative;
        left: 0;
        transform: none;
        margin: 0 auto;
        display: block;
		z-index: 100;
    }

    .punkte {
        width: 100%;
        text-align: center;
    }

    #stadtsuchemenu, #umgebung {
        width: 48%;
        margin-left: 1%;
        float: left;
    }
}
/* Submenu nur für den Alter-Button */
/*#sektion1 #alterbutton .submenu {
    max-height: 0;
    padding: 0;
    /*overflow: hidden;*/
/*    list-style-type: none;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    opacity: 0;
    position: absolute;
    min-width: 100%;
    z-index: 40;
    left: 279px;
    width: 360px;
    top: -40px;
}*/



/* Media Query für kleine Bildschirme */
@media (max-width: 768px) {
    #sektion1 #alterbutton .submenu {
	position: relative; /* Ändert von absolut zu relativ */
	left: -60px; /* Entfernt die horizontale Verschiebung */
	/*  top: 10;  Positioniert es direkt unter dem Alter-Button */
	width: 100%; /* Passt die Breite an */
	margin-top: 80px; /* Fügt etwas Abstand hinzu */
	
    }
	input[type="range"].vertikal {
        position: relative; /* Ändert von absolut zu relativ */
        left: 0;
        transform: none; /* Entfernt die Zentrierung */
        margin: 0 auto; /* Zentriert den Regler horizontal */
        display: block; /* Stellt sicher, dass der Regler korrekt floatet */
		
    }
	#output {
		font-size: 12px;
	}
/*
    label#n1, label#n2 {
        left: 0; /* Passt die Position der Labels an */
   /*     transform: none; /* Entfernt die horizontale Verschiebung */
    /*    text-align: center; /* Zentriert die Labels */
    /*    width: 100%; /* Stellt sicher, dass die Labels die volle Breite nutzen */
   /* }*/
}
	
/* Optional: Hover-Effekt */
#alterbutton:hover {
    background-color: hsla(0,0%,100%,0.57);
}

#check01:checked ~ #alterbutton {
    background-color: hsla(0,0%,100%,0.57);
}

/* Suche */


#alterbutton {
    position: relative;
    overflow: visible;
}




#richtung {
    width: 100%;
    min-height: 79px;
    padding-top: 35px;
    position: relative;
    float: left;
    display: none;
    margin-bottom: 4em;
	/*overflow: hidden; */
}


#richtung3 {
    float: right;    
}
#richtung2 {
  float: left
}

#alterbutton .submenu,
#richtung,
#richtung2,
#richtung3,
#punkteuebergang,
#punkteuebergangsp {
    display: none;
    max-height: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Container für Richtung 2 und 3 */
#richtung2, #richtung3 {
    width: 100%;
    clear: both;
    box-sizing: border-box;
 /*   float: left; /* Float: right entfernen, um konsistenten Fluss zu gewährleisten */
    min-height: 79px;
    position: relative;
    margin-top: 101px;
    display: none;
    margin-bottom: 4em;
    top: -4em;
}

/* Punkte-Container */
#punkteuebergang,
#punkteuebergangsp {
    position: absolute;
    top: 100%; /* Startet unter "Weitere" */
    left: 45%; /* Verschoben nach links */
    transform: translateX(-50%);
    z-index: 10;
}


/*

#punkteuebergang {
    position: relative;
    left: 202px;
    top: -45px;
    display: none;
}

#punkteuebergangsp {
    position: relative;
    left: 202px;
    top: -45px;
    display: none;
}  */


/* Basis-Punkt-Styling */
#punkteuebergang .punkt,
#punkteuebergangsp .punkt,
#punkteuebergangweiter .punkt
{
    width: 6px;
    height: 6px;
    background-color: #FFFFFF;
    border-radius: 50%;
    position: absolute;
}



/* Vertikale Punkte für Musisch (8 Punkte, keine Horizontalen) */
#punkteuebergang .vertikal-punkt-1 {
    left: 0;
    top: 0;
}
#punkteuebergang .vertikal-punkt-2 {
    left: 0;
    top: 14px;
}
#punkteuebergang .vertikal-punkt-3 {
    left: 0;
    top: 28px;
}
#punkteuebergang .vertikal-punkt-4 {
    left: 0;
    top: 42px;
}
#punkteuebergang .vertikal-punkt-5 {
    left: 0;
    top: 56px;
}
#punkteuebergang .vertikal-punkt-6 {
    left: 0;
    top: 70px;
}
#punkteuebergang .vertikal-punkt-7 {
    left: 0;
    top: 84px;
}
#punkteuebergang .vertikal-punkt-8 {
    left: 0;
    top: 98px;
}

#punkteuebergang .vertikal-punkt-9 {
    left: 0;
    top: 112px;
}
#punkteuebergang .vertikal-punkt-10 {
    left: 0;
    top: 126px;
}
#punkteuebergang .vertikal-punkt-11 {
    left: 0;
    top: 140px;
}

#punkteuebergang .vertikal-punkt-12 {
    left: 0;
    top: 154px;
}
#punkteuebergang .vertikal-punkt-13 {
    left: 0;
    top: 168px;
}



/* Horizontale Punkte für Sport (6 Punkte, einheitlicher 14px Abstand mit Abstand zum Winkel) */
#punkteuebergang .horizontal-punkt-1 {
    right: 8px; /* Minimaler Abstand zum letzten vertikalen Punkt */
    top: 168px;
}
#punkteuebergang .horizontal-punkt-2 {
    right: 22px; /* 8 + 14px */
    top: 168px;
}
#punkteuebergang .horizontal-punkt-3 {
    right: 36px; /* 22 + 14px */
    top: 168px;
}
#punkteuebergang .horizontal-punkt-4 {
    right: 50px; /* 36 + 14px */
    top: 168px;
}
#punkteuebergang .horizontal-punkt-5 {
    right: 64px; /* 50 + 14px */
    top: 168px;
}
#punkteuebergang .horizontal-punkt-6 {
    right: 78px; /* 64 + 14px, ca. 15px Abstand zu "Sport" */
    top: 168px;
}


/* Vertikale Punkte für Sport (16 Punkte) */
#punkteuebergangsp .vertikal-punkt-1 {
    left: 0;
    top: 0;
}
#punkteuebergangsp .vertikal-punkt-2 {
    left: 0;
    top: 14px;
}
#punkteuebergangsp .vertikal-punkt-3 {
    left: 0;
    top: 28px;
}
#punkteuebergangsp .vertikal-punkt-4 {
    left: 0;
    top: 42px;
}
#punkteuebergangsp .vertikal-punkt-5 {
    left: 0;
    top: 56px;
}
#punkteuebergangsp .vertikal-punkt-6 {
    left: 0;
    top: 70px;
}
#punkteuebergangsp .vertikal-punkt-7 {
    left: 0;
    top: 84px;
}
#punkteuebergangsp .vertikal-punkt-8 {
    left: 0;
    top: 98px;
}
#punkteuebergangsp .vertikal-punkt-9 {
    left: 0;
    top: 112px;
}
#punkteuebergangsp .vertikal-punkt-10 {
    left: 0;
    top: 126px;
}
#punkteuebergangsp .vertikal-punkt-11 {
    left: 0;
    top: 140px;
}
#punkteuebergangsp .vertikal-punkt-12 {
    left: 0;
    top: 154px;
}
#punkteuebergangsp .vertikal-punkt-13 {
    left: 0;
    top: 168px;
}
#punkteuebergangsp .vertikal-punkt-14 {
    left: 0;
    top: 182px;
}
#punkteuebergangsp .vertikal-punkt-15 {
    left: 0;
    top: 196px;
}
#punkteuebergangsp .vertikal-punkt-16 {
    left: 0;
    top: 210px;
}

/* Horizontale Punkte für Sport (6 Punkte, einheitlicher 14px Abstand mit Abstand zum Winkel) */
#punkteuebergangsp .horizontal-punkt-1 {
    right: 8px; /* Minimaler Abstand zum letzten vertikalen Punkt */
    top: 168px;
}
#punkteuebergangsp .horizontal-punkt-2 {
    right: 22px; /* 8 + 14px */
    top: 168px;
}
#punkteuebergangsp .horizontal-punkt-3 {
    right: 36px; /* 22 + 14px */
    top: 168px;
}
#punkteuebergangsp .horizontal-punkt-4 {
    right: 50px; /* 36 + 14px */
    top: 168px;
}
#punkteuebergangsp .horizontal-punkt-5 {
    right: 64px; /* 50 + 14px */
    top: 168px;
}
#punkteuebergangsp .horizontal-punkt-6 {
    right: 78px; /* 64 + 14px, ca. 15px Abstand zu "Sport" */
    top: 168px;
}


#punkteuebergangsp .horizontal-punkt-7 {
    right: 92px; /* Minimaler Abstand zum letzten vertikalen Punkt */
    top: 168px;
}
#punkteuebergangsp .horizontal-punkt-8 {
    right: 104px; /* 8 + 14px */
    top: 168px;
}
#punkteuebergangsp .horizontal-punkt-9 {
    right: 118px; /* 22 + 14px */
    top: 168px;
}








/* weitere punkte */

/* Vertikale Punkte für Sport (16 Punkte) */
#punkteuebergangweiter .vertikal-punkt-1 {
    left: 0;
    top: 0;
}
#punkteuebergangweiter .vertikal-punkt-2 {
    left: 0;
    top: 14px;
}
#punkteuebergangweiter .vertikal-punkt-3 {
    left: 0;
    top: 28px;
}
#punkteuebergangweiter .vertikal-punkt-4 {
    left: 0;
    top: 42px;
}
#punkteuebergangweiter .vertikal-punkt-5 {
    left: 0;
    top: 56px;
}
#punkteuebergangweiter .vertikal-punkt-6 {
    left: 0;
    top: 70px;
}
#punkteuebergangweiter .vertikal-punkt-7 {
    left: 0;
    top: 84px;
}
#punkteuebergangweiter .vertikal-punkt-8 {
    left: 0;
    top: 98px;
}
#punkteuebergangweiter .vertikal-punkt-9 {
    left: 0;
    top: 112px;
}
#punkteuebergangweiter .vertikal-punkt-10 {
    left: 0;
    top: 126px;
}
#punkteuebergangweiter .vertikal-punkt-11 {
    left: 0;
    top: 140px;
}
#punkteuebergangweiter .vertikal-punkt-12 {
    left: 0;
    top: 154px;
}
#punkteuebergangweiter .vertikal-punkt-13 {
    left: 0;
    top: 168px;
}
#punkteuebergangweiter .vertikal-punkt-14 {
    left: 0;
    top: 182px;
}
#punkteuebergangweiter .vertikal-punkt-15 {
    left: 0;
    top: 196px;
}
#punkteuebergangweiter .vertikal-punkt-16 {
    left: 0;
    top: 210px;
}

/* Horizontale Punkte für Sport (6 Punkte, einheitlicher 14px Abstand mit Abstand zum Winkel) */
#punkteuebergangweiter .horizontal-punkt-1 {
    right: 8px; /* Minimaler Abstand zum letzten vertikalen Punkt */
    top: 168px;
}
#punkteuebergangweiter .horizontal-punkt-2 {
    right: 22px; /* 8 + 14px */
    top: 168px;
}
#punkteuebergangweiter .horizontal-punkt-3 {
    right: 36px; /* 22 + 14px */
    top: 168px;
}
#punkteuebergangweiter .horizontal-punkt-4 {
    right: 50px; /* 36 + 14px */
    top: 168px;
}
#punkteuebergangweiter .horizontal-punkt-5 {
    right: 64px; /* 50 + 14px */
    top: 168px;
}
#punkteuebergangweiter .horizontal-punkt-6 {
    right: 78px; /* 64 + 14px, ca. 15px Abstand zu "Sport" */
    top: 168px;
}


#punkteuebergangweiter .horizontal-punkt-7 {
    right: 92px; /* Minimaler Abstand zum letzten vertikalen Punkt */
    top: 168px;
}
#punkteuebergangweiter .horizontal-punkt-8 {
    right: 104px; /* 8 + 14px */
    top: 168px;
}
#punkteuebergangweiter .horizontal-punkt-9 {
    right: 118px; /* 22 + 14px */
    top: 168px;
}
#punkteuebergangweiter {
    position: absolute;
    top: 100%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 10;
}

/* Vertikale Punkte für Weitere */
#punkteuebergangweiter .vertikal-punkt-1  { left: 0; top: 0; }
#punkteuebergangweiter .vertikal-punkt-2  { left: 0; top: 14px; }
#punkteuebergangweiter .vertikal-punkt-3  { left: 0; top: 28px; }
#punkteuebergangweiter .vertikal-punkt-4  { left: 0; top: 42px; }
#punkteuebergangweiter .vertikal-punkt-5  { left: 0; top: 56px; }
#punkteuebergangweiter .vertikal-punkt-6  { left: 0; top: 70px; }
#punkteuebergangweiter .vertikal-punkt-7  { left: 0; top: 84px; }
#punkteuebergangweiter .vertikal-punkt-8  { left: 0; top: 98px; }
#punkteuebergangweiter .vertikal-punkt-9  { left: 0; top: 112px; }
#punkteuebergangweiter .vertikal-punkt-10 { left: 0; top: 126px; }
#punkteuebergangweiter .vertikal-punkt-11 { left: 0; top: 140px; }
#punkteuebergangweiter .vertikal-punkt-12 { left: 0; top: 154px; }
#punkteuebergangweiter .vertikal-punkt-13 { left: 0; top: 168px; }

/* Horizontale Punkte für Weitere (falls gewünscht) */
#punkteuebergangweiter .horizontal-punkt-1 { right: 8px;  top: 168px; }
#punkteuebergangweiter .horizontal-punkt-2 { right: 22px; top: 168px; }
#punkteuebergangweiter .horizontal-punkt-3 { right: 36px; top: 168px; }
#punkteuebergangweiter .horizontal-punkt-4 { right: 50px; top: 168px; }
#punkteuebergangweiter .horizontal-punkt-5 { right: 64px; top: 168px; }
#punkteuebergangweiter .horizontal-punkt-6 { right: 78px; top: 168px; }

/* Responsive */
@media (max-width: 430px) {
    #punkteuebergang,
    #punkteuebergangsp {
        left: 50%;
        transform: translateX(-50%);
    }
    #punkteuebergang .horizontal-punkt-1,
    #punkteuebergangsp .horizontal-punkt-1,
    #punkteuebergang .horizontal-punkt-2,
    #punkteuebergangsp .horizontal-punkt-2,
    #punkteuebergang .horizontal-punkt-3,
    #punkteuebergangsp .horizontal-punkt-3,
    #punkteuebergang .horizontal-punkt-4,
    #punkteuebergangsp .horizontal-punkt-4,
    #punkteuebergang .horizontal-punkt-5,
    #punkteuebergangsp .horizontal-punkt-5,
    #punkteuebergang .horizontal-punkt-6,
    #punkteuebergangsp .horizontal-punkt-6,
    #punkteuebergang .horizontal-punkt-7,
    #punkteuebergangsp .horizontal-punkt-7 {
        display: none; /* Horizontale weg */
    }
}





#musik, #kunst, #litheratur {
    height: 57px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 2em;
    padding-left: 2em;
    text-align: center;
    margin-left: 3%;
   /* min-width: 170px; */
	min-width: 202px;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 25%;
    float: left;
	box-sizing: border-box;
}
/*#kunst {
    height: 57px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    margin-left: 2%;
    min-width: 170px;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 26%;
    float: left;
}
#litheratur {
    height: 57px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    margin-left: 2%;
    min-width: 170px;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 26%;
    float: left;
}
*/
#ballsport, #kampfsport, #reitsport, #tanzsport, #wasserspor, #weiteresportarten {
    height: 57px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    margin-left: 2%;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 30%; /* Erhöht für längere Texte */
    float: left;
    min-width: 250px; /* Erhöht für längere Texte */
    box-sizing: border-box;
}
/* Media Query für kleinere Bildschirme */
@media (max-width: 768px) {
    #musik, #kunst, #litheratur, #ballsport, #kampfsport, #reitsport, #tanzsport, #wasserspor, #weiteresportarten {
        width: 48%;
        min-width: 230px;
        margin-left: 1%;
    }
}
/*
#kampfsport {
    height: 57px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    margin-left: 2%;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 26%;
    float: left;
    min-width: 230px;
}

#reitsport {
    height: 57px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    margin-left: 2%;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 26%;
    float: left;
    min-width: 230px;
}

#tanzsport {
    height: 57px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    margin-left: 2%;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 26%;
    float: left;
    min-width: 230px;
}
#wasserspor {
    height: 57px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    margin-left: 2%;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 26%;
    float: left;
    min-width: 230px;
}
#weiteresportarten {
    height: 57px;
    background-color: hsla(0,0%,100%,0.44);
    padding-right: 1em;
    padding-left: 1em;
    text-align: center;
    margin-left: 2%;
    vertical-align: middle;
    padding-top: 1em;
    margin-bottom: 10px;
    font-family: titling-gothic-fb-extended, sans-serif;
    font-style: normal;
    font-weight: 100;
    border: none;
    font-size: 1em;
    width: 26%;
    float: left;
    min-width: 230px; 
}
#platzhalterpunkte {
    background-color: rgba(235,243,151,0.76);
    float: left;
    height: 56px;
    width: 212px;
    position: relative;
	margin-left: 1vh;
}*/


/* Responsive: Untereinander bei kleinerem Bildschirm */
@media (max-width: 1000px) {
    #sektion1 {
        flex-direction: column; /* Untereinander im Mobile-Modus */
        gap: 10px;
    }

    #auswahl-container {
        flex-direction: column; /* Bereits so eingestellt */
        gap: 10px;
    }

    #altersortierung {
        width: 100%; /* Volle Breite im Mobile-Modus */
    }

    #stadtumgebung {
        width: 100%; /* Volle Breite im Mobile-Modus */
    }

    #stadtumgebung label.button_menu {
      /*  width: 100%; /* Volle Breite für die Buttons */
        float: none; /* Float entfernen */
        margin-left: 2%; /* Margin zurücksetzen */
    }

    #richtung {
        flex-direction: column; /* Musisch/Sport/Weitere untereinander */
        gap: 10px;
        margin-left: -2%;
    }

   /* #richtung label.button,
    #richtung label.buttonweiter {
        width: 100%; /* Volle Breite im Mobile-Modus */
  /*  }*/

    #sektion1 #alterbutton .submenu,
    .standort-submenu,
    .umkreis-submenu {
        position: relative; /* Im Mobile-Modus relativ, damit sie untereinander rutschen */
        top: 0;
        left: -20px;
      /*  width: 100%;  Volle Breite im Mobile-Modus */
        margin-top: 10px;
    }

    #richtung2,
    #richtung3 {
        flex-direction: column; /* Unterkategorien untereinander */
        gap: 10px;
        margin-top: 20px; /* Abstand anpassen */
        top: 0; /* Top-Offset zurücksetzen */
    }

    /*#untergruppefloatrechts .sortiert button {
        width: 100%; /* Volle Breite im Mobile-Modus */
   /* }*/

    #suchen {
        width: 100%; /* Volle Breite im Mobile-Modus */
        float: none;
    }

    /* Punkte im Mobile-Modus ausblenden */
    .punkte,
    .punkte2 {
        display: none; /* Punkte ausblenden */
    }

    /* Regler im Mobile-Modus anpassen */
    input[type="range"].vertikal {
        position: relative;
        left: 0;
        transform: none;
        margin: 0 auto;
        display: block;
    }
	inputreglerposition{
		z-index: 50;
	}

    #output {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        text-align: center;
        margin-top: 10px;
    }

    label#n1,
    label#n2 {
        position: relative;
        left: 0;
        transform: none;
        text-align: center;
        width: 100%;
    }

    #radius-label,
    #radius-output {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        text-align: center;
        margin-top: 10px;
    }
}

/* Responsive: Untereinander bei kleinerem Bildschirm */
@media (max-width: 1000px) {
    #stadtumgebung {
        flex-direction: column;
		
		 flex-wrap:wrap; 
		margin-top: 100px; 
    }
	
	#ergebnis {
	margin-top: 10em;
		position: relative;
	}
    /* Exakter Wert 625px */
    #stadtumgebung[style="margin-top: 625px;"] {
        margin-top: 360px !important;
    }

    /* Fallback: Jeder inline margin-top >= 600px (falls JS leicht variiert) */
    #stadtumgebung[style*="margin-top: 6"] {
        margin-top: 360px !important;
    }

    /* Absolut sicher: Jeder inline margin-top > 500px (verhindert Überkorrektur) */
    #stadtumgebung {
        margin-top: 360px !important;
    }


    #stadtumgebung label.button_menu {
        
       
        height: 40px;
        line-height: 40px;
        margin-left: 15%; /* Von 2% auf 5% erhöht */
    }
    .submenu {
        left: -40px;
    }

    #richtung {
        flex-direction: column;
        margin-left: 0;
    }

    #richtung 
    #richtung  {

        max-width: none;
        ;
        line-height: 40px;
        margin-left: 15%; /* Von 2% auf 5% erhöht */
    }

    #richtung2 
    #richtung3 {
        
        max-width: none;
        margin-left: 15%; /* Von 2% auf 5% erhöht */
    }
}


.filter-options {
    margin: 20px 0;
    padding: 15px;
	width: 100%;
    
    border: 1px solid #fff;
}

.filter-options h3 {
    margin: 0 0 10px;
    font-size: 1.2em;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.filter-group label {
    margin-right: 15px;
    font-size: 0.9em;
}

.filter-group select {
    padding: 5px;
    font-size: 0.9em;
   /* border-radius: 4px;*/
    border: 1px solid #fff;
}

.course-info .status {
	font-style: italic;
	color: hsla(129, 89%, 61%, 1.00);
	margin-left: 10px;
	font-weight: bold;	
}

#ergebnis.kurs-suche-loading {
	min-height: 140px;
	overflow: hidden;
	visibility: hidden;
}