diff --git a/src/pages/assets.mdx b/src/pages/assets.mdx
index de7a279..59e9a5d 100644
--- a/src/pages/assets.mdx
+++ b/src/pages/assets.mdx
@@ -110,11 +110,6 @@ import Lead from '@components/Lead.astro'
[Mockaroo](https://mockaroo.com/)
: Mock-Service zum erstellen von realistischen Testdaten.
-## Services
-
-[NoCodeForm](https://nocodeform.io/)
-: Endpoint für HTML-Formulare.
-
## Optimierungen
Assets solltest du immer optimieren, bevor du diese in deiner Website verwendest. stets optimieren, damit sie schneller geladen werden können. Biete ggf. auch alternative Bildformate wie WebP[^2] oder AVIF[^3] an.
@@ -135,21 +130,32 @@ Assets solltest du immer optimieren, bevor du diese in deiner Website verwendest
[PX to REM Converter](https://nekocalc.com/px-to-rem-converter)
: Du möchtest `rem` statt `px` verwenden? Dann ist dieser Converter genau richtig für dein Design.
-[Fluid Type Scale Calculator](https://www.fluid-type-scale.com/)
+[Font Size Clamp Generator](https://clamp.font-size.app/)
+: Erstellt CSS-`clamp()`-Regeln für Schriftgrößen.
+
+[Fluid Type Scale Calculator](https://www.fluid-type-scale.com/) NEU
: Generiert `font-size`-Variablen für die Verwendung von CSS `clamp()`.
[Modern fluid typography editor](https://modern-fluid-typography.vercel.app/)
: Erstellt für `clamp()` die drei Werte.
+[`` Generator](https://kbd.hsuan.xyz/)
+: Erstellt ``-HTML-Elemente zur Anzeige von Tastaturbefehlen in Texten und Dokumentationen.
+
+### Farben und Kontraste
+
+[APCA Contrast Calculator](https://flowpoint.ai/tools/apca) NEU
+: Kalkuliert den APCA-Kontrast zwischen zwei Farben. APCA steht für „Advanced Perceptual Contrast Algorithm“ und berücksichtigt die menschliche Wahrnehmung.
+
+[Auto tint with APCA](https://apca.digitallymarked.com/) NEU
+: Testet, ob Schwarz oder Weiß als Textfarbe besser zu einer Hintergrundfarbe passt.
+
[Leonardo Contrast Colors](https://leonardocolor.io/tools.html)
: Kontrastverhältnis zwischen Vorder- und Hintergrundfarbe ermitteln.
[Colour Contrast Checker](https://colourcontrast.cc/)
: Prüft Vorder- und Hintergrundfarben auf hohen Kontrast, damit diese gut gelesen werden können.
-[`` Generator](https://kbd.hsuan.xyz/)
-: Erstellt ``-HTML-Elemente zur Anzeige von Tastaturbefehlen in Texten und Dokumentationen.
-
### Inhalte
[Meta Tags Toolkit](https://metatags.io/)
@@ -158,23 +164,24 @@ Assets solltest du immer optimieren, bevor du diese in deiner Website verwendest
[LanguageTool](https://languagetool.org/de)
: Prüft deine Texte auf Rechtschreibung und Grammatik.
-## Tools
+## Tools und Services
-Hier habe ich für euch Helfer installiert, die ich meiner auch relativ oft benötige.
+[NoCodeForm](https://nocodeform.io/)
+: Endpoint für HTML-Formulare.
[MarkdownDown](https://markdowndown.vercel.app/)
-: Konvertieren Sie jede Webseite in ein sauberes Markdown mit heruntergeladenen Bildern.
+: Konvertiere jede Webseite in ein sauberes Markdown mit heruntergeladenen Bildern.
## Code-Beispiele
Du hast eine Idee, weißt aber noch nicht wie du sie umsetzen kannst? Hier habe ich dir ein paar meiner Codepens aufgeführt.
+[Picture-Element: Art direction Image](hhttps://codepen.io/macx/pen/wvZamyR)) NEU
+: Mobil-optimierte Art-Direction-Images mit `picture`-Element und `srcset`.
+
[Sticky Back-To-Top Button](https://codepen.io/macx/pen/eYeNMpJ)
: Zurück-nach-oben-Button, der erst beim scrollen erscheint. Die Demo nutzt den Intersection Observer. Wird auch auf dieser Seite verwendet.
-[Responsive Images](https://codepen.io/macx/pen/NWNrRQg)
-: Mobil-optimierte Art-Direction-Images mit `picture`-Element und `srcset`.
-
[CSS Grid](https://codepen.io/macx/pen/NWNrRQg)
: Bild-Gallerie ohne Media-Queries.