Added Assets

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/) <span class="new">NEU</span>
 : 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.
 
+[`<kbd>` Generator](https://kbd.hsuan.xyz/)
+: Erstellt `<kbd>`-HTML-Elemente zur Anzeige von Tastaturbefehlen in Texten und Dokumentationen.
+
+### Farben und Kontraste
+
+[APCA Contrast Calculator](https://flowpoint.ai/tools/apca) <span class="new">NEU</span>
+: 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/) <span class="new">NEU</span>
+: 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.
 
-[`<kbd>` Generator](https://kbd.hsuan.xyz/)
-: Erstellt `<kbd>`-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)) <span class="new">NEU</span>
+: 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.