body {
    padding: 0;
    margin: 0;
}
html, body, #mapid {
    height: 100%;
    width: 100%;
}

.marker-description-popup {
    padding: 10px; /* Innerer Abstand für den Inhalt */
    max-width: 250px; /* Oder jede andere Breite, die Sie wünschen */
    font-size: 14px; /* Größe des Textes im Popup */
    line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
    margin: 8px 0; /* Vertikaler Abstand oben und unten */
}

.leaflet-popup-content-wrapper {
    border-radius: 12px; /* Abrunden der Ecken des Popups */
    border: none; /* Entfernen des standardmäßigen Leaflet-Rahmens */
}

.leaflet-popup-content {
    margin: 0; /* Entfernen des standardmäßigen Leaflet-Innenabstands, falls vorhanden */
    padding: 0; /* Kein zusätzlicher Abstand, da dieser bereits durch popup-form gehandhabt wird */
  width: 250px; /* Oder jede andere gewünschte feste Breite */
}

.popup-form {
    font-family: 'Arial', sans-serif;
    margin: 0; /* Entfernt zusätzlichen Abstand um das Formular */
    padding: 10px; /* Gleichmäßiger Innenabstand für das Formular */
    border-radius: 12px; /* Abrunden der Ecken des Formulars */
    background-color: #fff; /* Weiße Hintergrundfarbe für das Formular */
    box-shadow: none; /* Entfernen von Schatten */
}

.popup-form h4 {
    background-color: #007bff; /* Blaue Hintergrundfarbe für den Header */
    color: #fff; /* Weiße Textfarbe für den Header */
    padding: 8px 12px; /* Abstand um den Text im Header */
    margin: -10px -10px 10px -10px; /* Ausgleichen des Formularabstands, damit der Header 'anliegt' */
    border-radius: 8px 8px 0 0; /* Nur die oberen Ecken abrunden */
}

.popup-form form {
    padding: 0; /* Kein zusätzlicher Innenabstand benötigt */
}

.popup-form label {
    display: block; /* Stellt sicher, dass das Label als Block-Element dargestellt wird */
    margin-bottom: 5px; /* Abstand unter dem Label */
}

.popup-form textarea {
    width: calc(100% - 20px); /* Reduziert die Breite, um Padding auszugleichen */
    padding: 10px; /* Innenabstand für das Textfeld */
    border: 1px solid #ddd; /* Leichter Rahmen für das Textfeld */
    border-radius: 4px; /* Ecken des Textfeldes abrunden */
    margin-bottom: 10px; /* Abstand unter dem Textfeld */
    resize: vertical; /* Erlaubt nur vertikales Skalieren des Textfelds */
}

.popup-form button {
    width: 100%; /* Button nimmt die volle Breite des Formulars ein */
    padding: 10px 0; /* Vertikaler Abstand für den Button */
    background-color: #28a745; /* Grüne Hintergrundfarbe für den Button */
    color: #fff; /* Weiße Textfarbe für den Button */
    border: none; /* Kein Rahmen für den Button */
    border-radius: 4px; /* Ecken des Buttons abrunden */
    cursor: pointer; /* Cursor auf 'Klickbar' setzen, wenn man über den Button hovert */
    margin-top: 10px; /* Abstand über dem Button */
}

/* Hinzufügen von Hover-Effekten für den Button */
.popup-form button:hover {
    background-color: #218838; /* Dunklerer Grüner Ton beim Hover */
}