From bb30a7f228366c4299ac53cc1816a10f778b3e5c Mon Sep 17 00:00:00 2001
From: Hendrik Schmidt <hendrik.schmidt@digitalservice.bund.de>
Date: Fri, 17 Jan 2025 14:40:54 +0100
Subject: [PATCH] Refactor css (#248)

* Update package-lock.json

* Update Angie

* Update heading styles

* Remove sr-only already covered by tailwind

* Move telephone link styling

* Don't use index as key

* Refactor details / summary css

* Move button styling to shared CSS

* Move rich text link styling to shared CSS

* Restructure CSS and add headings

* Remove IE11 edge case

* Move paragraph-list class

* Remove support for browsers without focus-visible

* Remove unused class rich-text-2xl

* Move styles to PreCheckNavigation

* Remove unused max class

* Move ParagraphList ol styling to component

* Move list stylings and remove dito styles.css

* Make props Readonly

* Refactor focus styling

* Refactor footer link styling

* Change utilities syntax

* Change base syntax

* Drop old safari support

* Change components syntax

* Remove superfluous rich text styling

* Give Accordion bg-color only on focus-visible

* Move body styles to styles.css

* Create custom twMerge with ds support and use

* Use twMerge in RichText

* Make eslint happy

* Refactor nested string template

* Refactor index principle list styling

* Refactor sitemap styling

* Adapt remaining lists to new styles

* Refactor error page

* Refactor principle section on landing

* Fix line-height

* Unify prop order

* Update styles.css

* Fix undefined class bug

* Fix component names

* Give all lists max-width and remove for exceptions

* Remove rich-text classes and give link styling

* Update RichText.tsx

* Remove list-none and ds-label-01-reg from Details

* Introduce list-unstyled utility

* Remove unused class from links

* Inline `rich-text` styles and refactor white links

* Fix vitest

* Refactor twMerge import

* Cache playwright dependencies

* Refactor conditional pipeline checks

* Revert "Refactor conditional pipeline checks"

This reverts commit 5410dd8b06a998f86594c6c8f5eb3534658853e5.

* Revert "Cache playwright dependencies"

This reverts commit 60b24e5d29cd621e30578019d5e266733f4218ae.

* Update sitemap.tsx

* Remove redundant styles

* Move body height / flex styles to tag

* Fix support page typo

* Unify breadcrumbs spacing

* Improve VP index styling

* Make visualisation page responsive

* Improve visualisation gaps

* Fix technicalFeasibility content

* Change method page heading styles

* Remove rounded border in feedback form

* Improve feedback buttons spacing

* Change method subpages heading look to h3

* Change labels to subheads where applicable

* Improve PrincipleExplanation styling

* Change list-unstyled handling

* Add spacing between list-items
---
 .eslintrc.cjs                                 |  13 ++
 package-lock.json                             |   2 +-
 package.json                                  |   2 +-
 packages/dito/app/components/Accordion.tsx    |   4 +-
 .../dito/app/components/AccordionItem.tsx     |   4 +-
 packages/dito/app/components/FeedbackForm.tsx |   8 +-
 .../dito/app/components/ParagraphList.tsx     |  17 +-
 .../dito/app/components/SupportBanner.tsx     |   4 +-
 .../dito/app/components/VisualisationItem.tsx |   6 +-
 packages/dito/app/resources/content.ts        |  36 ++--
 packages/dito/app/root.tsx                    |  20 +-
 packages/dito/app/routes/_index.tsx           |  37 ++--
 .../routes/beispiele.prinzipien.$prinzip.tsx  |   6 +-
 .../routes/beispiele.regelungen.$regelung.tsx |   9 +-
 .../app/routes/beispiele.visualisierungen.tsx |  27 ++-
 packages/dito/app/routes/methoden.tsx         |   5 +-
 .../dito/app/routes/methoden_.$subPage.tsx    |  20 +-
 .../app/routes/methoden_.fuenf-prinzipien.tsx |   4 +-
 packages/dito/app/routes/sitemap.tsx          |  11 +-
 .../dito/app/routes/unterstuetzung/route.tsx  |  17 +-
 .../PreCheckNavigation.tsx                    |  11 +-
 .../dito/app/routes/vorpruefung._index.tsx    |   8 +-
 .../vorpruefung.ergebnis/ResultPage.tsx       |   4 +-
 packages/dito/app/styles.css                  |  44 -----
 packages/shared/components/Background.tsx     |   2 +-
 packages/shared/components/Box.tsx            |   2 +-
 packages/shared/components/Breadcrumbs.tsx    |   2 +-
 packages/shared/components/Button.tsx         |   2 +-
 .../shared/components/ButtonContainer.tsx     |   2 +-
 packages/shared/components/Container.tsx      |   2 +-
 packages/shared/components/DetailsSummary.tsx |   6 +-
 packages/shared/components/Footer.tsx         |   4 +-
 packages/shared/components/Heading.tsx        |   2 +-
 packages/shared/components/InfoBox.tsx        |   2 +-
 packages/shared/components/InlineInfoList.tsx |   2 +-
 packages/shared/components/List.tsx           |   4 +-
 packages/shared/components/ListItem.tsx       |  10 +-
 packages/shared/components/Question.tsx       |   2 +-
 packages/shared/components/RichText.spec.tsx  |   5 -
 packages/shared/components/RichText.tsx       |  10 +-
 packages/shared/components/Textarea.tsx       |   2 +-
 packages/shared/styles.css                    | 182 ++++++------------
 packages/shared/utils/tailwindMerge.ts        |  46 +++++
 packages/shared/vitest.config.ts              |   2 +
 .../src/components/Recommendation.tsx         |   2 +-
 45 files changed, 283 insertions(+), 329 deletions(-)
 delete mode 100644 packages/dito/app/styles.css
 create mode 100644 packages/shared/utils/tailwindMerge.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 9e39d123..75fc7cea 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -33,6 +33,19 @@ module.exports = {
         endOfLine: "auto",
       },
     ],
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          {
+            name: "tailwind-merge",
+            importNames: ["twMerge"],
+            message:
+              "Please import { twMerge } from '@digitalcheck/shared/utils/tailwind-merge'.",
+          },
+        ],
+      },
+    ],
   },
 
   overrides: [
diff --git a/package-lock.json b/package-lock.json
index b455e818..89c806b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       ],
       "dependencies": {
         "@digitalcheck/shared": "*",
-        "@digitalservice4germany/angie": "^1.1.1",
+        "@digitalservice4germany/angie": "^1.2.0",
         "@digitalservice4germany/style-dictionary": "^2.0.0",
         "@digitalservicebund/icons": "^2.0.0",
         "react": "^18.2.0",
diff --git a/package.json b/package.json
index 183767f8..92dc0419 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@digitalcheck/shared": "*",
-    "@digitalservice4germany/angie": "^1.1.1",
+    "@digitalservice4germany/angie": "^1.2.0",
     "@digitalservice4germany/style-dictionary": "^2.0.0",
     "@digitalservicebund/icons": "^2.0.0",
     "react": "^18.2.0",
diff --git a/packages/dito/app/components/Accordion.tsx b/packages/dito/app/components/Accordion.tsx
index 58557047..ca25692d 100644
--- a/packages/dito/app/components/Accordion.tsx
+++ b/packages/dito/app/components/Accordion.tsx
@@ -5,9 +5,9 @@ export default function Accordion({
 }: Readonly<{ items: AccordionItemProps[] }>) {
   return (
     <div className="accordion bg-white border-b-2 border-b-blue-800">
-      {items.map((item, index) => (
+      {items.map((item) => (
         <AccordionItem
-          key={index}
+          key={item.headline}
           headline={item.headline}
           content={item.content}
           id={item.id}
diff --git a/packages/dito/app/components/AccordionItem.tsx b/packages/dito/app/components/AccordionItem.tsx
index d6e2e1db..28c984cc 100644
--- a/packages/dito/app/components/AccordionItem.tsx
+++ b/packages/dito/app/components/AccordionItem.tsx
@@ -12,10 +12,10 @@ export default function AccordionItem({
   headline,
   content,
   id,
-}: AccordionItemProps) {
+}: Readonly<AccordionItemProps>) {
   return (
     <details className="border-t-2 border-t-blue-800 group" id={id}>
-      <summary className="accordion-summary w-full p-24 flex items-center justify-between hover:bg-blue-200 focus:bg-blue-200 focus:outline focus:outline-4 focus:outline-blue-800 focus-visible:outline focus-visible:outline-4 focus-visible:outline-blue-800 cursor-pointer group-open:bg-blue-200">
+      <summary className="w-full p-24 flex items-center justify-between cursor-pointer hover:bg-blue-200 group-open:bg-blue-200 focus-visible:bg-blue-200 focus-visible:outline focus-visible:outline-4 focus-visible:outline-blue-800 [&::-webkit-details-marker]:hidden">
         <div className="pr-10 font-bold text-left text-16 leading-22 md:text-18 md:leading-24 text-blue-800">
           {headline}
         </div>
diff --git a/packages/dito/app/components/FeedbackForm.tsx b/packages/dito/app/components/FeedbackForm.tsx
index 2a0251fa..76df515a 100644
--- a/packages/dito/app/components/FeedbackForm.tsx
+++ b/packages/dito/app/components/FeedbackForm.tsx
@@ -25,7 +25,7 @@ function FeedbackInput({
   ariaLabel: string;
 }>) {
   const classes = twJoin(
-    "rounded-lg px-24 h-64 flex items-center gap-8",
+    "px-16 h-48 sm:px-24 sm:h-64 flex items-center",
     selected ? "bg-blue-800 text-white" : "bg-blue-200 text-blue-800",
   );
 
@@ -103,7 +103,7 @@ function FeedbackQuestion({
           </div>
         ) : (
           <div className="max-w-fit">
-            <div className="flex gap-16">
+            <div className="flex gap-8 sm:gap-16">
               {[1, 2, 3, 4, 5].map((number) => {
                 let ariaLabel: string;
                 switch (number) {
@@ -216,12 +216,12 @@ export default function FeedbackForm() {
           />
           <button
             type="submit"
-            className="mt-16 bg-blue-800 text-white px-24 py-12 rounded-lg"
+            className="mt-16 bg-blue-800 text-white px-24 py-12"
           >
             Feedback absenden
           </button>
         </form>
-        <RichText markdown={feedbackForm.mail} className="ds-label-01-bold" />
+        <RichText markdown={feedbackForm.mail} className="font-bold" />
       </Container>
     </Background>
   );
diff --git a/packages/dito/app/components/ParagraphList.tsx b/packages/dito/app/components/ParagraphList.tsx
index 27ccfbdb..e73d806c 100644
--- a/packages/dito/app/components/ParagraphList.tsx
+++ b/packages/dito/app/components/ParagraphList.tsx
@@ -100,9 +100,9 @@ const PrincipleExplanation = ({
   const shouldHighlight = location.hash === `#${id}`;
   const color = HIGHLIGHT_COLORS[erfuellung.Prinzip.Nummer];
   const explanationClasses = twJoin(
-    "p-4 w-fit max-w-[642px]",
+    "w-fit max-w-[642px] px-8",
     color.border,
-    shouldHighlight ? "border-4" : "border-l-4 py-8",
+    shouldHighlight ? "border-4 p-4" : "border-l-4 p-8",
   );
 
   return (
@@ -111,7 +111,7 @@ const PrincipleExplanation = ({
         <Heading
           tagName="h4"
           text={`Prinzip ${erfuellung.Prinzip.Nummer} – ${erfuellung.Prinzip.Name}`}
-          look="ds-label-01-bold pb-4"
+          look="ds-label-01-bold pb-8"
         />
         {highlightID && (
           <Link
@@ -162,7 +162,7 @@ const AbsatzContent = ({
     const content = nestListInListItems(prependNumberToAbsatz(absatzGroup));
 
     return (
-      <div className="paragraph-list">
+      <div className="[&_ol]:list-decimal [&_ol_ol]:list-[lower-alpha]">
         <BlocksRenderer
           content={content}
           modifiers={{
@@ -177,7 +177,7 @@ const AbsatzContent = ({
         />
         {absatzGroup.PrinzipErfuellungen.length > 0 && (
           <div className="ds-stack-8 mt-8">
-            <span className="ds-label-01-bold italic" id={baseLabelID}>
+            <span className="ds-subhead font-bold" id={baseLabelID}>
               {digitalSuitability.paragraphs.explanation}
             </span>
             {absatzGroup.PrinzipErfuellungen.toSorted(
@@ -286,13 +286,14 @@ function Paragraph({
 
   return (
     <div key={paragraph.Nummer}>
-      <div className="ds-stack-8 rich-text">
+      <div className="ds-stack-8">
         <Heading
           tagName="h3"
           text={`§ ${paragraph.Nummer} ${paragraph.Gesetz}`}
-          look="ds-label-01-bold"
+          look="ds-subhead"
+          className="font-bold"
         />
-        <p className="ds-label-01-bold">{paragraph.Titel}</p>
+        <p className="ds-subhead font-bold">{paragraph.Titel}</p>
         <div className="border-l-4 border-gray-300 pl-8 ds-stack-16">
           {groupedAbsaetze.map((absatzGroup) => (
             <AbsatzContent
diff --git a/packages/dito/app/components/SupportBanner.tsx b/packages/dito/app/components/SupportBanner.tsx
index f26649f1..fb3f9a16 100644
--- a/packages/dito/app/components/SupportBanner.tsx
+++ b/packages/dito/app/components/SupportBanner.tsx
@@ -13,7 +13,7 @@ export default function SupportBanner({
           <Box
             heading={{
               tagName: "h2",
-              look: "ds-label-01-bold",
+              look: "ds-subhead font-bold",
               text: supportBanner.feedback.title,
             }}
             content={{
@@ -24,7 +24,7 @@ export default function SupportBanner({
         <Box
           heading={{
             tagName: "h2",
-            look: "ds-label-01-bold",
+            look: "ds-subhead font-bold",
             text: supportBanner.support.title,
           }}
           content={{
diff --git a/packages/dito/app/components/VisualisationItem.tsx b/packages/dito/app/components/VisualisationItem.tsx
index d0081e40..ae464368 100644
--- a/packages/dito/app/components/VisualisationItem.tsx
+++ b/packages/dito/app/components/VisualisationItem.tsx
@@ -24,8 +24,8 @@ export default function VisualisationItem({
   const visualisationUrl = visualisierung.Bild.url.split("/").pop();
 
   return (
-    <div className="flex max-sm:flex-col mt-16 gap-32 pb-16 rich-text">
-      <div className="w-1/2 max-sm:px-16 max-sm:pt-32">
+    <div className="flex max-sm:flex-col gap-16 sm:gap-32">
+      <div className="sm:w-1/2">
         <Link
           to={`${ROUTE_VISUALISATION.url}/${visualisationUrl}`}
           reloadDocument
@@ -71,7 +71,7 @@ export default function VisualisationItem({
           />
         </div>
       </div>
-      <div className="w-1/2 p-0 mb-12">
+      <div className="sm:w-1/2 mb-12">
         <Heading tagName="h3" look="ds-heading-03-reg" className="mb-16">
           {visualisierung.Titel}
         </Heading>
diff --git a/packages/dito/app/resources/content.ts b/packages/dito/app/resources/content.ts
index 9b068746..feb5af7b 100644
--- a/packages/dito/app/resources/content.ts
+++ b/packages/dito/app/resources/content.ts
@@ -238,15 +238,19 @@ Damit die digitale Umsetzung reibungslos klappt, muss die Regelung digitaltaugli
       },
     ],
   },
-  principals: {
+  principles: {
     title: "5 Prinzipien für digitaltaugliche Gesetzgebung",
-    content: `1. Prinzip 1: Digitale Kommunikation sicherstellen
-2. Prinzip 2: Wiederverwendung von Daten und Standards ermöglichen
-3. Prinzip 3: Datenschutz und Informationssicherheit gewährleisten
-4. Prinzip 4: Klare Regelungen für eine digitale Ausführung finden
-5. Prinzip 5: Automatisierung ermöglichen
-
-[Details und Beispiele](${ROUTE_METHODS_FIVE_PRINCIPLES.url})`,
+    content: [
+      "Prinzip 1: Digitale Kommunikation sicherstellen",
+      "Prinzip 2: Wiederverwendung von Daten und Standards ermöglichen",
+      "Prinzip 3: Datenschutz und Informationssicherheit gewährleisten",
+      "Prinzip 4: Klare Regelungen für eine digitale Ausführung finden",
+      "Prinzip 5: Automatisierung ermöglichen",
+    ],
+    link: {
+      text: "Details und Beispiele",
+      href: ROUTE_METHODS_FIVE_PRINCIPLES.url,
+    },
   },
 };
 
@@ -659,7 +663,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
 - in der **formellen Beteiligung** eine wirkungsvolle Umsetzung zu besprechen.`,
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: { text: "2.1. Zuständige Akteurinnen und Akteure auflisten" },
         info: [
           {
@@ -676,7 +680,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
         ],
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: {
           text: "2.2. Aufgaben und Abläufe gemeinsam erfassen",
         },
@@ -703,7 +707,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
         ],
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: {
           text: "2.3. IT-Systeme gemeinsam erfassen",
         },
@@ -735,7 +739,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
         text: "Mit einem guten Verständnis des Ist-Zustandes erarbeiten Sie nun Ihre Regelung. Jetzt geht es darum, Möglichkeiten zur Digitalisierung zu finden und Hindernisse aus dem Weg zu räumen — eine gute digitale Umsetzung spart langfristig Zeit und Geld und erfüllt die heutigen Erwartungen der Betroffenen an den Staat.",
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: {
           text: "2.4. Möglichkeiten und Hindernisse der digitalen Umsetzung identifizieren",
         },
@@ -754,7 +758,7 @@ Mit diesen Informationen sind Sie gut vorbereitet, um
         ],
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: {
           text: "2.5. Technische Umsetzbarkeit sicherstellen",
         },
@@ -791,7 +795,7 @@ Die Erkenntnisse und Ergebnisse aus den vorigen Schritten helfen Ihnen dabei,
 - den **Umsetzungsprozess einfach besprechbar** zu machen in Abstimmungen anhand von Visualisierungen.`,
       },
       {
-        background: "blue",
+        isSubstep: true,
         headline: { text: "Schreiben Sie die Regelung" },
         text: "Nutzen Sie Ihre gewohnten Programme und Arbeitshilfen, um die Regelung zu schreiben — z. B. eNorm und das Handbuch der Rechtsförmigkeit.",
       },
@@ -1276,13 +1280,13 @@ export const technicalFeasibility = {
     icon: DrawOutlined,
     title: "Verstehen Sie die Auswirkungen auf IT-Systeme",
     text: `Vergleichen Sie gemeinsam mit den [zuständigen Akteurinnen und Akteuren](${ROUTE_METHODS_RESPONSIBLE_ACTORS.url}) das geplante Vorhaben mit den Möglichkeiten der bestehenden IT-Systeme. Überprüfen Sie die Informationen mithilfe neutraler IT-Expertinnen und -Experten. 
-<br class="block content-[''] !mb-24" />
+
 So erfahren Sie
 - welche IT-Systeme für Ihr Vorhaben verwendet werden können
 - und an welchen Stellen Änderungen nötig sind.
 <br class="block content-[''] !mb-24" />
 
-### Sie müssen nicht alles allein bewältigen
+<h3 class="ds-subhead font-bold">Sie müssen nicht alles allein bewältigen</h3>
 
 Bei kleinen Fragen rufen Sie den Digitalcheck-Support an unter 0151/40 76 78 39.
 Für ein unterstützendes, einstündiges Videotelefonat schreiben Sie eine E-Mail an digitalcheck@digitalservice.bund.de oder buchen Sie direkt einen Termin.`,
diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
index b33cfbda..01c63d8f 100644
--- a/packages/dito/app/root.tsx
+++ b/packages/dito/app/root.tsx
@@ -44,7 +44,6 @@ import {
 import { PLAUSIBLE_DOMAIN, PLAUSIBLE_SCRIPT } from "utils/constants.server";
 import { getFeatureFlags } from "utils/featureFlags.server";
 import { useNonce } from "utils/nonce";
-import styles from "./styles.css?url";
 
 export function loader({ request }: LoaderFunctionArgs) {
   const featureFlags = getFeatureFlags();
@@ -158,7 +157,6 @@ export const headers: HeadersFunction = () => ({
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: sharedStyles },
-  { rel: "stylesheet", href: styles },
   { rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
   {
     rel: "icon",
@@ -220,11 +218,11 @@ const PageHeader = ({
 }) => (
   <header>
     <div className="min-h-64 p-16 flex justify-between items-center">
-      <Link to={ROUTE_LANDING.url} className="ds-label-01-bold">
+      <Link to={ROUTE_LANDING.url}>
         <img src={bundLogo} alt="Logo des Bundes" width={54} />
       </Link>
       <div className="flex items-center max-lg:hidden">
-        <div className="ds-label-02-reg text-lg">
+        <div className="text-lg">
           <span className="font-bold">{header.title}</span>
           <span className="mx-8">|</span>
           <Button href="/unterstuetzung" look="link">
@@ -236,13 +234,13 @@ const PageHeader = ({
         <PhoneOutlined className="mx-8 w-18" />
         <a
           href={`tel:${header.contact.number}`}
-          className="ds-link-01-bold text-lg underline plausible-event-name=Phone+Click plausible-event-position=header"
+          className="ds-link-01-bold plausible-event-name=Phone+Click plausible-event-position=header"
         >
           {header.contact.number}
         </a>
       </div>
       <div className="lg:hidden">
-        <a href="/unterstuetzung" className="ds-link-01-bold text-lg underline">
+        <a href="/unterstuetzung" className="ds-link-01-bold">
           Kontakt & Unterstützung
         </a>
       </div>
@@ -352,15 +350,9 @@ Vielen Dank für Ihr Verständnis.`;
         <div className="border-t-2 border-t-gray-400">
           <Container>
             <div className="ds-stack-8 mb-32">
-              <Heading
-                text={errorStatus}
-                tagName="div"
-                className="ds-label-01-bold"
-              />
+              <span className="ds-label-01-bold">{errorStatus}</span>
               <Heading text={errorTitle} className="ds-heading-02-reg" />
-              <div className="ds-subhead">
-                <RichText markdown={errorMessage} />
-              </div>
+              <RichText markdown={errorMessage} className="ds-subhead" />
             </div>
             <Button
               id="error-back-button"
diff --git a/packages/dito/app/routes/_index.tsx b/packages/dito/app/routes/_index.tsx
index ed5c8f37..0f9adb5c 100644
--- a/packages/dito/app/routes/_index.tsx
+++ b/packages/dito/app/routes/_index.tsx
@@ -7,6 +7,7 @@ import InfoBox from "@digitalcheck/shared/components/InfoBox";
 import LabelWithIcon from "@digitalcheck/shared/components/LabelWithIcon";
 import { NumberedList } from "@digitalcheck/shared/components/List";
 import RichText from "@digitalcheck/shared/components/RichText";
+import { Link } from "@remix-run/react";
 import SupportBanner from "components/SupportBanner";
 import { landing } from "resources/content";
 import { useFeatureFlag } from "utils/featureFlags";
@@ -105,24 +106,24 @@ export default function Index() {
       <SupportBanner />
       <Background backgroundColor="darkBlue" className="pt-24 pb-24">
         <Container>
-          <div className="ds-stack-16 scroll-my-40">
-            <Heading tagName="h2" text={landing.principals.title} />
-            <RichText
-              markdown={landing.principals.content}
-              className="!mt-32 !ds-stack-16
-              [&_ol]:mb-16
-              [&_ol]:!list-none
-              [&_ol]:!ml-0
-              [&_ol_li+li]:mt-8
-              [&_ol_li+li:before]:content-['']
-              [&_ol_li+li:before]:block
-              [&_ol_li+li:before]:w-1/2
-              [&_ol_li+li:before]:mb-8
-              [&_ol_li+li:before]:border-t
-              [&_ol_li+li:before]:border-blue-700
-              "
-              // These strange class names are because we are using the Tailwind "arbitrary values" feature to style the list inside this RichText block: https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants
-            />
+          <div className="ds-stack-32 scroll-my-40">
+            <Heading tagName="h2" text={landing.principles.title} />
+            <ol className="list-unstyled space-y-8">
+              {landing.principles.content.map((principle) => (
+                <li
+                  key={principle}
+                  className="first:before:content-none before:content-[''] before:block before:w-1/2 before:mb-8 before:border-t before:border-blue-700"
+                >
+                  {principle}
+                </li>
+              ))}
+            </ol>
+            <Link
+              to={landing.principles.link.href}
+              className="text-link font-bold"
+            >
+              {landing.principles.link.text}
+            </Link>
           </div>
         </Container>
       </Background>
diff --git a/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx b/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx
index 47350a6f..392840f7 100644
--- a/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx
+++ b/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx
@@ -75,7 +75,7 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
   return { prinzip: prinzipData.prinzips[0] };
 };
 
-export default function Digitaltauglichkeit_Prinzipien_Detail() {
+export default function DigitaltauglichkeitPrinzipienDetail() {
   const { prinzip } = useLoaderData<typeof loader>();
   const prinzips = useOutletContext<Prinzip[]>();
 
@@ -117,7 +117,7 @@ export default function Digitaltauglichkeit_Prinzipien_Detail() {
         </Container>
       </Background>
       {GuteUmsetzungen.length > 0 && (
-        <Container className="rich-text ds-stack-64">
+        <Container className="ds-stack-64">
           {GuteUmsetzungen.map(
             (digitalcheck) =>
               digitalcheck.Regelungsvorhaben && (
@@ -135,7 +135,7 @@ export default function Digitaltauglichkeit_Prinzipien_Detail() {
                       tagName="h2"
                       text={digitalcheck.Regelungsvorhaben.Titel}
                       look="ds-heading-03-bold"
-                      className="inline max-w-full"
+                      className="inline max-w-full text-link"
                     />
                     <OpenInNewIcon className="!inline scale-90 ml-4 mb-6 fill-blue-800" />
                   </Link>
diff --git a/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx b/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx
index a3de445a..85255564 100644
--- a/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx
+++ b/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx
@@ -104,10 +104,10 @@ export default function Gesetz() {
               markdown: regulations.subtitle[0],
             }}
           />
-          <p className="mt-24 ds-label-01-bold">
+          <p className="mt-24 ds-subhead font-bold">
             <b>{regulations.subtitle[1]}</b>
           </p>
-          <ol className="mt-16">
+          <ol className="list-unstyled mt-16">
             {regelung.Digitalchecks.map((digitalcheck, index) => (
               <React.Fragment key={digitalcheck.documentId}>
                 {digitalcheck.Paragraphen.length > 0 && (
@@ -195,10 +195,7 @@ export default function Gesetz() {
           </Container>
         )}
       {regelung.Digitalchecks.map((digitalcheck, index) => (
-        <Container
-          key={digitalcheck.documentId}
-          className="pb-80 ds-stack-64 rich-text"
-        >
+        <Container key={digitalcheck.documentId} className="pb-80 ds-stack-64">
           {/* ----- Formulierungen / Prinziperfüllungen ----- */}
           {digitalcheck.Paragraphen.length > 0 && (
             <>
diff --git a/packages/dito/app/routes/beispiele.visualisierungen.tsx b/packages/dito/app/routes/beispiele.visualisierungen.tsx
index efc90e78..55cd0012 100644
--- a/packages/dito/app/routes/beispiele.visualisierungen.tsx
+++ b/packages/dito/app/routes/beispiele.visualisierungen.tsx
@@ -73,23 +73,22 @@ export default function BeispieleVisualisierungen() {
           />
         </Container>
       </Background>
-      <Container>
+      <Container className="ds-stack-48">
         {Object.entries(groupedVisualisations).map(
           ([regelungTitle, visualisations]) => (
-            <div key={regelungTitle} className="rich-text ds-stack-8">
-              <Link
-                to={`${ROUTE_LAWS.url}/${visualisations[0].Digitalcheck?.Regelungsvorhaben?.URLBezeichnung}`}
-                prefetch="viewport"
-              >
-                <Heading
-                  tagName="h2"
-                  text={regelungTitle}
-                  look="ds-heading-02-bold"
-                />
-              </Link>
+            <div key={regelungTitle}>
+              <div className="ds-stack-32">
+                <Link
+                  to={`${ROUTE_LAWS.url}/${visualisations[0].Digitalcheck?.Regelungsvorhaben?.URLBezeichnung}`}
+                  prefetch="viewport"
+                >
+                  <Heading
+                    tagName="h2"
+                    text={regelungTitle}
+                    look="ds-heading-02-bold text-link"
+                  />
+                </Link>
 
-              {/* Render Visualisations for each Regelung */}
-              <div className="pb-32">
                 {visualisations.map((visualisation) => (
                   <VisualisationItem
                     key={visualisation.Bild.documentId}
diff --git a/packages/dito/app/routes/methoden.tsx b/packages/dito/app/routes/methoden.tsx
index aa631998..2f39cd49 100644
--- a/packages/dito/app/routes/methoden.tsx
+++ b/packages/dito/app/routes/methoden.tsx
@@ -30,6 +30,7 @@ export default function Methoden() {
 
   const methodStepsItems: ListItemProps[] = methods.steps.items.map((item) => ({
     ...item,
+    background: item.isSubstep ? "blue" : undefined,
     content: renderToString(
       <>
         {item.info?.map((info) => renderInfoItem(info))}
@@ -38,8 +39,8 @@ export default function Methoden() {
     ),
     headline: {
       ...item.headline,
-      tagName: "h2",
-      look: item.background ? "ds-heading-03-reg" : "ds-heading-03-bold",
+      tagName: item.isSubstep ? "h3" : "h2",
+      look: item.isSubstep ? "ds-heading-03-reg" : "ds-heading-02-bold",
     },
   }));
 
diff --git a/packages/dito/app/routes/methoden_.$subPage.tsx b/packages/dito/app/routes/methoden_.$subPage.tsx
index 5e7164db..7e22f896 100644
--- a/packages/dito/app/routes/methoden_.$subPage.tsx
+++ b/packages/dito/app/routes/methoden_.$subPage.tsx
@@ -97,10 +97,8 @@ export default function Index() {
       )}
       <Container className="ds-stack-32">
         <Box
-          heading={{ text: content.content.title }}
-          label={{
-            text: LabelWithIcon(content.content),
-          }}
+          heading={{ text: content.content.title, look: "ds-heading-03-reg" }}
+          label={{ text: LabelWithIcon(content.content) }}
           content={{ markdown: content.content.text }}
           buttons={"buttons" in content.content ? content.content.buttons : []}
         />
@@ -117,7 +115,7 @@ export default function Index() {
             </Background>
             <Background backgroundColor="blue">
               <Box
-                heading={{ text: box.title }}
+                heading={{ text: box.title, look: "ds-heading-03-reg" }}
                 label={{ text: LabelWithIcon(box) }}
                 content={{ markdown: box.text }}
                 buttons={"buttons" in box ? box.buttons : []}
@@ -131,7 +129,7 @@ export default function Index() {
         <Background backgroundColor="yellow">
           <Container>
             <Box
-              heading={{ text: content.tip.title }}
+              heading={{ text: content.tip.title, look: "ds-heading-03-reg" }}
               label={{ text: LabelWithIcon(content.tip) }}
               content={{ markdown: content.tip.text }}
             />
@@ -142,7 +140,10 @@ export default function Index() {
         <Background backgroundColor="blue">
           <Container>
             <Box
-              heading={{ text: content.support.title }}
+              heading={{
+                text: content.support.title,
+                look: "ds-heading-03-reg",
+              }}
               label={{ text: LabelWithIcon(content.support) }}
               content={{ markdown: content.support.text }}
               buttons={content.support.buttons}
@@ -153,7 +154,10 @@ export default function Index() {
       {content.nextStep && (
         <Container>
           <Box
-            heading={{ text: content.nextStep.title }}
+            heading={{
+              text: content.nextStep.title,
+              look: "ds-heading-03-reg",
+            }}
             label={{ text: LabelWithIcon(content.nextStep) }}
             content={{ markdown: content.nextStep.text }}
             buttons={content.nextStep.buttons}
diff --git a/packages/dito/app/routes/methoden_.fuenf-prinzipien.tsx b/packages/dito/app/routes/methoden_.fuenf-prinzipien.tsx
index b9ceda6f..af17dcda 100644
--- a/packages/dito/app/routes/methoden_.fuenf-prinzipien.tsx
+++ b/packages/dito/app/routes/methoden_.fuenf-prinzipien.tsx
@@ -54,7 +54,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   };
 }
 
-export default function Index() {
+export default function FivePrinciples() {
   const { referrer, prinzips } = useLoaderData<typeof loader>();
 
   const nextStep = referrer.startsWith(ROUTE_METHODS.url)
@@ -75,7 +75,7 @@ export default function Index() {
           />
           <div className="mt-64">
             <Heading tagName="div" text="Inhalt" className="font-bold" />
-            <ol className="ds-stack-8 mt-16">
+            <ol className="list-unstyled ds-stack-8 mt-16">
               {fivePrinciples.principles.map((principle) => (
                 <li key={principle.label}>
                   <Link
diff --git a/packages/dito/app/routes/sitemap.tsx b/packages/dito/app/routes/sitemap.tsx
index e19366a2..903bb27a 100644
--- a/packages/dito/app/routes/sitemap.tsx
+++ b/packages/dito/app/routes/sitemap.tsx
@@ -45,18 +45,17 @@ export const loader: LoaderFunction = () => {
 export default function Sitemap(): ReactNode {
   const urls = useLoaderData<Route[]>();
 
-  const renderRoutes = (routes: Route[], level = 0): ReactNode => (
-    <ul
-      className={`space-y-8 ${level > 0 ? "ml-8 pl-8 border-l border-gray-200" : ""}`}
-    >
+  const renderRoutes = (routes: Route[]): ReactNode => (
+    // [&_li>ul] styles the nested ul elements
+    <ul className="list-unstyled space-y-8 [&_li>ul]:ml-8 [&_li>ul]:pl-8 [&_li>ul]:border-l [&_li>ul]:border-gray-200">
       {routes.map((route) => (
         <li key={route.url} className="space-y-8 mb-4">
-          <a href={route.url} className={"text-link hover:underline"}>
+          <a href={route.url} className="text-link hover:underline">
             {route.title}
           </a>
           {route.children &&
             route.children.length > 0 &&
-            renderRoutes(route.children, level + 1)}
+            renderRoutes(route.children)}
         </li>
       ))}
     </ul>
diff --git a/packages/dito/app/routes/unterstuetzung/route.tsx b/packages/dito/app/routes/unterstuetzung/route.tsx
index a42c25ae..c70eddff 100644
--- a/packages/dito/app/routes/unterstuetzung/route.tsx
+++ b/packages/dito/app/routes/unterstuetzung/route.tsx
@@ -1,7 +1,9 @@
 import Background from "@digitalcheck/shared/components/Background";
+import Box from "@digitalcheck/shared/components/Box";
 import ButtonContainer from "@digitalcheck/shared/components/ButtonContainer";
 import Container from "@digitalcheck/shared/components/Container";
 import Header from "@digitalcheck/shared/components/Header";
+import Heading from "@digitalcheck/shared/components/Heading";
 import Image from "@digitalcheck/shared/components/Image";
 import RichText from "@digitalcheck/shared/components/RichText";
 import { MetaFunction } from "@remix-run/react";
@@ -102,7 +104,7 @@ export default function Index() {
         <Testimonial />
       </Container>
       <Container className="pt-48">
-        <Header
+        <Box
           heading={{
             tagName: "h2",
             text: supportWhat.title,
@@ -119,7 +121,7 @@ export default function Index() {
                 className="flex max-lg:flex-col gap-16"
               >
                 <supportType.icon className="w-48 h-48 flex-none fill-blue-800" />
-                <Header
+                <Box
                   heading={{
                     tagName: "h3",
                     text: supportType.title,
@@ -134,16 +136,11 @@ export default function Index() {
       </Container>
       <Background backgroundColor="blue">
         <Container>
-          <Header
-            heading={{
-              tagName: "h2",
-              text: supportHow.title,
-            }}
-          />
+          <Heading tagName="h2" text={supportHow.title} />
           {supportHow.supportTypes.length > 0 &&
             supportHow.supportTypes.map((supportType) => (
               <div key={supportType.title} className="ds-stack-16 pt-32 pb-40">
-                <Header
+                <Box
                   heading={{
                     tagName: "h3",
                     text: supportType.title,
@@ -175,7 +172,7 @@ export default function Index() {
       <div id="angebote">
         <Background backgroundColor="white">
           <Container>
-            <Header
+            <Box
               heading={{
                 tagName: "h2",
                 text: supportOfferings.title,
diff --git a/packages/dito/app/routes/vorpruefung.$questionId/PreCheckNavigation.tsx b/packages/dito/app/routes/vorpruefung.$questionId/PreCheckNavigation.tsx
index 94ed0f3e..28609e4c 100644
--- a/packages/dito/app/routes/vorpruefung.$questionId/PreCheckNavigation.tsx
+++ b/packages/dito/app/routes/vorpruefung.$questionId/PreCheckNavigation.tsx
@@ -22,7 +22,7 @@ export default function PreCheckNavigation({
 
   return (
     <nav aria-label="Alle Fragen" className="precheck-navigation">
-      <ul className="pl-0">
+      <ul className="list-unstyled">
         {questions.map((q: TQuestion, idx) => {
           const isDone = !!answers && q.id in answers;
           const isCurrent = q.id === question?.id;
@@ -59,7 +59,7 @@ function NavItem({
   isDone,
 }: Readonly<NavItem>) {
   const liClassNames = twJoin(
-    "list-none border-b-[1px] border-b-white border-l-[4px]",
+    "border-b-[1px] border-b-white border-l-[4px]",
     isCurrent ? "border-l-blue-800 pointer-events-none" : "border-l-blue-100",
     isDisabled && "text-gray-800 pointer-events-none",
   );
@@ -81,7 +81,12 @@ function NavItem({
         aria-describedby={iconId}
       >
         {isDone && <Check id={iconId} className="shrink-0" />}
-        <span title={label}>{label}</span>
+        <span
+          title={label}
+          className="after:content-[attr(title)] after:ds-label-02-bold after:block after:h-0 after:invisible" // Prevent shifting on navigation
+        >
+          {label}
+        </span>
       </Link>
     </li>
   );
diff --git a/packages/dito/app/routes/vorpruefung._index.tsx b/packages/dito/app/routes/vorpruefung._index.tsx
index fca09b07..97008e97 100644
--- a/packages/dito/app/routes/vorpruefung._index.tsx
+++ b/packages/dito/app/routes/vorpruefung._index.tsx
@@ -1,8 +1,8 @@
 import Background from "@digitalcheck/shared/components/Background";
-import Box from "@digitalcheck/shared/components/Box";
 import ButtonContainer from "@digitalcheck/shared/components/ButtonContainer";
 import Container from "@digitalcheck/shared/components/Container";
 import DetailsSummary from "@digitalcheck/shared/components/DetailsSummary";
+import Header from "@digitalcheck/shared/components/Header";
 import Heading from "@digitalcheck/shared/components/Heading";
 import Image from "@digitalcheck/shared/components/Image";
 import InfoBox from "@digitalcheck/shared/components/InfoBox";
@@ -27,8 +27,8 @@ export default function Index() {
   return (
     <>
       <Background backgroundColor="blue">
-        <Container className="pt-64 pb-56 max-sm:!py-32">
-          <Box
+        <Container>
+          <Header
             heading={{
               tagName: "h1",
               text: preCheck.start.title,
@@ -37,7 +37,7 @@ export default function Index() {
               markdown: preCheck.start.subtitle,
               className: "md:text-2xl",
             }}
-          ></Box>
+          ></Header>
         </Container>
         <Container className="pt-0">
           <div className="ds-stack-16 mb-40">
diff --git a/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx b/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx
index 35723293..7e30321e 100644
--- a/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx
+++ b/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx
@@ -128,8 +128,8 @@ export default function ResultPage({
                 .filter(({ reasons }) => reasons.length > 0)
                 .map(({ intro, reasons }) => (
                   <React.Fragment key={intro}>
-                    <RichText className="mt-40 first:mt-0" markdown={intro} />
-                    <ul className="ds-stack-16 mt-16">
+                    <RichText markdown={intro} className="mt-40 first:mt-0" />
+                    <ul className="ds-stack-16 mt-16 pl-0">
                       {reasons
                         .toSorted((a, b) => {
                           if (a.answer === b.answer) {
diff --git a/packages/dito/app/styles.css b/packages/dito/app/styles.css
deleted file mode 100644
index 3c1278e9..00000000
--- a/packages/dito/app/styles.css
+++ /dev/null
@@ -1,44 +0,0 @@
-main .rich-text a {
-  @apply font-bold;
-}
-
-main .rich-text a[href^="tel:"] {
-  white-space: nowrap;
-}
-
-main .rich-text ol {
-  @apply list-decimal ml-16;
-}
-
-main .ds-button {
-  @apply max-sm:ds-button-full-width sm:ds-button-large;
-}
-
-.precheck-navigation span::after {
-  /* prevent shifting on navigation */
-  @apply ds-label-02-bold;
-  display: block;
-  content: attr(title);
-  height: 1px;
-  color: transparent;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.paragraph-list ol {
-  list-style-type: decimal; /* Default for top-level */
-}
-
-.paragraph-list ol ol {
-  list-style-type: lower-alpha; /* Nested lists are alphabetic */
-}
-
-.accordion-summary:focus:not(:focus-visible) {
-  @apply outline-none;
-}
-
-/* Hide arrow in accordions  */
-.accordion > details > summary::marker, /* Latest Chrome, Edge, Firefox */
-.accordion > details > summary::-webkit-details-marker /* Safari */ {
-  display: none;
-}
diff --git a/packages/shared/components/Background.tsx b/packages/shared/components/Background.tsx
index 32ed854e..63f06d72 100644
--- a/packages/shared/components/Background.tsx
+++ b/packages/shared/components/Background.tsx
@@ -1,5 +1,5 @@
+import twMerge from "@digitalcheck/shared/utils/tailwindMerge";
 import { PropsWithChildren } from "react";
-import { twMerge } from "tailwind-merge";
 import { BACKGROUND_COLORS, type BackgroundColor } from ".";
 
 type BackgroundProps = {
diff --git a/packages/shared/components/Box.tsx b/packages/shared/components/Box.tsx
index 20dc50ee..a4798141 100644
--- a/packages/shared/components/Box.tsx
+++ b/packages/shared/components/Box.tsx
@@ -1,5 +1,5 @@
+import twMerge from "@digitalcheck/shared/utils/tailwindMerge";
 import { useId } from "react";
-import { twMerge } from "tailwind-merge";
 import { ButtonLinkProps, ButtonProps } from "./Button";
 import ButtonContainer from "./ButtonContainer";
 import Heading, { type HeadingProps } from "./Heading";
diff --git a/packages/shared/components/Breadcrumbs.tsx b/packages/shared/components/Breadcrumbs.tsx
index cf0e9871..0871e5fa 100644
--- a/packages/shared/components/Breadcrumbs.tsx
+++ b/packages/shared/components/Breadcrumbs.tsx
@@ -47,7 +47,7 @@ export default function Breadcrumbs({
 
   return filteredBreadcrumbs.length > 1 ? (
     <nav
-      className="py-8 max-sm:py-16 px-16 bg-blue-100 flex flex-wrap items-center text-base print:hidden"
+      className="py-8 px-16 bg-blue-100 flex flex-wrap items-center text-base print:hidden"
       data-testid="breadcrumbs-menu"
       aria-label="breadcrumb navigation"
     >
diff --git a/packages/shared/components/Button.tsx b/packages/shared/components/Button.tsx
index b3389333..15cb13e7 100644
--- a/packages/shared/components/Button.tsx
+++ b/packages/shared/components/Button.tsx
@@ -1,6 +1,6 @@
+import twMerge from "@digitalcheck/shared/utils/tailwindMerge";
 import { cloneElement, type ReactElement } from "react";
 import { Link } from "react-router-dom";
-import { twMerge } from "tailwind-merge";
 
 type Props = {
   text?: string;
diff --git a/packages/shared/components/ButtonContainer.tsx b/packages/shared/components/ButtonContainer.tsx
index 8b87bc21..31f7824d 100644
--- a/packages/shared/components/ButtonContainer.tsx
+++ b/packages/shared/components/ButtonContainer.tsx
@@ -1,4 +1,4 @@
-import { twMerge } from "tailwind-merge";
+import twMerge from "@digitalcheck/shared/utils/tailwindMerge";
 import Button, { type ButtonLinkProps, type ButtonProps } from "./Button";
 
 type ButtonContainerProps = {
diff --git a/packages/shared/components/Container.tsx b/packages/shared/components/Container.tsx
index 59dcae30..6bdaa752 100644
--- a/packages/shared/components/Container.tsx
+++ b/packages/shared/components/Container.tsx
@@ -1,5 +1,5 @@
+import twMerge from "@digitalcheck/shared/utils/tailwindMerge";
 import type { PropsWithChildren } from "react";
-import { twMerge } from "tailwind-merge";
 import { BACKGROUND_COLORS, type BackgroundColor } from ".";
 
 type ContainerProps = {
diff --git a/packages/shared/components/DetailsSummary.tsx b/packages/shared/components/DetailsSummary.tsx
index 963aaf84..19f6cb0d 100644
--- a/packages/shared/components/DetailsSummary.tsx
+++ b/packages/shared/components/DetailsSummary.tsx
@@ -17,16 +17,16 @@ export default function DetailsSummary({
   open = false,
 }: Readonly<DetailsSummaryProps>) {
   const summaryClasses = twJoin(
-    "summary-content inline-flex focus:outline-none cursor-pointer list-none bg-no-repeat pl-[24px]",
+    "summary-content inline-flex focus:outline-none cursor-pointer bg-no-repeat pl-[24px] [&::-webkit-details-marker]:hidden",
     bold ? "ds-label-01-bold" : "ds-label-01-reg",
   );
   return (
     <details
       open={open}
-      className="details focus-within:outline focus-within:outline-4 focus-within:outline-offset-4 focus-within:outline-blue-800 text-blue-800"
+      className="details has-[:focus-visible]:outline has-[:focus-visible]:outline-4 has-[:focus-visible]:outline-offset-4 has-[:focus-visible]:outline-blue-800 text-blue-800"
     >
       <summary className={summaryClasses}>{title}</summary>
-      <span className="block ds-label-01-reg pt-4 pl-[24px] text-black">
+      <span className="block pt-4 pl-[24px] text-black">
         {typeof content === "string" ? (
           <RichText markdown={content} />
         ) : (
diff --git a/packages/shared/components/Footer.tsx b/packages/shared/components/Footer.tsx
index 7a65aeac..254a21d5 100644
--- a/packages/shared/components/Footer.tsx
+++ b/packages/shared/components/Footer.tsx
@@ -26,7 +26,7 @@ export default function Footer({ links }: Readonly<FooterProps>) {
       {link?.preText}{" "}
       <Link
         to={link.url}
-        className="text-link increase-tap-area"
+        className="text-link increase-tap-area whitespace-nowrap"
         target={link.openInNewTab ? "_blank" : undefined}
         rel={link.openInNewTab ? "noreferrer" : undefined}
         aria-describedby={
@@ -46,7 +46,7 @@ export default function Footer({ links }: Readonly<FooterProps>) {
   );
 
   const renderLinks = (links: LinkProps[]) => (
-    <ul className="list-none ds-stack-16" key={links[0]?.url}>
+    <ul className="list-unstyled ds-stack-16" key={links[0]?.url}>
       {links.map(renderLink)}
     </ul>
   );
diff --git a/packages/shared/components/Heading.tsx b/packages/shared/components/Heading.tsx
index 8cb0d686..5a6c6d86 100644
--- a/packages/shared/components/Heading.tsx
+++ b/packages/shared/components/Heading.tsx
@@ -1,5 +1,5 @@
+import twMerge from "@digitalcheck/shared/utils/tailwindMerge";
 import type { ReactNode } from "react";
-import { twMerge } from "tailwind-merge";
 
 export type HeadingProps = {
   tagName?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "div";
diff --git a/packages/shared/components/InfoBox.tsx b/packages/shared/components/InfoBox.tsx
index 44952c34..93aaab9b 100644
--- a/packages/shared/components/InfoBox.tsx
+++ b/packages/shared/components/InfoBox.tsx
@@ -23,7 +23,7 @@ const InfoBox = ({
       {heading && <Heading className="max-sm:ds-heading-02-reg" {...heading} />}
       <ul
         className={twJoin(
-          "list-none ps-0 info-box",
+          "list-unstyled info-box",
           separator ? "ds-stack-32" : "ds-stack-48",
         )}
       >
diff --git a/packages/shared/components/InlineInfoList.tsx b/packages/shared/components/InlineInfoList.tsx
index 92e8c860..25bcb323 100644
--- a/packages/shared/components/InlineInfoList.tsx
+++ b/packages/shared/components/InlineInfoList.tsx
@@ -1,5 +1,5 @@
+import twMerge from "@digitalcheck/shared/utils/tailwindMerge";
 import type { ReactNode } from "react";
-import { twMerge } from "tailwind-merge";
 
 export type InlineInfoListItem =
   | { key?: string; label: string; value: ReactNode }
diff --git a/packages/shared/components/List.tsx b/packages/shared/components/List.tsx
index 3c59c4bc..ae544eb3 100644
--- a/packages/shared/components/List.tsx
+++ b/packages/shared/components/List.tsx
@@ -13,7 +13,7 @@ const NumberedList = ({ identifier, items, heading }: BaseListProps) => {
     <div className="scroll-my-40 relative ds-stack-8" id={identifier}>
       {heading && <Heading className="max-sm:ds-heading-02-reg" {...heading} />}
       <ol
-        className="list-none ds-stack-32 ps-0 relative"
+        className="list-unstyled ds-stack-32 relative"
         aria-live="polite"
         aria-labelledby={identifier ? `${identifier}-heading` : undefined}
       >
@@ -63,7 +63,7 @@ const BulletList = ({ identifier, items, heading }: BaseListProps) => {
         </div>
       </div>
       <ol
-        className="list-none ds-stack-32 ps-0 relative"
+        className="list-unstyled ds-stack-32 relative"
         aria-live="polite"
         aria-labelledby={identifier ? `${identifier}-heading` : undefined}
       >
diff --git a/packages/shared/components/ListItem.tsx b/packages/shared/components/ListItem.tsx
index fcf93d97..a244665b 100644
--- a/packages/shared/components/ListItem.tsx
+++ b/packages/shared/components/ListItem.tsx
@@ -1,3 +1,4 @@
+import { twJoin } from "tailwind-merge";
 import { type BackgroundColor, isBackgroundColor } from ".";
 import Background from "./Background";
 import { type ButtonProps } from "./Button";
@@ -71,7 +72,7 @@ const ListItem = ({
             )}
           </div>
         )}
-        <div className={`flex flex-row gap-16 max items-start ${textColor}`}>
+        <div className={`flex flex-row gap-16 items-start ${textColor}`}>
           <div className={`shrink-0 ${responsiveWidth}`}>
             {numeric && (
               <div className="w-[40px] h-[40px] flex justify-center items-center border-2 border-solid border-gray-400 rounded-full">
@@ -89,7 +90,12 @@ const ListItem = ({
           // TODO: This is very similar to the markup used in dito/methoden/$subPage.
           // We should probably create a component for this to keep it consistent.
            */}
-          <div className={`overflow-hidden ${backgroundColor && "rounded-lg"}`}>
+          <div
+            className={twJoin(
+              "overflow-hidden",
+              backgroundColor && "rounded-lg",
+            )}
+          >
             <Background
               backgroundColor={(backgroundColor as BackgroundColor) || "white"}
             >
diff --git a/packages/shared/components/Question.tsx b/packages/shared/components/Question.tsx
index 589872e6..c7d00b40 100644
--- a/packages/shared/components/Question.tsx
+++ b/packages/shared/components/Question.tsx
@@ -1,5 +1,5 @@
+import twMerge from "@digitalcheck/shared/utils/tailwindMerge";
 import { PropsWithChildren } from "react";
-import { twMerge } from "tailwind-merge";
 import { BackgroundColor } from ".";
 import Box, { BoxProps } from "./Box";
 import DetailsSummary from "./DetailsSummary";
diff --git a/packages/shared/components/RichText.spec.tsx b/packages/shared/components/RichText.spec.tsx
index c97cee2f..d800fe62 100644
--- a/packages/shared/components/RichText.spec.tsx
+++ b/packages/shared/components/RichText.spec.tsx
@@ -14,11 +14,6 @@ Hier können sie die [Dokumentation herunterladen](/assets/digitalcheck-dokument
 
 Hier können sie die [Excel-Datei herunterladen](/assets/digitalcheck-dokumentation.xlsx).`;
 
-test("Richtext outermost element has richtext class", () => {
-  render(<RichText markdown={EXAMPLE_MARKDOWN} data-testid="rich-text" />);
-  expect(screen.getByTestId("rich-text")).toHaveClass("rich-text");
-});
-
 test("Richtext renders external links with target blank", async () => {
   render(<RichText markdown={EXAMPLE_MARKDOWN} data-testid="rich-text" />);
   const links = await screen.findAllByRole("link");
diff --git a/packages/shared/components/RichText.tsx b/packages/shared/components/RichText.tsx
index da1541a8..1b43c128 100644
--- a/packages/shared/components/RichText.tsx
+++ b/packages/shared/components/RichText.tsx
@@ -1,3 +1,4 @@
+import twMerge from "@digitalcheck/shared/utils/tailwindMerge";
 import { marked, Marked, type Renderer, type Tokens } from "marked";
 import { A11Y_MESSAGE_NEW_WINDOW } from "./Aria";
 import { openInNewIconString } from "./openInNewWindow";
@@ -27,7 +28,7 @@ const RichText = ({
           const newLinkHtml = linkHtml
             .replace(
               /^<a /,
-              `<a target="_blank" aria-describedby=${A11Y_MESSAGE_NEW_WINDOW} rel="noopener noreferrer" class="inline-" `,
+              `<a target="_blank" aria-describedby=${A11Y_MESSAGE_NEW_WINDOW} rel="noopener noreferrer" `,
             )
             .replace(
               `>${token.text}<`,
@@ -45,7 +46,7 @@ const RichText = ({
         if (ext === "PDF" || ext === "XLSX") {
           return linkHtml.replace(
             /^<a /,
-            `<a download title="${`${token.text} (${ext}-Datei)`}" `,
+            `<a download title="${token.text} (${ext}-Datei)" `,
           );
         }
 
@@ -61,7 +62,10 @@ const RichText = ({
   return html ? (
     <div
       {...props}
-      className={`rich-text ds-stack-8 ${className ?? ""}`}
+      className={twMerge(
+        "ds-stack-8 [&_a]:text-link [&_a]:font-bold",
+        className,
+      )}
       dangerouslySetInnerHTML={{ __html: html }}
     />
   ) : null;
diff --git a/packages/shared/components/Textarea.tsx b/packages/shared/components/Textarea.tsx
index f05f6369..e15e159b 100644
--- a/packages/shared/components/Textarea.tsx
+++ b/packages/shared/components/Textarea.tsx
@@ -39,7 +39,7 @@ const Textarea = ({
         </InputLabel>
       )}
       {description && (
-        <RichText className="ds-body-01-reg" markdown={description} />
+        <RichText markdown={description} className="ds-body-01-reg" />
       )}
       <textarea
         name={name}
diff --git a/packages/shared/styles.css b/packages/shared/styles.css
index 3c56a6e2..8fd7c980 100644
--- a/packages/shared/styles.css
+++ b/packages/shared/styles.css
@@ -6,28 +6,44 @@
 
 @layer base {
   html {
-    /* keep 16px, don't change! (e.g. angie library depends on it) */
+    /* Keep 16px, don't change! (e.g. angie library depends on it) */
     font-size: 16px;
   }
 
   body {
-    min-height: 100vh;
-    font-size: 1.125rem;
-    line-height: 1.5;
+    /* By default, text is 16px * 1.125 = 18px and line height is 150% of that (27px). */
+    @apply text-lg leading-[1.5em];
   }
 
   h1 {
-    @apply ds-heading-01-reg max-sm:text-3xl max-md:text-5xl;
+    @apply ds-heading-01-reg;
   }
 
   h2 {
-    @apply ds-heading-02-reg max-sm:ds-heading-03-reg;
+    @apply ds-heading-02-reg;
   }
 
   h3 {
     @apply ds-heading-03-reg;
   }
 
+  a[href^="tel:"] {
+    @apply whitespace-nowrap;
+  }
+
+  ul:not(.list-unstyled),
+  ol:not(.list-unstyled) {
+    @apply pl-24 space-y-8;
+  }
+
+  ul:not(.list-unstyled) {
+    @apply list-disc;
+  }
+
+  ol:not(.list-unstyled) {
+    @apply list-decimal;
+  }
+
   h1,
   h2,
   .ds-heading-01-reg,
@@ -42,27 +58,20 @@
   .ds-heading-03-reg,
   .ds-heading-03-bold,
   p,
-  .rich-text ul,
-  .rich-text ol {
-    /* 70ch @ 18px font size = 630px */
+  ul:not(.list-unstyled),
+  ol:not(.list-unstyled) {
     @apply max-w-prose;
   }
 
   *:focus-visible {
-    @apply outline;
-    @apply outline-2;
-    @apply no-underline;
-    @apply outline-offset-1;
-    @apply text-blue-800;
-    @apply outline-blue-800;
-    text-decoration: none !important;
+    @apply outline outline-2 !no-underline outline-offset-1 !text-blue-800 outline-blue-800;
   }
 }
 
 @layer components {
-  .ds-radio {
-    background: transparent; /* for old Safari */
-  }
+  /*************
+   * CONTAINER *
+   *************/
 
   /* Tailwind's container core plugin is disabled,
    * because its breakpoint-based nature does not fit our needs */
@@ -79,31 +88,24 @@
     margin-right: clamp(1rem, 5vw, 3rem);
   }
 
-  .ds-textarea.has-error {
-    box-shadow: inset 0 0 0 2px #b0243f;
-    background-color: #f9e5ec;
-  }
+  /***********
+   * BUTTONS *
+   ***********/
 
-  .text-link {
-    /* IE 11 and others that don't support text-decoration-line */
-    text-decoration: underline;
-    @apply text-blue-800;
-    @apply underline;
-    @apply underline-offset-4;
-    @apply decoration-1;
+  .ds-button {
+    @apply max-sm:ds-button-full-width sm:ds-button-large;
   }
 
-  .text-link:visited {
-    @apply text-[#4c2c92];
-  }
+  /*********
+   * LINKS *
+   *********/
 
-  .text-link-white {
-    @apply text-link;
-    @apply text-gray-100;
+  .text-link {
+    @apply text-blue-800 underline underline-offset-4 decoration-1 visited:text-[#4c2c92] active:text-black;
   }
 
-  .text-link-white:visited {
-    @apply text-gray-300;
+  .text-white .text-link {
+    @apply text-gray-100 visited:text-gray-300;
   }
 
   /* Only apply hover effect on devices that support it, see https://stackoverflow.com/a/28058919 */
@@ -113,60 +115,9 @@
     }
   }
 
-  /* browsers without :focus-visible support */
-  .text-link:focus {
-    @apply outline;
-    @apply outline-2;
-    @apply no-underline;
-    @apply outline-offset-1;
-    @apply text-blue-800;
-    @apply outline-blue-800;
-  }
-
-  /* reset :focus styles for browsers with :focus-visible support */
-  .text-link:not(:focus-visible):focus {
-    @apply outline-none;
-    @apply underline;
-  }
-
-  /* ignored by browsers without :focus-visible support */
-  .text-link:focus-visible {
-    @apply outline;
-    @apply outline-2;
-    @apply no-underline;
-    @apply outline-offset-1;
-    @apply !text-blue-800;
-    @apply outline-blue-800;
-  }
-
-  .text-link:active {
-    @apply text-black;
-  }
-
-  footer a {
-    @apply increase-tap-area whitespace-nowrap;
-  }
-
-  .rich-text a {
-    @apply text-link;
-  }
-
-  .text-white .rich-text a {
-    @apply text-link-white;
-  }
-
-  .rich-text ul {
-    list-style-type: disc;
-    padding-left: 1.5rem;
-  }
-
-  .rich-text {
-    @apply text-lg;
-  }
-
-  .rich-text-2xl {
-    @apply text-2xl;
-  }
+  /***********
+   * DETAILS *
+   ***********/
 
   .details .summary-content {
     @apply bg-[position:0_8px];
@@ -177,53 +128,34 @@
     background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 10L16 10L8 0L0 10Z' fill='%23005576'/%3E%3C/svg%3E%0A");
   }
 
-  .summary-content::-webkit-details-marker {
-    display: none;
-  }
-
-  /* when focus without the keyboard, remove the outline of the children*/
-  .details:not(:has(.summary-content:focus-visible)) {
-    @apply outline-none;
-  }
-
   /* Only apply hover effect on devices that support it, see https://stackoverflow.com/a/28058919 */
   @media (hover: hover) {
     .summary-content:hover {
-      @apply !underline;
-      @apply underline-offset-2;
-      @apply decoration-2;
+      @apply !underline underline-offset-2 decoration-2;
     }
   }
+
+  /********
+   * MISC *
+   ********/
+
+  .ds-textarea.has-error {
+    box-shadow: inset 0 0 0 2px #b0243f;
+    background-color: #f9e5ec;
+  }
 }
 
 @layer utilities {
   .increase-tap-area {
-    @apply relative;
-    @apply inline-block;
+    @apply relative inline-block;
   }
 
   .increase-tap-area::before {
-    content: "";
-    @apply absolute;
-    top: -0.75rem;
-    bottom: -0.75rem;
-    left: -0.75rem;
-    right: -0.75rem;
+    @apply absolute -top-12 -left-12 -right-12 -bottom-12 content-[''];
   }
 
   .max-w-prose {
-    @apply max-w-[630px];
-  }
-
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
+    /* 70ch @ 18px font size = 630px */
+    max-width: 630px;
   }
 }
diff --git a/packages/shared/utils/tailwindMerge.ts b/packages/shared/utils/tailwindMerge.ts
new file mode 100644
index 00000000..89215ab8
--- /dev/null
+++ b/packages/shared/utils/tailwindMerge.ts
@@ -0,0 +1,46 @@
+import tailwindPreset from "@digitalservice4germany/style-dictionary/tailwind";
+import { extendTailwindMerge } from "tailwind-merge";
+
+const spacing = Object.keys(tailwindPreset.theme.spacing);
+const typographyVariants = [
+  "01-reg",
+  "01-bold",
+  "02-reg",
+  "02-bold",
+  "03-reg",
+  "03-bold",
+];
+
+const customTwMerge = extendTailwindMerge<
+  | "dsButtonSize"
+  | "dsButtonColor"
+  | "dsCheckbox"
+  | "dsInput"
+  | "dsRadio"
+  | "dsSelect"
+  | "dsStack"
+  | "dsTypography"
+>({
+  extend: {
+    classGroups: {
+      dsButtonSize: [{ "ds-button": ["small", "large"] }],
+      dsButtonColor: [{ "ds-button": ["secondary", "tertiary", "ghost"] }],
+      dsCheckbox: [{ "ds-checkbox": ["small", "mini"] }],
+      dsInput: [{ "ds-input": ["medium", "small"] }],
+      dsRadio: [{ "ds-radio": ["small", "mini"] }],
+      dsSelect: [{ "ds-input": ["medium", "small"] }],
+      dsStack: [{ "ds-stack": spacing }],
+      dsTypography: [
+        "ds-title-reg",
+        { "ds-heading": typographyVariants },
+        "ds-subhead",
+        { "ds-label": typographyVariants },
+        "ds-label-section",
+        { "ds-body": typographyVariants },
+        { "ds-link": typographyVariants },
+      ],
+    },
+  },
+});
+
+export default customTwMerge;
diff --git a/packages/shared/vitest.config.ts b/packages/shared/vitest.config.ts
index 89547478..cc697c87 100644
--- a/packages/shared/vitest.config.ts
+++ b/packages/shared/vitest.config.ts
@@ -1,6 +1,8 @@
+import tsconfigPaths from "vite-tsconfig-paths";
 import { defineConfig } from "vitest/config";
 
 export default defineConfig({
+  plugins: [tsconfigPaths()],
   test: {
     globals: true,
     environment: "jsdom",
diff --git a/packages/tool-finder/src/components/Recommendation.tsx b/packages/tool-finder/src/components/Recommendation.tsx
index 98460575..5cde4b1f 100644
--- a/packages/tool-finder/src/components/Recommendation.tsx
+++ b/packages/tool-finder/src/components/Recommendation.tsx
@@ -31,10 +31,10 @@ export default function renderRecommendation({
         <Heading tagName="h3" look="ds-heading-03-bold" text={tool.name} />
         <div className="flex flex-col sm:flex-row gap-16 sm:gap-24">
           <RichText
-            className="flex-1 [word-break:break-word]"
             markdown={`${tool.description}
               ${tool.link ? `\n\n${tool.link}` : ""}
               ${tool.access ? "\n\n" + tool.access : ""}`}
+            className="flex-1 [word-break:break-word]"
           />
           {(tool.img.src || recommendation.alternativeTools.length > 0) && (
             <div className="flex-1 space-y-24">