#mapid {
            height: 40dvh;
            width: 100%;
            border: 1px solid #ccc;
            transition: all 0.4s ease;
        }

        .overlay #mapid {
            z-index: 1;
            height: 100dvh;
            position: fixed;
            top: 0;
        }

        .map-container {
            display: flex;
            height: 100%;
            color: #fff;
            width: 100%;
            max-width: 100%;
            margin: 0px auto;
            padding: 0px;
            background-color: #000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            flex-direction: column;
        }

        .map-header {
            position:fixed;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            /* color: #333!important; */
            backdrop-filter: blur(8px);
            left: 0;
            width: 100%;
            top: 0;
            z-index: 9;
            background-color: rgba(42,59,82,.8);
        }

        .plz-input-container {
            max-width: calc(100% - 60px);
            box-sizing: border-box;
            padding: 0 20px;
            margin-top: 20px;
            display: flex;
            align-items: center;
            position: relative;
        }
        .plz-input-container input[type="text"] {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid var(--rot);
            border-radius: 4px;
            margin-left: 10px;
            color:#fff;
        }

.plz-input-container input[type="text"]::placeholder {
    color:#eee;
}

        .plz-info {
            margin-top: 10px;
            font-weight: bold;
            color: #333;
        }
        .plz-info.available {
            margin-bottom: 10px;
            border-radius: 5px;
            padding: 10px;
            background-color: #008b55;
            color: #fff;
        }
        .plz-info.taken { color: red; }
        .leaflet-marker-icon.taken {
            filter: grayscale(100%); /* Graustufen für belegte Marker */
        }
        .plz-autocomplete-list {
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            background-color: rgba(42,59,82,.8);
            list-style: none;
            padding: 0;
            margin: 0 0 0 20px;
            border: 1px solid #ccc;
            border-top: none;
            /*max-height: 40dvh;*/            overflow-y: auto;
            position: absolute;
            width: calc(100% - 40px);
            z-index: 999999;
            top: 100%;
            left: 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            display: none;
        }

        .plz-autocomplete-list li {
            background-color: rgba(42,59,82,1);
            padding: 8px 10px 8px 20px;
            cursor: pointer;
            border-bottom: 1px solid #eee;
            color: #fff;
        }

        .plz-autocomplete-list li::before {
            content: "";
            position: absolute;
            left: 5px;
            top: 14px;
            width: 11px;
            height: 11px;
            border-radius: 50%;
        }

        .plz-autocomplete-list li.vergeben::before {
            background-color: var(--rot);
        }

        .plz-autocomplete-list li.reserviert::before {
            background-color: #F0AD4E;
        }

        .plz-autocomplete-list li.available::before {
            background-color: #008b55;
        }

        .plz-autocomplete-list li:last-child {
            border-bottom: none;
        }

        .plz-autocomplete-list li.available:hover {
            background-color: var(--bg-button);
        }

        .plz-autocomplete-list li.vergeben, .plz-autocomplete-list li.reserviert {
            color: #999;
            cursor: not-allowed;
            background-color: transparent;
        }

        .plz-autocomplete-list .no-results,
        .plz-autocomplete-list .error-message {
            padding: 10px;
            text-align: center;
            color: #777;
        }

        .btn, .scanner-button {
            cursor: pointer;
            width: fit-content;
            display: block;
            box-sizing: border-box;
            border-radius: 25px;
            padding: 10px 20px;
            color: #fff;
            background-color: var(--rot);
            transition: background-color 0.3s ease;
            text-decoration: none;
            border: 0;  
        }

        .btn:hover, .scanner-button:hover {
            background-color: var(--bg-button);
            color:var(--rot);
            border: 1px solid var(--rot);
            text-decoration: none;
        }

        /* Style für den neuen Button im Container */
        #select-plz-button {
            cursor: pointer;
            font-weight: 600;
            background-color: #008b55;
            margin-left: -10px;
            border: 1px solid #008b55;
            flex-shrink: 0;
            padding: 10px 15px;
            border-radius: 0 20px 20px 0;
            transition: all 0.3s ease;
        }

        #select-plz-button:hover {
            background-color:#fff;
            color:#008b55;
        }

        .close-btn {
            height: 42px;
            width: 40px;
            border-radius: 5px;
            background-color: rgb(36 50 70);
            /* background-color: #000; */
        }

        /* Hilfstext für Feedback */
        #plz-feedback {
            font-size: 0.9em;
        }
        #plz-feedback.taken {
            color: var(--rot);
        }
        #plz-feedback.available {
            font-weight: bold;
            padding: 20px;
            background-color: #fff;
            color: #008b55;
        }

        .innenw1 {
            padding-right:calc((100% - 800px)/2)!important;
            padding-left: calc((100% - 800px)/2)!important;
        }

        .innenw2 {
            padding-right:calc((100% - 1300px)/2)!important;
            padding-left: calc((100% - 1300px)/2)!important;
        }
        div.start.innenw h1 {
            max-width:unset!important;
        }

        .check .start {
            margin:unset!important;
        }

        .hero-section .headline {
            display:none;
            padding-top: 20px;
        }

        .hero-section.overlay .headline {
            display:block;
            padding: 10px 20px 0;
        }

        .overlay #plz-feedback {
            height: 20px; margin-top: 5px;
        }

        .leaflet-popup-content {
            font-size:12px!important;
        }   

        .teardrop-marker {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid white;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            position: relative;
            font-size: 10px;
        }

        /* NEU: Regel für den Text, um ihn ganz nach oben zu bringen */
        .teardrop-marker span {
            position: relative; /* Notwendig für z-index */
            z-index: 2;         /* Ebene 2 (ganz oben) */
        }

        /* GEÄNDERT: Regel für die Spitze */
        .teardrop-marker::after {
            content: '';
            position: absolute;
            bottom: -6px; 
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 16px;
            height: 16px;
            background-color: inherit; /* Farbe vom Elternelement erben */
            border-right: 2px solid white;
            border-bottom: 2px solid white;
            
            /* ÄNDERUNG: Die Spitze liegt jetzt auf Ebene 1 (über dem Kreis, unter dem Text) */
            z-index: 1; 
        }


        /* Die Farb-Klassen bleiben unverändert */
        .teardrop-marker.vergeben {
            background-color: var(--rot);
        }
        .teardrop-marker.available {
            background-color: #5CB85C;
        }
        .teardrop-marker.reserviert {
            background-color: #F0AD4E;
        }

        /* Diese Regeln für die Farbe der Spitze sind jetzt durch "background-color: inherit;" 
        in .teardrop-marker::after überflüssig, schaden aber auch nicht. */
        .teardrop-marker.vergeben::after { background-color: var(--rot); }
        .teardrop-marker.available::after { background-color: #5CB85C; }
        .teardrop-marker.reserviert::after { background-color: #F0AD4E }

        @media (max-width: 1350px) {
            .innenw, .innenw1 {  
                padding-left:4%!important;
                padding-right:4%!important;
            }

            .check .start {
                margin:0 auto!important;
            }
        }

        @media (max-width: 550px) {
            .map-header {  
                padding: 0px;
            }

            .plz-input-container {
                max-width: 100%;
                width:100%;
            }

            .close-btn {
                right: 10px;
                font-size: 30px;
                height: 31px;
                width: 30px;
            }

            .plz-autocomplete-list li {
                padding: 15px 10px 15px 20px;
            }

            .plz-autocomplete-list li::before {
                top: 19px;
            }
        }