/* library.css — nur fuer die Gratis-Bibliothek (library.html).
   Erbt Farben, Schrift und Huelle aus style.css; hier steht ausschliesslich das
   Galerie-Gitter. Bewusst eine eigene Datei statt Inline-CSS: liyoli.de liefert
   `script-src 'self'` aus, und die Gewohnheit "alles extern" hat schon mehrfach
   verhindert, dass etwas live anders aussieht als lokal. */

.bib-kopf { margin-bottom: 30px; }
.bib-kopf .unter { max-width: 46ch; }

.bib-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px 22px;
  margin: 0 0 52px;
}

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
}

.karte-bild {
  display: block;
  border-radius: calc(var(--radius) - 8px);
  overflow: hidden;
  background: var(--creme);
}

/* Die Feed-Bilder sind 4:5 und tragen den Markenrahmen bereits im Bild —
   deshalb kein zusaetzlicher Rahmen, sonst steht Rahmen auf Rahmen. */
.karte-bild img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform .25s ease;
}

.karte-bild:hover img,
.karte-bild:focus-visible img { transform: scale(1.03); }

.karte h2 {
  font-size: 1.02rem;
  margin: 14px 0 2px;
  line-height: 1.3;
}

.karte-buch {
  margin: 0 0 14px;
  font-size: .84rem;
  color: var(--gedaempft);
}

.karte-buch a { color: var(--gedaempft); }

.karte-knopf {
  margin-top: auto;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: .92rem;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--papier);
  background: var(--salbei-dunkel);
  border: 1px solid var(--salbei-dunkel);
}

.karte-knopf:hover,
.karte-knopf:focus-visible { background: var(--salbei); border-color: var(--salbei); }

.bib-brief {
  border-top: 1px solid var(--linie);
  padding-top: 26px;
  margin-bottom: 40px;
}

.bib-brief h2 { margin: 0 0 6px; font-size: 1.15rem; }
.bib-brief p { margin: 0 0 14px; color: var(--gedaempft); max-width: 44ch; }

@media (max-width: 420px) {
  .bib-gitter { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
  .karte { padding: 10px 10px 14px; }
}