/* ============================================================
   Komponente: buch-karte
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → „ebook cards"
   (14059:49225 / 14059:49226) und „audiobooks cards"
   (14059:49183), ausgelesen am 10.09.2026.

   Cover links, rechts Titel und Autor — und beim eBook wahlweise
   ein Label darunter. Trägt auf Entdecken die Abschnitte „Meist
   gelesene E-Books" und „Beliebte Hörbücher".

   ZWEI BREITEN FÜR DAS COVER, EINE KARTE. Ein Buchcover steht
   hoch (90 breit bei 137 Höhe), ein Hörbuch-Cover ist quadratisch
   (137 x 137). Alles andere ist gleich — deshalb ein Modifier und
   keine zweite Komponente.

   Setzt tokens.css und base.css voraus. Das Label ist
   components/status-label.css.

   VERWENDUNG
     <article class="buch-karte">
       <img class="buch-karte__cover" src="…" alt="">
       <div class="buch-karte__inhalt">
         <div class="buch-karte__texte">
           <p class="buch-karte__titel">Der Sommer, der uns blieb</p>
           <p class="buch-karte__autor">Greta Herrlicher</p>
         </div>
         <span class="status-label status-label--blau">
           <svg class="status-label__ikon"><use href="#icon-bestseller"></use></svg>
           Bestseller
         </span>
       </div>
     </article>

   Hörbuch: <article class="buch-karte buch-karte--hoerbuch">

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     280 x 137   Kartenmaß, beide Fassungen.
     90          Cover beim eBook.
     137         Cover beim Hörbuch (quadratisch).
   ============================================================ */

.buch-karte {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;

  width: 280px;                            /* gemessen, siehe Kopf */
  height: 137px;

  border-radius: var(--radius-md);         /* 20 */
  background-color: var(--surface-card);

  /* Innerer Schatten statt border (AGENTS.md §8a): der Strich
     liegt in Figma INNEN und zählt nicht zu den 137. Mit einem
     border wären es bei border-box 2 px weniger Inhalt, ohne
     border-box 139 statt 137. */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);

  /* Das Cover ist genauso hoch wie die Karte und wird an den
     linken Ecken von ihr beschnitten. */
  overflow: hidden;
}

.buch-karte__cover {
  flex-shrink: 0;
  width: 90px;                             /* gemessen, siehe Kopf */
  height: 100%;
  object-fit: cover;
}

.buch-karte--hoerbuch .buch-karte__cover {
  width: 137px;                            /* quadratisch */
}

.buch-karte__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);                    /* 8 — Text zu Label */
  flex: 1 0 0;
  min-width: 0;
  padding: var(--space-md);                /* 16 */
}

/* Titel und Autor stehen OHNE Abstand untereinander — sie sind
   eine Angabe, keine zwei. Die 8 darüber trennen sie vom Label. */
.buch-karte__texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.buch-karte__titel {
  margin: 0;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-title-text);
  line-height: var(--line-height-title-text);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-small-text-bold);
  color: var(--text-primary);
}

.buch-karte__autor {
  margin: 0;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
  font-weight: var(--font-weight-regular);
  color: var(--text-description);
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Ob die Karte klickbar ist, sagt Figma nicht. Im Prototyp ist
     sie es nicht — es gibt keinen Titel-Screen.
   · Ein langer Titel läuft in Figma über zwei Zeilen und schiebt
     den Autor nach unten; bei drei Zeilen wird es in der 137
     hohen Karte eng. Ein Umbruch-Limit führt der Rahmen nicht.
   ============================================================ */