@charset "UTF-8";
/*!
 * THK Verlag — Coverformate (0.36.3.0)
 *
 * Bis 0.36.2.0 wurde jedes Cover in ein festes Hochformat 2:3 gepresst
 * (object-fit: cover). Quadratische und querformatige Bücher verloren dabei
 * Titel, Autor und Motiv an den Rändern.
 *
 * Jetzt trägt jeder Cover-Kasten das echte Seitenverhältnis als CSS-Variable
 * --r (Breite/Höhe, aus der Mediathek; siehe CoverFormat.php). Der Kasten
 * nimmt genau die Form des Bildes an, Schatten, Buchrücken und Etiketten
 * sitzen am Bild. Ohne --r (Maße unbekannt) bleibt alles wie bisher 2:3.
 *
 * Wird NACH site.css und thk-blocks.css geladen; die Selektoren tragen
 * [data-cover-format], damit sie nur greifen, wenn das Format bekannt ist.
 */

/* ── Raster (Bücherliste, Themenwelt, Autor, „Ähnliche Titel", CMS-Block)
 *
 * Gleiche optische Größe (0.36.4.0, Variante C), Größe wählbar (0.36.5.0).
 * Jedes Cover hat etwa die gleiche Fläche. Aus CoverFormat kommen je Kasten:
 *   --r  Seitenverhältnis Breite/Höhe
 *   --w  Breite als Anteil der Zellbreite
 *   --z  Zellhöhe als Anteil der Zellbreite (Stufe kompakt/mittel/groß)
 * Das Cover steht unten (Grundlinie); Titel und Preise einer Reihe stehen
 * auf gleicher Höhe.
 *   Breite       = --w · Zellbreite
 *   Höhe         = --w / --r · Zellbreite   (über padding-bottom)
 *   Abstand oben = --z · Zellbreite − Höhe
 * Prozentwerte bei padding/margin beziehen sich immer auf die Zellbreite.
 */
.book-card__cover[data-cover-format],
.thk-buch-cover[data-cover-format],
.thk-block--buecher .thk-buch-cover[data-cover-format] {
  width: calc(100% * var(--w, 0.8944));
  height: 0;
  aspect-ratio: auto;
  padding-bottom: calc(100% * var(--w, 0.8944) / var(--r, 0.6667));
  margin-top: calc(100% * var(--z, 1.35) - 100% * var(--w, 0.8944) / var(--r, 0.6667));
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}
.thk-block--buecher .thk-buch-cover[data-cover-format] img,
.thk-buch-cover[data-cover-format] img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.thk-buch-cover--leer[data-cover-format] span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* Handeinstellung (fester Kasten): Bild vollständig einpassen, nie beschneiden */
[data-cover-fest] img { object-fit: contain !important; }

/* ── Startseite, Bühne ─────────────────────────────────────────────────
 * Das Cover passt in einen Rahmen von höchstens --buehne-b × --buehne-h.
 * Hochformat wie bisher 250 × 375, Querformat breiter und flacher. */
.buehne { --buehne-h: 375px; --buehne-b: 340px; }
.buehne__folie { grid-template-columns: auto 1fr; }
.buehne__cover[data-cover-format] {
  aspect-ratio: var(--r);
  width: min(var(--buehne-b), calc(var(--buehne-h) * var(--r)));
}
@media (max-width: 1100px) {
  .buehne { --buehne-h: 315px; --buehne-b: 290px; }
  .buehne__folie { grid-template-columns: auto 1fr; }
}
@media (max-width: 860px) {
  .buehne { --buehne-h: 180px; --buehne-b: 170px; }
  .buehne__folie { grid-template-columns: auto 1fr; }
}

/* ── Buchseite ─────────────────────────────────────────────────────────
 * Kasten in echter Form; breitere Spalte für Quadrat und Querformat. */
.book__cover[data-cover-format] { aspect-ratio: var(--r); width: 100%; }
.book__hero--quadrat { grid-template-columns: 400px 1fr; }
.book__hero--quer    { grid-template-columns: 460px 1fr; }
@media (max-width: 1000px) {
  .book__hero--quadrat { grid-template-columns: 340px 1fr; }
  .book__hero--quer    { grid-template-columns: 380px 1fr; }
}
@media (max-width: 820px) {
  .book__hero--quadrat,
  .book__hero--quer { grid-template-columns: 1fr; }
  .book__hero--quadrat .book__cover-wrap { max-width: 320px; }
  .book__hero--quer    .book__cover-wrap { max-width: 400px; }
}

/* ── Warenkorb, Kasse: kleine Vorschaubilder ───────────────────────────
 * Bild in eigener Form (Breite fest, Höhe folgt), höchstens so hoch wie
 * bisher; unten bündig. Gilt für alle Formate, braucht kein --r. */
.cart-item__cover a { aspect-ratio: auto; overflow: visible; }
.cart-item__cover img {
  aspect-ratio: auto; height: auto; max-height: 126px; object-fit: contain;
}
.ck-summary__cover { display: flex; align-items: center; justify-content: center; }
.ck-summary__cover img {
  width: auto; height: auto; max-width: 42px; max-height: 58px; object-fit: contain;
}
.ck-table__cover img {
  width: auto; height: auto; max-width: 38px; max-height: 52px; object-fit: contain;
}

/* ── Leserstimmen: Mini-Cover als Hintergrundbild ──────────────────────
 * Ganzes Bild zeigen; Schatten folgt der Bildform (drop-shadow statt
 * box-shadow auf dem Kasten). */
.testimonial__buch-cover:not(.testimonial__buch-cover--platzhalter),
.rezension__buch-cover {
  background-size: contain; background-repeat: no-repeat; background-position: center bottom;
  background-color: transparent; box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}