/* Archiv-Seiten: Filter-Tab neben der Überschrift */

.archive-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1rem;
}

.archive-header h1 {
  margin: 0;
}

/* Nur die Buttons bündig mit .note-Inhalten (35rem, zentriert) */
.archive-filter {
  /* margin-left: calc((100% - 35rem) / 2); */
  /* display: inline-flex; */
  align-items: center;
  gap: 0.25rem;
  max-width: 35rem;
  margin: 0 auto;  
}

.archive-filter__btn {
  padding: 0.35em 0.5em;
  border: 1px solid #999;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: inherit;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

/* Light mode: inaktiv = Icon ausgrauen, Border unverändert */
.archive-filter__btn:not(.is-active) {
  color: #999;
}

.archive-filter__btn:not(.is-active):hover {
  color: #666;
}

.archive-filter__btn.is-active {
  border-color: currentColor;
}

.archive-filter__btn svg {
  display: block;
  width: 1em;
  height: 1em;
}

@media (prefers-color-scheme: dark) {
  .archive-filter__btn {
    border-color: rgba(255,255,255,0.35);
  }

  .archive-filter__btn:not(.is-active) {
    color: rgba(255,255,255,0.45);
    background: transparent;
  }

  .archive-filter__btn:not(.is-active):hover {
    color: rgba(255,255,255,0.65);
  }

  .archive-filter__btn.is-active {
    background: rgba(255,255,255,0.12);
    color: inherit;
  }
}

/* Icons in der Archiv-Monatsliste (Jahresübersicht) */
.archive-month-icon {
  display: inline-block;
  vertical-align: -0.2em;
  margin-left: 0.2em;
}
.archive-month-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.archive-item {
  /* Wrapper für Filter-Sichtbarkeit */
}

/* Mediamenu-Kurzzeile im Archiv: Titel und „gesehen“ 0.5em grösser, nur Titel fett */
.archive-mediamenu-line__headline a {
  font-size: 1.5em;
  line-height: 1.3334em;
}
.archive-mediamenu-line__headline a:first-of-type {
  font-weight: 700;
}
.archive-mediamenu-line__headline a:last-of-type {
  font-weight: 400;
}