/* CSS Custom Properties for Dynamic Viewport */
:root {
    --vh: 1vh;
    --sat: env(safe-area-inset-top);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
    --sar: env(safe-area-inset-right);
    /* Consistent spacing between menu button and storm switcher */
    --menu-button-top: 20px;
    --storm-switcher-top: 80px;
    --menu-storm-gap: 10px; /* Fixed gap between elements */

    
}

/* Animation keyframes */
@keyframes SlideFromRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes SlideFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* Storm Switcher Menu - Statisch und vom rechten Rand */
#storm-switcher {
    opacity: 1; /* 100% opacity */
    z-index: 1000;
    position: absolute !important; /* Innerhalb der Map */
    /* top: var(--storm-switcher-top); 80px von der oberen Kante der Map */
    right: 30px;
    width: 300px;
    height: calc(60 * var(--vh, 1vh)); /* Dynamic viewport height */
    max-height: 400px; /* Maximum for large screens */
    min-height: 250px; /* Minimum for small screens */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: #000 #fff;
    scrollbar-width: 10px;
    display: none;
    flex-direction: column;
    padding: 15px;
    background-color: transparent;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

#mp-menu-btn {
    position: absolute !important; /* Innerhalb der Map */
    top: 20px; /* 20px von der oberen Kante der Map */
    right: 10px;
    margin: 0 !important;
    z-index: 1001; /* Higher than storm-switcher */
    margin-bottom: var(--menu-storm-gap); /* Fixed gap to storm-switcher */
    transition: top 0.3s ease; /* Smooth transition when address bar changes */
}

/* Radar Menu Container - Alle Elemente in einem Container */
.radar-menu-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    left: 0px; /* Hier kannst du experimentieren */
    top: 0px;
    align-items: flex-end; /* Alle Elemente nach rechts ausrichten */
}

/* Menu Drop Items - Hauptkategorien (Radar Sites, Den Helder, Herwijnen) */
.mp-sw-drop, .mp-sw-drop-knmi {
    width: 126px; /* 5% larger than 120px */
    height: 47.19px; /* 7% larger than 44.1px */
    
    min-height: 47.19px;
    max-height: 47.19px;
    background-color: #808080; /* 100% opacity - solid gray */
    color: #000000;
    font-weight: bold;
    padding: 8px;
    cursor: pointer;
    transition: 0.1s;
    border-radius: 10px;
    margin: 3px 0;
    border: 1px solid #000000;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-right: 10px;
    position: relative;
    left: 0px;
}



#mp-sw-wd {
    /* margin-right: 50px; */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 47.19px; /* 7% larger than 44.1px */
    min-height: 47.19px;
    max-height: 47.19px;
    /* position: relative; */
    /* margin-left: 0px; */
}

/* Specific centering for Den Helder and Herwijnen */
.mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 47.19px; /* 7% larger than 44.1px */
    min-height: 47.19px;
    max-height: 47.19px;
    margin-right: 15px;
    position: relative;
    left: 0px;
    /* Fixiere Position damit Button nicht rutscht */
    flex-shrink: 0;
    width: 126px; /* Feste Breite */
}

/* Radar Sites Button - larger for integrated buttons */
.mp-sw-drop.param-icon {
    height: 80px;
    min-height: 80px;
    max-height: 80px;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 8px 12px 8px;
}

.mp-sw-drop.param-icon p {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.1;
}

/* Radar Controls innerhalb des Radar Sites Buttons */
.radar-controls {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
    position: relative;
    z-index: 1001; /* Higher than the Radar Sites Button */
}

.radar-controls .btn {
    padding: 4px 8px;
    font-size: 0.8em;
    background-color: #ffffff; /* 100% opacity - solid white */
    border: 1px solid rgba(0, 0, 0, 0.3);
    color: #000;
    position: relative;
    z-index: 1002; /* Even higher for the buttons themselves */
    cursor: pointer;
}

.radar-controls .btn:hover {
    background-color: #ffffff; /* 100% opacity - solid white */
    border-color: rgba(0, 0, 0, 0.5);
}

/* Den Helder and Herwijnen - larger and bold font */
.mp-sw-drop.temp-icon p, .mp-sw-drop.cloud-icon p {
    font-size: 1.0em;
    font-weight: bold;
    margin: 0;
    padding: 0;
    line-height: 1.2; /* Increase for more spacing */
    margin-top: 2px; /* Positiver Wert schiebt Text nach unten */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Band Items - PPI/CAPPI Buttons */
.mp-sw-band, .mp-sw-band-knmi {
    background-color: #0a0a0a; /* 100% opacity - solid black */
    color: #ffffff;
    font-weight: bold;
    font-size: 100%;
    padding: 3px;
    cursor: pointer;
    transition: 0.1s;
    border-radius: 10px;
    margin: 3px 0;
    width: 220px;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    border: 1px solid rgba(10, 10, 10, 0.85);
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* NEW class-based selectors for dynamic elements */
.radar-site-mode {
    width: 157.5px; /* 5% larger than 150px */
    height: 41.29px; /* 7% larger than 38.59px */
    min-height: 41.29px;
    max-height: 41.29px;
    margin-right: 4rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0a0a0a; /* 100% opacity - solid black */
    border: 1px solid #000000;
    flex-shrink: 0;
}



.radar-parameter {
    width: 180px;
    height: 30px;
    min-height: 30px;
    max-height: 35px;
    margin-right: 1rem;
    font-weight: normal;
    background-color: #282828; /* 100% opacity - solid dark gray */
    border: 1px solid #000000;
    font-size: 0.85em;
    flex-shrink: 0;
}

.radar-parameter-active {
    background-color: #a9a9a9 !important; /* 100% opacity - solid light gray */
    border: 3px solid #000 !important;
    color: #000 !important;
}

.mp-sw-band:hover, .mp-sw-band-knmi:hover {
    background-color: #1a1a1a; /* 100% opacity - solid dark gray */
    font-weight: bolder;
    transition: 0.2s;
}

.mp-sw-band-active, .mp-sw-band-knmi-active {
    background-color: #a9a9a9 !important; /* 100% opacity - solid light gray */
    border: 1px solid #000 !important;
    color: #000 !important;
}

.mp-sw-band-active:hover, .mp-sw-band-knmi-active:hover {
    background-color: #a9a9a9 !important; /* 100% opacity - solid light gray */
    border: 1px solid #000 !important;
    color: #000 !important;
}

/* ===== RESPONSIVE DESIGN - MOBILE FIRST ===== */

/* 1. Kleine Smartphones (bis 480px) - Basis-Styles gelten */
@media (max-width: 480px) {
    #mp-menu-btn {
        position: absolute !important;
        top: var(--menu-button-top) !important;
        margin-bottom: var(--menu-storm-gap) !important;
    }
    
    #storm-switcher {
        width: 250px;
        height: calc(57* var(--vh, 1vh));
        max-height: 700px;
        min-height: 200px;
        position: absolute !important; /* Innerhalb der Map */
        top: 53px !important; /* 80px von der oberen Kante der Map */
        right: 10px !important;
        padding: 10px;
    }
    /*Radar Sites, Den Helder, Herwijnen*/
    .mp-sw-drop, .mp-sw-drop-knmi {
        width: 100px;
        height: 35px;
        min-height: 20px;
        max-height: 35px;
        font-size: 0.8em;
        padding: 4px;
        margin-right: 5px;
    }
    
    /* Den Helder and Herwijnen - narrower for 480px */
    .mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
        width: 110px;
        height: 30px;
        min-height: 20px;
        max-height: 35px;
        /* margin-left: -2rem !important; */
        position: relative;
        left: -1rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Specific centering for Den Helder and Herwijnen text */
    .mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    /*Radar Sites*/
    .mp-sw-drop.param-icon {
        height: 25px;
        min-height: 20px;
        max-height: 60px;
        padding: 6px 6px 8px 6px;
    }
    /*Font Radar Sites*/
    .mp-sw-drop.param-icon p {
        font-size: 1em;
    }
    
    /* Radar Controls - buttons closer together */
    .radar-controls {
        gap: 2px;
        margin-top: 10px;

    }
    /* Icon size Foto ...*/
    .radar-controls .btn {
        padding: 4px 6px !important;
        font-size: 0.8em;
        height: 24px !important;
        min-height: 20px !important;
        max-height: 30px !important;
        width: 26px !important;
        line-height: 1.2 !important;
        margin: 1px;
    }
    /* Should actually be for PPI/CAPPI buttons. Changes are not displayed, probably ineffective */
    .mp-sw-band, .mp-sw-band-knmi {
        width: 160px;
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        font-size: 0.8em;
        padding: 2px;
    }
    /* PPI/CAPPI Buttons*/
    .radar-site-mode {
        width: 100px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        margin-right: -1rem;
        font-size: 0.7em;
        position: relative;
        left: -2rem;
        text-align: center !important;
        line-height: 1.2;
        padding-top: 20px;
    }
    
    /* Spezifische Zentrierung für PPI/CAPPI Text */
    .radar-site-mode div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .radar-parameter {
        width: 50px;
        height: 30px !important;
        min-height: 20px !important;
        max-height: 35px !important;
        margin-right: 0.5rem;
        font-size: 0.7em;
    }
}

/* 2. Standard Smartphones (481px - 767px) */
@media (min-width: 481px) and (max-width: 767px) and (orientation: portrait) {
    #mp-menu-btn {
        position: absolute !important;
        top: var(--menu-button-top) !important;
        margin-bottom: var(--menu-storm-gap) !important;
    }
    
    #storm-switcher {
        width: 250px;
        height: calc(57* var(--vh, 1vh));
        max-height: 700px;
        min-height: 200px;
        position: absolute !important; /* Innerhalb der Map */
        top: 53px !important; /* 80px von der oberen Kante der Map */
        right: 10px !important;
        padding: 10px;
    }
    /*Radar Sites, Den Helder, Herwijnen*/
    .mp-sw-drop, .mp-sw-drop-knmi {
        width: 100px;
        height: 35px;
        min-height: 20px;
        max-height: 35px;
        font-size: 0.8em;
        padding: 4px;
        margin-right: 5px;
    }
    
    /* Den Helder und Herwijnen - schmaler für 480px */
    .mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
        width: 110px;
        height: 30px;
        min-height: 20px;
        max-height: 35px;
        /* margin-left: -2rem !important; */
        position: relative;
        left: -1rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Spezifische Zentrierung für Den Helder und Herwijnen Text */
    .mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    /*Radar Sites*/
    .mp-sw-drop.param-icon {
        height: 25px;
        min-height: 20px;
        max-height: 60px;
        padding: 6px 6px 8px 6px;
    }
    /*Font Radar Sites*/
    .mp-sw-drop.param-icon p {
        font-size: 1em;
    }
    
    /* Radar Controls - Buttons näher zusammen */
    .radar-controls {
        gap: 2px;
        margin-top: 10px;

    }
    /* Icon size Foto ...*/
    .radar-controls .btn {
        padding: 4px 6px !important;
        font-size: 0.8em;
        height: 24px !important;
        min-height: 20px !important;
        max-height: 30px !important;
        width: 26px !important;
        line-height: 1.2 !important;
        margin: 1px;
    }
    /* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
    .mp-sw-band, .mp-sw-band-knmi {
        width: 160px;
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        font-size: 0.8em;
        padding: 2px;
    }
    /* PPI/CAPPI Buttons*/
    .radar-site-mode {
        width: 100px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        margin-right: -1rem;
        font-size: 0.7em;
        position: relative;
        left: -2rem;
        text-align: center !important;
        line-height: 1.2;
        padding-top: 20px;
    }
    
    /* Spezifische Zentrierung für PPI/CAPPI Text */
    .radar-site-mode div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .radar-parameter {
        width: 50px;
        height: 30px !important;
        min-height: 20px !important;
        max-height: 35px !important;
        margin-right: 0.5rem;
        font-size: 0.7em;
    }
}

/* 3. Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    #mp-menu-btn {
        position: absolute !important;
        top: var(--menu-button-top) !important;
        margin-bottom: var(--menu-storm-gap) !important;
    }
    
    #storm-switcher {
        width: 250px;
        height: calc(57* var(--vh, 1vh));
        max-height: 700px;
        min-height: 200px;
        position: absolute !important; /* Innerhalb der Map */
        top: 53px !important; /* 80px von der oberen Kante der Map */
        right: 10px !important;
        padding: 10px;
    }
    /*Radar Sites, Den Helder, Herwijnen*/
    .mp-sw-drop, .mp-sw-drop-knmi {
        width: 100px;
        height: 35px;
        min-height: 20px;
        max-height: 35px;
        font-size: 0.8em;
        padding: 4px;
        margin-right: 5px;
    }
    
    /* Den Helder und Herwijnen - schmaler für 480px */
    .mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
        width: 110px;
        height: 30px;
        min-height: 20px;
        max-height: 35px;
        /* margin-left: -2rem !important; */
        position: relative;
        left: -1rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Spezifische Zentrierung für Den Helder und Herwijnen Text */
    .mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    /*Radar Sites*/
    .mp-sw-drop.param-icon {
        height: 25px;
        min-height: 20px;
        max-height: 60px;
        padding: 6px 6px 8px 6px;
    }
    /*Font Radar Sites*/
    .mp-sw-drop.param-icon p {
        font-size: 1em;
    }
    
    /* Radar Controls - Buttons näher zusammen */
    .radar-controls {
        gap: 2px;
        margin-top: 10px;

    }
    /* Icon size Foto ...*/
    .radar-controls .btn {
        padding: 4px 6px !important;
        font-size: 0.8em;
        height: 24px !important;
        min-height: 20px !important;
        max-height: 30px !important;
        width: 26px !important;
        line-height: 1.2 !important;
        margin: 1px;
    }
    /* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
    .mp-sw-band, .mp-sw-band-knmi {
        width: 160px;
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        font-size: 0.8em;
        padding: 2px;
    }
    /* PPI/CAPPI Buttons*/
    .radar-site-mode {
        width: 100px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        margin-right: -1rem;
        font-size: 0.7em;
        position: relative;
        left: -2rem;
        text-align: center !important;
        line-height: 1.2;
        padding-top: 20px;
    }
    
    /* Spezifische Zentrierung für PPI/CAPPI Text */
    .radar-site-mode div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .radar-parameter {
        width: 50px;
        height: 30px !important;
        min-height: 20px !important;
        max-height: 35px !important;
        margin-right: 0.5rem;
        font-size: 0.7em;
    }
}


/*####################################################*/
/*##################### LANDSCAPE ####################*/
/*####################################################*/


/* 1. Kleine Smartphones (Landscape) */
@media (max-width: 700px) and (max-height: 450px) and (orientation: landscape) {
   /* Hamburger-Button niedriger positionieren */
   #mp-menu-btn {
    position: absolute !important;
    top: var(--menu-button-top) !important;
    margin-bottom: var(--menu-storm-gap) !important;
}

#storm-switcher {
    width: 250px;
    height: calc(57* var(--vh, 1vh));
    max-height: 500px;
    min-height: 100px;
    position: absolute !important; /* Innerhalb der Map */
    top: 53px !important; /* 80px von der oberen Kante der Map */
    right: 10px !important;
    padding: 10px;
}
/*Radar Sites, Den Helder, Herwijnen*/
.mp-sw-drop, .mp-sw-drop-knmi {
    width: 100px;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    font-size: 0.8em;
    padding: 4px;
    margin-right: 5px;
}
/* Den Helder und Herwijnen - schmaler für 480px */
.mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
    width: 110px;
    height: 30px;
    min-height: 20px;
    max-height: 35px;
    /* margin-left: -2rem !important; */
    position: relative;
    left: -1rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spezifische Zentrierung für Den Helder und Herwijnen Text */
.mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}
/*Radar Sites*/
.mp-sw-drop.param-icon {
    height: 25px;
    min-height: 20px;
    max-height: 60px;
    padding: 6px 6px 8px 6px;
}
/*Font Radar Sites*/
.mp-sw-drop.param-icon p {
    font-size: 1em;
}

/* Radar Controls - Buttons näher zusammen */
.radar-controls {
    gap: 2px;
    margin-top: 10px;

}
/* Icon size Foto ...*/
.radar-controls .btn {
    padding: 4px 6px !important;
    font-size: 0.8em;
    height: 24px !important;
    min-height: 20px !important;
    max-height: 30px !important;
    width: 26px !important;
    line-height: 1.2 !important;
    margin: 1px;
}
/* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
.mp-sw-band, .mp-sw-band-knmi {
    width: 160px;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
    font-size: 0.8em;
    padding: 2px;
}
/* PPI/CAPPI Buttons*/
.radar-site-mode {
    width: 100px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    margin-right: -1rem;
    font-size: 0.7em;
    position: relative;
    left: -2rem;
    text-align: center !important;
    line-height: 1.2;
}

/* Spezifische Zentrierung für PPI/CAPPI Text */
.radar-site-mode div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.radar-parameter {
    width: 50px;
    height: 30px !important;
    min-height: 20px !important;
    max-height: 35px !important;
    margin-right: 0.5rem;
    font-size: 0.7em;
}
  }
@media (min-width: 701px) and (max-width: 900px) and (min-height: 250px) and (max-height: 400px) and (orientation: landscape){
#mp-menu-btn {
    position: absolute !important;
    top: var(--menu-button-top) !important;
    margin-bottom: var(--menu-storm-gap) !important;
}

#storm-switcher {
    width: 250px;
    height: calc(53* var(--vh, 1vh));
    max-height: 500px;
    min-height: 100px;
    position: absolute !important; /* Innerhalb der Map */
    top: 53px !important; /* 80px von der oberen Kante der Map */
    right: 10px !important;
    padding: 10px;
}
/*Radar Sites, Den Helder, Herwijnen*/
.mp-sw-drop, .mp-sw-drop-knmi {
    width: 100px;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    font-size: 0.8em;
    padding: 4px;
    margin-right: 5px;
}
/* Den Helder und Herwijnen - schmaler für 480px */
.mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
    width: 110px;
    height: 30px;
    min-height: 20px;
    max-height: 35px;
    /* margin-left: -2rem !important; */
    position: relative;
    left: -1rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spezifische Zentrierung für Den Helder und Herwijnen Text */
.mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}
/*Radar Sites*/
.mp-sw-drop.param-icon {
    height: 25px;
    min-height: 20px;
    max-height: 60px;
    padding: 6px 6px 8px 6px;
}
/*Font Radar Sites*/
.mp-sw-drop.param-icon p {
    font-size: 1em;
}

/* Radar Controls - Buttons näher zusammen */
.radar-controls {
    gap: 2px;
    margin-top: 10px;

}
/* Icon size Foto ...*/
.radar-controls .btn {
    padding: 4px 6px !important;
    font-size: 0.8em;
    height: 24px !important;
    min-height: 20px !important;
    max-height: 30px !important;
    width: 26px !important;
    line-height: 1.2 !important;
    margin: 1px;
}
/* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
.mp-sw-band, .mp-sw-band-knmi {
    width: 160px;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
    font-size: 0.8em;
    padding: 2px;
}
/* PPI/CAPPI Buttons*/
.radar-site-mode {
    width: 100px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    margin-right: -1rem;
    font-size: 0.7em;
    position: relative;
    left: -2rem;
    text-align: center !important;
    line-height: 1.2;
}

/* Spezifische Zentrierung für PPI/CAPPI Text */
.radar-site-mode div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.radar-parameter {
    width: 50px;
    height: 30px !important;
    min-height: 20px !important;
    max-height: 35px !important;
    margin-right: 0.5rem;
    font-size: 0.7em;
}
}  
/* 2. Große Smartphones (Landscape) */
@media (min-width: 701px) and (max-width: 900px) and (min-height: 300px) and (max-height: 400px) and (orientation: landscape){
#mp-menu-btn {
    position: absolute !important;
    top: var(--menu-button-top) !important;
    margin-bottom: var(--menu-storm-gap) !important;
}

#storm-switcher {
    width: 250px;
    height: calc(57* var(--vh, 1vh));
    max-height: 500px;
    min-height: 100px;
    position: absolute !important; /* Innerhalb der Map */
    top: 53px !important; /* 80px von der oberen Kante der Map */
    right: 10px !important;
    padding: 10px;
}
/*Radar Sites, Den Helder, Herwijnen*/
.mp-sw-drop, .mp-sw-drop-knmi {
    width: 100px;
    height: 35px;
    min-height: 35px;
    max-height: 35px;
    font-size: 0.8em;
    padding: 4px;
    margin-right: 5px;
}
/* Den Helder und Herwijnen - schmaler für 480px */
.mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
    width: 110px;
    height: 30px;
    min-height: 20px;
    max-height: 35px;
    /* margin-left: -2rem !important; */
    position: relative;
    left: -1rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Spezifische Zentrierung für Den Helder und Herwijnen Text */
.mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}
/*Radar Sites*/
.mp-sw-drop.param-icon {
    height: 25px;
    min-height: 20px;
    max-height: 60px;
    padding: 6px 6px 8px 6px;
}
/*Font Radar Sites*/
.mp-sw-drop.param-icon p {
    font-size: 1em;
}

/* Radar Controls - Buttons näher zusammen */
.radar-controls {
    gap: 2px;
    margin-top: 10px;

}
/* Icon size Foto ...*/
.radar-controls .btn {
    padding: 4px 6px !important;
    font-size: 0.8em;
    height: 24px !important;
    min-height: 20px !important;
    max-height: 30px !important;
    width: 26px !important;
    line-height: 1.2 !important;
    margin: 1px;
}
/* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
.mp-sw-band, .mp-sw-band-knmi {
    width: 160px;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
    font-size: 0.8em;
    padding: 2px;
}
/* PPI/CAPPI Buttons*/
.radar-site-mode {
    width: 100px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    margin-right: -1rem;
    font-size: 0.7em;
    position: relative;
    left: -2rem;
    text-align: center !important;
    line-height: 1.2;
}

/* Spezifische Zentrierung für PPI/CAPPI Text */
.radar-site-mode div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.radar-parameter {
    width: 50px;
    height: 30px !important;
    min-height: 20px !important;
    max-height: 35px !important;
    margin-right: 0.5rem;
    font-size: 0.7em;
}
}
/* 2. Große Smartphones (Landscape) */
@media (min-width: 701px) and (max-width: 900px) and (min-height: 400px) and (max-height: 600px) and (orientation: landscape){
    #mp-menu-btn {
        position: absolute !important;
        top: var(--menu-button-top) !important;
        margin-bottom: var(--menu-storm-gap) !important;
    }
    
    #storm-switcher {
        width: 250px;
        height: calc(57* var(--vh, 1vh));
    max-height: 500px;
    min-height: 100px;
        position: absolute !important; /* Innerhalb der Map */
        top: 53px !important; /* 80px von der oberen Kante der Map */
        right: 10px !important;
        padding: 10px;
    }
    /*Radar Sites, Den Helder, Herwijnen*/
    .mp-sw-drop, .mp-sw-drop-knmi {
        width: 100px;
        height: 35px;
        min-height: 35px;
        max-height: 35px;
        font-size: 0.8em;
        padding: 4px;
        margin-right: 5px;
    }
    /* Den Helder und Herwijnen - schmaler für 480px */
    .mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
        width: 110px;
        height: 30px;
        min-height: 20px;
        max-height: 35px;
        /* margin-left: -2rem !important; */
        position: relative;
        left: -1rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Spezifische Zentrierung für Den Helder und Herwijnen Text */
    .mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    /*Radar Sites*/
    .mp-sw-drop.param-icon {
        height: 25px;
        min-height: 20px;
        max-height: 60px;
        padding: 6px 6px 8px 6px;
    }
    /*Font Radar Sites*/
    .mp-sw-drop.param-icon p {
        font-size: 1em;
    }
    
    /* Radar Controls - Buttons näher zusammen */
    .radar-controls {
        gap: 2px;
        margin-top: 10px;
    
    }
    /* Icon size Foto ...*/
    .radar-controls .btn {
        padding: 4px 6px !important;
        font-size: 0.8em;
        height: 24px !important;
        min-height: 20px !important;
        max-height: 30px !important;
        width: 26px !important;
        line-height: 1.2 !important;
        margin: 1px;
    }
    /* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
    .mp-sw-band, .mp-sw-band-knmi {
        width: 160px;
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        font-size: 0.8em;
        padding: 2px;
    }
    /* PPI/CAPPI Buttons*/
    .radar-site-mode {
        width: 100px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        margin-right: -1rem;
        font-size: 0.7em;
        position: relative;
        left: -2rem;
        text-align: center !important;
        line-height: 1.2;
    }
    
    /* Spezifische Zentrierung für PPI/CAPPI Text */
    .radar-site-mode div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .radar-parameter {
        width: 50px;
        height: 30px !important;
        min-height: 20px !important;
        max-height: 35px !important;
        margin-right: 0.5rem;
        font-size: 0.7em;
    }
}

/* Very long landscape phones*/
@media (min-width: 901px) and (max-width: 1000px) and (min-height: 301px) and (max-height: 400px) and (orientation: landscape){
    #mp-menu-btn {
        position: absolute !important;
        top: var(--menu-button-top) !important;
        margin-bottom: var(--menu-storm-gap) !important;
    }
    
    #storm-switcher {
        width: 250px;
        height: calc(57* var(--vh, 1vh));
        max-height: 500px;
        min-height: 100px;
        position: absolute !important; /* Innerhalb der Map */
        top: 53px !important; /* 80px von der oberen Kante der Map */
        right: 10px !important;
        padding: 10px;
    }
    /*Radar Sites, Den Helder, Herwijnen*/
    .mp-sw-drop, .mp-sw-drop-knmi {
        width: 100px;
        height: 35px;
        min-height: 35px;
        max-height: 35px;
        font-size: 0.8em;
        padding: 4px;
        margin-right: 5px;
    }
    /* Den Helder und Herwijnen - schmaler für 480px */
    .mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
        width: 110px;
        height: 30px;
        min-height: 20px;
        max-height: 35px;
        /* margin-left: -2rem !important; */
        position: relative;
        left: -1rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Spezifische Zentrierung für Den Helder und Herwijnen Text */
    .mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    /*Radar Sites*/
    .mp-sw-drop.param-icon {
        height: 25px;
        min-height: 20px;
        max-height: 60px;
        padding: 6px 6px 8px 6px;
    }
    /*Font Radar Sites*/
    .mp-sw-drop.param-icon p {
        font-size: 1em;
    }
    
    /* Radar Controls - Buttons näher zusammen */
    .radar-controls {
        gap: 2px;
        margin-top: 10px;
    
    }
    /* Icon size Foto ...*/
    .radar-controls .btn {
        padding: 4px 6px !important;
        font-size: 0.8em;
        height: 24px !important;
        min-height: 20px !important;
        max-height: 30px !important;
        width: 26px !important;
        line-height: 1.2 !important;
        margin: 1px;
    }
    /* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
    .mp-sw-band, .mp-sw-band-knmi {
        width: 160px;
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        font-size: 0.8em;
        padding: 2px;
    }
    /* PPI/CAPPI Buttons*/
    .radar-site-mode {
        width: 100px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        margin-right: -1rem;
        font-size: 0.7em;
        position: relative;
        left: -2rem;
        text-align: center !important;
        line-height: 1.2;
    }
    
    /* Spezifische Zentrierung für PPI/CAPPI Text */
    .radar-site-mode div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .radar-parameter {
        width: 50px;
        height: 30px !important;
        min-height: 20px !important;
        max-height: 35px !important;
        margin-right: 0.5rem;
        font-size: 0.7em;
    }
    }

@media (min-width: 901px) and (max-width: 1000px) and (min-height: 401px) and (max-height: 500px) and (orientation: landscape){
    #mp-menu-btn {
        position: absolute !important;
        top: var(--menu-button-top) !important;
        margin-bottom: var(--menu-storm-gap) !important;
    }
    
    #storm-switcher {
        width: 250px;
        height: calc(57* var(--vh, 1vh));
        max-height: 500px;
    min-height: 100px;
        position: absolute !important; /* Innerhalb der Map */
        top: 53px !important; /* 80px von der oberen Kante der Map */
        right: 10px !important;
        padding: 10px;
    }
    /*Radar Sites, Den Helder, Herwijnen*/
    .mp-sw-drop, .mp-sw-drop-knmi {
        width: 100px;
        height: 35px;
        min-height: 35px;
        max-height: 35px;
        font-size: 0.8em;
        padding: 4px;
        margin-right: 5px;
    }
    /* Den Helder und Herwijnen - schmaler für 480px */
    .mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
        width: 110px;
        height: 30px;
        min-height: 20px;
        max-height: 35px;
        /* margin-left: -2rem !important; */
        position: relative;
        left: -1rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Spezifische Zentrierung für Den Helder und Herwijnen Text */
    .mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    /*Radar Sites*/
    .mp-sw-drop.param-icon {
        height: 25px;
        min-height: 20px;
        max-height: 60px;
        padding: 6px 6px 8px 6px;
    }
    /*Font Radar Sites*/
    .mp-sw-drop.param-icon p {
        font-size: 1em;
    }
    
    /* Radar Controls - Buttons näher zusammen */
    .radar-controls {
        gap: 2px;
        margin-top: 10px;
    
    }
    /* Icon size Foto ...*/
    .radar-controls .btn {
        padding: 4px 6px !important;
        font-size: 0.8em;
        height: 24px !important;
        min-height: 20px !important;
        max-height: 30px !important;
        width: 26px !important;
        line-height: 1.2 !important;
        margin: 1px;
    }
    /* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
    .mp-sw-band, .mp-sw-band-knmi {
        width: 160px;
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        font-size: 0.8em;
        padding: 2px;
    }
    /* PPI/CAPPI Buttons*/
    .radar-site-mode {
        width: 100px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        margin-right: -1rem;
        font-size: 0.7em;
        position: relative;
        left: -2rem;
        text-align: center !important;
        line-height: 1.2;
    }
    
    /* Spezifische Zentrierung für PPI/CAPPI Text */
    .radar-site-mode div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .radar-parameter {
        width: 50px;
        height: 30px !important;
        min-height: 20px !important;
        max-height: 35px !important;
        margin-right: 0.5rem;
        font-size: 0.7em;
    }
}
/* 3. Kleine Tablets (Landscape) */
@media (min-width: 901px) and (max-width: 1100px) and (min-height: 501px) and (max-height: 800px) and (orientation: landscape) {
    #mp-menu-btn {
        position: absolute !important;
        top: var(--menu-button-top) !important;
        margin-bottom: var(--menu-storm-gap) !important;
    }
    
    #storm-switcher {
        width: 250px;
        height: calc(57* var(--vh, 1vh));
        max-height: 700px;
        min-height: 200px;
        position: absolute !important; /* Innerhalb der Map */
        top: 53px !important; /* 80px von der oberen Kante der Map */
        right: 10px !important;
        padding: 10px;
    }
    /*Radar Sites, Den Helder, Herwijnen*/
    .mp-sw-drop, .mp-sw-drop-knmi {
        width: 100px;
        height: 35px;
        min-height: 35px;
        max-height: 35px;
        font-size: 0.8em;
        padding: 4px;
        margin-right: 5px;
    }
    /* Den Helder und Herwijnen - schmaler für 480px */
    .mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
        width: 110px;
        height: 30px;
        min-height: 20px;
        max-height: 35px;
        /* margin-left: -2rem !important; */
        position: relative;
        left: -1rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Spezifische Zentrierung für Den Helder und Herwijnen Text */
    .mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    /*Radar Sites*/
    .mp-sw-drop.param-icon {
        height: 25px;
        min-height: 20px;
        max-height: 60px;
        padding: 6px 6px 8px 6px;
    }
    /*Font Radar Sites*/
    .mp-sw-drop.param-icon p {
        font-size: 1em;
    }
    
    /* Radar Controls - Buttons näher zusammen */
    .radar-controls {
        gap: 2px;
        margin-top: 10px;
    
    }
    /* Icon size Foto ...*/
    .radar-controls .btn {
        padding: 4px 6px !important;
        font-size: 0.8em;
        height: 24px !important;
        min-height: 20px !important;
        max-height: 30px !important;
        width: 26px !important;
        line-height: 1.2 !important;
        margin: 1px;
    }
    /* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
    .mp-sw-band, .mp-sw-band-knmi {
        width: 160px;
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        font-size: 0.8em;
        padding: 2px;
    }
    /* PPI/CAPPI Buttons*/
    .radar-site-mode {
        width: 100px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        margin-right: -1rem;
        font-size: 0.7em;
        position: relative;
        left: -2rem;
        text-align: center !important;
        line-height: 1.2;
    }
    
    /* Spezifische Zentrierung für PPI/CAPPI Text */
    .radar-site-mode div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .radar-parameter {
        width: 50px;
        height: 30px !important;
        min-height: 20px !important;
        max-height: 35px !important;
        margin-right: 0.5rem;
        font-size: 0.7em;
    }
}

/* 4. Große Tablets (Landscape) */
@media (min-width: 1101px) and (max-width: 1400px) and (min-height: 801px) and (max-height: 1000px) and (orientation: landscape) {
    #mp-menu-btn {
        position: absolute !important;
        top: var(--menu-button-top) !important;
        margin-bottom: var(--menu-storm-gap) !important;
    }
    
    #storm-switcher {
        width: 250px;
        height: calc(57* var(--vh, 1vh));
        max-height: 600px;
        min-height: 200px;
        position: absolute !important; /* Innerhalb der Map */
        top: 53px !important; /* 80px von der oberen Kante der Map */
        right: 10px !important;
        padding: 10px;
    }
    /*Radar Sites, Den Helder, Herwijnen*/
    .mp-sw-drop, .mp-sw-drop-knmi {
        width: 100px;
        height: 35px;
        min-height: 35px;
        max-height: 35px;
        font-size: 0.8em;
        padding: 4px;
        margin-right: 5px;
    }
    /* Den Helder und Herwijnen - schmaler für 480px */
    .mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
        width: 110px;
        height: 30px;
        min-height: 20px;
        max-height: 35px;
        /* margin-left: -2rem !important; */
        position: relative;
        left: -1rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Spezifische Zentrierung für Den Helder und Herwijnen Text */
    .mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    /*Radar Sites*/
    .mp-sw-drop.param-icon {
        height: 25px;
        min-height: 20px;
        max-height: 60px;
        padding: 6px 6px 8px 6px;
    }
    /*Font Radar Sites*/
    .mp-sw-drop.param-icon p {
        font-size: 1em;
    }
    
    /* Radar Controls - Buttons näher zusammen */
    .radar-controls {
        gap: 2px;
        margin-top: 10px;
    
    }
    /* Icon size Foto ...*/
    .radar-controls .btn {
        padding: 4px 6px !important;
        font-size: 0.8em;
        height: 24px !important;
        min-height: 20px !important;
        max-height: 30px !important;
        width: 26px !important;
        line-height: 1.2 !important;
        margin: 1px;
    }
    /* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
    .mp-sw-band, .mp-sw-band-knmi {
        width: 160px;
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        font-size: 0.8em;
        padding: 2px;
    }
    /* PPI/CAPPI Buttons*/
    .radar-site-mode {
        width: 100px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        margin-right: -1rem;
        font-size: 0.7em;
        position: relative;
        left: -2rem;
        text-align: center !important;
        line-height: 1.2;
    }
    
    /* Spezifische Zentrierung für PPI/CAPPI Text */
    .radar-site-mode div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .radar-parameter {
        width: 50px;
        height: 30px !important;
        min-height: 20px !important;
        max-height: 35px !important;
        margin-right: 0.5rem;
        font-size: 0.7em;
    }
}




/* 4. Kleine Laptops (1024px - 1439px) - Standard Desktop */
@media (min-width: 1024px) {
    
    #mp-menu-btn {
        position: absolute !important;
        top: var(--menu-button-top) !important;
        margin-bottom: var(--menu-storm-gap) !important;
    }
    
    #storm-switcher {
        width: 250px;
        height: calc(57* var(--vh, 1vh));
        max-height: 700px;
        min-height: 200px;
        position: absolute !important; /* Innerhalb der Map */
        top: 53px !important; /* 80px von der oberen Kante der Map */
        right: 10px !important;
        padding: 10px;
    }
    /*Radar Sites, Den Helder, Herwijnen*/
    .mp-sw-drop, .mp-sw-drop-knmi {
        width: 120px;
        height: 70px;
        min-height: 35px;
        max-height: 70px;
        font-size: 0.8em;
        padding: 4px;
        margin-right: 5px;
    }
    
    /* Buttons Den Helder and Herwijnen*/
    .mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
        width: 140px;
        height: 50px;
        min-height: 20px;
        max-height: 50px;
        /* margin-left: -2rem !important; */
        position: relative;
        left: -1.5rem !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    
    /* Spezifische Zentrierung für Den Helder und Herwijnen Text */
    .mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    /*Radar Sites*/
    .mp-sw-drop.param-icon {
        width: 140px;
        height: 40px;
        min-height: 30px;
        max-height: 80px;
        padding: 6px 6px 8px 6px;
    }
    
    
    /*Font Radar Sites*/
    .mp-sw-drop.param-icon p {
        font-size: 1.8em;
        font-weight: 600;
    }
    
    .mp-sw-drop.temp-icon p, .mp-sw-drop.cloud-icon p {
        font-size: 1.3em;
        font-weight: bold;
    }
    
    /* Radar Controls - Buttons näher zusammen */
    .radar-controls {
        gap: 2px;
        margin-top: 15px;
    
    }
    /* Icon size Foto ...*/
    .radar-controls .btn {
        padding: 4px 6px !important;
        font-size: 1.2em;
        height: 30px !important;
        min-height: 20px !important;
        width: 3px !important;
        width: 40px !important;
        line-height: 1.5 !important;
        margin: 1px;
        bottom: 1px;
    }
    /* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
    .mp-sw-band, .mp-sw-band-knmi {
        width: 160px;
        height: 25px;
        min-height: 25px;
        max-height: 25px;
        font-size: 0.8em;
        padding: 2px;
    }
    /* PPI/CAPPI Buttons*/
    .radar-site-mode {
        width: 160px;
        height: 30px;
        min-height: 30px;
        max-height: 30px;
        margin-right: -2rem;
        margin-top: 0.2rem;
        font-size: 1em;
        position: relative;
        left: -3.2rem;
        text-align: center !important;
        line-height: 1.2;
    }
    
    /* Spezifische Zentrierung für PPI/CAPPI Text */
    .radar-site-mode div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    .radar-parameter {
        width: 170px;
        height: 32px !important;
        min-height: 20px !important;
        max-height: 40px !important;
        margin-left: -2.0rem;
        font-size: 0.85em;
        line-height: 1;
    }
}

/* 5. Große Laptops & Desktops (1440px+) */
@media (min-width: 1440px) {
/* Hamburger-Button niedriger positionieren */
#mp-menu-btn {
    position: absolute !important;
    top: var(--menu-button-top) !important;
    margin-bottom: var(--menu-storm-gap) !important;
}

#storm-switcher {
    width: 250px;
    height: calc(57* var(--vh, 1vh));
    max-height: 700px;
    min-height: 200px;
    position: absolute !important; /* Innerhalb der Map */
    top: 53px !important; /* 80px von der oberen Kante der Map */
    right: 10px !important;
    padding: 10px;
}
/*Radar Sites, Den Helder, Herwijnen*/
.mp-sw-drop, .mp-sw-drop-knmi {
    width: 120px;
    height: 70px;
    min-height: 35px;
    max-height: 70px;
    font-size: 0.8em;
    padding: 4px;
    margin-right: 5px;
}

/* Buttons Den Helder and Herwijnen*/
.mp-sw-drop.temp-icon, .mp-sw-drop.cloud-icon {
    width: 140px;
    height: 50px;
    min-height: 20px;
    max-height: 50px;
    /* margin-left: -2rem !important; */
    position: relative;
    left: -1.5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Spezifische Zentrierung für Den Helder und Herwijnen Text */
.mp-sw-drop.temp-icon div, .mp-sw-drop.cloud-icon div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

/*Radar Sites*/
.mp-sw-drop.param-icon {
    width: 140px;
    height: 40px;
    min-height: 30px;
    max-height: 80px;
    padding: 6px 6px 8px 6px;
}


/*Font Radar Sites*/
.mp-sw-drop.param-icon p {
    font-size: 1.8em;
    font-weight: 600;
}

.mp-sw-drop.temp-icon p, .mp-sw-drop.cloud-icon p {
    font-size: 1.3em;
    font-weight: bold;
}

/* Radar Controls - Buttons näher zusammen */
.radar-controls {
    gap: 2px;
    margin-top: 15px;

}
/* Icon size Foto ...*/
.radar-controls .btn {
    padding: 4px 6px !important;
    font-size: 1.2em;
    height: 30px !important;
    min-height: 20px !important;
    width: 3px !important;
    width: 40px !important;
    line-height: 1.5 !important;
    margin: 1px;
    bottom: 1px;
}
/* SOll eigentlich für PPI/CAPPI Buttons sein. Änderungen werden nicht angezeigt, vermutlich unwirksam*/
.mp-sw-band, .mp-sw-band-knmi {
    width: 160px;
    height: 25px;
    min-height: 25px;
    max-height: 25px;
    font-size: 0.8em;
    padding: 2px;
}
/* PPI/CAPPI Buttons*/
.radar-site-mode {
    width: 160px;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    margin-right: -2rem;
    margin-top: 0.2rem;
    font-size: 1em;
    position: relative;
    left: -3.2rem;
    text-align: center !important;
    line-height: 1.2;
}

/* Spezifische Zentrierung für PPI/CAPPI Text */
.radar-site-mode div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.radar-parameter {
    width: 170px;
    height: 32px !important;
    min-height: 20px !important;
    max-height: 40px !important;
    margin-left: -2.0rem;
    font-size: 0.85em;
    line-height: 1;
}
}





/* ===== ADDITIONAL FEATURES ===== */

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .mp-sw-drop, .mp-sw-drop-knmi {
        background-color: #808080; /* 100% opacity - solid gray */
    }
    
    .mp-sw-band, .mp-sw-band-knmi {
        background-color: #0a0a0a; /* 100% opacity - solid black */
    }
}

/* Touch devices - larger touch targets */
@media (hover: none) and (pointer: coarse) {
    .mp-sw-drop, .mp-sw-drop-knmi {
        min-height: 44px; /* Apple's recommended minimum */
        padding: 8px;
    }
    
    .mp-sw-drop:active, .mp-sw-drop-knmi:active {
        background-color: #1a1a1a; /* 100% opacity - solid dark gray */
        font-weight: bolder;
        transform: scale(0.98);
    }
    
    .mp-sw-band, .mp-sw-band-knmi {
        min-height: 44px;
        padding: 6px;
    }
    
    .mp-sw-band:active, .mp-sw-band-knmi:active {
        background-color: #1a1a1a; /* 100% opacity - solid dark gray */
        transform: scale(0.98);
    }
    
    .radar-controls .btn {
        min-height: 44px;
        padding: 6px 10px;
    }
    
    .radar-controls .btn:active {
        background-color: #ffffff; /* 100% opacity - solid white */
        transform: scale(0.95);
    }
    
    /* PPI/CAPPI Touch Active State */
    .radar-site-mode:active {
        background-color: #1a1a1a; /* 100% opacity - solid dark gray */
        transform: scale(0.98);
    }
}

/* Devices with mouse/hover - Hover-Effekte */
@media (hover: hover) and (pointer: fine) {
    .mp-sw-drop, .mp-sw-drop-knmi,
    .mp-sw-band, .mp-sw-band-knmi {
        transition: all 0.2s ease;
    }
    .mp-sw-band, .mp-sw-band-knmi {
        min-height: 44px;
        padding: 6px;
    }
    
    .mp-sw-drop:hover, .mp-sw-drop-knmi:hover {
        background-color: #1a1a1a; /* 100% opacity - solid dark gray */
        font-weight: bolder;
        transition: 0.2s;
    }
    
    .mp-sw-drop:hover, .mp-sw-drop-knmi:hover,
    .mp-sw-band:hover, .mp-sw-band-knmi:hover {
        transform: scale(1.02);
    }
}

/* User prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mp-sw-drop, .mp-sw-drop-knmi,
    .mp-sw-band, .mp-sw-band-knmi {
        transition: none;
    }
    
    .mp-sw-drop:hover, .mp-sw-drop-knmi:hover,
    .mp-sw-band:hover, .mp-sw-band-knmi:hover {
        transform: none;
    }
}