/* Logo control (moved into Leaflet control .leaflet-app-logo) */
.leaflet-app-logo {
    /* Opaque background for the logo control */
    background: #ffffff; /* fully opaque white */
    /* Compact vertical padding */
    padding: 3px 7px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* NEU: Verhindert, dass der Link blau/unterstrichen wird und hält das Layout kompakt */
.leaflet-app-logo .logo-link,
.leaflet-app-logo .logo-link:visited {
    text-decoration: none;
    color: inherit;
    outline: none;
    border: none;
    display: flex; /* Sorgt dafür, dass der Link den gesamten inneren Bereich ausfüllt */
}

/* NEU: Ein dezenter Hover-Effekt, damit Nutzer merken, dass das Logo klickbar ist */
.leaflet-app-logo .logo-link:hover,
.leaflet-app-logo .logo-link:focus {
    opacity: 0.85;
    cursor: pointer;
}

.leaflet-app-logo .logo-container {
    display: flex;
    /* keep items the same height so svg can match top/bottom of text */
    align-items: center;
    gap: 8px;
}

/* Make the svg icon match the combined height of the two text lines */
.leaflet-app-logo .logo-icon {
    width: auto;
    height: 30px; /* target combined text height (approx) */
    display: block;
}

.leaflet-app-logo .logo-text {
    display: flex;
    flex-direction: column;
    /* ensure the text block has same height as the svg */
    height: 30px;
    justify-content: space-between; /* h1 top, h2 bottom */
}

.leaflet-app-logo .logo-text h1 {
    font-size: 17px;
    line-height: 17px;
    margin: 0;
    color: #111; /* Bleibt anthrazit/schwarz */
    font-weight: 700;
    letter-spacing: -0.3px;
}

.leaflet-app-logo .logo-text h2 {
    font-size: 9.5px;
    line-height: 10px;
    margin: 0;
    color: #0077a4; /* Behält deine gewünschte Akzentfarbe */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}