From 66767ecb536cb7b408f31ecef30154f0870bdb16 Mon Sep 17 00:00:00 2001
From: Hendrik Schmidt <hendrik.schmidt@digitalservice.bund.de>
Date: Tue, 21 Jan 2025 12:23:02 +0100
Subject: [PATCH] Introduce eslint tailwind plugin

---
 .eslintrc.cjs                                 |  4 ++++
 package-lock.json                             | 20 +++++++++++++++-
 package.json                                  |  3 ++-
 packages/dito/app/components/Accordion.tsx    |  2 +-
 .../dito/app/components/AccordionItem.tsx     | 12 +++++-----
 packages/dito/app/components/FeedbackForm.tsx |  8 +++----
 .../dito/app/components/InterviewBanner.tsx   |  2 +-
 packages/dito/app/components/LinkBar.tsx      |  2 +-
 .../dito/app/components/ParagraphList.tsx     |  4 ++--
 .../dito/app/components/VisualisationItem.tsx | 10 ++++----
 packages/dito/app/root.tsx                    |  6 ++---
 packages/dito/app/routes/_index.tsx           | 16 ++++++-------
 packages/dito/app/routes/beispiele._index.tsx |  2 +-
 .../routes/beispiele.prinzipien.$prinzip.tsx  |  6 ++---
 .../routes/beispiele.regelungen.$regelung.tsx | 12 +++++-----
 packages/dito/app/routes/methoden.tsx         |  4 ++--
 .../dito/app/routes/methoden_.$subPage.tsx    |  8 +++----
 .../app/routes/methoden_.fuenf-prinzipien.tsx |  2 +-
 packages/dito/app/routes/sitemap.tsx          |  4 ++--
 .../routes/unterstuetzung/SupportTabList.tsx  | 10 ++++----
 .../dito/app/routes/unterstuetzung/route.tsx  | 24 +++++++++----------
 .../PreCheckNavigation.tsx                    |  4 ++--
 .../routes/vorpruefung.$questionId/route.tsx  |  6 ++---
 .../dito/app/routes/vorpruefung._index.tsx    |  4 ++--
 .../vorpruefung.ergebnis/ResultPage.tsx       | 10 ++++----
 .../dito/app/routes/vorpruefung.hinweise.tsx  |  4 ++--
 packages/shared/components/BetaBanner.tsx     |  4 ++--
 packages/shared/components/Breadcrumbs.tsx    |  4 ++--
 packages/shared/components/DetailsSummary.tsx |  4 ++--
 packages/shared/components/FeedbackBanner.tsx |  6 ++---
 packages/shared/components/FeedbackForm.tsx   | 14 +++++------
 packages/shared/components/Footer.tsx         |  6 ++---
 packages/shared/components/InfoBoxItem.tsx    |  2 +-
 packages/shared/components/InlineNotice.tsx   |  8 +++----
 packages/shared/components/Input.tsx          |  2 +-
 packages/shared/components/InputError.tsx     |  6 ++---
 packages/shared/components/InputWarning.tsx   |  4 ++--
 packages/shared/components/LabelWithIcon.tsx  |  2 +-
 packages/shared/components/List.tsx           | 14 +++++------
 packages/shared/components/ListItem.tsx       | 19 +++++++--------
 packages/shared/components/RadioGroup.tsx     |  4 ++--
 .../shared/components/openInNewWindow.tsx     |  2 +-
 packages/tool-finder/src/App.tsx              |  6 ++---
 .../tool-finder/src/MaintenanceModeApp.tsx    |  6 ++---
 .../tool-finder/src/components/PageHeader.tsx |  2 +-
 .../src/components/Recommendation.tsx         |  6 ++---
 .../tool-finder/src/routes/Accessibility.tsx  |  6 ++---
 .../tool-finder/src/routes/DecisionTree.tsx   |  6 ++---
 packages/tool-finder/src/routes/Diagram.tsx   |  6 ++---
 packages/tool-finder/src/routes/Flowchart.tsx | 14 +++++------
 packages/tool-finder/src/routes/Imprint.tsx   |  6 ++---
 packages/tool-finder/src/routes/InfoPage.tsx  | 12 +++++-----
 .../src/routes/MaintenanceModePage.tsx        |  6 ++---
 packages/tool-finder/src/routes/Privacy.tsx   |  6 ++---
 packages/tool-finder/src/routes/QuizPage.tsx  |  8 +++----
 .../tool-finder/src/routes/ResultPage.tsx     | 14 +++++------
 56 files changed, 207 insertions(+), 187 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 75fc7cea..b0e48fea 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -91,6 +91,7 @@ module.exports = {
         "plugin:@typescript-eslint/recommended-type-checked",
         "plugin:import/recommended",
         "plugin:import/typescript",
+        "plugin:tailwindcss/recommended",
       ],
       parser: "@typescript-eslint/parser",
       parserOptions: {
@@ -111,6 +112,9 @@ module.exports = {
             project: ["**/tsconfig.json"],
           },
         },
+        tailwindcss: {
+          whitelist: ["ds\\-(.*)", "plausible\\-(.*)", "parent-bg-blue"],
+        },
       },
       rules: {
         "@typescript-eslint/ban-ts-comment": "warn",
diff --git a/package-lock.json b/package-lock.json
index 99654413..8988fd2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "@typescript-eslint/parser": "^8.21.0",
         "@vitejs/plugin-react": "^4.3.0",
         "autoprefixer": "^10.4.16",
-        "eslint": "^8.57.0",
+        "eslint": "^8.57.1",
         "eslint-config-prettier": "^10.0.1",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.31.0",
@@ -40,6 +40,7 @@
         "eslint-plugin-react": "^7.37.0",
         "eslint-plugin-react-hooks": "^5.0.0",
         "eslint-plugin-react-refresh": "^0.4.3",
+        "eslint-plugin-tailwindcss": "^3.18.0",
         "eslint-plugin-testing-library": "^7.0.0",
         "license-checker": "^25.0.0",
         "prettier": "^3.4.1",
@@ -7593,6 +7594,23 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/eslint-plugin-tailwindcss": {
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.18.0.tgz",
+      "integrity": "sha512-PQDU4ZMzFH0eb2DrfHPpbgo87Zgg2EXSMOj1NSfzdZm+aJzpuwGerfowMIaVehSREEa0idbf/eoNYAOHSJoDAQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.4.4"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.4.0"
+      }
+    },
     "node_modules/eslint-plugin-testing-library": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-7.1.1.tgz",
diff --git a/package.json b/package.json
index 13fcc6df..457a97ff 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "@typescript-eslint/parser": "^8.21.0",
     "@vitejs/plugin-react": "^4.3.0",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.0.1",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.31.0",
@@ -62,6 +62,7 @@
     "eslint-plugin-react": "^7.37.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-tailwindcss": "^3.18.0",
     "eslint-plugin-testing-library": "^7.0.0",
     "license-checker": "^25.0.0",
     "prettier": "^3.4.1",
diff --git a/packages/dito/app/components/Accordion.tsx b/packages/dito/app/components/Accordion.tsx
index ca25692d..82e19cb3 100644
--- a/packages/dito/app/components/Accordion.tsx
+++ b/packages/dito/app/components/Accordion.tsx
@@ -4,7 +4,7 @@ export default function Accordion({
   items,
 }: Readonly<{ items: AccordionItemProps[] }>) {
   return (
-    <div className="accordion bg-white border-b-2 border-b-blue-800">
+    <div className="border-b-2 border-b-blue-800 bg-white">
       {items.map((item) => (
         <AccordionItem
           key={item.headline}
diff --git a/packages/dito/app/components/AccordionItem.tsx b/packages/dito/app/components/AccordionItem.tsx
index 28c984cc..e532bd4c 100644
--- a/packages/dito/app/components/AccordionItem.tsx
+++ b/packages/dito/app/components/AccordionItem.tsx
@@ -14,15 +14,15 @@ export default function AccordionItem({
   id,
 }: Readonly<AccordionItemProps>) {
   return (
-    <details className="border-t-2 border-t-blue-800 group" id={id}>
-      <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">
+    <details className="group border-t-2 border-t-blue-800" id={id}>
+      <summary className="flex w-full cursor-pointer items-center justify-between p-24 hover:bg-blue-200 focus-visible:bg-blue-200 focus-visible:outline focus-visible:outline-4 focus-visible:outline-blue-800 group-open:bg-blue-200 [&::-webkit-details-marker]:hidden">
+        <div className="pr-10 text-left font-bold text-blue-800">
           {headline}
         </div>
-        <Add className="w-24 h-24 flex-shrink-0 fill-blue-800 group-open:hidden" />
-        <Remove className="w-24 h-24 flex-shrink-0 fill-blue-800 hidden group-open:block" />
+        <Add className="size-24 shrink-0 fill-blue-800 group-open:hidden" />
+        <Remove className="hidden size-24 shrink-0 fill-blue-800 group-open:block" />
       </summary>
-      <div className="p-24 pr-24">
+      <div className="p-24">
         {typeof content === "string" ? (
           <RichText markdown={content} />
         ) : (
diff --git a/packages/dito/app/components/FeedbackForm.tsx b/packages/dito/app/components/FeedbackForm.tsx
index 76df515a..9a114974 100644
--- a/packages/dito/app/components/FeedbackForm.tsx
+++ b/packages/dito/app/components/FeedbackForm.tsx
@@ -141,7 +141,7 @@ function FeedbackQuestion({
                 );
               })}
             </div>
-            <div className="mt-20 text-gray-900 flex justify-between">
+            <div className="mt-20 flex justify-between text-gray-900">
               <span className="">{feedbackForm.labels[0]}</span>
               <span className="">{feedbackForm.labels[4]}</span>
             </div>
@@ -186,7 +186,7 @@ export default function FeedbackForm() {
   if (submitted) {
     return (
       <div ref={thankYouMessageRef} tabIndex={-1} aria-live="polite">
-        <Background backgroundColor="blue" className="pt-40 pb-48">
+        <Background backgroundColor="blue" className="pb-48 pt-40">
           <Container backgroundColor="white" overhangingBackground>
             <h2>Vielen Dank für Ihr Feedback!</h2>
             <br />
@@ -201,7 +201,7 @@ export default function FeedbackForm() {
   }
 
   return (
-    <Background backgroundColor="blue" className="pt-40 pb-48">
+    <Background backgroundColor="blue" className="pb-48 pt-40">
       <Container backgroundColor="white" overhangingBackground>
         <h2>{feedbackForm.heading}</h2>
         <form onSubmit={handleSubmit} className="mb-48">
@@ -216,7 +216,7 @@ export default function FeedbackForm() {
           />
           <button
             type="submit"
-            className="mt-16 bg-blue-800 text-white px-24 py-12"
+            className="mt-16 bg-blue-800 px-24 py-12 text-white"
           >
             Feedback absenden
           </button>
diff --git a/packages/dito/app/components/InterviewBanner.tsx b/packages/dito/app/components/InterviewBanner.tsx
index ffccc723..6c334445 100644
--- a/packages/dito/app/components/InterviewBanner.tsx
+++ b/packages/dito/app/components/InterviewBanner.tsx
@@ -5,7 +5,7 @@ import { interviewBanner } from "resources/content";
 export default function InterviewBanner() {
   return (
     <Container
-      className="mt-40 mb-48"
+      className="mb-48 mt-40"
       backgroundColor="blue"
       overhangingBackground
     >
diff --git a/packages/dito/app/components/LinkBar.tsx b/packages/dito/app/components/LinkBar.tsx
index 3b64b537..6cb5b527 100644
--- a/packages/dito/app/components/LinkBar.tsx
+++ b/packages/dito/app/components/LinkBar.tsx
@@ -12,7 +12,7 @@ const LinkBar = <T extends { url: string }>({
   );
 
   return (
-    <div className="flex justify-center space-x-8 mt-20">
+    <div className="mt-20 flex justify-center space-x-8">
       {elements.map((element, index) => (
         <Link
           key={element.url}
diff --git a/packages/dito/app/components/ParagraphList.tsx b/packages/dito/app/components/ParagraphList.tsx
index e73d806c..23ccdeb2 100644
--- a/packages/dito/app/components/ParagraphList.tsx
+++ b/packages/dito/app/components/ParagraphList.tsx
@@ -107,7 +107,7 @@ const PrincipleExplanation = ({
 
   return (
     <div className={explanationClasses} id={id} data-testid={id}>
-      <div className="flex gap-4 content-center">
+      <div className="flex content-center gap-4">
         <Heading
           tagName="h4"
           text={`Prinzip ${erfuellung.Prinzip.Nummer} – ${erfuellung.Prinzip.Name}`}
@@ -294,7 +294,7 @@ function Paragraph({
           className="font-bold"
         />
         <p className="ds-subhead font-bold">{paragraph.Titel}</p>
-        <div className="border-l-4 border-gray-300 pl-8 ds-stack-16">
+        <div className="ds-stack-16 border-l-4 border-gray-300 pl-8">
           {groupedAbsaetze.map((absatzGroup) => (
             <AbsatzContent
               key={"id" in absatzGroup ? absatzGroup.id : absatzGroup[0].number}
diff --git a/packages/dito/app/components/VisualisationItem.tsx b/packages/dito/app/components/VisualisationItem.tsx
index ae464368..d61d0807 100644
--- a/packages/dito/app/components/VisualisationItem.tsx
+++ b/packages/dito/app/components/VisualisationItem.tsx
@@ -24,7 +24,7 @@ export default function VisualisationItem({
   const visualisationUrl = visualisierung.Bild.url.split("/").pop();
 
   return (
-    <div className="flex max-sm:flex-col gap-16 sm:gap-32">
+    <div className="flex gap-16 max-sm:flex-col sm:gap-32">
       <div className="sm:w-1/2">
         <Link
           to={`${ROUTE_VISUALISATION.url}/${visualisationUrl}`}
@@ -32,12 +32,12 @@ export default function VisualisationItem({
           target="_blank"
           rel="noreferrer"
           state={{ image: visualisierung.Bild }}
-          className="block relative border border-blue-500 aspect-square overflow-hidden cursor-zoom-in"
+          className="relative block aspect-square cursor-zoom-in overflow-hidden border border-blue-500"
         >
           <Image
             url={visualisierung.Bild.url}
             alternativeText={visualisierung.Bild.alternativeText}
-            className="w-full h-full object-cover"
+            className="size-full object-cover"
           />
           <ZoomInOutlined
             className="absolute bottom-16 left-16 bg-blue-800 p-1 shadow"
@@ -45,7 +45,7 @@ export default function VisualisationItem({
           />
         </Link>
 
-        <div className="p-12 bg-gray-100">
+        <div className="bg-gray-100 p-12">
           <LabelValuePair
             label={regulations.visualisations.imageInfo.legalArea}
             value={visualisierung.Digitalcheck?.Regelungsvorhaben?.Rechtsgebiet}
@@ -71,7 +71,7 @@ export default function VisualisationItem({
           />
         </div>
       </div>
-      <div className="sm:w-1/2 mb-12">
+      <div className="mb-12 sm:w-1/2">
         <Heading tagName="h3" look="ds-heading-03-reg" className="mb-16">
           {visualisierung.Titel}
         </Heading>
diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
index 01c63d8f..90bbc8ee 100644
--- a/packages/dito/app/root.tsx
+++ b/packages/dito/app/root.tsx
@@ -217,7 +217,7 @@ const PageHeader = ({
   includeBreadcrumbs?: boolean;
 }) => (
   <header>
-    <div className="min-h-64 p-16 flex justify-between items-center">
+    <div className="flex min-h-64 items-center justify-between p-16">
       <Link to={ROUTE_LANDING.url}>
         <img src={bundLogo} alt="Logo des Bundes" width={54} />
       </Link>
@@ -231,7 +231,7 @@ const PageHeader = ({
           <span className="mx-8">|</span>
           {header.contact.msg}
         </div>
-        <PhoneOutlined className="mx-8 w-18" />
+        <PhoneOutlined className="mx-8" />
         <a
           href={`tel:${header.contact.number}`}
           className="ds-link-01-bold plausible-event-name=Phone+Click plausible-event-position=header"
@@ -273,7 +273,7 @@ function Document({
         <Meta />
         <Links />
       </head>
-      <body className="min-h-screen flex flex-col">
+      <body className="flex min-h-screen flex-col">
         <PageHeader includeBreadcrumbs={!error} />
         {children}
         <Footer links={footerLinks} />
diff --git a/packages/dito/app/routes/_index.tsx b/packages/dito/app/routes/_index.tsx
index 0f9adb5c..d0fb717c 100644
--- a/packages/dito/app/routes/_index.tsx
+++ b/packages/dito/app/routes/_index.tsx
@@ -16,7 +16,7 @@ export default function Index() {
   const showLinksToTools = useFeatureFlag("digitalcheck.show-links-to-tools");
   return (
     <>
-      <Background backgroundColor="darkBlue" className="pt-24 pb-24">
+      <Background backgroundColor="darkBlue" className="py-24">
         <Container>
           <Header
             heading={{
@@ -47,9 +47,9 @@ export default function Index() {
           content={landing.dataNotice.content}
         />
       </Container> */}
-      <div className="bg-[url('/assets/images/trainings.jpeg')] bg-[0%_35%] bg-cover">
+      <div className="bg-[url('/assets/images/trainings.jpeg')] bg-cover bg-[0%_35%]">
         <Container>
-          <div className="max-w-[630px] bg-white px-16 py-28 md:px-80 md:py-40 rounded-lg">
+          <div className="max-w-[630px] rounded-lg bg-white px-16 py-28 md:px-80 md:py-40">
             <Box
               heading={{ text: landing.trainings.title }}
               content={{ markdown: landing.trainings.text }}
@@ -77,9 +77,9 @@ export default function Index() {
                 text={landing.links.title}
               />
               <RichText markdown={landing.links.subtitle} />
-              <div className="flex flex-row max-md:flex-col gap-24 pt-32">
+              <div className="flex flex-row gap-24 pt-32 max-md:flex-col">
                 {landing.links.items.map((item) => (
-                  <div key={item.label} className="bg-white p-28 rounded-md">
+                  <div key={item.label} className="rounded-md bg-white p-28">
                     <Box
                       heading={{
                         tagName: "h3",
@@ -94,7 +94,7 @@ export default function Index() {
                       }}
                       content={{ markdown: item.content }}
                       buttons={item.buttons}
-                      className="!justify-between h-full"
+                      className="h-full !justify-between"
                     />
                   </div>
                 ))}
@@ -104,7 +104,7 @@ export default function Index() {
         </Background>
       )}
       <SupportBanner />
-      <Background backgroundColor="darkBlue" className="pt-24 pb-24">
+      <Background backgroundColor="darkBlue" className="py-24">
         <Container>
           <div className="ds-stack-32 scroll-my-40">
             <Heading tagName="h2" text={landing.principles.title} />
@@ -112,7 +112,7 @@ export default function Index() {
               {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"
+                  className="before:mb-8 before:block before:w-1/2 before:border-t before:border-blue-700 before:content-[''] first:before:content-none"
                 >
                   {principle}
                 </li>
diff --git a/packages/dito/app/routes/beispiele._index.tsx b/packages/dito/app/routes/beispiele._index.tsx
index ff858cc7..4e11cc54 100644
--- a/packages/dito/app/routes/beispiele._index.tsx
+++ b/packages/dito/app/routes/beispiele._index.tsx
@@ -26,7 +26,7 @@ export default function Digitaltauglichkeit_index() {
   );
   return (
     <>
-      <Background backgroundColor="darkBlue" className="pt-24 pb-24">
+      <Background backgroundColor="darkBlue" className="py-24">
         <Container>
           <Header
             heading={{
diff --git a/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx b/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx
index 392840f7..c45c3df0 100644
--- a/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx
+++ b/packages/dito/app/routes/beispiele.prinzipien.$prinzip.tsx
@@ -97,7 +97,7 @@ export default function DigitaltauglichkeitPrinzipienDetail() {
           />
           <BlocksRenderer content={prinzip.Beschreibung}></BlocksRenderer>
         </Container>
-        <Container className="flex space-x-20 items-center">
+        <Container className="flex items-center space-x-20">
           {prinzips.map((p) =>
             prinzip.Nummer === p.Nummer ? (
               <div key={p.Nummer} className="ds-label-01-bold">
@@ -135,9 +135,9 @@ export default function DigitaltauglichkeitPrinzipienDetail() {
                       tagName="h2"
                       text={digitalcheck.Regelungsvorhaben.Titel}
                       look="ds-heading-03-bold"
-                      className="inline max-w-full text-link"
+                      className="text-link inline max-w-full"
                     />
-                    <OpenInNewIcon className="!inline scale-90 ml-4 mb-6 fill-blue-800" />
+                    <OpenInNewIcon className="mb-6 ml-4 !inline scale-90 fill-blue-800" />
                   </Link>
                   <InlineInfoList
                     className="my-32 pl-16"
diff --git a/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx b/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx
index 85255564..2577ae90 100644
--- a/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx
+++ b/packages/dito/app/routes/beispiele.regelungen.$regelung.tsx
@@ -104,7 +104,7 @@ export default function Gesetz() {
               markdown: regulations.subtitle[0],
             }}
           />
-          <p className="mt-24 ds-subhead font-bold">
+          <p className="ds-subhead mt-24 font-bold">
             <b>{regulations.subtitle[1]}</b>
           </p>
           <ol className="list-unstyled mt-16">
@@ -115,7 +115,7 @@ export default function Gesetz() {
                     ↓
                     <Link
                       to={`#${slugify(regulations.principles.title)}-${index}`}
-                      className="ml-4 underline underline-offset-4 decoration-1"
+                      className="ml-4 underline decoration-1 underline-offset-4"
                     >
                       {regulations.principles.title}
                     </Link>
@@ -126,7 +126,7 @@ export default function Gesetz() {
                     ↓
                     <Link
                       to={`#${slugify(regulations.visualisations.title)}-${index}`}
-                      className="ml-4 underline underline-offset-4 decoration-1"
+                      className="ml-4 underline decoration-1 underline-offset-4"
                     >
                       {regulations.visualisations.title}
                     </Link>
@@ -137,7 +137,7 @@ export default function Gesetz() {
                     ↓
                     <Link
                       to={`#${slugify(regulations.nkr.title)}-${index}`}
-                      className="ml-4 underline underline-offset-4 decoration-1"
+                      className="ml-4 underline decoration-1 underline-offset-4"
                     >
                       {regulations.nkr.title}
                     </Link>
@@ -149,7 +149,7 @@ export default function Gesetz() {
         </Container>
       </Background>
       <Background backgroundColor="midLightBlue">
-        <Container className="pt-0 pb-0">
+        <Container className="py-0">
           <InlineInfoList
             items={[
               {
@@ -195,7 +195,7 @@ export default function Gesetz() {
           </Container>
         )}
       {regelung.Digitalchecks.map((digitalcheck, index) => (
-        <Container key={digitalcheck.documentId} className="pb-80 ds-stack-64">
+        <Container key={digitalcheck.documentId} className="ds-stack-64 pb-80">
           {/* ----- Formulierungen / Prinziperfüllungen ----- */}
           {digitalcheck.Paragraphen.length > 0 && (
             <>
diff --git a/packages/dito/app/routes/methoden.tsx b/packages/dito/app/routes/methoden.tsx
index 2f39cd49..7eb4ffb4 100644
--- a/packages/dito/app/routes/methoden.tsx
+++ b/packages/dito/app/routes/methoden.tsx
@@ -22,8 +22,8 @@ interface InfoItem {
 
 export default function Methoden() {
   const renderInfoItem = (info: InfoItem) => (
-    <span key={info.text} className="flex gap-4 items-top mb-8 last:mb-24">
-      <info.icon className="h-16 w-16 mt-6" />
+    <span key={info.text} className="mb-8 flex gap-4 last:mb-24">
+      <info.icon className="mt-6 size-16" />
       <span>{info.text}</span>
     </span>
   );
diff --git a/packages/dito/app/routes/methoden_.$subPage.tsx b/packages/dito/app/routes/methoden_.$subPage.tsx
index 7e22f896..386a28a0 100644
--- a/packages/dito/app/routes/methoden_.$subPage.tsx
+++ b/packages/dito/app/routes/methoden_.$subPage.tsx
@@ -82,7 +82,7 @@ export default function Index() {
           {content.guidance && (
             <RichText
               markdown={content.guidance}
-              className="mt-24 ds-stack-0"
+              className="ds-stack-0 mt-24"
             />
           )}
         </Container>
@@ -105,10 +105,10 @@ export default function Index() {
         {content.boxes.map((box) => (
           // TODO: This is very similar to the markup used in <ListItem /> when a background color is provided.
           // We should probably create a component for this to keep it consistent.
-          <div key={box.title} className="rounded-lg overflow-hidden">
+          <div key={box.title} className="overflow-hidden rounded-lg">
             <Background backgroundColor="midBlue">
-              <div className="pt-64 px-96 max-sm:px-16 max-sm:pt-32">
-                <div className="rounded-t-lg shadow-2xl overflow-hidden h-0 pb-[40%] &_img:object-cover &_img:object-top">
+              <div className="px-96 pt-64 max-sm:px-16 max-sm:pt-32">
+                <div className="&_img:object-cover &_img:object-top h-0 overflow-hidden rounded-t-lg pb-[40%] shadow-2xl">
                   <Image url={box.image.src} alternativeText={box.image.alt} />
                 </div>
               </div>
diff --git a/packages/dito/app/routes/methoden_.fuenf-prinzipien.tsx b/packages/dito/app/routes/methoden_.fuenf-prinzipien.tsx
index af17dcda..b2d65ca4 100644
--- a/packages/dito/app/routes/methoden_.fuenf-prinzipien.tsx
+++ b/packages/dito/app/routes/methoden_.fuenf-prinzipien.tsx
@@ -80,7 +80,7 @@ export default function FivePrinciples() {
                 <li key={principle.label}>
                   <Link
                     to={`#${slugify(principle.label)}`}
-                    className="underline underline-offset-4 decoration-1"
+                    className="underline decoration-1 underline-offset-4"
                   >
                     ↓ {principle.label}: {principle.title}
                   </Link>
diff --git a/packages/dito/app/routes/sitemap.tsx b/packages/dito/app/routes/sitemap.tsx
index 903bb27a..22cafeb7 100644
--- a/packages/dito/app/routes/sitemap.tsx
+++ b/packages/dito/app/routes/sitemap.tsx
@@ -47,9 +47,9 @@ export default function Sitemap(): ReactNode {
 
   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">
+    <ul className="list-unstyled space-y-8 [&_li>ul]:ml-8 [&_li>ul]:border-l [&_li>ul]:border-gray-200 [&_li>ul]:pl-8">
       {routes.map((route) => (
-        <li key={route.url} className="space-y-8 mb-4">
+        <li key={route.url} className="mb-4 space-y-8">
           <a href={route.url} className="text-link hover:underline">
             {route.title}
           </a>
diff --git a/packages/dito/app/routes/unterstuetzung/SupportTabList.tsx b/packages/dito/app/routes/unterstuetzung/SupportTabList.tsx
index e92ad507..e583a773 100644
--- a/packages/dito/app/routes/unterstuetzung/SupportTabList.tsx
+++ b/packages/dito/app/routes/unterstuetzung/SupportTabList.tsx
@@ -70,7 +70,7 @@ export default function SupportTabs() {
       <div
         role="tablist"
         aria-label="Support Tabs"
-        className="flex max-sm:flex-col items-start my-32"
+        className="my-32 flex items-start max-sm:flex-col"
       >
         {tabs.map((tab, index) => (
           <button
@@ -87,7 +87,7 @@ export default function SupportTabs() {
             tabIndex={activeTab === index ? 0 : -1}
             onClick={() => setActiveTab(index)}
             onKeyDown={(e) => handleKeyDown(e, index)}
-            className={`text-blue-800 p-8 my-8 mr-48 ${activeTab === index ? "font-bold border-b-2 border-blue-800" : ""}`}
+            className={`my-8 mr-48 p-8 text-blue-800 ${activeTab === index ? "border-b-2 border-blue-800 font-bold" : ""}`}
           >
             {tab.title}
           </button>
@@ -105,7 +105,7 @@ export default function SupportTabs() {
           {tab.offerings.map((offering: Offering) => (
             <Container
               key={offering.title}
-              className="flex max-md:flex-col gap-32 rounded-xl mb-32 px-40"
+              className="mb-32 flex gap-32 rounded-xl px-40 max-md:flex-col"
               backgroundColor="blue"
             >
               <Box
@@ -118,7 +118,7 @@ export default function SupportTabs() {
                 }}
                 buttons={offering.button ? [offering.button] : []}
               />
-              <div className="flex-none md:w-[310px] space-y-20">
+              <div className="flex-none space-y-20 md:w-[310px]">
                 <Background backgroundColor="white">
                   <div className="p-28">
                     <Header
@@ -132,7 +132,7 @@ export default function SupportTabs() {
                         <div key={detail.title} className="py-16">
                           <div className="flex items-center gap-8 pb-8">
                             {detail.icon && (
-                              <detail.icon className="w-24 h-24 fill-gray-800" />
+                              <detail.icon className="size-24 fill-gray-800" />
                             )}
                             <Heading
                               tagName="p"
diff --git a/packages/dito/app/routes/unterstuetzung/route.tsx b/packages/dito/app/routes/unterstuetzung/route.tsx
index c70eddff..cde77411 100644
--- a/packages/dito/app/routes/unterstuetzung/route.tsx
+++ b/packages/dito/app/routes/unterstuetzung/route.tsx
@@ -29,14 +29,14 @@ export const meta: MetaFunction = ({ matches }) => {
 function Testimonial() {
   return (
     <>
-      <p className="text-6xl -mb-20 text-blue-600">&ldquo;</p>
+      <p className="-mb-20 text-6xl text-blue-600">&ldquo;</p>
       <RichText
         markdown={socialProof.testimonials[0].quote}
         className="text-base"
       />
       <RichText
         markdown={socialProof.testimonials[0].position}
-        className="text-base font-bold mt-8"
+        className="mt-8 text-base font-bold"
       />
       <RichText
         markdown={socialProof.testimonials[0].ministry}
@@ -78,20 +78,20 @@ export default function Index() {
         </Container>
       </Background>
       <Background backgroundColor="midBlue">
-        <Container className="pt-0 pb-0 flex flex-col lg:flex-row lg:h-[420px]">
+        <Container className="flex flex-col py-0 lg:h-[420px] lg:flex-row">
           <div className="py-32 sm:py-48 lg:w-1/2 lg:self-center">
             <RichText
               markdown={socialProof.text}
-              className="text-2xl sm:text-3xl leading-10 w-[370px] sm:max-lg:w-[480px]"
+              className="w-[370px] text-2xl leading-10 sm:text-3xl sm:max-lg:w-[480px]"
             />
           </div>
-          <div className="max-sm:hidden relative max-lg:mb-48 lg:w-1/2">
+          <div className="relative max-lg:mb-48 max-sm:hidden lg:w-1/2">
             <div
-              className={`w-[630px] lg:w-[50vw] [&>img]:lg:w-full [&>img]:lg:h-[420px] [&>img]:lg:object-[10%_75%] [&>img]:lg:object-none`}
+              className={`w-[630px] lg:w-[50vw] [&>img]:lg:h-[420px] [&>img]:lg:w-full [&>img]:lg:object-none [&>img]:lg:object-[10%_75%]`}
             >
               <SocialProofImage />
             </div>
-            <div className="absolute left-40 bottom-40 max-w-[400px] p-16 bg-white/70 backdrop-blur rounded-lg max-lg:hidden">
+            <div className="absolute bottom-40 left-40 max-w-[400px] rounded-lg bg-white/70 p-16 backdrop-blur max-lg:hidden">
               <Testimonial />
             </div>
           </div>
@@ -113,14 +113,14 @@ export default function Index() {
             markdown: supportWhat.subtitle,
           }}
         />
-        <div className="flex max-sm:flex-col mt-40 gap-32">
+        <div className="mt-40 flex gap-32 max-sm:flex-col">
           {supportWhat.supportTypes.length > 0 &&
             supportWhat.supportTypes.map((supportType) => (
               <div
                 key={supportType.title}
-                className="flex max-lg:flex-col gap-16"
+                className="flex gap-16 max-lg:flex-col"
               >
-                <supportType.icon className="w-48 h-48 flex-none fill-blue-800" />
+                <supportType.icon className="size-48 flex-none fill-blue-800" />
                 <Box
                   heading={{
                     tagName: "h3",
@@ -139,7 +139,7 @@ export default function Index() {
           <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">
+              <div key={supportType.title} className="ds-stack-16 pb-40 pt-32">
                 <Box
                   heading={{
                     tagName: "h3",
@@ -159,7 +159,7 @@ export default function Index() {
                       src={supportType.iframe}
                       title={supportType.title}
                       aria-label={supportType.title}
-                      className={`w-full mt-32 transition-all duration-700 ${isAppointmentsVisible ? "h-[600px]" : "hidden h-0"}`}
+                      className={`mt-32 w-full transition-all duration-700 ${isAppointmentsVisible ? "h-[600px]" : "hidden h-0"}`}
                     ></iframe>
                   </>
                 ) : (
diff --git a/packages/dito/app/routes/vorpruefung.$questionId/PreCheckNavigation.tsx b/packages/dito/app/routes/vorpruefung.$questionId/PreCheckNavigation.tsx
index 28609e4c..3ba525f4 100644
--- a/packages/dito/app/routes/vorpruefung.$questionId/PreCheckNavigation.tsx
+++ b/packages/dito/app/routes/vorpruefung.$questionId/PreCheckNavigation.tsx
@@ -21,7 +21,7 @@ export default function PreCheckNavigation({
   const questions = preCheck.questions;
 
   return (
-    <nav aria-label="Alle Fragen" className="precheck-navigation">
+    <nav aria-label="Alle Fragen">
       <ul className="list-unstyled">
         {questions.map((q: TQuestion, idx) => {
           const isDone = !!answers && q.id in answers;
@@ -83,7 +83,7 @@ function NavItem({
         {isDone && <Check id={iconId} className="shrink-0" />}
         <span
           title={label}
-          className="after:content-[attr(title)] after:ds-label-02-bold after:block after:h-0 after:invisible" // Prevent shifting on navigation
+          className="after:ds-label-02-bold after:invisible after:block after:h-0 after:content-[attr(title)]" // Prevent shifting on navigation
         >
           {label}
         </span>
diff --git a/packages/dito/app/routes/vorpruefung.$questionId/route.tsx b/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
index 2ea01588..3a3014f5 100644
--- a/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
+++ b/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
@@ -154,8 +154,8 @@ export default function Index() {
   );
 
   return (
-    <div className="flex bg-blue-100 sm:pt-32 parent-bg-blue">
-      <div className="hidden lg:block flex-none pl-32">
+    <div className="parent-bg-blue flex bg-blue-100 sm:pt-32">
+      <div className="hidden flex-none pl-32 lg:block">
         <PreCheckNavigation question={question} answers={answers ?? {}} />
       </div>
       <section>
@@ -189,7 +189,7 @@ export default function Index() {
             }}
             ariaLabel={`Frage ${questionIdx + 1} von ${questions.length}`}
           />
-          <Container className="pt-0 pb-40">
+          <Container className="pb-40 pt-0">
             <ButtonContainer
               buttons={[
                 {
diff --git a/packages/dito/app/routes/vorpruefung._index.tsx b/packages/dito/app/routes/vorpruefung._index.tsx
index 97008e97..d1f7ec5a 100644
--- a/packages/dito/app/routes/vorpruefung._index.tsx
+++ b/packages/dito/app/routes/vorpruefung._index.tsx
@@ -78,8 +78,8 @@ export default function Index() {
       </Container>
       <Container className="pt-0">
         <Background backgroundColor="blue">
-          <div className="px-64 py-40 flex gap-64 items-center max-sm:flex-col-reverse max-sm:px-16 max-sm:gap-48">
-            <div className="md:pl-32 ds-stack-8 gap-20 md:w-1/3">
+          <div className="flex items-center gap-64 px-64 py-40 max-sm:flex-col-reverse max-sm:gap-48 max-sm:px-16">
+            <div className="ds-stack-8 gap-20 md:w-1/3 md:pl-32">
               <Image
                 url={preCheck.start.info.image.src}
                 alternativeText={preCheck.start.info.image.alt}
diff --git a/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx b/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx
index 7e30321e..f95cd44d 100644
--- a/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx
+++ b/packages/dito/app/routes/vorpruefung.ergebnis/ResultPage.tsx
@@ -89,10 +89,10 @@ export default function ResultPage({
     result.digital === ResultType.UNSURE ? preCheck.result.unsure.hint : "";
   return (
     <>
-      <Background backgroundColor="blue" className="pt-40 pb-40 print:pb-0">
+      <Background backgroundColor="blue" className="py-40 print:pb-0">
         <div className="px-16">
           <Container
-            className="pt-32 pb-32 rounded-t-lg"
+            className="rounded-t-lg py-32"
             backgroundColor={
               result.digital === ResultType.UNSURE ? "lightYellow" : "midBlue"
             }
@@ -107,8 +107,8 @@ export default function ResultPage({
                 }}
               />
             )}
-            <div className="flex sm:flex-row flex-col gap-16">
-              <div className="flex-none w-36 h-36 flex items-center justify-center">
+            <div className="flex flex-col gap-16 sm:flex-row">
+              <div className="flex size-36 flex-none items-center justify-center">
                 {getHeaderIcon()}
               </div>
               <Header
@@ -123,7 +123,7 @@ export default function ResultPage({
             </div>
           </Container>
           <Container className="rounded-b-lg" backgroundColor="white">
-            <div className="pb-40 border-solid border-b-2 border-gray-400 last:border-0 last:pb-0 print:border-0 print:pb-0">
+            <div className="border-b-2 border-solid border-gray-400 pb-40 last:border-0 last:pb-0 print:border-0 print:pb-0">
               {resultContent.reasoningList
                 .filter(({ reasons }) => reasons.length > 0)
                 .map(({ intro, reasons }) => (
diff --git a/packages/dito/app/routes/vorpruefung.hinweise.tsx b/packages/dito/app/routes/vorpruefung.hinweise.tsx
index fe67af89..d92b3b85 100644
--- a/packages/dito/app/routes/vorpruefung.hinweise.tsx
+++ b/packages/dito/app/routes/vorpruefung.hinweise.tsx
@@ -26,8 +26,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
 export default function GeneralInfo() {
   const { answers } = useLoaderData<typeof loader>();
   return (
-    <div className="flex bg-blue-100 sm:pt-32 parent-bg-blue">
-      <div className="hidden lg:block flex-none pl-32">
+    <div className="parent-bg-blue flex bg-blue-100 sm:pt-32">
+      <div className="hidden flex-none pl-32 lg:block">
         <PreCheckNavigation answers={answers ?? {}} />
       </div>
       <section>
diff --git a/packages/shared/components/BetaBanner.tsx b/packages/shared/components/BetaBanner.tsx
index 355c076d..4d2d7d4f 100644
--- a/packages/shared/components/BetaBanner.tsx
+++ b/packages/shared/components/BetaBanner.tsx
@@ -4,8 +4,8 @@ import RichText from "./RichText";
 
 const BetaBanner = () => {
   return (
-    <Background backgroundColor="yellow" className="pt-16 pb-16">
-      <Container className="pt-0 pb-0">
+    <Background backgroundColor="yellow" className="py-16">
+      <Container className="py-0">
         <RichText
           markdown={`Der Werkzeugfinder wird aktuell nicht weiterentwickelt. Dargestellte Informationen sind möglicherweise überholt.`}
         />
diff --git a/packages/shared/components/Breadcrumbs.tsx b/packages/shared/components/Breadcrumbs.tsx
index 0871e5fa..44d75cc7 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 px-16 bg-blue-100 flex flex-wrap items-center text-base print:hidden"
+      className="flex flex-wrap items-center bg-blue-100 px-16 py-8 text-base print:hidden"
       data-testid="breadcrumbs-menu"
       aria-label="breadcrumb navigation"
     >
@@ -72,7 +72,7 @@ export default function Breadcrumbs({
                   to={breadcrumb.url}
                   className={
                     idx === 0
-                      ? "ds-link-01-bold outline-blue-800 fill-blue-800"
+                      ? "ds-link-01-bold fill-blue-800 outline-blue-800"
                       : "text-link increase-tap-area"
                   }
                 >
diff --git a/packages/shared/components/DetailsSummary.tsx b/packages/shared/components/DetailsSummary.tsx
index 19f6cb0d..f7c18f61 100644
--- a/packages/shared/components/DetailsSummary.tsx
+++ b/packages/shared/components/DetailsSummary.tsx
@@ -23,10 +23,10 @@ export default function DetailsSummary({
   return (
     <details
       open={open}
-      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"
+      className="details text-blue-800 has-[:focus-visible]:outline has-[:focus-visible]:outline-4 has-[:focus-visible]:outline-offset-4 has-[:focus-visible]:outline-blue-800"
     >
       <summary className={summaryClasses}>{title}</summary>
-      <span className="block pt-4 pl-[24px] text-black">
+      <span className="block pl-[24px] pt-4 text-black">
         {typeof content === "string" ? (
           <RichText markdown={content} />
         ) : (
diff --git a/packages/shared/components/FeedbackBanner.tsx b/packages/shared/components/FeedbackBanner.tsx
index 23f4cc0c..0583e81a 100644
--- a/packages/shared/components/FeedbackBanner.tsx
+++ b/packages/shared/components/FeedbackBanner.tsx
@@ -9,8 +9,8 @@ export default function FeedbackBanner() {
     "Ich stehe gerne für ein Gespräch zur Verfügung, um Feedback zu geben.";
 
   return (
-    <Background backgroundColor="midBlue" className="pt-32 pb-40">
-      <Container className="pt-0 pb-0">
+    <Background backgroundColor="midBlue" className="pb-40 pt-32">
+      <Container className="py-0">
         <Box
           heading={{
             tagName: "h2",
@@ -22,7 +22,7 @@ export default function FeedbackBanner() {
           }}
         ></Box>
       </Container>
-      <Container className="pt-24 pb-0">
+      <Container className="pb-0 pt-24">
         <Box
           heading={{
             tagName: "h2",
diff --git a/packages/shared/components/FeedbackForm.tsx b/packages/shared/components/FeedbackForm.tsx
index e038a64d..65132635 100644
--- a/packages/shared/components/FeedbackForm.tsx
+++ b/packages/shared/components/FeedbackForm.tsx
@@ -14,9 +14,9 @@ function RadioAnswer({
   annotation?: string;
 }>) {
   return (
-    <div className="flex flex-col w-1/5 gap-16">
+    <div className="flex w-1/5 flex-col gap-16">
       {annotation && (
-        <p className="hidden sm:inline text-center">{annotation}</p>
+        <p className="hidden text-center sm:inline">{annotation}</p>
       )}
       <label className="flex flex-col items-center gap-8">
         <span className="ml-2">{value}</span>
@@ -47,13 +47,13 @@ function FeedbackQuestion({
   hasAnnotations?: boolean;
 }>) {
   return (
-    <fieldset className="flex flex-col sm:flex-row items-stretch sm:items-end w-full gap-16 sm:gap-32">
+    <fieldset className="flex w-full flex-col items-stretch gap-16 sm:flex-row sm:items-end sm:gap-32">
       <div className="w-full sm:w-1/5">
         <legend className="font-semibold">{question}</legend>
       </div>
       <div
         role="radiogroup"
-        className="flex-1 flex justify-between items-end mb-8"
+        className="mb-8 flex flex-1 items-end justify-between"
       >
         {[1, 2, 3, 4, 5].map((value) => {
           let annotation: string | undefined = undefined;
@@ -99,8 +99,8 @@ export default function FeedbackForm({
   }
 
   return (
-    <Background backgroundColor="yellow" className="pt-32 pb-40">
-      <Container className="pt-0 pb-0 ds-stack-32">
+    <Background backgroundColor="yellow" className="pb-40 pt-32">
+      <Container className="ds-stack-32 py-0">
         <Box
           heading={{
             tagName: "h3",
@@ -108,7 +108,7 @@ export default function FeedbackForm({
             text: "Ihr Feedback hilft uns weiter!",
           }}
         ></Box>
-        <div className="sm:hidden w-full flex flex-col">
+        <div className="flex w-full flex-col sm:hidden">
           <p className="">1 = {disagreeAnnotation}</p>
           <p className="">5 = {agreeAnnotation}</p>
         </div>
diff --git a/packages/shared/components/Footer.tsx b/packages/shared/components/Footer.tsx
index 254a21d5..7a9e14d2 100644
--- a/packages/shared/components/Footer.tsx
+++ b/packages/shared/components/Footer.tsx
@@ -38,7 +38,7 @@ export default function Footer({ links }: Readonly<FooterProps>) {
           <OpenInNewIcon
             height="1.2em"
             width="1.2em"
-            className="!inline ml-[0.2em] mb-1"
+            className="mb-1 ml-[0.2em] !inline"
           />
         )}
       </Link>
@@ -53,12 +53,12 @@ export default function Footer({ links }: Readonly<FooterProps>) {
 
   return (
     <footer
-      className="text-base leading-snug w-full print:hidden"
+      className="w-full text-base leading-snug print:hidden"
       aria-label="Seitenfußbereich"
     >
       <Container className="sm:px-16">
         <div className="flex flex-wrap items-start justify-between gap-y-32">
-          <div className="flex flex-col flex-col-reverse sm:flex-row gap-y-16 gap-x-16">
+          <div className="flex flex-col-reverse gap-16 sm:flex-row">
             <Image
               url={bmiLogo}
               width={120}
diff --git a/packages/shared/components/InfoBoxItem.tsx b/packages/shared/components/InfoBoxItem.tsx
index c3561c57..1c4a0229 100644
--- a/packages/shared/components/InfoBoxItem.tsx
+++ b/packages/shared/components/InfoBoxItem.tsx
@@ -47,7 +47,7 @@ const InfoBoxItem = ({
         />
       )}
       <div
-        className={`ds-stack-16 break-words w-full ${
+        className={`ds-stack-16 w-full break-words ${
           image ? "min-[500px]:ml-16" : ""
         }`}
       >
diff --git a/packages/shared/components/InlineNotice.tsx b/packages/shared/components/InlineNotice.tsx
index 42d24b57..2375e3ce 100644
--- a/packages/shared/components/InlineNotice.tsx
+++ b/packages/shared/components/InlineNotice.tsx
@@ -57,17 +57,17 @@ const InlineNotice = ({
 
   return (
     <div
-      className={`max-w-prose ds-stack-8 scroll-my-40 p-16 ${backgroundColor} border ${borderColor} border-2 border-l-8`}
+      className={`ds-stack-8 max-w-prose scroll-my-40 p-16 ${backgroundColor} border ${borderColor} border-2 border-l-8`}
       id={identifier}
     >
-      <div className="flex flex-row gap-[4px] items-center">
-        {showIcon && <IconComponent className="flex-none mr-4" />}
+      <div className="flex flex-row items-center gap-[4px]">
+        {showIcon && <IconComponent className="mr-4 flex-none" />}
         <Heading tagName={tagName} look="ds-label-01-bold">
           {title}
         </Heading>
       </div>
       {content && (
-        <div className="tracking-[0.16px] leading-[26px]">
+        <div className="leading-[26px] tracking-[0.16px]">
           {content && <RichText markdown={content} />}
         </div>
       )}
diff --git a/packages/shared/components/Input.tsx b/packages/shared/components/Input.tsx
index 5d5e5a58..1cf8289b 100644
--- a/packages/shared/components/Input.tsx
+++ b/packages/shared/components/Input.tsx
@@ -73,7 +73,7 @@ export default function Input({
           </div>
         )}
       </div>
-      <div className="label-text mt-6" id={helperId}>
+      <div className="mt-6" id={helperId}>
         {helperText}
       </div>
       {error && <InputError id={errorId}>{error}</InputError>}
diff --git a/packages/shared/components/InputError.tsx b/packages/shared/components/InputError.tsx
index 779e6014..a68dab2f 100644
--- a/packages/shared/components/InputError.tsx
+++ b/packages/shared/components/InputError.tsx
@@ -11,10 +11,10 @@ const InputError = ({ id, children }: InputErrorProps) => {
       aria-live="assertive"
       id={id}
       data-testid={id}
-      className="mt-16 text-red-800 flex items-center gap-x-4"
+      className="mt-16 flex items-center gap-x-4 text-red-800"
     >
-      <div className="flex-shrink-0">
-        <ErrorOutline className="!w-18 !h-18 fill-red-800" />
+      <div className="shrink-0">
+        <ErrorOutline className="fill-red-800" />
       </div>
       <span className="sr-only">Fehler:</span> {children}
     </div>
diff --git a/packages/shared/components/InputWarning.tsx b/packages/shared/components/InputWarning.tsx
index 96db4b23..4468d3a6 100644
--- a/packages/shared/components/InputWarning.tsx
+++ b/packages/shared/components/InputWarning.tsx
@@ -13,8 +13,8 @@ const InputWarning = ({ id, children }: InputWarningProps) => {
       data-testid="inputWarning"
       className="mt-16 flex items-center gap-x-4"
     >
-      <div className="flex-shrink-0">
-        <WarningOutlined className="!w-18 !h-18 fill-yellow-800" />
+      <div className="shrink-0">
+        <WarningOutlined className="fill-yellow-800" />
       </div>
       <span className="sr-only">Warnung:</span> {children}
     </div>
diff --git a/packages/shared/components/LabelWithIcon.tsx b/packages/shared/components/LabelWithIcon.tsx
index 0ef885b4..fc1ae5c3 100644
--- a/packages/shared/components/LabelWithIcon.tsx
+++ b/packages/shared/components/LabelWithIcon.tsx
@@ -24,7 +24,7 @@ function LabelWithIcon(
 
   return (
     <div className={`flex items-center ${wrapperClassNames}`}>
-      <content.icon className={`h-12 w-12 mb-2 ${iconClassNames}`} />
+      <content.icon className={`mb-2 size-12 ${iconClassNames}`} />
       <span className={`${labelClassNames}`}>{content.label}</span>
     </div>
   );
diff --git a/packages/shared/components/List.tsx b/packages/shared/components/List.tsx
index ae544eb3..ad47a4a3 100644
--- a/packages/shared/components/List.tsx
+++ b/packages/shared/components/List.tsx
@@ -10,7 +10,7 @@ type BaseListProps = {
 
 const NumberedList = ({ identifier, items, heading }: BaseListProps) => {
   return (
-    <div className="scroll-my-40 relative ds-stack-8" id={identifier}>
+    <div className="ds-stack-8 relative scroll-my-40" id={identifier}>
       {heading && <Heading className="max-sm:ds-heading-02-reg" {...heading} />}
       <ol
         className="list-unstyled ds-stack-32 relative"
@@ -31,7 +31,7 @@ const NumberedList = ({ identifier, items, heading }: BaseListProps) => {
                 ? item.content
                 : index.toString())
             }
-            className="first:pt-0 scroll-my-40"
+            className="scroll-my-40 first:pt-0"
             aria-describedby={
               item.identifier ? `${item.identifier}-desc` : undefined
             }
@@ -52,13 +52,13 @@ const NumberedList = ({ identifier, items, heading }: BaseListProps) => {
 
 const BulletList = ({ identifier, items, heading }: BaseListProps) => {
   return (
-    <div className="scroll-my-40 relative ds-stack-8" id={identifier}>
+    <div className="ds-stack-8 relative scroll-my-40" id={identifier}>
       {heading && <Heading className="max-sm:ds-heading-02-reg" {...heading} />}
-      <div className="absolute left-[8px] top-32 bottom-0 bg-blue-300 w-[4px]">
-        <div className="text-blue-300 bg-white w-[20px] -left-[8px] absolute text-center text-xl leading-none rotate-180">
+      <div className="absolute bottom-0 left-[8px] top-32 w-[4px] bg-blue-300">
+        <div className="absolute -left-8 w-20 rotate-180 bg-white text-center text-xl leading-none text-blue-300">
           ▲
         </div>
-        <div className="text-blue-300 bg-white w-[20px] -left-[8px] bottom-0 absolute text-center text-xl leading-none">
+        <div className="absolute -left-8 bottom-0 w-20 bg-white text-center text-xl leading-none text-blue-300">
           ▲
         </div>
       </div>
@@ -81,7 +81,7 @@ const BulletList = ({ identifier, items, heading }: BaseListProps) => {
                 ? item.content
                 : index.toString())
             }
-            className="first:pt-0 scroll-my-40"
+            className="scroll-my-40 first:pt-0"
             aria-describedby={
               item.identifier ? `${item.identifier}-desc` : undefined
             }
diff --git a/packages/shared/components/ListItem.tsx b/packages/shared/components/ListItem.tsx
index a244665b..e5e97502 100644
--- a/packages/shared/components/ListItem.tsx
+++ b/packages/shared/components/ListItem.tsx
@@ -51,18 +51,15 @@ const ListItem = ({
         />
       )}
       <div
-        className={`break-words ds-stack-16 w-full ${image ? "min-[500px]:ml-16" : ""}`}
+        className={`ds-stack-16 w-full break-words ${image ? "min-[500px]:ml-16" : ""}`}
       >
         {spacer && (
           <div className={`!-mb-12 ${numeric && "border-t-2 pb-16"}`}>
             {spacer !== true && (
               <div
-                className={`flex flex-row gap-16 items-start ${numeric && "mt-32"}`}
+                className={`flex flex-row items-start gap-16 ${numeric && "mt-32"}`}
               >
-                <span
-                  className={`display-block shrink-0 ${responsiveWidth}`}
-                  role="none"
-                />
+                <span className={`shrink-0 ${responsiveWidth}`} role="none" />
                 <Heading
                   tagName="div"
                   className="ds-label-section text-gray-900"
@@ -72,16 +69,16 @@ const ListItem = ({
             )}
           </div>
         )}
-        <div className={`flex flex-row gap-16 items-start ${textColor}`}>
+        <div className={`flex flex-row items-start gap-16 ${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">
+              <div className="flex size-[40px] items-center justify-center rounded-full border-2 border-solid border-gray-400">
                 {numeric}
               </div>
             )}
             {backgroundColor && (
               <div
-                className="w-[20px] h-[20px] flex justify-center items-center bg-blue-900 rounded-full"
+                className="flex size-[20px] items-center justify-center rounded-full bg-blue-900"
                 role="none"
               ></div>
             )}
@@ -100,9 +97,9 @@ const ListItem = ({
               backgroundColor={(backgroundColor as BackgroundColor) || "white"}
             >
               <div
-                className={`flex flex-col gap-16 ${backgroundColor ? "py-64 px-96 max-sm:px-16 max-sm:py-32" : "mt-4"}`}
+                className={`flex flex-col gap-16 ${backgroundColor ? "px-96 py-64 max-sm:px-16 max-sm:py-32" : "mt-4"}`}
               >
-                <div className="flex flex-row gap-16 items-center">
+                <div className="flex flex-row items-center gap-16">
                   {label && <Heading {...label} />}
                   {headline && (
                     <Heading
diff --git a/packages/shared/components/RadioGroup.tsx b/packages/shared/components/RadioGroup.tsx
index 639ea743..27003f2f 100644
--- a/packages/shared/components/RadioGroup.tsx
+++ b/packages/shared/components/RadioGroup.tsx
@@ -32,7 +32,7 @@ const RadioGroup = ({
       aria-errormessage={errorId}
       aria-invalid={hasError}
     >
-      <ul className="ds-stack-16 border-0 p-0 m-0">
+      <ul className="ds-stack-16 m-0 border-0 p-0">
         {options.map(({ value, text, subText }) => {
           const id = `${name}-${value}`;
           const checked = selectedValue === value;
@@ -51,7 +51,7 @@ const RadioGroup = ({
               />
               <label htmlFor={id}>
                 {text}
-                <div className="text-gray-800 ds-body-02-reg">{subText}</div>
+                <div className="ds-body-02-reg text-gray-800">{subText}</div>
               </label>
             </li>
           );
diff --git a/packages/shared/components/openInNewWindow.tsx b/packages/shared/components/openInNewWindow.tsx
index 8122be99..0343bc18 100644
--- a/packages/shared/components/openInNewWindow.tsx
+++ b/packages/shared/components/openInNewWindow.tsx
@@ -5,6 +5,6 @@ export const openInNewIconString = ReactDOMServer.renderToString(
   <OpenInNewIcon
     height="1.2em"
     width="1.2em"
-    className="!inline ml-[0.2rem] mb-1"
+    className="mb-1 ml-[0.2rem] !inline"
   />,
 );
diff --git a/packages/tool-finder/src/App.tsx b/packages/tool-finder/src/App.tsx
index 2e98f0ca..f97a0724 100644
--- a/packages/tool-finder/src/App.tsx
+++ b/packages/tool-finder/src/App.tsx
@@ -138,12 +138,12 @@ function App() {
   ];
 
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="flex min-h-screen flex-col">
       <ScrollToTop />
       <PageHeader />
       <Breadcrumbs breadcrumbs={routes} />
-      <main className="flex-grow flex flex-col">
-        <div className="flex-grow">
+      <main className="flex grow flex-col">
+        <div className="grow">
           <Routes>
             {routes.map((route) => {
               return (
diff --git a/packages/tool-finder/src/MaintenanceModeApp.tsx b/packages/tool-finder/src/MaintenanceModeApp.tsx
index 20d6c9c6..c24a9754 100644
--- a/packages/tool-finder/src/MaintenanceModeApp.tsx
+++ b/packages/tool-finder/src/MaintenanceModeApp.tsx
@@ -7,8 +7,8 @@ import MaintenanceModePage from "routes/MaintenanceModePage";
 
 function MaintenanceModeApp() {
   return (
-    <div className="flex flex-col min-h-screen">
-      <main className="flex-grow flex flex-col">
+    <div className="flex min-h-screen flex-col">
+      <main className="flex grow flex-col">
         <PageHeader />
         <Routes>
           <Route path={PATH_INFO} element={<MaintenanceModePage />} />
@@ -16,7 +16,7 @@ function MaintenanceModeApp() {
         </Routes>
       </main>
       <footer>
-        <Container className="pt-48 pb-48">
+        <Container className="py-48">
           <Link to={PATH_IMPRINT} className="text-link increase-tap-area">
             Impressum
           </Link>
diff --git a/packages/tool-finder/src/components/PageHeader.tsx b/packages/tool-finder/src/components/PageHeader.tsx
index 35841fa1..a2b7fa7a 100644
--- a/packages/tool-finder/src/components/PageHeader.tsx
+++ b/packages/tool-finder/src/components/PageHeader.tsx
@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 
 export default function Header() {
   return (
-    <header className="py-20 px-16">
+    <header className="px-16 py-20">
       <Link
         to="/"
         className="ds-label-01-bold no-underline hover:underline focus:outline active:underline"
diff --git a/packages/tool-finder/src/components/Recommendation.tsx b/packages/tool-finder/src/components/Recommendation.tsx
index 5cde4b1f..5d2dd0ec 100644
--- a/packages/tool-finder/src/components/Recommendation.tsx
+++ b/packages/tool-finder/src/components/Recommendation.tsx
@@ -20,7 +20,7 @@ export default function renderRecommendation({
   return (
     <div
       key={`tool-${tool.id}`}
-      className="p-12 md:p-24 border border-gray-400 border-b-0 last:border-b last:rounded-bl last:rounded-br first:rounded-tl first:rounded-tr"
+      className="border border-b-0 border-gray-400 p-12 first:rounded-t last:rounded-b last:border-b md:p-24"
     >
       <div className="ds-stack-8">
         <Heading
@@ -29,7 +29,7 @@ export default function renderRecommendation({
           text={fidelity.name}
         />
         <Heading tagName="h3" look="ds-heading-03-bold" text={tool.name} />
-        <div className="flex flex-col sm:flex-row gap-16 sm:gap-24">
+        <div className="flex flex-col gap-16 sm:flex-row sm:gap-24">
           <RichText
             markdown={`${tool.description}
               ${tool.link ? `\n\n${tool.link}` : ""}
@@ -45,7 +45,7 @@ export default function renderRecommendation({
                 />
               )}
               {recommendation.alternativeTools.length > 0 && (
-                <div className="p-8 bg-gray-100 ds-stack-8 rounded">
+                <div className="ds-stack-8 rounded bg-gray-100 p-8">
                   <h4 className="ds-label-01-bold">Alternativen</h4>
                   <p>
                     Wenn Sie {tool.name} nicht nutzen können oder möchten,
diff --git a/packages/tool-finder/src/routes/Accessibility.tsx b/packages/tool-finder/src/routes/Accessibility.tsx
index bae65f00..68c933b0 100644
--- a/packages/tool-finder/src/routes/Accessibility.tsx
+++ b/packages/tool-finder/src/routes/Accessibility.tsx
@@ -9,8 +9,8 @@ function Accessibility() {
 
   return (
     <>
-      <Background backgroundColor="blue" className="pt-48 pb-48">
-        <Container className="pt-0 pb-0">
+      <Background backgroundColor="blue" className="py-48">
+        <Container className="py-0">
           <Header
             heading={{
               tagName: "h1",
@@ -22,7 +22,7 @@ function Accessibility() {
           ></Header>
         </Container>
       </Background>
-      <Container className="pt-48 pb-48">
+      <Container className="py-48">
         <Box
           content={{
             markdown: `
diff --git a/packages/tool-finder/src/routes/DecisionTree.tsx b/packages/tool-finder/src/routes/DecisionTree.tsx
index 3c483bb1..7fb58dc0 100644
--- a/packages/tool-finder/src/routes/DecisionTree.tsx
+++ b/packages/tool-finder/src/routes/DecisionTree.tsx
@@ -11,8 +11,8 @@ function DecisionTree() {
 
   return (
     <>
-      <Background backgroundColor="blue" className="pt-48 pb-48">
-        <Container className="pt-0 pb-0">
+      <Background backgroundColor="blue" className="py-48">
+        <Container className="py-0">
           <Header
             heading={{
               tagName: "h1",
@@ -21,7 +21,7 @@ function DecisionTree() {
           ></Header>
         </Container>
       </Background>
-      <Container className="pt-48 pb-48">
+      <Container className="py-48">
         <Box
           heading={{
             tagName: "h2",
diff --git a/packages/tool-finder/src/routes/Diagram.tsx b/packages/tool-finder/src/routes/Diagram.tsx
index 863fd59f..c393ba70 100644
--- a/packages/tool-finder/src/routes/Diagram.tsx
+++ b/packages/tool-finder/src/routes/Diagram.tsx
@@ -11,8 +11,8 @@ function Diagram() {
 
   return (
     <>
-      <Background backgroundColor="blue" className="pt-48 pb-48">
-        <Container className="pt-0 pb-0">
+      <Background backgroundColor="blue" className="py-48">
+        <Container className="py-0">
           <Header
             heading={{
               tagName: "h1",
@@ -21,7 +21,7 @@ function Diagram() {
           ></Header>
         </Container>
       </Background>
-      <Container className="pt-48 pb-48">
+      <Container className="py-48">
         <Box
           heading={{
             tagName: "h2",
diff --git a/packages/tool-finder/src/routes/Flowchart.tsx b/packages/tool-finder/src/routes/Flowchart.tsx
index 55fe7564..c59088ef 100644
--- a/packages/tool-finder/src/routes/Flowchart.tsx
+++ b/packages/tool-finder/src/routes/Flowchart.tsx
@@ -14,8 +14,8 @@ function Flowchart() {
 
   return (
     <>
-      <Background backgroundColor="blue" className="pt-48 pb-48">
-        <Container className="pt-0 pb-0">
+      <Background backgroundColor="blue" className="py-48">
+        <Container className="py-0">
           <Header
             heading={{
               tagName: "h1",
@@ -24,7 +24,7 @@ function Flowchart() {
           ></Header>
         </Container>
       </Background>
-      <Container className="pt-48 pb-24">
+      <Container className="pb-24 pt-48">
         <Box
           heading={{
             tagName: "h2",
@@ -54,7 +54,7 @@ Der Start mag Ihnen leichter fallen, wenn Sie als Basis eine zeitliche Abfolge w
           alternativeText="Beispielhafte Darstellung von Elementen eines Flussdiagramms"
         />
       </Container>
-      <Container className="pt-0 pb-24">
+      <Container className="pb-24 pt-0">
         <Box
           heading={{
             tagName: "h2",
@@ -69,7 +69,7 @@ Der Start mag Ihnen leichter fallen, wenn Sie als Basis eine zeitliche Abfolge w
           }}
         ></Box>
       </Container>
-      <Container className="pt-0 pb-24">
+      <Container className="pb-24 pt-0">
         <Box
           heading={{
             tagName: "h2",
@@ -83,7 +83,7 @@ Der Start mag Ihnen leichter fallen, wenn Sie als Basis eine zeitliche Abfolge w
           }}
         ></Box>
       </Container>
-      <Container className="pt-0 pb-48">
+      <Container className="pb-48 pt-0">
         <Box
           heading={{
             tagName: "h2",
@@ -100,7 +100,7 @@ Der Start mag Ihnen leichter fallen, wenn Sie als Basis eine zeitliche Abfolge w
           }}
         ></Box>
       </Container>
-      <Container className="pt-0 pb-48">
+      <Container className="pb-48 pt-0">
         <Button
           id="flowchart-guide-page-back-button"
           text="Zurück"
diff --git a/packages/tool-finder/src/routes/Imprint.tsx b/packages/tool-finder/src/routes/Imprint.tsx
index d739f67e..9d294ec2 100644
--- a/packages/tool-finder/src/routes/Imprint.tsx
+++ b/packages/tool-finder/src/routes/Imprint.tsx
@@ -10,8 +10,8 @@ function Imprint() {
 
   return (
     <>
-      <Background backgroundColor="blue" className="pt-48 pb-48">
-        <Container className="pt-0 pb-0">
+      <Background backgroundColor="blue" className="py-48">
+        <Container className="py-0">
           <Header
             heading={{
               tagName: "h1",
@@ -20,7 +20,7 @@ function Imprint() {
           ></Header>
         </Container>
       </Background>
-      <Container className="pt-48 pb-48">
+      <Container className="py-48">
         <Box
           content={{
             markdown: `
diff --git a/packages/tool-finder/src/routes/InfoPage.tsx b/packages/tool-finder/src/routes/InfoPage.tsx
index f3c31bef..74edaa57 100644
--- a/packages/tool-finder/src/routes/InfoPage.tsx
+++ b/packages/tool-finder/src/routes/InfoPage.tsx
@@ -11,8 +11,8 @@ function InfoPage() {
 
   return (
     <>
-      <Background backgroundColor="blue" className="pt-48 pb-48">
-        <Container className="pt-0 pb-0">
+      <Background backgroundColor="blue" className="py-48">
+        <Container className="py-0">
           <Header
             heading={{
               tagName: "h1",
@@ -25,7 +25,7 @@ function InfoPage() {
         </Container>
       </Background>
       <BetaBanner />
-      <Container className="pt-48 pb-48">
+      <Container className="py-48">
         <Box
           identifier="info-section-which-tool"
           heading={{
@@ -45,7 +45,7 @@ function InfoPage() {
           ]}
         ></Box>
       </Container>
-      <Container className="pt-0 pb-48">
+      <Container className="pb-48 pt-0">
         <Box
           className="ds-stack-16"
           identifier="info-section-why-visualisation"
@@ -65,7 +65,7 @@ Schleifen, uneinheitliche Rechtsbegriffe und mögliche zu vermeidende Schriftfor
           }}
         ></Box>
       </Container>
-      <Container className="pt-0 pb-0 flex flex-col md:flex-row gap-32 md:gap-32 items-start">
+      <Container className="flex flex-col items-start gap-32 py-0 md:flex-row md:gap-32">
         <Box
           className="pt-20"
           heading={{
@@ -92,7 +92,7 @@ Schleifen, uneinheitliche Rechtsbegriffe und mögliche zu vermeidende Schriftfor
           ></Box>
         </Background>
       </Container>
-      <Container className="pt-16 pb-48">
+      <Container className="pb-48 pt-16">
         <Box
           content={{
             markdown: `Mehr dazu lesen Sie in diesem Blogbeitrag: [Mit Visualisierungen zu einer digitaltauglichen Gesetzgebung](https://digitalservice.bund.de/blog/mit-visualisierungen-zu-einer-digitaltauglichen-gesetzgebung).
diff --git a/packages/tool-finder/src/routes/MaintenanceModePage.tsx b/packages/tool-finder/src/routes/MaintenanceModePage.tsx
index df102be1..fcf5f8fa 100644
--- a/packages/tool-finder/src/routes/MaintenanceModePage.tsx
+++ b/packages/tool-finder/src/routes/MaintenanceModePage.tsx
@@ -9,8 +9,8 @@ function MaintenanceModePage() {
 
   return (
     <>
-      <Background backgroundColor="blue" className="pt-48 pb-48">
-        <Container className="pt-0 pb-0">
+      <Background backgroundColor="blue" className="py-48">
+        <Container className="py-0">
           <Header
             heading={{
               tagName: "h1",
@@ -19,7 +19,7 @@ function MaintenanceModePage() {
           ></Header>
         </Container>
       </Background>
-      <Container className="pt-48 pb-48">
+      <Container className="py-48">
         <Box
           heading={{
             tagName: "h2",
diff --git a/packages/tool-finder/src/routes/Privacy.tsx b/packages/tool-finder/src/routes/Privacy.tsx
index d0dbf4ba..acbd694e 100644
--- a/packages/tool-finder/src/routes/Privacy.tsx
+++ b/packages/tool-finder/src/routes/Privacy.tsx
@@ -9,8 +9,8 @@ function Privacy() {
 
   return (
     <>
-      <Background backgroundColor="blue" className="pt-48 pb-48">
-        <Container className="pt-0 pb-0">
+      <Background backgroundColor="blue" className="py-48">
+        <Container className="py-0">
           <Header
             heading={{
               tagName: "h1",
@@ -19,7 +19,7 @@ function Privacy() {
           ></Header>
         </Container>
       </Background>
-      <Container className="pt-48 pb-48">
+      <Container className="py-48">
         <Box
           content={{
             markdown: `
diff --git a/packages/tool-finder/src/routes/QuizPage.tsx b/packages/tool-finder/src/routes/QuizPage.tsx
index d41ae6b6..f5a2a18f 100644
--- a/packages/tool-finder/src/routes/QuizPage.tsx
+++ b/packages/tool-finder/src/routes/QuizPage.tsx
@@ -105,8 +105,8 @@ function QuizPage({
 
   return (
     <>
-      <Background backgroundColor="blue" className="pt-48 pb-48">
-        <Container className="pt-0 pb-0">
+      <Background backgroundColor="blue" className="py-48">
+        <Container className="py-0">
           <Header
             heading={{
               tagName: "h1",
@@ -119,7 +119,7 @@ function QuizPage({
         </Container>
       </Background>
       <BetaBanner />
-      <div className="pt-80 max-w-2xl m-auto">
+      <div className="m-auto max-w-2xl pt-80">
         <form {...form.getFormProps()}>
           <Question
             box={{
@@ -188,7 +188,7 @@ function QuizPage({
               error: form.error("reason"),
             }}
           />
-          <Container className="pt-0 pb-80">
+          <Container className="pb-80 pt-0">
             <Button
               id="quiz-find-tool"
               text="Werkzeug suchen"
diff --git a/packages/tool-finder/src/routes/ResultPage.tsx b/packages/tool-finder/src/routes/ResultPage.tsx
index 1eddd927..511e1fe3 100644
--- a/packages/tool-finder/src/routes/ResultPage.tsx
+++ b/packages/tool-finder/src/routes/ResultPage.tsx
@@ -38,15 +38,15 @@ function ResultPage({ ressort, object, reason }: ResultPageProps) {
 
   return result ? (
     <>
-      <Container className="pt-48 pb-24 max-sm:px-0">
-        <div className="border-4 sm:border-8 sm:rounded-lg border-[#EBF3FD]">
+      <Container className="pb-24 pt-48 max-sm:px-0">
+        <div className="border-4 border-[#EBF3FD] sm:rounded-lg sm:border-8">
           <Image
             url={getImageUrl(result.cluster.img.src)}
             alternativeText={result.cluster.img.alt}
             data-testid="cluster-img"
           />
-          <div className="p-12 md:p-24 pt-16">
-            <div className="p-12 md:p-24 pb-32">
+          <div className="p-12 pt-16 md:p-24">
+            <div className="p-12 pb-32 md:p-24">
               <p className="ds-label-section text-gray-900">
                 Wir empfehlen Ihnen eine Visualisierung als:
               </p>
@@ -82,9 +82,9 @@ function ResultPage({ ressort, object, reason }: ResultPageProps) {
           </div>
         </div>
       </Container>
-      <Container className="pt-24 pb-48 max-sm:px-0">
+      <Container className="pb-48 pt-24 max-sm:px-0">
         <Box
-          className="p-12 sm:border-2 sm:rounded-md border-blue-100 bg-blue-100"
+          className="border-blue-100 bg-blue-100 p-12 sm:rounded-md sm:border-2"
           heading={{
             tagName: "h3",
             look: "ds-label-01-bold",
@@ -115,7 +115,7 @@ function ResultPage({ ressort, object, reason }: ResultPageProps) {
       />
     </>
   ) : (
-    <Container className="pt-48 pb-48">
+    <Container className="py-48">
       <Box
         identifier="info-section-why-visualisation"
         heading={{