*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:"Segoe UI", Arial, sans-serif;
    background:#eef2e8;
}

#app{
    display:flex;
    flex-direction:column;
    height:100vh;
}


/* ===============================
   HEADER - Naturpark Stil
================================ */

header{

    height:85px;

    background:#448824;

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 35px;

    box-shadow:0 4px 15px rgba(0,0,0,.25);

    z-index:1000;
}


.title{

    display:flex;

    align-items:center;

    gap:15px;

}


/* Laubbaum Icon */

.title i{

    font-size:38px;

    color:#b7d97a;

}


.title h1{

    font-size:22px;

    font-weight:600;

    letter-spacing:.3px;

}


.title p{

    font-size:13px;

    color:#dce8d5;

    margin-top:3px;

}


/* ===============================
   Projektbeschreibung rechts
================================ */


.info{

    max-width:330px;

    font-size:13px;

    line-height:1.4;

    color:#edf4e8;

}


.info span{

    display:block;

}



/* ===============================
   KARTE
================================ */


main{

    flex:1;

}


#map{

    width:100%;

    height:100%;

}



/* ===============================
   FOOTER
================================ */


footer{

    height:35px;

    background:#448824;

    color:#d8e1d3;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:12px;

}



/* ===============================
   Leaflet Anpassung
================================ */


.leaflet-container{

    background:#dce8d2;

}


.leaflet-control-layers{

    border:none;

    border-radius:12px;

    box-shadow:0 5px 18px rgba(0,0,0,.25);

}


.leaflet-popup-content-wrapper{

    border-radius:12px;

}


.leaflet-bar{

    border-radius:10px;

    overflow:hidden;

}



/* ===============================
   Marker Cluster Naturpark Stil
================================ */


.custom-cluster {

    background:transparent;

    border:none;

}


.custom-cluster-icon {

    background:none;

    border:none;

}


/* Totholz */

.totholz-cluster {

    position:relative;

    width:50px;

    height:50px;

}


.totholz-cluster img {

    width:32px;

    height:32px;

}


.totholz-cluster span {

    position:absolute;

    top:3px;

    right:3px;

    background:#222;

    color:white;

    border-radius:50%;

    width:21px;

    height:21px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

    font-weight:bold;

}



/* Naturdenkmal */


.naturdenkmal-cluster {

    position:relative;

    width:50px;

    height:50px;

}


.naturdenkmal-cluster img {

    width:42px;

    height:42px;

}


.naturdenkmal-cluster span {

    position:absolute;

    top:3px;

    right:3px;

    background:white;

    color:#333;

    border-radius:50%;

    width:21px;

    height:21px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:11px;

    font-weight:bold;

}


/* Layer Icons */

.layer-icon {

    width:20px;

    height:20px;

    vertical-align:middle;

    margin-right:6px;

}



/* ===============================
   Mobile
================================ */


@media(max-width:768px){


header{

    height:75px;

    padding:10px 15px;

}


.title i{

    font-size:32px;

}


.title h1{

    font-size:17px;

}


.title p{

    font-size:12px;

}


.info{

    display:none;

}


#map{

    height:calc(100vh - 110px);

}


footer{

    display:none;

}


.leaflet-control-layers{

    max-width:200px;

    font-size:12px;

}


.leaflet-control{

    transform:scale(.9);

    transform-origin:top left;

}


}

.info{
    position:relative;
}


.info-button{

    background:#90d26d;

    color:#1f3b2d;

    border:none;

    padding:8px 15px;

    border-radius:20px;

    font-size:14px;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    transition:.3s;

}


.info-button:hover{

    background:#b7df8b;

}



/* Info Fenster */

.info-box{

    position:absolute;

    right:0;

    top:45px;

    width:320px;

    background:white;

    color:#333;

    padding:18px;

    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,.25);

    line-height:1.5;

    font-size:13px;

    display:none;

    z-index:2000;

}


.info-box h3{

    color:#448824;

    margin-bottom:10px;

    font-size:17px;

}


.info-box p{

    margin:0;

}

.title-icon {
    width: 50px;
    height: 50px;
}