/* ============================================================
   Komponente: alle-kachel
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → „Alle / …",
   node 13781:13995, ausgelesen am 04.09.2026.

   Steht am Ende einer Cover-Reihe und führt in die vollständige
   Liste. Sie hat die Maße eines Covers, damit die Reihe nicht
   aus dem Takt gerät — deshalb liegt sie neben cover.css und
   nicht darin: gleiche Größe, andere Aufgabe.

   Es ist eine Navigation, kein Handlungsversprechen — also die
   Link-Familie (§6): Text in text-accent, Pfeil dazu. Zwei
   Signale, nicht Farbe allein.

   Setzt tokens.css und base.css voraus.

   VERWENDUNG
     <a class="alle-kachel" href="#">
       <svg class="alle-kachel__pfeil"><use href="#icon-arrow-line"></use></svg>
       <span class="alle-kachel__text">Top Tages&shy;zeitungen</span>
     </a>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     156 / 100   Breiten, wie beim Cover.
     10          Innenabstand (Figma p-[10px]). Nicht auf der
                 Skala; die Kachel ist klein und 12 würde den
                 zweizeiligen Text drücken.
     14          Pfeil.
   ============================================================ */

.alle-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);                    /* 12 */

  width: 156px;
  /* Dieselbe Höhe wie das Cover daneben — nicht dieselbe Form:
     die Kachel trägt keinen Titel unter sich. */
  aspect-ratio: 156 / 207;
  flex-shrink: 0;
  padding: 10px;                           /* gemessen, siehe Kopf */
  border-radius: var(--radius-sm);

  background-color: var(--surface-card);
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
  color: var(--text-accent);
  text-decoration: none;
  text-align: center;
}

.alle-kachel--zeitung {
  width: 100px;
  aspect-ratio: 100 / 134;
}

.alle-kachel__pfeil {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  width: 14px;                             /* gemessen, siehe Kopf */
  height: 14px;
}

.alle-kachel__text {
  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-accent);
}

/* ------------------------------------------------------------
   Zustände
   ------------------------------------------------------------
   Die Kachel liegt auf surface-primary und ist selbst eine
   Karte. Ihr Hover geht deshalb nach unten, nicht nach oben:
   label-fill-inverted, dieselbe Richtung wie beim Chip auf einer
   Karte (§5).
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .alle-kachel:hover {
    background-color: var(--label-fill-inverted);
  }
}

.alle-kachel:active {
  background-color: var(--label-fill-inverted);
  transform: scale(0.98);
}

.alle-kachel {
  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) {
  .alle-kachel:active {
    transform: none;
  }
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Der Text steht in Figma auf ein Token für green-300, wird
     aber in #56b2dd gerendert. Hier gilt text-accent — der
     gerenderte Wert. In Figma ist die Bindung zu korrigieren.
   · Hover und Press stehen in Figma nicht an der Komponente.
   ============================================================ */