clean code

src/app/components/contacts/contact-detail/contact-detail.component.scss

@@ -8,24 +8,6 @@ section {
   box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
 }
 
-/*------------- ANIMATION -------------*/
-
-.animation-coming-in {
-  animation: coming-in 250ms ease-in-out;
-  opacity: 1;
-}
-
-@keyframes coming-in {
-  0% {
-    opacity: 0;
-    transform: translateX(100vw);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
 .headerline {
   display: flex;
   align-items: center;
@@ -111,25 +93,51 @@ section {
   }
 }
 
-/* Custom transition */
+.contact {
-@keyframes rotate-out {
+  margin-top: 48px;
-  to {
+  .headline {
-    transform: rotate(90deg);
+    font-size: 20px;
+    font-weight: 400;
+  }
+  .info {
+    margin-top: 16px;
+    p {
+      font-size: 16px;
+      font-weight: 700;
+      padding: 24px 0 12px 0;
+    }
+    a {
+      font-size: 16px;
+      font-weight: 400;
+      text-decoration: none;
+      color: var(--light-blue);
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
       }
     }
-@keyframes rotate-in {
-  from {
-    transform: rotate(-90deg);
   }
 }
-::view-transition-old(count),
+
-::view-transition-new(count) {
+/*------------- ANIMATION -------------*/
-  animation-duration: 200ms;
+
-  animation-name: -ua-view-transition-fade-in, rotate-in;
+.animation-coming-in {
+  animation: coming-in 250ms ease-in-out;
+  opacity: 1;
 }
-::view-transition-old(count) {
+
-  animation-name: -ua-view-transition-fade-out, rotate-out;
+@keyframes coming-in {
+  0% {
+    opacity: 0;
+    transform: translateX(100vw);
   }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/*------------- RESPONSIVE -------------*/
 
 @media screen and (max-width: 1300px) {
   .headerline {
@@ -165,32 +173,6 @@ section {
   }
 }
 
-.contact {
-  margin-top: 48px;
-  .headline {
-    font-size: 20px;
-    font-weight: 400;
-  }
-  .info {
-    margin-top: 16px;
-    p {
-      font-size: 16px;
-      font-weight: 700;
-      padding: 24px 0 12px 0;
-    }
-    a {
-      font-size: 16px;
-      font-weight: 400;
-      text-decoration: none;
-      color: var(--light-blue);
-      cursor: pointer;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-
 @media screen and (max-width: 1150px) {
   section {
     display: none;

src/app/components/contacts/contacts.component.scss

@@ -116,6 +116,8 @@ section {
   color: var(--light-blue);
 }
 
+/*------------- RESPONSIVE -------------*/
+
 @media screen and (max-width: 1150px) {
   .left-frame {
     position: fixed;

src/app/shared/components/header/header.component.scss

@@ -56,6 +56,8 @@ section {
   display: none;
 }
 
+/*------------- RESPONSIVE -------------*/
+
 @media screen and (max-width: 910px) {
   .headline {
     display: none;

src/app/shared/components/help/help.component.scss

@@ -1,5 +1,5 @@
 section {
-  width: 100%;
+  padding-right: 64px;
   a {
     text-decoration: none;
     color: var(--gray);
@@ -61,6 +61,14 @@ h3 {
   color: var(--light-blue);
 }
 
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 910px) {
+  section {
+    padding-right: 0;
+  }
+}
+
 @media (max-width: 634px) {
   h1 {
     font-size: 36px;

src/app/shared/components/imprint/imprint.component.scss

@@ -1,5 +1,6 @@
 section {
   word-wrap: break-word;
+  padding-right: 64px;
 }
 
 .header {
@@ -52,3 +53,11 @@ a {
     text-decoration: underline;
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 910px) {
+  section {
+    padding-right: 0;
+  }
+}

src/app/shared/components/privacy-policy/privacy-policy.component.scss

@@ -1,5 +1,6 @@
 section {
   word-wrap: break-word;
+  padding-right: 64px;
 }
 
 .header {
@@ -58,3 +59,11 @@ a {
     text-decoration: underline;
   }
 }
+
+/*------------- RESPONSIVE -------------*/
+
+@media screen and (max-width: 910px) {
+  section {
+    padding-right: 0;
+  }
+}