/* The favorieten page: a figure on its baseline next to a numbered list, one hairline-ruled block per favoriet. */
.favorieten { padding-bottom: clamp(56px, 8vw, 112px); }
.favorieten .band-head { padding-top: clamp(32px, 5vw, 72px); margin-bottom: 0; }
.favorieten .band-head h1 {
  margin: 0; font-family: var(--f-caps); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(30px, 4.2vw, 64px); line-height: 0.95;
}
.fav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 64px); border-top: 1px solid var(--hair-strong); margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; }
.fav:target { border-top-color: var(--ink); }
.fav-figure { display: flex; align-items: flex-end; justify-content: center; align-self: stretch; min-width: 0; }
.fav-figure img { display: block; width: auto; max-width: 100%; max-height: 240px; height: auto; margin-bottom: -1px; object-fit: contain; }
.fav-list { min-width: 0; }
.fav-list h2 {
  margin: 0 0 16px; font-family: var(--f-caps); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(20px, 2vw, 28px); line-height: 1.1;
}
.fav-list ol { list-style: none; margin: 0; padding: 0; counter-reset: piece; }
.fav-list li { counter-increment: piece; display: grid; grid-template-columns: 3ch 1fr; gap: 12px; align-items: center; min-height: 48px; border-top: 1px solid var(--hair); }
.fav-list li::before { content: counter(piece); font-family: var(--f-num); font-stretch: 62%; font-weight: 800; font-size: 22px; color: var(--ink-2); }
.fav-list li a, .fav-list li span { display: block; padding: 10px 0; }
.fav-list li a { text-decoration: none; }
.fav-list li a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .fav { grid-template-columns: 1fr; }
  .fav-figure { justify-content: flex-start; }
  .fav-figure img { max-height: 160px; }
}