/* ============================================================ Komponente: link-button ------------------------------------------------------------ Quelle: Figma „Screens: App und Web" · Link Button / Alle 13785:14408 · Link Button (Anmelden) 13837:14921, 13837:14926 ausgelesen am 04.09.2026. Navigation, kein Handlungsversprechen: „Alle →", „Passwort vergessen →", „Konto erstellen →". SKILL.md §6 nennt dafür ausdrücklich die Link-Familie, nicht Tertiär. Für die Link-Familie gibt es im System noch KEINE Datei — AGENTS.md nennt sie unter „Diese fehlen noch" (§20.2). Diese Datei füllt die Lücke für den Prototypen; die Werte sind aus den Instanzen gemessen, nicht erfunden. Beim Freigeben der echten Komponente ist sie zu ersetzen, nicht zu ergänzen. Setzt tokens.css und base.css voraus. VERWENDUNG ------------------------------------------------------------ GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE 45 Höhe. Trägt das Touch-Target (§11.2), obwohl der Text nur 21 hoch ist — das Padding von 4 oben und unten reicht dafür nicht. Die Höhe ist deshalb gesetzt und NICHT aus dem Padding gerechnet. 2,7 x 6 Pfeil. Native Größe der Figma-Komponente. ============================================================ */ .link-button { display: inline-flex; align-items: center; gap: var(--space-2xs); /* 4 */ height: 45px; padding: var(--space-2xs) var(--space-xs); /* 4 / 8 */ border: 0; border-radius: var(--radius-full); background: none; cursor: pointer; color: var(--text-accent); } .link-button__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-regular); white-space: nowrap; } /* 2,7 x 6 aus Figma, nicht quadratisch — deshalb eigene Maße statt .ikon. Die Farbe erbt er über currentColor vom Button. */ .link-button__pfeil { display: block; overflow: visible; flex-shrink: 0; width: 2.7px; height: 6px; } /* ------------------------------------------------------------ Zustände ------------------------------------------------------------ Der Link liegt frei im Inhalt und hat keine eigene Fläche. Hover und Press bekommen deshalb eine — dieselbe wie Tertiär (ghost-fill-hover), damit im Screen nicht zwei verschiedene neutrale Rückmeldungen entstehen. Kein Unterstreichen: der Link steht in text-accent auf neutralem Grund, und Blau trägt hier zusammen mit dem Pfeil zwei Signale (WCAG 1.4.1 ist damit erfüllt). ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .link-button:hover { background-color: var(--button-ghost-fill-hover); } } .link-button:active { background-color: var(--button-ghost-fill-hover); } /* ------------------------------------------------------------ FLÄCHE FOLGT DEM UNTERGRUND ------------------------------------------------------------ Dasselbe Problem wie beim Chip (SKILL.md §5) und beim Suchfeld (§6), nur an einer neuen Stelle: --button-ghost-fill-hover löst in Dark auf gray-900 auf — und das ist derselbe Farbwert wie --surface-card. Auf einer Karte fällt der Hover damit auf 1,00:1 und ist unsichtbar. Aufgefallen am 04.09.2026 an „Zur Terminbuchung" in der Angebots-Karte auf Vor Ort. Die Antwort ist die des Systems: auf einer Karte liegt die Fläche VERTIEFT, nicht heller — --label-fill-inverted. Die Richtung stimmt in beiden Modes (Dark: #121A2D unter #212C3E · Light: gray-50 unter Weiß), und das ist die Prüfung, die AGENTS.md §17 verlangt: nicht ob der Kontrast reicht, sondern ob beide Mode-Werte in dieselbe Richtung zeigen. Link auf surface-primary → .link-button Link auf einer Karte → .link-button--auf-karte ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .link-button--auf-karte:hover { background-color: var(--label-fill-inverted); } } .link-button--auf-karte:active { background-color: var(--label-fill-inverted); } .link-button { 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); } .link-button:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .link-button:active { transform: none; } } /* ------------------------------------------------------------ INFO TEXT: die kleine Fassung ------------------------------------------------------------ Quelle: Figma „Design System" → Link Button, node 7263:15428 (`type=info text`), ausgelesen am 04.09.2026. In den Screens steckt sie in der Newsfeed-Karte (I13849:15176;7272:19131), dort 56 x 24. Alles eine Nummer kleiner: Text extra small statt small, Pfeil 2,7 x 6 statt 3,2 x 7, Abstand 4, Polster 8 seitlich. Die Höhe ist 24 statt 45 — deshalb taugt sie NICHT als eigenständige Klickfläche (§11.2 verlangt 44). Sie steht immer in einer Zeile, die selbst das Ziel ist. DIE HÖHE ERGIBT SICH, SIE STEHT NICHT DA: 4 + 18 + 4 = 26. Figma zeichnet die Fassung 24 hoch, weil die Textebene dort eine fest eingetragene Zeilenhöhe von 16 trägt. Der Typeface-Export (Lisi, 04.09.2026) sagt für „extra small text" aber 12 / 18 — und der Export ist die Quelle, nicht eine einzelne Ebene. Deshalb 26 und nicht 24; die Ebene in Figma gehört auf den Textstil zurückgesetzt. Der Code-Export nennt an dieser Stelle `py-[14px]`. Das kann nicht sein: 14 + Text + 14 ist nie 24. Genommen sind die 4 aus `padding-extra-small`. ------------------------------------------------------------ */ .link-button--info { height: 26px; padding: var(--space-2xs) var(--space-xs); /* 4 / 8 */ } .link-button--info .link-button__text { font-size: var(--font-size-extra-small-text); line-height: var(--line-height-extra-small-text); } .link-button--info .link-button__pfeil { width: 2.727px; /* gemessen, siehe oben */ height: 6px; } /* ============================================================ OFFEN ------------------------------------------------------------ · Hover und Press stehen in Figma nicht an der Komponente. Beide sind hier aus der Rolle abgeleitet und dort nachzuziehen. · Die echte Komponenten-Datei für die Link-Familie fehlt im System (AGENTS.md §20.2, „Diese fehlen noch"). · Die Regel „Fläche folgt dem Untergrund" ist in SKILL.md §5 für den Chip und in §6 für das Suchfeld festgeschrieben, für den Link Button aber nicht. Sie gilt dort genauso und gehört ergänzt. ============================================================ */