@charset "UTF-8";
/*──────────────────────────────────────────────
  NAVIGATION.CSS – Navbar, Offcanvas (Bootstrap 5)
  © 2026 seltsam. STUDIO FÜR VISUELLE MEDIEN
──────────────────────────────────────────────*/

/*==============================================================================
  01. NAVBAR
  Liegt transparent über dem Hero, wird beim Scrollen (header.fixed) massiv.
==============================================================================*/

header .navbar {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 z-index: 30;
 min-height: var(--header-height);
 padding: 0.75rem 0;
 background: transparent;
 transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}
header .navbar .container-fluid {
 padding-left: var(--space-gutter);
 padding-right: var(--space-gutter);
 gap: 1rem;
}

header.fixed .navbar {
 position: fixed;
 background: rgba(12, 24, 32, 0.96);
 box-shadow: 0 1px 0 rgba(243, 241, 236, 0.08);
}

/* Unterseiten und Backend: Navbar immer massiv */
body.default header .navbar,
body.core header .navbar {
 background: var(--color-ink);
}

/* Wortmarke */
.navbar-brand {
 display: inline-flex;
 align-items: baseline;
 gap: 0.5rem;
 margin: 0;
 padding: 0;
 text-decoration: none;
}
.navbar-brand img {
 display: block;
 height: 28px;
 width: auto;
}
.navbar-brand .brand-suffix {
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.04em;
 color: var(--color-fog);
}

/* Hauptnavigation (Desktop inline) */
header .navbar .navbar-nav {
 gap: 0.25rem 1.75rem;
 margin: 0 !important;
 padding: 0;
}
header .navbar .nav-item {
 margin: 0;
}
header .navbar .nav-link {
 padding: 0.3rem 0;
 color: var(--color-paper);
 font-size: var(--font-size-sm);
 font-weight: var(--font-weight-medium);
 text-decoration: none;
 opacity: 0.85;
 transition: opacity var(--transition-speed), color var(--transition-speed);
}
header .navbar .nav-link:hover,
header .navbar .nav-link:focus-visible,
header .navbar .nav-link.active {
 color: var(--color-paper);
 opacity: 1;
}
header .navbar .nav-link.active {
 box-shadow: inset 0 -2px 0 var(--color-brick-soft);
}

/* Startseite nicht als eigener Menüpunkt (die Wortmarke führt dorthin) */
header .navbar .navbar-nav .nav-item:has(> .nav-link[href="/"]) {
 display: none;
}

/* Telefon-Pill */
.nav-call {
 font-family: var(--font-mono);
 font-size: 13px;
 color: var(--color-paper);
 text-decoration: none;
 white-space: nowrap;
 padding: 0.45rem 0.9rem;
 border: 1px solid rgba(243, 241, 236, 0.35);
 border-radius: var(--radius-pill);
 transition: border-color var(--transition-speed), background-color var(--transition-speed);
}
.nav-call:hover {
 color: var(--color-paper);
 border-color: var(--color-paper);
 background: rgba(243, 241, 236, 0.08);
}

/*==============================================================================
  02. OFFCANVAS (nur unterhalb lg)
==============================================================================*/

@media (max-width: 991.98px) {
 .offcanvas {
  background: var(--color-ink);
  color: var(--color-paper);
  width: min(420px, 100vw) !important;
  border-left: 1px solid rgba(243, 241, 236, 0.1) !important;
 }
 .offcanvas-header {
  padding: 1.25rem var(--space-gutter);
 }
 .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem var(--space-gutter) 2rem;
 }
 .offcanvas .navbar-nav {
  gap: 0;
 }
 .offcanvas .nav-link {
  font-family: var(--font-display);
  font-weight: var(--font-weight-display);
  font-size: 2.5rem;
  line-height: 1.05;
  text-transform: uppercase;
  padding: 0.35rem 0;
  opacity: 1;
 }
 .offcanvas .nav-link:hover,
 .offcanvas .nav-link.active {
  color: var(--color-brick-soft);
  box-shadow: none;
 }
 .offcanvas .nav-call {
  align-self: flex-start;
 }
 .offcanvas .nav-legal .nav-link {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-xs);
  text-transform: none;
  color: var(--color-fog);
 }
}

.offcanvas-title {
 font-family: var(--font-mono);
 font-size: var(--font-size-xs);
 letter-spacing: var(--letter-spacing-label);
 color: var(--color-fog);
}
.offcanvas .btn-close {
 filter: invert(1);
 opacity: 0.85;
}
.offcanvas-backdrop {
 background-color: rgba(12, 24, 32, 0.7);
}

/*==============================================================================
  03. TOGGLER
==============================================================================*/

.custom-toggler.navbar-toggler {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0;
 border: 0;
 color: var(--color-paper);
}
.navbar-toggler:focus {
 box-shadow: none;
}
.navbar-toggler-text {
 font-family: var(--font-mono);
 font-size: var(--font-size-xs);
 letter-spacing: var(--letter-spacing-label);
}
.custom-toggler .navbar-toggler-icon {
 width: 40px;
 height: 40px;
 border: 1px solid rgba(243, 241, 236, 0.35);
 border-radius: 50%;
 background-size: 18px 18px;
 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(243,241,236,1)' stroke-width='2.5' stroke-linecap='round' d='M5 9h22M5 16h22M5 23h22'/%3E%3C/svg%3E");
}

/*==============================================================================
  04. RESPONSIVE
==============================================================================*/

@media (min-width: 992px) {
 .navbar-expand-lg .navbar-toggler,
 .navbar-expand-lg .custom-toggler.navbar-toggler {
  display: none;
 }
 .navbar-expand-lg .offcanvas .offcanvas-body {
  align-items: center;
  gap: 1.75rem;
 }
 .nav-legal {
  display: none;
 }
}
@media (max-width: 767.98px) {
 header .navbar {
  padding: 0.5rem 0;
 }
 .navbar-brand img {
  height: 24px;
 }
 .navbar-toggler-text {
  display: none;
 }
}