/* Hervorgehobene Vergleichs-Kachel in der zweiten Informationsnavigation. */
.info-page .info-topic-nav {
  border: 1px solid rgba(255, 255, 255, .52);
  background: rgba(255, 255, 255, .34);
  box-shadow: 0 12px 30px rgba(8, 35, 52, .12), inset 0 1px 0 rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
}

[data-theme="dark"] .info-page .info-topic-nav {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(7, 19, 28, .42);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.info-page .info-topic-nav__inner {
  min-height: 58px;
}

.info-topic-nav a[href$="/aluminiumfenster-vs-kunststofffenster"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(118deg, #075985 0%, #138bc5 56%, #63bd63 100%);
  box-shadow: 0 8px 20px rgba(8, 100, 151, .24);
  font-weight: 750;
}

.info-topic-nav a[href$="/aluminiumfenster-vs-kunststofffenster"]::before {
  content: "↔";
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
}

.info-topic-nav a[href$="/aluminiumfenster-vs-kunststofffenster"]::after {
  content: "Materialvergleich";
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .035em;
  opacity: .88;
}

.info-topic-nav a[href$="/aluminiumfenster-vs-kunststofffenster"]:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.info-topic-nav a[href$="/aluminiumfenster-vs-kunststofffenster"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 38%, #fff);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .info-page .info-topic-nav__inner {
    min-height: 0;
  }

  .info-page .info-topic-nav a[href$="/aluminiumfenster-vs-kunststofffenster"] {
    padding: 7px 12px;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(118deg, #075985 0%, #138bc5 56%, #63bd63 100%);
    box-shadow: 0 6px 16px rgba(8, 100, 151, .28);
  }

  .info-page .info-topic-nav a[href$="/aluminiumfenster-vs-kunststofffenster"]::before {
    width: 16px;
    height: 16px;
    font-size: .73rem;
  }

  .info-page .info-topic-nav a[href$="/aluminiumfenster-vs-kunststofffenster"]::after {
    display: none;
  }
}

/* Holzfenster-Vergleich: eigene, warme Kachel in derselben Navigation. */
.info-topic-nav a[href$="/aluminiumfenster-vs-holzfenster"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(118deg, #5e3725 0%, #9a613b 55%, #c28a55 100%);
  box-shadow: 0 8px 20px rgba(94, 55, 37, .24);
  font-weight: 750;
}

.info-topic-nav a[href$="/aluminiumfenster-vs-holzfenster"]::before {
  content: "↔";
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 50%;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
}

.info-topic-nav a[href$="/aluminiumfenster-vs-holzfenster"]::after {
  content: "Materialvergleich";
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .035em;
  opacity: .88;
}

.info-topic-nav a[href$="/aluminiumfenster-vs-holzfenster"]:hover {
  color: #fff;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .info-page .info-topic-nav a[href$="/aluminiumfenster-vs-holzfenster"] {
    padding: 7px 12px;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(118deg, #5e3725 0%, #9a613b 55%, #c28a55 100%);
    box-shadow: 0 6px 16px rgba(94, 55, 37, .28);
  }

  .info-page .info-topic-nav a[href$="/aluminiumfenster-vs-holzfenster"]::before {
    width: 16px;
    height: 16px;
    font-size: .73rem;
  }

  .info-page .info-topic-nav a[href$="/aluminiumfenster-vs-holzfenster"]::after {
    display: none;
  }
}