// ────────────────────────────────────────────────────────────────
// Komponente · Navigation / Kacheln
// ────────────────────────────────────────────────────────────────

.navbar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.4vw, 22px);
  align-items: flex-start;
}

.nav-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease);

  &:hover,
  &:focus-visible {
    outline: none;
    opacity: .85;
  }

  img {
    display: block;
    width: clamp(72px, 13.5vw, 128px);
    height: clamp(72px, 13.5vw, 128px);
    margin: 0 auto clamp(14px, 2vw, 20px);
    opacity: .92;
    transition:
      opacity var(--dur-slow) var(--ease),
      transform var(--dur-slow) var(--ease);
  }

  &:hover img {
    opacity: 1;
    transform: scale(1.06);
  }

  &__title {
    display: block;
    font-size: clamp(12px, 1.5vw, 16px);
    font-weight: var(--fw-medium);
    letter-spacing: .24em;
    text-indent: .24em;
    text-transform: uppercase;
  }

  &__sub {
    display: block;
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: clamp(10px, 1.1vw, 12.5px);
    letter-spacing: .16em;
    text-indent: .16em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

// Kachel mit gerendertem Objekt statt Glyphe
.nav-tile img.shot {
  width: auto;
  height: clamp(52px, 6vw, 78px);
  max-width: clamp(82px, 9.6vw, 126px);
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 24%, transparent))
          drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 12%, transparent));
}