/* ============================================================
   Komponente: newsfeed-karte
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → newsfeed cards,
   node 13849:15176, ausgelesen am 04.09.2026.

   Eine Kurzmeldung: Bild mit dem Verlagslogo als Kreis in der
   unteren linken Ecke, daneben Schlagzeile, darunter Quelle als
   Link und der Zeitstempel mit rotem Punkt.

   DER ROTE PUNKT BLEIBT ROT. §21.1 sagt „Rot ist eng", §21.1a
   nennt aber ausdrücklich die Ausnahme: „das aktuell-Label, der
   rote Status-Punkt und die Top-Story-Karte bleiben rot. Sie
   zeichnen Inhalt aus, sie melden keinen Vorgang."

   Setzt tokens.css, base.css und components/link-button.css
   voraus.

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     331 x 109   Kartenmaß.
     73,6        Bild, quadratisch.
     41          Verlagskreis, überlappt das Bild unten links.
     8,75        Roter Punkt.
     24          Innenabstand rechts (links 8).
   ============================================================ */

.newsfeed-karte {
  display: flex;
  align-items: flex-start;

  /* Padding nicht symmetrisch, so gemessen: 16 oben, 24 rechts,
     12 unten, 8 links. */
  padding: var(--space-md) var(--space-lg) var(--space-sm) var(--space-xs);
  border-radius: var(--radius-md);
}

/* Bild und Verlagskreis überlappen. Der Kreis sitzt unten links
   und ragt links aus dem Bild heraus — deshalb liegt das Bild
   selbst um seine halbe Überlappung eingerückt. */
.newsfeed-karte__medien {
  position: relative;
  flex-shrink: 0;
  width: 81px;                             /* 73,6 Bild + 7,36 Versatz */
  /* Und ebenso hoch: das Verlagslogo hängt unten über das Bild
     hinaus, in Figma reicht der Block dadurch bis 81
     (I13849:15176;7272:19123). Ohne die Höhe war die Karte 119
     statt 109 — die Zeile richtete sich nach dem Textblock.
     Nachgezogen am 04.09.2026. */
  height: 81px;
}

.newsfeed-karte__bild {
  width: 73.6px;                           /* gemessen, siehe Kopf */
  height: 73.6px;
  margin-left: 7.4px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background-color: var(--label-fill);
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
}

.newsfeed-karte__verlag {
  position: absolute;
  left: 0;
  top: 40px;                               /* gemessen, siehe Kopf */
  width: 41px;
  height: 41px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background-color: var(--white);
  /* Der Kreis liegt auf dem Bild und braucht eine Kante, sonst
     verschwimmt er auf hellen Motiven. */
  box-shadow: 0 0 0 var(--outline-default) var(--label-outline);
}

.newsfeed-karte__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);                   /* 4 */
  flex: 1 0 0;
  min-width: 0;
}

.newsfeed-karte__titel {
  padding-left: var(--space-md);           /* 16 */
  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);
}

.newsfeed-karte__fuss {
  display: flex;
  align-items: center;
  /* 8 links, damit die Quelle als Link Button mit dem Titel auf
     einer Achse fluchtet: der Link bringt seine eigenen 8 mit
     (dieselbe Rechnung wie .message__zeilen in message.css). */
  padding-inline: var(--space-xs);
}

/* Der Quellen-Link ist niedriger als der normale Link Button:
   24 statt 45. In einer 109 px hohen Karte hätte die 45er Höhe
   keinen Platz. Die Klickfläche wächst über .touch-target. */
.newsfeed-karte__quelle {
  height: 24px;
}

/* Das Sprach-Label steht ganz rechts und schiebt sich nicht in
   die Zeit hinein: die Zeit gibt nach, nicht das Label. Es hat in
   Figma 8 Polster links und rechts (13849:15182). */
/* Das Sprach-Label steht ganz rechts. Es ist 26 hoch, die
   Fußzeile im Rest 24 — ohne die feste Höhe wüchse die Karte von
   109 auf 121. In Figma bleibt sie bei 109, das Label liegt also
   innerhalb der Zeile und dehnt sie nicht. */
.newsfeed-karte__fuss .sprach-label {
  margin-left: auto;
  margin-inline: var(--space-xs);
  height: 24px;
  padding-block: 0;
}

.newsfeed-karte__zeit {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);                   /* 4 */
  padding-inline: var(--space-xs);

  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);
  color: var(--text-description);
  white-space: nowrap;
}

.newsfeed-karte__punkt {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  width: 8.75px;                           /* gemessen, siehe Kopf */
  height: 8.75px;
}

/* ------------------------------------------------------------
   Die Gruppe: EINE KARTE, nicht lose Zeilen
   ------------------------------------------------------------
   Quelle: „Newsfeed Section", mobil 2731:26588 (353 x 436),
   Tablet 13849:15174 (674 x 218). Ausgelesen am 10.09.2026,
   nachdem Lisi gemeldet hat, dass die Zeilen im Prototypen frei
   auf dem Screen standen statt in einer Fläche.

   Der Abschnitt ist in Figma eine Fläche in surface-card mit
   Radius md — darin liegen die Zeilen ohne eigenes Polster, Kante
   an Kante. Die 16, um die die Trennlinien eingezogen sind, sind
   der Innenabstand der ZEILE, nicht der Fläche.

   MASSE
     mobil    353 x 436 — eine Spalte, vier Zeilen à 109
     Tablet   674 x 218 — zwei Spalten à 331, Abstand 12,
                          je zwei Zeilen à 109

   Der Umbruch auf eine Spalte steht hier und nicht im Screen:
   zwei Spalten à 331 brauchen 674, darunter bricht die
   Schlagzeile unschön. Das ist eine Eigenschaft der Karte, nicht
   des Screens, auf dem sie liegt.
   ------------------------------------------------------------ */

.newsfeed-gruppe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);                    /* 12 — gemessen */

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

@media (max-width: 779px) {
  /* AUS ZWEI SPALTEN WIRD EINE LISTE, nicht zwei gestapelte
     Blöcke. Deshalb hier auch gap: 0 — mit den 12 zwischen den
     Spalten wäre die Karte 448 statt der 436 aus dem Rahmen, und
     in der Mitte klaffte eine Lücke, wo in Figma eine Trennlinie
     steht. */
  .newsfeed-gruppe {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  /* Und die letzte Zeile einer Spalte ist dann nicht mehr die
     letzte Zeile der Karte: darunter folgt die nächste Spalte.
     Also bekommt auch sie eine Trennlinie. Vier Zeilen, drei
     Linien — so steht es in 2731:26588. */
  .newsfeed-gruppe > .newsfeed-spalte:not(:last-child) > .newsfeed-karte:last-child {
    position: relative;
  }

  .newsfeed-gruppe > .newsfeed-spalte:not(:last-child) > .newsfeed-karte:last-child::after {
    content: '';
    position: absolute;
    left: var(--space-md);
    right: var(--space-md);
    bottom: 0;
    height: var(--outline-default);
    background-color: var(--label-outline);
  }
}

/* FLÄCHE FOLGT DEM UNTERGRUND (§5, §6). Der Platzhalter hinter
   dem Bild steht sonst auf label-fill — und das ist derselbe
   Wert wie surface-card, der Platzhalter wäre also unsichtbar,
   solange das Bild fehlt. Auf der Karte eine Stufe tiefer. */
.newsfeed-gruppe .newsfeed-karte__bild {
  background-color: var(--label-fill-inverted);
}

/* ------------------------------------------------------------
   Zwei Spalten mit Trennlinie
   ------------------------------------------------------------
   In Figma liegen die Karten in zwei Spalten, und innerhalb
   einer Spalte trennt eine Linie die Karten — 16 eingezogen, wie
   der Inhalt. Zwischen den Spalten gibt es keine Linie.
   ------------------------------------------------------------ */

.newsfeed-spalte {
  display: flex;
  flex-direction: column;
}

.newsfeed-spalte > .newsfeed-karte:not(:last-child) {
  position: relative;
}

.newsfeed-spalte > .newsfeed-karte:not(:last-child)::after {
  content: '';
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: 0;
  height: var(--outline-default);
  background-color: var(--label-outline);
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Der rote Punkt steht in Figma auf zwei festen Rotwerten
     (#7A252A und #F14B4E). Im Sprite zeigen sie auf die
     Primitive red-700 und red-300 — ein semantisches Token für
     „Status-Punkt" gibt es nicht. §21.1a nennt ihn, tokens.css
     kennt ihn nicht.
   · Ob die ganze Karte klickbar ist, sagt Figma nicht. Hier ist
     nur die Quelle ein Link.
   ============================================================ */