/* PDF-Downloads: Karten ({{downloads:…}}) + Vorschau-Modal (assets/js/pdf-modal.js, natives <dialog>).
   Meta „css: downloads“. Modal-Optik wie das Bild-Modal (.lb in base.css). */
.dl-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.dl-grid > li { display: flex; }
.dl-card { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-s); align-items: stretch; width: 100%;
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-s);
  color: var(--color-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.dl-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow); }
.dl-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.dl-card__thumb { width: 100%; height: auto; align-self: start; border: 1px solid var(--color-line); border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(20,19,19,.1); }
.dl-card__body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.dl-card__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--color-primary-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dl-card__title { font-size: var(--step-0); line-height: 1.25; overflow-wrap: anywhere; }
.dl-card__desc { font-size: var(--step--1); color: var(--color-muted); }
.dl-card__meta { font-size: var(--step--1); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.dl-card__cta { margin-top: auto; padding-top: .35rem; font-size: var(--step--1); font-weight: 700; color: var(--color-primary-text); }
.dl-card:hover .dl-card__cta { text-decoration: underline; }
@media (max-width: 24rem) {
  .dl-card { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-xs); }
}

html.pm-open { overflow: hidden; }
.pm { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #141313; color: #fff; overflow: hidden; }
.pm::backdrop { background: rgba(20,19,19,.6); }
.pm[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.pm__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--space-s); justify-content: space-between;
  padding: max(.6rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) .6rem max(.75rem, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(255,255,255,.14); }
.pm__title { flex: 1 1 14rem; min-width: 0; margin: 0; font-size: var(--step-0); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.pm__meta { display: block; font-size: var(--step--1); font-weight: 400; color: #cfcfcf; }
.pm__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pm__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem 1.1rem; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-size: var(--step--1); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.pm__btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm__btn--primary { background: var(--color-primary-strong); color: var(--color-on-primary); }
.pm__btn--primary:hover { background: var(--color-primary-text); }
.pm__btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.pm__btn--outline:hover { background: #fff; color: var(--color-ink); border-color: #fff; }
.pm__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pm__close { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; }
.pm__close:hover { background: rgba(255,255,255,.26); }
.pm__stage { position: relative; min-height: 0; display: grid; place-items: center; padding: var(--space-xs) var(--space-s); }
.pm__frame { width: min(100%, 60rem); height: 100%; border: 0; border-radius: 4px; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.pm__img-wrap { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; text-align: center; }
.pm__img { display: inline-block; max-width: 100%; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.pm__frame[hidden], .pm__img-wrap[hidden] { display: none; }
.pm__note { position: absolute; inset: auto 1rem .6rem; margin: 0 auto; max-width: 40ch; text-align: center; font-size: var(--step--1); color: #e8e8e8; pointer-events: none; }
.pm__note[hidden] { display: none; }
@media (max-width: 40rem) {
  .pm__bar { padding-bottom: .5rem; }
  .pm__actions { width: 100%; }
  .pm__btn:not(.pm__close) { flex: 1 1 auto; justify-content: center; }
  .pm__close { position: absolute; top: max(.5rem, env(safe-area-inset-top)); right: .6rem; }
  .pm__title { padding-right: 3.25rem; flex-basis: 100%; }
  .pm__stage { padding: .5rem; }
}
@media print { .pm { display: none !important; } }

/* Überschriften/Abstände rund um die Karten */
.dl-heading { margin: var(--space-l) 0 var(--space-s); }
.dl-h2 { margin-bottom: var(--space-m); }
.dl-more { margin-top: var(--space-m); }