/* ============================================================ Komponente: fortsetzen-karte ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" → last read card, node 13856:15642, ausgelesen am 04.09.2026. „Weiterlesen": Cover links, Titel und Fundstelle rechts, ein Fortschrittsbalken darunter, ✕ oben rechts. DAS ✕ IST HIER KEIN SCHLIESSEN. Es entfernt den Titel aus der Liste. SKILL.md §19.2 sagt dazu ausdrücklich: „Das ✕ auf einer Karte im Fließinhalt (Weiterlesen-Karte in ‚Zuletzt gelesen') entfernt den Titel und bleibt ein ✕ — dort gibt es keine Fläche zu schließen. §19 greift da nicht." Das aria-label muss das benennen, nicht „schließen". Setzt tokens.css und base.css voraus. VERWENDUNG
Gala 36/2026 · S. 7 von 92
------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 109,3 Kartenhöhe. 78,4 Coverbreite. Verhältnis 78,4 / 109,3 = 0,7176. 29,8 x 30 ✕-Fläche. UNTER der Untergrenze von 44 (§11.2) — die Klickfläche wächst deshalb über .touch-target, die sichtbare Scheibe bleibt. 8 ✕-Glyphe. 7 Höhe des Fortschrittsbalkens. ============================================================ */ .fortsetzen-karte { display: flex; align-items: stretch; height: 109px; /* gemessen, siehe Kopf */ 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); /* Das Cover sitzt an der Kante und muss vom Radius beschnitten werden. */ overflow: hidden; } /* Auf Entdecken ist die Karte 280 breit statt 331 — dort liegen drei in einer Reihe, die über den Rand hinausläuft (Figma 13844:15479). Die Höhe bleibt gleich. */ .fortsetzen-karte--schmal { width: 280px; flex-shrink: 0; } .fortsetzen-karte__cover { flex-shrink: 0; width: 78.4px; /* gemessen, siehe Kopf */ height: 100%; object-fit: cover; background-color: var(--label-fill); } /* Padding nicht symmetrisch, so gemessen: 12 oben, 8 rechts, 16 unten, 16 links. Rechts weniger, weil dort das ✕ sitzt und seine eigene Fläche mitbringt. */ .fortsetzen-karte__box { display: flex; flex-direction: column; justify-content: space-between; flex: 1 0 0; min-width: 0; padding: var(--space-sm) var(--space-xs) var(--space-md) var(--space-md); } .fortsetzen-karte__oben { display: flex; align-items: flex-start; gap: var(--space-2xs); width: 100%; } .fortsetzen-karte__texte { display: flex; flex-direction: column; flex: 1 0 0; min-width: 0; /* 4 oben, damit der Titel mit der Mitte der ✕-Scheibe fluchtet. */ padding-top: var(--space-2xs); } .fortsetzen-karte__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); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Die Fundstelle bricht NICHT um. In der schmalen Variante (280) bleiben für „36/2026 · S. 7 von 92" 142 px, gebraucht werden 143 — ein Pixel, und die „92" landete auf einer zweiten Zeile. Ein Seitenstand ist EIN Wert; zweizeilig liest er sich als zwei. Reicht der Platz wirklich nicht, kürzt ein Auslassungs- zeichen. Das widerspricht AGENTS.md §22.2 nicht: die Regel „Umbruch ist verpflichtend, kein ellipsis" gilt dort für AKTIONS-LABELS in Dialogen — ein gekürztes Aktions-Label ist eine unklare Aktion. Hier steht Metainformation, kein Handlungsversprechen. */ .fortsetzen-karte__stelle { 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); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Die Scheibe ist 30 groß und damit unter der Untergrenze. Die Klickfläche kommt über .touch-target — dessen ::after-Overlay vergrößert die Hit-Area, ohne die Border-Box anzufassen, damit der Fokus-Ring an der sichtbaren Scheibe bleibt (base.css). */ .fortsetzen-karte__entfernen { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 29.8px; /* gemessen, siehe Kopf */ height: 30px; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-primary); cursor: pointer; } .fortsetzen-karte__entfernen > svg { display: block; overflow: visible; width: 8px; /* gemessen, siehe Kopf */ height: 8px; } @media (hover: hover) and (pointer: fine) { .fortsetzen-karte__entfernen:hover { /* Auf einer Karte geht die Fläche nach unten, nicht nach oben — dieselbe Regel wie beim Chip (§5) und beim Link Button auf der Karte. */ background-color: var(--label-fill-inverted); } } .fortsetzen-karte__entfernen:active { background-color: var(--label-fill-inverted); } /* ------------------------------------------------------------ Fortschrittsbalken ------------------------------------------------------------ Bahn in label-outline, Füllung in text-primary. Rechts 8 Einzug, damit er nicht unter dem ✕ endet. NICHT über Farbe allein lesbar zu machen ist hier in Ordnung: der Balken ist kein Zustand, sondern eine Menge — die Länge IST die Information (WCAG 1.4.1 greift nicht). ------------------------------------------------------------ */ .fortsetzen-karte__balken { width: calc(100% - var(--space-xs)); height: 7px; /* gemessen, siehe Kopf */ border-radius: var(--radius-full); background-color: var(--label-outline); overflow: hidden; } .fortsetzen-karte__balken-fuellung { height: 100%; background-color: var(--text-primary); } /* ============================================================ OFFEN ------------------------------------------------------------ · Hover und Press der Karte selbst stehen in Figma nicht an der Komponente. Hier ist nur das ✕ interaktiv — ob die ganze Karte zum Weiterlesen führt, sagt Figma nicht. · Der Balken hat keine ARIA-Rolle. Als reine Anzeige ist das vertretbar; wenn er vorgelesen werden soll, gehört role="progressbar" mit aria-valuenow dazu. ============================================================ */