/* custom.css */

/* ==============================
   Navbar Styling
   ============================== */

/* Oberer Balken der Leaflet-Karte mit Regenbogen-Gradient einfärben */
.navbar.navbar-expand-md.navbar-dark.bg-dark {
    background: linear-gradient(
     	150deg,
     	black 0%,
	grey 60%,
	red 65%,
	orange 67%,
	yellow 70%,
	green 73%,
	blue 76%,
	indigo 79%,
	violet 82%,
	grey 85%,
	white 100%
	) !important;
    min-height: 42px;        /* Höhe der Navbar */
    padding-top: 0; 
    padding-bottom: 0;
    display: flex;
    align-items: center;     /* Vertikale Zentrierung der Inhalte */
}

/* Textfarbe der Links in der Navbar */
.navbar.navbar-expand-md.navbar-dark.bg-dark .navbar-nav .nav-link {
    color: #EEEEEE !important; /* Grauer Text */
}




.navbar .navbar-brand {
    color: white; /* Grundfarbe */
    font-weight: bold;

  

    /* Optional: Hintergrund-Highlight */
    background-color: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 3px; 

    /* Box-Shadow für leichten 3D-Effekt */
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
}







/* Hover-Effekt für Links in der Navbar */
.navbar.navbar-expand-md.navbar-dark.bg-dark .navbar-nav .nav-link:hover {
    color: mediumturquoise !important; /* Blau beim Hover */
}

/* Links innerhalb der Navbar flexboxmäßig ausrichten */
.navbar-nav {
    display: flex;
    align-items: left;
}

/* Hamburger-Button vertikal zentrieren */
.navbar-toggler {
    align-self: center;
}

/* ==============================
   Leaflet Controls Styling
   ============================== */

/* Textfarbe der Leaflet-Controls anpassen */
.leaflet-control {
    color: #ffff00 !important;
}

/* ==============================
   Slider Styling (vertikal)
   ============================== */

/* Slider-Handle anpassen */
html body.flexcolumn div#content.flexcolumn.flexgrow 
div.leaflet-sidebar-flex-row.flexgrow 
div#map.leaflet-sidebar-map.leaflet-container.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom.routing-draw-enabled 
div.leaflet-control-container div.leaflet-top.leaflet-left 
div.leaflet-bar.control-slider.leaflet-control 
div#route.slider.slider-vertical div.slider-handle.min-slider-handle.round {
    background-color: #0078d4;       /* Gleiche Farbe wie bei Element 2 */
    border-radius: 50%;              /* Runde Handle */
    border: 2px solid #808080;       /* Rahmenfarbe */
    width: 20px;                     /* Breite des Handles */
    height: 20px;                    /* Höhe des Handles */
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Schatten für 3D-Effekt */
    cursor: pointer;                 /* Mauszeiger ändern */
    transition: background-color 0.3s, transform 0.3s; /* Animationen */
}



/* Track-Gradient: Opazität von #00cccc von 0% (oben) auf 100% (unten) */
div.leaflet-bar.control-slider.leaflet-control 
div#route.slider.slider-vertical:hover 
div.slider-track div.slider-track-high {
    background: linear-gradient(
        to top, 
        rgba(0, 204, 204, 0) 0%,  /* Transparent oben */
        rgba(0, 204, 204, 1) 100% /* Vollfarbe unten */
    ) !important;
}


/* Hover-Effekt für den Slider-Handle */
html body.flexcolumn div#content.flexcolumn.flexgrow 
div.leaflet-sidebar-flex-row.flexgrow 
div#map.leaflet-sidebar-map.leaflet-container.leaflet-retina.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom.routing-draw-enabled 
div.leaflet-control-container div.leaflet-top.leaflet-left 
div.leaflet-bar.control-slider.leaflet-control 
div#route.slider.slider-vertical div.slider-handle.min-slider-handle.round:hover {
    background-color: #005a9c;   /* Dunklere Farbe bei Hover */
    transform: scale(1.1);        /* Leicht vergrößern */
}