/* ============================================================
   Komponente: cover (Titel-Karte in einer Cover-Reihe)
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web"
     · Magazines cards horizontal scroll  13863:60286 (156 breit)
     · Cover / Hamburger Abendblatt       13780:13947 (100 breit)
   ausgelesen am 04.09.2026.

   Ein Cover mit Titel darunter. Zwei Breiten, ein Aufbau:
     .cover            156 breit — Magazine
     .cover--zeitung   100 breit — Zeitungen

   DAS SEITENVERHÄLTNIS IST IN BEIDEN GLEICH. Aus den
   Instanzhöhen zurückgerechnet: eine Magazin-Instanz ist 236
   hoch (Cover + 8 Abstand + 21 Titel) → Cover 207. Bei zwei
   Titelzeilen wird die Instanz 257, das Cover bleibt 207.
   156 / 207 = 0,7536 · 100 / 134 = 0,7463 — dieselbe Form.

   Deshalb aspect-ratio und keine festen Höhen: der Titel darf
   ein- oder zweizeilig sein, ohne dass das Cover mitwächst. Das
   ist genau der Fall, den §17.1 meint — verbindlich ist das
   Ergebnis, nicht der Aufbau.

   Setzt tokens.css und base.css voraus.

   VERWENDUNG
     <a class="cover" href="#">
       <img class="cover__bild" src="…" alt="">
       <span class="cover__titel">Bild der Frau</span>
     </a>

   Das alt bleibt leer: der Titel steht als Text daneben, und
   ein Screenreader würde ihn sonst zweimal lesen.

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     156 / 100   Breiten.
     156 / 207   Seitenverhältnis des Covers.
   ============================================================ */

.cover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);                    /* 8 */

  width: 156px;                            /* gemessen, siehe Kopf */
  flex-shrink: 0;
  text-decoration: none;
  color: var(--text-primary);
  cursor: pointer;
}

.cover--zeitung {
  width: 100px;
}

/* Rätsel-Kachel. Dieselbe Bauform, anderes Seitenverhältnis:
   100 x 121,549 statt 100 x 134 (Figma 13844:15577). Ein Rätsel
   ist kein Titelblatt — es ist eine Vorschau auf ein Spielfeld
   und deshalb weniger hoch. */
.cover--raetsel {
  width: 100px;
}

.cover--raetsel .cover__bild {
  aspect-ratio: 100 / 121.549;
}

.cover__bild {
  width: 100%;
  aspect-ratio: 156 / 207;                 /* gemessen, siehe Kopf */
  object-fit: cover;
  border-radius: var(--radius-sm);         /* 10 */
  background-color: var(--label-fill);

  /* 1 px label-outline. Als inset box-shadow und nicht als
     border: ein border liegt bei border-box INNEN und würde das
     Bild um 1 px beschneiden — bei einem Cover fällt das als
     abgeschnittener Rand des Titelkopfes auf. Der Schatten liegt
     darüber (AGENTS.md §8a). */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
}

/* ------------------------------------------------------------
   Marken auf dem Titelblatt
   ------------------------------------------------------------
   Manche Cover tragen ein Label: die Zahl der Ausgaben, die
   Sprache. Es liegt AUF dem Blatt, darf aber die Zeile nicht
   höher machen — sonst stünde der Titel unter dem einen Cover
   tiefer als unter dem Nachbarn. Deshalb liegt es absolut, und
   der Platzhalter dafür ist ein Behälter nur um das Bild.

   .cover__blatt ist optional. Cover ohne Marke bleiben, wie sie
   sind: Bild und Titel direkt in .cover.

     <a class="cover cover--zeitung">
       <span class="cover__blatt">
         <img class="cover__bild" …>
         <span class="ausgaben-label cover__marke cover__marke--ausgaben">
           10 Ausgaben
         </span>
       </span>
       <span class="cover__titel">Bild</span>
     </a>

   Führt die Kachel woandershin als „Titel öffnen", ist sie ein
   <button> statt eines <a> — siehe weiter unten.

   FIGMA RÜCKT DEN TITEL UNTER DEM BILD-COVER 2 PX TIEFER, weil
   dort das überstehende Label die Höhe des Bildrahmens
   mitbestimmt (144 statt 134+8=142). Das ist ein Nebeneffekt des
   Auto-Layouts, keine Absicht: in einer Reihe säße genau ein
   Titel 2 px tiefer als alle anderen. Hier stehen sie auf einer
   Linie.
   ------------------------------------------------------------ */

.cover__blatt {
  position: relative;
  display: block;
  width: 100%;
}

.cover__marke {
  position: absolute;
  z-index: 1;
}

/* ------------------------------------------------------------
   Wenn die Kachel etwas anderes tut als „Titel öffnen"
   ------------------------------------------------------------
   Hinter dem Bild-Cover liegt kein einzelner Titel, sondern zehn
   Regionalausgaben. Die Kachel öffnet deshalb ein Sheet und ist
   ein <button> statt eines <a> (Lisi, 11.09.2026: „das ganze
   cover inkl text muss das bottom sheet öffnen").

   Das Label bleibt dabei reine Auskunft — ein <span>, kein
   zweiter Knopf. Zwei Ziele auf einer Kachel wären zwei
   Tab-Stopps und eine Frage mehr, als die Kachel stellt.

   Hier stand kurz ein gestreckter Link mit einem eigenen Knopf
   für das Label. Der ist hinfällig, seit die ganze Kachel
   dasselbe tut.

   Ein Button zentriert seinen Inhalt und schreibt mittig —
   deshalb die beiden Zeilen unten. Alles andere bringt .cover
   schon mit.
   ------------------------------------------------------------ */

button.cover {
  text-align: left;
  font: inherit;
}

/* Ausgaben: hängt unten über den Rand des Blattes hinaus.
   Gemessen an 13844:15536 — Behälter mit Saum bei x 15, y 114,
   30 hoch, das Blatt 134. Der Saum (2) liegt außerhalb des
   Layouts, deshalb 15+2 und 134-(114+2+26). */
.cover__marke--ausgaben {
  left: 17px;
  bottom: -8px;
}

/* Sprache: sitzt ganz im Blatt, unten rechts.
   Gemessen an 14084:58359 — x 46, y 99, 50 x 26 im 100 x 134
   Blatt, also 4 von rechts und 9 von unten. Rechts verankert,
   weil das Kürzel mal zwei, mal drei Zeichen hat. */
.cover__marke--sprache {
  right: 4px;
  bottom: 9px;
}

.cover__titel {
  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);   /* 1 % */
  color: var(--text-primary);

  /* „Kreuzworträtsel" ist EIN Wort ohne Umbruchstelle und
     breiter als die 100 der Rätsel-Kachel. Ohne Trennung läuft
     es über den Nachbarn — am 04.09.2026 auf Entdecken zu
     sehen. hyphens: auto trennt nach der Sprache aus
     <html lang="de">, overflow-wrap fängt den Rest. */
  width: 100%;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------
   Zustände
   ------------------------------------------------------------
   Das Cover IST das Bedienelement — es gibt keine Fläche
   darunter, die einen Hover tragen könnte. Deshalb Anheben
   statt Tönen: scale über transform, kein box-shadow (§23.1).

   Der Fokus-Ring liegt auf .on-image (base.css): ein weißer Ring
   auf einem hellen Cover verschwindet sonst, und ein Cover ist
   hell oder dunkel unabhängig vom Mode (§18).
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .cover:hover .cover__bild {
    transform: scale(1.03);
  }
}

.cover:active .cover__bild {
  transform: scale(0.98);
}

.cover__bild {
  transition: transform calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .cover:hover .cover__bild,
  .cover:active .cover__bild {
    transform: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Der Favoriten-Stern auf dem Cover (§18, „Meine Titel") ist
     hier nicht Teil der Komponente — er kommt mit dem
     Favoriten-Raster.
   · Hover und Press stehen in Figma nicht an der Komponente.
   ============================================================ */