init webseite ts and claude

webseite-ts/frontend/dev/scss/05_modules/_footer-main.scss

@@ -0,0 +1,18 @@
+.footer-main {
+  background: $color-dark-blue; // Fallback für ältere Browser
+  background: $linear-gradient-dark;
+  padding: 2rem 0;
+  .col {
+    color: $color-white;
+    h2,
+    h3,
+    h4,
+    h5 {
+      font-size: 1.5rem;
+      color: $color-5;
+      padding: 0.5rem 0;
+      margin-bottom: 1rem;
+      letter-spacing: 2px;
+    }
+  }
+}

webseite-ts/frontend/dev/scss/05_modules/_header-main.scss

@@ -0,0 +1,83 @@
+.header-main {
+  position: relative;
+
+  width: 100%;
+  min-height: 400px;
+  .content-box {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: auto;
+    margin: 0 auto;
+    height: 100%;
+    max-width: 360px;
+    max-height: 380px;
+  }
+
+  background: $color-3 url('../img/header-image.webp') center no-repeat;
+  background-size: cover;
+
+  &--min {
+    height: 150px;
+    background-color: $color-2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .content-box {
+      figure {
+        width: 150px;
+      }
+    }
+  }
+
+  .splide {
+    position: absolute;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    overflow: hidden;
+    .splide__track {
+      height: 100%;
+      .splider-content {
+        &::after {
+          content: '';
+          position: absolute;
+          z-index: 1;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, 0.2);
+        }
+
+        height: 100%;
+        padding: 0;
+        img {
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+  // .content-box {
+  //   figure {
+  //     width: 280px;
+  //     figcaption {
+  //       position: absolute;
+  //       clip: rect(1px, 1px, 1px, 1px);
+  //       clip-path: inset(0 0 99.9% 99.9%);
+  //       overflow: hidden;
+  //       height: 1px;
+  //       width: 1px;
+
+  //       padding: 0;
+  //       border: 0;
+  //     }
+  //   }
+  // }
+}

webseite-ts/frontend/dev/scss/05_modules/_index.scss

@@ -0,0 +1,5 @@
+@import 'footer-main';
+@import 'header-main';
+@import 'logo-main';
+@import 'menu-main';
+@import 'product-manager';

webseite-ts/frontend/dev/scss/05_modules/_logo-main.scss

@@ -0,0 +1,14 @@
+figure.logo-main {
+  width: 280px;
+  figcaption {
+    position: absolute;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(0 0 99.9% 99.9%);
+    overflow: hidden;
+    height: 1px;
+    width: 1px;
+
+    padding: 0;
+    border: 0;
+  }
+}

webseite-ts/frontend/dev/scss/05_modules/_menu-main.scss

@@ -0,0 +1,60 @@
+.menu-main {
+  background-color: $color-5;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  ul ul {
+    display: none; // TODO: change to not visible
+  }
+  ul > li:hover,
+  ul > li:focus,
+  ul > li:focus-within {
+    ul {
+      display: block;
+    }
+  }
+
+  ul.list {
+    display: flex;
+
+    justify-content: center;
+    li {
+      a {
+        display: inline-block;
+        text-decoration: none;
+        text-transform: uppercase;
+        color: $color-white;
+        padding: 0.5rem 1rem;
+        transition: all 0.4s ease-out;
+        &:hover,
+        &:focus {
+          background-color: $color-white;
+          color: $color-5;
+        }
+      }
+    }
+  }
+
+  ul.sublist {
+    position: absolute;
+    background-color: rgba($color-5, 0.8);
+    li {
+      a {
+        display: inline-block;
+        background-color: $color-5;
+        color: $color-white;
+        padding: 0.5rem 1rem;
+        transition: all 0.4s ease-out;
+        &:hover,
+        &:focus {
+          background-color: $color-white;
+          color: $color-5;
+        }
+      }
+    }
+  }
+}

webseite-ts/frontend/dev/scss/05_modules/_product-manager.scss

@@ -0,0 +1,37 @@
+.product-manager {
+  .nav-products-actions {
+    margin: 1rem 0;
+    display: flex;
+    justify-content: flex-end;
+    .list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: flex;
+      gap: 1rem;
+    }
+  }
+
+  table {
+    .th-actions {
+      width: 200px;
+    }
+    tbody {
+      td {
+        vertical-align: middle;
+        button {
+          margin: 3px;
+        }
+      }
+    }
+
+    tfoot {
+      .row > * {
+        margin-bottom: 1rem;
+        @media (min-width: 992px) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}