@charset "UTF-8";
/*==============================================================================
  NAVIGATION.CSS
  Hauptnavigation & Offcanvas-Menü (Bootstrap-basiert)
  © 2025 seltsam. STUDIO FÜR VISUELLE MEDIEN
==============================================================================*/

/*==============================================================================
  01. MAIN NAVBAR
==============================================================================*/

.navbar {
 position: absolute;
 z-index: 10;
 width: 100%;
 left: 0;
 right: 0;
 transition: var(--transition-speed);
}

.navbar .container-fluid {
 max-width: 1320px;
}

.navbar .nav-link {
 padding: 0.3rem;
 color: var(--color-white);
 font-weight: var(--font-weight-regular);
 transition: var(--transition-speed);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
 color: var(--color-white);
 text-decoration: none;
}

.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
 color: var(--color-primary-bright);
}

header.fixed .navbar {
 position: fixed;
 background: rgba(255, 255, 255, 0.9);
 padding: 0 !important;
}
.navbar-brand img {
 height: 80px;
 filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
}
header.fixed .navbar-brand img {
 height: 60px;
 max-width: 100%;
}

/*==============================================================================
  OFFCANVAS – Veredeltes Menü (Logoo Edition)
==============================================================================*/
.offcanvas {
 background: rgba(117, 172, 67, 0.93); /* var(--color-primary) mit leichter Transparenz */
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 color: var(--color-white);
 width: 600px !important;
 border-left: 2px solid rgba(255, 255, 255, 0.1);
 box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
 transform: translateX(100%);
 opacity: 0;
 transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Animation beim Öffnen */
.offcanvas.show {
 transform: translateX(0);
 opacity: 1;
}

/* Links – sanftes Einblenden + Bewegung */
.offcanvas .nav-link {
 opacity: 0;
 transform: translateX(25px);
 transition: all 0.4s ease;
 font-size: 1.25rem;
 font-weight: 400;
 padding: 0.75rem 1rem;
 color: var(--color-white);
 text-decoration: none;
}

.offcanvas.show .nav-link {
 opacity: 1;
 transform: translateX(0);
}

/* Gestaffeltes Einblenden */
.offcanvas.show .nav-link:nth-child(1) { transition-delay: 0.1s; }
.offcanvas.show .nav-link:nth-child(2) { transition-delay: 0.2s; }
.offcanvas.show .nav-link:nth-child(3) { transition-delay: 0.3s; }
.offcanvas.show .nav-link:nth-child(4) { transition-delay: 0.4s; }
.offcanvas.show .nav-link:nth-child(5) { transition-delay: 0.5s; }

.offcanvas .nav-link:hover,
.offcanvas .nav-link.active {
 color: var(--color-white);
 background: rgba(0, 0, 0, 0.15); /* dunklerer Overlay für sichtbaren Kontrast */
 border-radius: var(--radius-base);
 transform: translateX(5px); /* kleiner "Slide" beim Hover für Dynamik */
 transition: all 0.25s ease;
}

/* Close-Button */
.offcanvas .btn-close {
 filter: invert(1);
 opacity: 0.9;
 transition: opacity 0.2s;
}
.offcanvas .btn-close:hover {
 opacity: 1;
}

/* Backdrop – etwas dunkler für mehr Tiefe */
.offcanvas-backdrop {
 background-color: rgba(0, 0, 0, 0.65);
 backdrop-filter: blur(2px);
}

/*==============================================================================
  03. SUBNAVIGATION
==============================================================================*/

ul ul .nav-item {
 font-size: 1rem;
 margin-left: 2rem;
 padding: 0;
}
.navbar ul ul .nav-link {
 margin: 0;
 padding: 0;
}
.navbar ul ul {
 line-height: 1.8rem;
 margin-bottom: 0.8rem;
}

/*==============================================================================
  04. HAMBURGER TOGGLER
==============================================================================*/

.custom-toggler.navbar-toggler {
 border: none;
 display: flex;
 align-items: center;
 gap: 0.4em;
 padding: 0;
}

.custom-toggler .navbar-toggler-icon {
 width: 2em;
 height: 2em;
 background-size: 2em 2em;
 transform: translateY(0px);
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler .navbar-toggler-icon:hover {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(150,189,0,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler:focus {
 box-shadow: none;
}

.navbar-toggler-text {
 font-size: var(--font-size-md);
 color: var(--color-white);
}
header.fixed .navbar-toggler-text {
 color: var(--color-primary);
}
header.fixed .custom-toggler .navbar-toggler-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(117, 172, 67,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

header.fixed .custom-toggler .navbar-toggler-icon:hover {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(150,189,0,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/*==============================================================================
  05. RESPONSIVE
==============================================================================*/

@media (min-width: 992px) {
 .navbar-expand-lg .navbar-toggler {
  display: none;
 }
 .navbar-brand img {
  max-width: 100%;
  height: auto;
 }
}