/* =============================================================================
   sticky-mini-nav — dezente klebende Top-Navigation
   =============================================================================
   Eine schlanke, am oberen Rand klebende Leiste: links ein Wortmarken-Slot,
   rechts N Text-Links. Bewusst CTA-frei (zurückhaltend). Unter dem Mobile-
   Breakpoint kollabieren die Inline-Links zu einem Burger-Button, der ein
   Vollbild-Overlay mit denselben Links öffnet.

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix()
   daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md.
   Die --smn-* sind komponenten-lokale Layout-Konstanten (Leisten-Höhe, Burger-
   Maße, Breakpoint, Blur-Stärke) — an keine Marke gekettet, laut Regel erlaubt.

   Lade-Reihenfolge: _tokens/_base.css → <brand>.css → diese Datei → sticky-mini-nav.js
   ============================================================================ */

.sticky-mini-nav {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --smn-height:     56px;    /* Leisten-Höhe */
  --smn-touch:      44px;    /* Mindest-Touch-Target (Burger, Schließen) */
  --smn-blur:       12px;    /* Hintergrund-Blur bei Scroll-Überlagerung */
  --smn-gap:        var(--space-m);  /* Abstand zwischen den Inline-Links */
  --smn-max:        none;    /* optionaler Inhaltsbreiten-Cap fuer Ultra-Wide; Default: volle Breite. Projekt setzt z.B. 1200px. */

  position: sticky;
  top: 0;
  z-index: 1000;
  max-width: var(--smn-max);
  margin-inline: auto;       /* zentriert die Leiste, wenn --smn-max gesetzt ist */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--smn-height);
  padding: 0 var(--space-m);
  /* opaker Hintergrund; wo backdrop-filter greift, leicht durchscheinend + Blur */
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-body);
}

@supports (backdrop-filter: blur(1px)) {
  .sticky-mini-nav {
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: blur(var(--smn-blur));
    -webkit-backdrop-filter: blur(var(--smn-blur));
  }
}

/* --- Wortmarke (links) ---------------------------------------------------- */
.sticky-mini-nav__brand {
  font-family: var(--font-headline);
  font-size: var(--font-scale-h3);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-ink);
  text-decoration: none;
}

/* --- Link-Liste (rechts, Desktop) ----------------------------------------- */
.sticky-mini-nav__links {
  display: flex;
  align-items: center;
  gap: var(--smn-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sticky-mini-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-scale-small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.sticky-mini-nav__link:hover,
.sticky-mini-nav__link:focus-visible {
  color: var(--color-primary);
}

/* Externer-Link-Modifier: kleiner Pfeil-Indikator (rein typografisch, farblos) */
.sticky-mini-nav__link--external::after {
  content: "\2197";          /* ↗ Pfeil nach oben-rechts */
  font-size: 0.85em;
  line-height: 1;
}

/* --- Burger-Button (nur Mobile sichtbar) ---------------------------------- */
.sticky-mini-nav__burger {
  display: none;             /* Desktop: versteckt, Inline-Links übernehmen */
  align-items: center;
  justify-content: center;
  width: var(--smn-touch);
  height: var(--smn-touch);
  margin-right: calc(-1 * var(--space-xs)); /* optische Kante ausgleichen */
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-card);
  color: var(--color-ink);
  cursor: pointer;
}
.sticky-mini-nav__burger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Burger-Icon aus drei Linien (currentColor erbt --color-ink) */
.sticky-mini-nav__burger-bars,
.sticky-mini-nav__burger-bars::before,
.sticky-mini-nav__burger-bars::after {
  --smn-bar-w: 22px;         /* Linien-Breite */
  --smn-bar-h: 2px;          /* Linien-Stärke */
  display: block;
  width: var(--smn-bar-w);
  height: var(--smn-bar-h);
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.sticky-mini-nav__burger-bars { position: relative; }
.sticky-mini-nav__burger-bars::before,
.sticky-mini-nav__burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.sticky-mini-nav__burger-bars::before { top: -7px; }
.sticky-mini-nav__burger-bars::after  { top: 7px; }

/* --- Mobile (<720px): Inline-Links aus, Burger an ------------------------- */
@media (max-width: 719px) {
  /* backdrop-filter erzeugt einen Containing-Block: das position:fixed-Overlay
     waere sonst an die (kurze) Nav-Leiste gebunden statt an den Viewport und
     wuerde sich nicht ueber die Seite legen. Auf Mobile daher ohne Blur,
     opaker Hintergrund reicht. */
  .sticky-mini-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-bg); }

  /* Burger MUSS ueber dem Overlay (z 1001) liegen, sonst ist das Schliessen-X
     verdeckt und nicht antippbar. position:relative aktiviert den z-index. */
  .sticky-mini-nav__burger { display: inline-flex; position: relative; z-index: 1002; }

  /* Link-Liste wird zum Vollbild-Overlay, per JS sichtbar geschaltet */
  .sticky-mini-nav__links {
    position: fixed;
    inset: 0;
    z-index: 1001;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-l);
    padding: var(--space-xl) var(--space-l);
    background: var(--color-bg);
    /* geschlossener Startzustand: nur wenn JS die Komponente kontrolliert */
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--space-s)));
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }

  /* offener Zustand (JS setzt [data-open] auf .sticky-mini-nav) */
  .sticky-mini-nav[data-open="true"] .sticky-mini-nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .sticky-mini-nav__link {
    font-size: var(--font-scale-h3);
    min-height: var(--smn-touch);
  }

  /* Burger -> X, wenn offen */
  .sticky-mini-nav[data-open="true"] .sticky-mini-nav__burger-bars {
    background: transparent;            /* mittlere Linie aus */
  }
  .sticky-mini-nav[data-open="true"] .sticky-mini-nav__burger-bars::before {
    top: 0;
    transform: rotate(45deg);
  }
  .sticky-mini-nav[data-open="true"] .sticky-mini-nav__burger-bars::after {
    top: 0;
    transform: rotate(-45deg);
  }
}

/* --- No-JS-Sicherung -----------------------------------------------------
   Solange JS die Komponente nicht übernimmt (Klasse .smn-ready auf der Leiste),
   bleibt das Overlay-Versteck inaktiv: die Links sind auch mobil als normale,
   sichtbare Liste lesbar (kein toter Burger, kein leerer Screen). */
@media (max-width: 719px) {
  .sticky-mini-nav:not(.smn-ready) .sticky-mini-nav__links {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-s);
    padding: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .sticky-mini-nav:not(.smn-ready) .sticky-mini-nav__link {
    font-size: var(--font-scale-small);
  }
  .sticky-mini-nav:not(.smn-ready) .sticky-mini-nav__burger { display: none; }
}

/* --- Reduced-Motion: keine Übergänge erzwingen --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sticky-mini-nav__links,
  .sticky-mini-nav__link,
  .sticky-mini-nav__burger-bars,
  .sticky-mini-nav__burger-bars::before,
  .sticky-mini-nav__burger-bars::after {
    transition: none;
  }
}