@media (max-width: 768px) {
 .fixed-popup {
        position: fixed;
        
font-size: 10pt;
top:2%;
bottom:2%;
        margin: 2%;
        width: auto;       /* automatisch, unter Berücksichtigung der Margins */
        height: auto;
        max-width: calc(100% - 4%);
        max-height: calc(100% - 4%);


        transform: none;
    }
    

    .fixed-popup-header {
        width: 35px;;
min-width: 35px;
    }
.splash-info-content {
padding:20px;
       font-size: 8pt;
}
button.schließeninfobutton {
       top: 10px;
}
.basemaphint {
       left: 70px;
    bottom: 20px;
}
img.changebasemap {
    width: 120px;
}
button#toggleElevation {
       font-weight: normal;
       font-size: 8pt;
}
    .logo {
       display:none;
    }
#contact-button {
      font-size: 10pt;
    width: 90px;
    }
#info-button {
      font-size: 10pt;
    width: 90px;
    }
button#toggle-picture-button{
      font-size: 10pt;
    width: 90px;
    }
    #coordinate-search-container {
        padding: 10px;
        border: 1px solid #fff;
        border-radius: 4px;
        position: absolute;
        top: 31% !important;
        width: 80%;
max-width:260px;
        left: 50% !important;
        transform: translateX(-50%);
        z-index: 1100 !important;
        font-family: Viga-Regular !important;
        background-color: rgb(81, 141, 203) !important;
        color: white !important;
        text-align: center !important;
    }
.leaflet-control-feature-search.expanded {
    width: 100%;
}
.leaflet-control-attribution {
    display: none;
  }
  /* Wenn die Klasse .active hinzugefügt wird, wird die Attribution sichtbar */
  .leaflet-control-attribution.active {
    display: block; /* oder inline-block, je nach Layout */
bottom:30px;
right:30px;
z-Index:1000
  }
button#toggle-attribution {
    display: block;
        position: absolute;
        bottom: 5px;
        background-color: #508cca;
        border: none;
        border-radius: 10px;
        color: white;
        z-Index: 801;
        right: 10px;
}
.leaflet-control-attribution.leaflet-control.active {
            right: 0px;
        max-height: 500px;
        max-width: 150px;
background-color:white;
border-radius:5px;
}
  #toggleElevation {
        font-size: 10pt;      /* Schriftgröße für mobilen View */
        padding: 8px 12px;    /* ggf. kleinere Abstände */
    }
    #mapOverlay {
        font-size: 9pt;      /* Schriftgröße für Overlays anpassen */
 position: absolute;       /* Position fixieren */
        bottom: 100px;          /* 50px Abstand vom unteren Rand */
        right: 10px;             /* horizontal zentrieren */
text-align:center
    }
    #heightDataOverlay{
        font-size: 9pt;      /* Schriftgröße für Overlays anpassen */
 position: absolute;       /* Position fixieren */
        bottom: 70px;          /* 50px Abstand vom unteren Rand */
        right: 10px;             /* horizontal zentrieren */
text-align:center
            }
}