/* ============================================================
   Komponente: medien-querkarte
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → media horizontal cards,
   node 13854:56592, ausgelesen am 04.09.2026.

   Bild oben, darunter Quelle, Titel und Anriss. Trägt auf
   Entdecken die Sektion „Bereit für den Sommer".

   Sie ist NICHT die Content-Karte aus §9: dort steht der Text
   IM Bild mit Verlauf darüber. Hier steht er darunter auf
   eigener Fläche — und anders als bei .inhalt-karte ist das Bild
   deutlich flacher (250 x 110 statt 331 x 167) und es gibt drei
   Textebenen statt zwei.

   Setzt tokens.css und base.css voraus.

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     250 x 235   Kartenmaß.
     250 x 110   Bild. Verhältnis 2,273.
   ============================================================ */

.medien-querkarte {
  display: flex;
  flex-direction: column;
  width: 250px;                            /* gemessen, siehe Kopf */
  flex-shrink: 0;

  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  /* Der Strich als innerer Schatten, nicht als border: er liegt
     in Figma INNEN und darf die automatische Höhe nicht
     vergrößern (AGENTS.md §8a). Nachgezogen am 04.09.2026. */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
}

.medien-querkarte__bild {
  width: 100%;
  aspect-ratio: 250 / 110;                 /* gemessen, siehe Kopf */
  object-fit: cover;
  background-color: var(--label-fill);
}

.medien-querkarte__texte {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);                    /* 8 */
  padding: var(--space-md);                /* 16 */
}

.medien-querkarte__kopf {
  display: flex;
  flex-direction: column;
}

.medien-querkarte__quelle {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-extra-small-text);
  line-height: var(--line-height-extra-small-text);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small-text-bold);   /* 1 % */
  color: var(--text-description);
}

.medien-querkarte__titel {
  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-bold);
  letter-spacing: var(--letter-spacing-small-text-bold);   /* 1 % */
  color: var(--text-primary);
}

/* Anriss in text-primary, nicht in text-description — so
   gemessen und so verlangt es AGENTS.md §8: Sätze stehen immer
   in text-primary. */
.medien-querkarte__anriss {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-extra-small-text);
  line-height: var(--line-height-extra-small-text);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small-text-bold);   /* 1 % */
  color: var(--text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .medien-querkarte:hover {
    background-color: var(--button-ghost-fill-hover);
  }
}

.medien-querkarte:active {
  transform: scale(0.99);
}

.medien-querkarte {
  transition:
    transform        calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out),
    background-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .medien-querkarte:active {
    transform: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Figma setzt die Zeilenhöhe von „extra small text" hier auf
     1,3, tokens.css sagt 1,5. Der Prototyp folgt dem Token —
     sonst hätte der Prototyp zwei Zeilenhöhen für denselben
     Textstil. In Figma oder im Export zu klären.
   · Der Hover auf surface-card ist ghost-fill-hover und damit in
     Dark derselbe Wert wie die Karte selbst. Hier fällt das
     nicht auf, weil die Karte auf surface-primary liegt und der
     Hover die Karte AUFHELLT statt eine Fläche darin zu tönen —
     anders als beim Link Button (link-button.css). Sollte der
     Wert doch zu leise sein, ist label-fill-inverted die
     Gegenrichtung.
   ============================================================ */