feat: Redesign the home page

assets/sass/_variables.scss

@@ -20,8 +20,9 @@ body {
   --color-table-border: #5B5B5B;
   --border-radius-s: .4rem;
   --border-radius-m: .8rem;
-  --border-radius-l: 1.2rem;
+  --border-radius-l: 1.6rem;
   --pagefind-ui-border-radius: var(--border-radius-l);
   --pagefind-ui-border: #000;
   --bs-highlight-bg: var(--bg-accent);
+  --box-shadow: 0 .4rem 1rem rgba(0,0,0,.25);
 }

assets/sass/fonts.scss

@@ -58,6 +58,16 @@
   unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
 }
 
+/* sansita-latin-800-normal */
+@font-face {
+  font-family: 'Sansita';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 800;
+  src: url(@fontsource/sansita/files/sansita-latin-800-normal.woff2) format('woff2'), url(@fontsource/sansita/files/sansita-latin-800-normal.woff) format('woff');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
 /* material-symbols-rounded-latin-400-normal */
 @font-face {
   font-family: 'Material Symbols Rounded';

assets/sass/form.scss

@@ -14,7 +14,7 @@
   input[type=text], input[type=email], select, textarea {
     width: 100%;
     margin-bottom: 1.6rem;
-    border-radius: var(--border-radius-m);
+    border-radius: var(--border-radius-l);
     border-width: .2rem;
     border-color: var(--color-onLight);
     padding: 1.2rem;
@@ -29,7 +29,7 @@
     background-color: var(--bg-accent);
     color: var(--color-onLight);
     border: none;
-    border-radius: var(--border-radius-m);
+    border-radius: var(--border-radius-l);
     transition: background-color .3s ease;
     font-weight: 700;
 

assets/sass/main.scss

@@ -4,7 +4,7 @@
 @import "fonts.scss";
 @import "navigation.scss";
 @import "sidemenu.scss";
-@import "stage.scss";
+@import "search.scss";
 @import "teaser.scss";
 @import "footer.scss";
 @import "content.scss";
@@ -13,4 +13,4 @@
 @import "form.scss";
 @import "expander.scss";
 @import "anchorlink.scss";
-@import "print.scss"
+@import "print.scss";

assets/sass/navigation.scss

@@ -7,6 +7,8 @@
 
 .o-header {
   background-color: var(--bg-default);
+  z-index: 5;
+  position: relative;
 }
 
 .o-header__wrapper {
@@ -56,6 +58,7 @@
   display: flex;
   margin: .6rem;
   position: relative;
+  left: -1.6rem;
   text-decoration: none;
   border-radius: var(--border-radius-m);
 
@@ -66,7 +69,8 @@
 
   img {
     height: 4.7rem;
-    padding: 0 .4rem
+    padding: 0 .4rem;
+    align-self: center;
   }
 }
 

assets/sass/stage.scss → assets/sass/search.scss

@@ -1,42 +1,9 @@
-.o-stage > picture {
-    width: 100%;
-    max-width: 1320px;
-    filter: brightness(60%);
-
-    img {
-        border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
-    }
-}
-
-.o-stage {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.o-stage__searchfield {
-    position: absolute;
-    width: 60%;
-    height: 6rem;
-    background-color: white;
-    border-radius: var(--border-radius-l);
-}
-
 #search {
-    position: absolute;
-    width: 80%;
-    max-width: 1056px; // 1320*0.8
+    width: 100%;
     height: 6rem;
-    left: 50%;
-    transform: translate(-50%);
     display: flex;
     z-index: 2;
 
-    @media (min-width: #{$breakpoint-md}) {
-        width: 60%;
-        max-width: 792px; // 1320*0.6
-    }
-
     .pagefind-ui__search-input,
     .pagefind-ui__message,
     .pagefind-ui__search-clear {
@@ -46,6 +13,8 @@
     .pagefind-ui__search-input {
         z-index: 3;
         outline: .2rem solid transparent;
+        border: 0;
+        box-shadow: var(--box-shadow);
 
         &:focus {
             outline: .2rem solid orange;
@@ -70,6 +39,10 @@
         display: none;
     }
 
+    .pagefind-ui__form::before {
+        z-index: 4;
+    }
+
     .pagefind-ui__drawer {
         background-color: white;
         padding: 0 1rem 1rem 1rem;
@@ -83,6 +56,7 @@
         border-bottom: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
         border-bottom-left-radius: var(--pagefind-ui-border-radius);
         border-bottom-right-radius: var(--pagefind-ui-border-radius);
+        z-index: 3;
     }
 
     .pagefind-ui__result-link {
@@ -131,10 +105,11 @@
     opacity: 0;
 }
 
-.curtain:has(~ .o-stage .o-stage__search:focus-within),
-.curtain:has(~ .o-stage .pagefind-ui__drawer:not(.pagefind-ui__hidden)),
-.curtain:has(~ article .o-aside__mobile-container2.o-aside__mobile-container--open){
-    opacity: 1;
-    inset: 0;
-    position: fixed;
+main:has(#search:focus-within),
+main:has(.pagefind-ui__drawer:not(.pagefind-ui__hidden))  {
+    .curtain {
+        opacity: 1;
+        position: fixed;
+        inset: 0;
+    }
 }

assets/sass/sidemenu.scss

@@ -99,3 +99,7 @@
         margin-bottom: 0;
     }
 }
+
+.o-related__item img {
+    border-radius: var(--border-radius-s);
+}

assets/sass/styles.scss

@@ -9,11 +9,6 @@ body {
   overflow-x: hidden;
 }
 
-header {
-  z-index: 4;
-  position: relative;
-}
-
 a:not(.m-teaser) {
   color: var(--link-default);
   transition: all 0.3s ease;
@@ -34,51 +29,15 @@ a:not(.m-teaser) {
   }
 }
 
-a:has(i) {
-  display: inline-flex;
-  align-items: center;
-
-  > :first-child {
-    margin-right: .4rem;
-  }
-}
-
-a.m-teaser {
-  .m-teaser__headline {
-    color: var(--link-default);
-    text-decoration: underline;
-    transition: color .3s ease;
-    text-underline-offset: .2rem;
-  }
-
-  &:hover,
-  &:focus {
-    .m-teaser__headline {
-      color: var(--link-hovered);
-    }
-  }
-}
-
 //space for fixed header
-main > .o-stage {
-  margin-top: 5.3rem;
-}
-
-//space for fixed header
-main > .container.o-single,
-main > .container.o-list {
+main {
   margin-top: 8rem;
 }
 
-main > .container {
-  margin-top: 4rem;
+.container.o-list:not(.o-list--news) {
   background-color: var(--bg-default);
   border-radius: var(--border-radius-l);
   padding: 2rem;
-
-  @media (max-width: #{$breakpoint-sm}) {
-    margin-top: 1.6rem;
-  }
 }
 
 main > .container:is(.o-single--with-sidemenu) {
@@ -98,18 +57,13 @@ main > .container:is(.o-single--with-sidemenu) {
 img {
   width: 100%;
   height: auto;
-  border-radius: var(--border-radius-m);
+  border-radius: var(--border-radius-l);
 }
 
 .o-list__picture {
   margin-right: 1.2rem;
 }
 
-.o-list__picture--operator {
-  width: auto;
-  margin-left: 1rem;
-}
-
 .o-related__operator-wrapper > .o-related__list {
   display: flex;
   flex-wrap: wrap;
@@ -138,7 +92,7 @@ img {
 
 .container {
   @media (max-width: #{$breakpoint-sm}) {
-    max-width: calc(100% - 3.6rem);
+    max-width: calc(100% - 3.2rem);
   }
 }
 
@@ -152,6 +106,12 @@ img {
     background-color: inherit;
   }
 
+  &__container {
+    background-color: var(--bg-default);
+    padding: 2rem;
+    border-radius: var(--border-radius-l);
+  }
+
   &__content {
     display: flex;
     flex-direction: column;
@@ -169,41 +129,44 @@ img {
       display: none;
     }
   }
-}
 
-.o-single__content-header {
-  display: flex;
-  justify-content: space-between;
-  flex-flow: wrap;
-  column-gap: 2rem;
-  row-gap: 1rem;
-  margin-bottom: 1.6rem;
-  align-items: center;
+  &__content-header {
+    display: flex;
+    justify-content: space-between;
+    flex-flow: wrap;
+    column-gap: 2rem;
+    row-gap: 1rem;
+    margin-bottom: 1.6rem;
+    align-items: center;
+
+    h1 {
+      margin-bottom: 0;
+    }
 
-  h1 {
-    margin-bottom: 0;
+    img {
+      max-height: 3.6rem;
+      width: auto;
+      border-radius: var(--border-radius-m);
+    }
   }
-}
 
-.o-single__content-header-title {
-  display: flex;
-  align-items: center;
-  gap: 1.5rem;
-}
+  &__content-header-title {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+  }
 
-.o-single__content-header-title img {
-  max-height: 3.6rem;
-  width: auto;
-}
+  &__news-image {
+    margin-bottom: 1.6rem;
 
-.o-single__container {
-  background-color: var(--bg-default);
-  padding: 2rem;
-  border-radius: var(--border-radius-l);
+    @media (min-width: #{$breakpoint-lg}) {
+      display: none;
+    }
+  }
 }
 
 .pagefind-highlight {
-  padding: 0px;
+  padding: 0;
 }
 
 .sr-only {
@@ -215,3 +178,22 @@ img {
   height: 2rem;
   width: auto;
 }
+
+.o-startpage .row {
+  margin-bottom: 3.2rem;
+}
+
+.o-startpage__intro {
+  text-wrap: balance;
+
+  h2 {
+    font-family: Sansita,Arial,Helvetica,sans-serif;
+    font-weight: 800;
+    font-size: 6.2rem;
+    line-height: 1.1;
+  }
+
+  > div {
+    align-content: center;
+  }
+}