.certs-page { padding:3rem 0 4rem; }
.certs-page__head { text-align:center; margin-bottom:2rem; }
.certs-page__head h1 { color: var(--color-primary); margin: 0 0 .5rem; }
.certs-page__lead { opacity:.8; }
.certs-page__empty { text-align:center; padding:2rem; opacity:.6; }
.certs-page__cat { color: var(--color-primary); font-size:1.4rem; margin: 2.2rem 0 1rem; padding-bottom: .3rem;
                   border-bottom: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent); }

.certs-grid {
  list-style:none; padding:0; margin:0;
  display:grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.certs-card {
  background: var(--color-background, #fff);
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: .5rem; overflow:hidden;
  transition: box-shadow .2s, border-color .2s;
}
.certs-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); border-color: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.certs-card__link { display:block; text-decoration:none; color:inherit; height:100%; }
.certs-card__media {
  position:relative; aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  display:flex; align-items:center; justify-content:center;
  padding: 1rem;
}
.certs-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.certs-card__pdf { font-size: 4rem; opacity:.6; }
.certs-card__noimg { font-size: 3.5rem; opacity:.4; }
.certs-card__pdf-badge {
  position:absolute; top:.5rem; right:.5rem;
  background:#dc2626; color:#fff;
  padding:.15rem .5rem; border-radius:.25rem;
  font-size:.7rem; font-weight:700;
}
.certs-card__body { padding: .9rem 1rem; }
.certs-card__body h3 { margin:0 0 .3rem; font-size: 1rem; line-height: 1.3; color: var(--color-text); }
.certs-card__issuer { margin: 0; font-size:.85rem; opacity:.75; }
.certs-card__date { margin: .15rem 0 0; font-size:.78rem; opacity:.6; }
.certs-card__desc { margin: .4rem 0 0; font-size:.85rem; opacity:.85; line-height:1.4; }

/* Footer-Band mit Gütesiegeln */
.certs-band { padding: 1.5rem 0; text-align:center; }
.certs-band h3 { color: var(--color-primary); margin: 0 0 1rem; font-size: 1rem; opacity:.85; }
.certs-band__row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: 1.8rem; }
.certs-band__item { display:inline-block; }
.certs-band__item img { max-height: 60px; max-width: 130px; opacity:.85; transition: opacity .2s; }
.certs-band__item:hover img { opacity: 1; }

/* Auto-laufendes Logo-Band ("Trusted by"-Streifen) */
.certs-logos {
  --certs-speed: 30s;
  overflow: hidden;
  width: 100%;
  padding: 1.4rem 0;
  /* sanftes Ein-/Ausblenden an den Rändern */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.certs-logos__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 3rem;
  animation: certsScroll var(--certs-speed) linear infinite;
}
.certs-logos:hover .certs-logos__track { animation-play-state: paused; }
.certs-logos__item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.certs-logos__item img {
  height: 46px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: .7;
  transition: opacity .25s ease, filter .25s ease;
}
.certs-logos--gray .certs-logos__item img { filter: grayscale(1); }
.certs-logos__item:hover img { opacity: 1; }
.certs-logos--gray .certs-logos__item:hover img { filter: grayscale(0); }

@keyframes certsScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .certs-logos { -webkit-mask-image: none; mask-image: none; }
  .certs-logos__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.8rem 3rem;
  }
  /* doppelte (gespiegelte) Logo-Liste im Reduced-Motion-Fall ausblenden */
  .certs-logos__item[aria-hidden="true"] { display: none; }
  .certs-logos--gray .certs-logos__item img { filter: grayscale(1); }
  .certs-logos__item img { opacity: .8; }
}