Add responsive styles and improve FAQ script handling

Introduced mobile and medium responsiveness in stylesheets for better layout on smaller screens. Adjusted FAQ script to properly remove duplicate event listeners and ensure functionality remains smooth on initialization.

docs/assets/javascript/faq.js

@@ -1,4 +1,5 @@
-document.addEventListener('DOMContentLoaded', function() {
+// Funktion zur Initialisierung der FAQ-Funktionalität
+function initFAQ() {
     // Finde alle FAQ-Fragen
     const faqQuestions = document.querySelectorAll('.custom-faq-question');
 
@@ -9,8 +10,18 @@ document.addEventListener('DOMContentLoaded', function() {
 
     console.log('Benutzerdefinierte FAQ-Elemente gefunden:', faqQuestions.length);
 
-    // Füge Event-Listener zu jeder Frage hinzu
+    // Entferne zuerst alle bestehenden Event-Listener, um Duplikate zu vermeiden
     faqQuestions.forEach(question => {
+        // Klonen des Elements, um alle Event-Listener zu entfernen
+        const newQuestion = question.cloneNode(true);
+        question.parentNode.replaceChild(newQuestion, question);
+    });
+
+    // Hole die aktualisierten Elemente nach dem Klonen
+    const updatedFaqQuestions = document.querySelectorAll('.custom-faq-question');
+
+    // Füge Event-Listener zu jeder Frage hinzu
+    updatedFaqQuestions.forEach(question => {
         question.addEventListener('click', function() {
             // Toggle active class auf der Frage
             this.classList.toggle('active');
@@ -21,7 +32,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
             // Wenn diese Frage geöffnet wurde, schließe alle anderen
             if (this.classList.contains('active')) {
-                faqQuestions.forEach(otherQuestion => {
+                updatedFaqQuestions.forEach(otherQuestion => {
                     if (otherQuestion !== this && otherQuestion.classList.contains('active')) {
                         otherQuestion.classList.remove('active');
                         otherQuestion.nextElementSibling.classList.remove('active');
@@ -32,4 +43,52 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     console.log('Benutzerdefinierte FAQ-Funktionalität initialisiert');
+}
+
+// Führe die Initialisierung beim ersten Laden der Seite aus
+document.addEventListener('DOMContentLoaded', initFAQ);
+
+// Führe die Initialisierung aus, wenn der Inhalt der Seite durch MkDocs aktualisiert wird
+document.addEventListener('DOMContentSwap', initFAQ);
+
+// Führe die Initialisierung aus, wenn die Seite über den Material for MkDocs-Router aktualisiert wird
+document.addEventListener('mdContentChanged', initFAQ);
+
+// Führe die Initialisierung aus, wenn der Inhalt der Seite durch andere Frameworks aktualisiert wird
+// MutationObserver, um Änderungen im DOM zu überwachen
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        if (mutation.addedNodes && mutation.addedNodes.length > 0) {
+            // Prüfe, ob FAQ-Elemente hinzugefügt wurden
+            for (let i = 0; i < mutation.addedNodes.length; i++) {
+                const node = mutation.addedNodes[i];
+                if (node.nodeType === 1 && (node.classList?.contains('custom-faq-item') ||
+                    node.querySelector?.('.custom-faq-item'))) {
+                    // FAQ-Elemente gefunden, initialisiere die Funktionalität
+                    setTimeout(initFAQ, 100); // Kurze Verzögerung, um sicherzustellen, dass alles geladen ist
+                    break;
+                }
+            }
+        }
+    });
 });
+
+// Starte die Beobachtung des Dokuments
+observer.observe(document.body, {
+    childList: true,
+    subtree: true
+});
+
+// Zusätzlicher Event-Listener für dynamisch geladene Inhalte
+window.addEventListener('load', function() {
+    // Verzögerte Initialisierung, um sicherzustellen, dass alle Inhalte geladen sind
+    setTimeout(initFAQ, 500);
+});
+
+// Für Material for MkDocs spezifische Ereignisse
+if (typeof document$.subscribe === 'function') {
+    document$.subscribe(function() {
+        // Verzögerte Initialisierung, um sicherzustellen, dass alle Inhalte geladen sind
+        setTimeout(initFAQ, 100);
+    });
+}

docs/faq.md

@@ -16,34 +16,7 @@ hide:
     </div>
   </div>
 
-  <div class="custom-faq-item">
+  
-    <div class="custom-faq-question">Fragen zur Datensicherheit und Privatsphäre</div>
-    <div class="custom-faq-answer">
-      <p>Wir bieten verschiedene spezialisierte KI-Agenten an, darunter Jane Alesi, Amira Alesi, Bastian Alesi, Bea Alesi, Justus Alesi, Lara Alesi, Luna Alesi, Marco Alesi, Olu Alesi und Theo Alesi. Jeder Agent ist auf bestimmte Aufgabenbereiche spezialisiert.</p>
-    </div>
-  </div>
-
-  <div class="custom-faq-item">
-    <div class="custom-faq-question">Fragen zu Funktionen und Anpassungsmöglichkeiten</div>
-    <div class="custom-faq-answer">
-      <p>Die Integration von satware® AI in Ihr Unternehmen erfolgt in mehreren Schritten. Zunächst analysieren wir Ihre bestehenden Prozesse, identifizieren Optimierungspotenziale und entwickeln dann eine maßgeschneiderte Lösung. Unsere Experten begleiten Sie während des gesamten Implementierungsprozesses.</p>
-    </div>
-  </div>
-
-  <div class="custom-faq-item">
-    <div class="custom-faq-question">Fragen zu Preisgestaltung und Support</div>
-    <div class="custom-faq-answer">
-      <p>satware® AI bietet zahlreiche Vorteile, darunter:</p>
-      <ul>
-        <li>Höhere Effizienz durch Automatisierung wiederkehrender Aufgaben</li>
-        <li>Verbesserte Datenanalyse und Entscheidungsfindung</li>
-        <li>Maßgeschneiderte Lösungen für Ihre spezifischen Anforderungen</li>
-        <li>Skalierbarkeit und Anpassungsfähigkeit an wachsende Unternehmen</li>
-        <li>Reduzierung von Fehlern und Verbesserung der Qualität</li>
-        <li>Kosteneinsparungen durch optimierte Prozesse</li>
-      </ul>
-    </div>
-  </div>
 
 <h2>Fragen zur Datensicherheit und Privatsphäre</h2>
 

docs/overrides/main.html

@@ -26,6 +26,7 @@
 <!-- End Matomo Code -->
 
 
+
 {% endblock %}
 
 {% block footer %}

docs/stylesheets/extra.scss

@@ -17,7 +17,12 @@
 @import 'modules/testimonials';
 @import "modules/faq";
 
-@mixin transition{
+//Responsive Design
+
+@import "responsive/medium";
+@import "responsive/mobile";
+
+@mixin transition {
   transition: all 0.5s ease;
 }
 
@@ -32,6 +37,7 @@
   src: url('../assets/fonts/assistant-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('../assets/fonts/assistant-v19-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
+
 /* assistant-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
@@ -41,6 +47,7 @@
   src: url('../assets/fonts/assistant-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('../assets/fonts/assistant-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
+
 /* assistant-700 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
@@ -51,11 +58,12 @@
   url('../assets/fonts/assistant-v19-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
 
-html{
+html {
 
   font-size: 100% !important;
 
 }
+
 // Schriftart auf "Assistant" setzen
 :root {
   --md-text-font: "Assistant";
@@ -71,13 +79,13 @@ html{
   --md-default-fg-color--lightest: rgba(255, 255, 255, 0.07);
 
   // Primär- und Akzentfarben gemäß satware CI
-  --md-primary-fg-color: #521370;            // Primärfarbe: satware Violett
+  --md-primary-fg-color: #521370; // Primärfarbe: satware Violett
-  --md-primary-fg-color--light: #7e3a9e;     // Helle Variante
+  --md-primary-fg-color--light: #7e3a9e; // Helle Variante
-  --md-primary-fg-color--dark: #3c0e52;      // Dunkle Variante
+  --md-primary-fg-color--dark: #3c0e52; // Dunkle Variante
-  --md-accent-fg-color: #8a44bd;             // Akzentfarbe: Helleres Violett
+  --md-accent-fg-color: #8a44bd; // Akzentfarbe: Helleres Violett
 
   // Link-Farbe anpassen
-  --md-typeset-a-color: #9d65cf;             // Helleres Violett für Links
+  --md-typeset-a-color: #9d65cf; // Helleres Violett für Links
 }
 
 .md-search__scrollwrap {
@@ -88,6 +96,7 @@ html{
   background: var(--md-primary-fg-color);;
   color: #fff;
 }
+
 ::selection {
   background: var(--md-primary-fg-color);;
   color: #fff;
@@ -109,28 +118,29 @@ html{
 }
 
 
-
+body {
-body{
   font-weight: 300;
   font-size: 1.3rem;
   line-height: 2rem;
+
   .md-typeset,
-  .md-nav{
+  .md-nav {
     font-size: 1.3rem;
     line-height: 2rem;
   }
 }
 
-h1,h2,h3,h4,h5,h6 {
+h1, h2, h3, h4, h5, h6 {
   color: #fff;
-  a{
+
+  a {
     color: #fff !important;
   }
 
 }
 
-h1,h2,h3{
+h1, h2, h3 {
-  &:after{
+  &:after {
     content: "";
     background: #fff;
     position: relative;
@@ -145,8 +155,9 @@ h1,h2,h3{
 .md-typeset ul {
   list-style-type: none;
   padding: 0 0 0 2rem;
-  li{
+
-    &:before{
+  li {
+    &:before {
 
       content: "\f00c";
       font-family: "Font Awesome 6 Pro";
@@ -168,23 +179,24 @@ h1,h2,h3{
 }
 
 .md-typeset h1,
-h1{
+h1 {
   color: #fff;
   margin-bottom: 1.75rem;
   text-align: left;
   font-size: 8rem;
   line-height: 1.1;
 
-  a.headerlink{
+  a.headerlink {
     display: none !important;
   }
 }
 
 .md-typeset h2,
-h2{
+h2 {
   line-height: 3rem;
   font-size: 2.7rem;
-  &:after{
+
+  &:after {
     margin-top: .6rem;
     height: 7px;
     width: 50px;
@@ -193,11 +205,11 @@ h2{
 }
 
 .md-typeset h3,
-h3{
+h3 {
 
   font-size: 2.1rem;
 
-  &:after{
+  &:after {
     margin-top: 5px;
     margin-bottom: 1rem;
     height: 4px;
@@ -209,21 +221,21 @@ h3{
   color: #fff;
 }
 
-.md-tabs{
+.md-tabs {
   color: #fff !important;
 }
 
-.md-tabs__item{
+.md-tabs__item {
 
-  &:after{
+  &:after {
     opacity: 0;
     transition: .3s all ease;
   }
 
-  &:hover{
+  &:hover {
     transition: .3s all ease;
 
-    &:after{
+    &:after {
       content: "";
       background: #fff;
       position: relative;
@@ -239,81 +251,80 @@ h3{
 
   }
 
-  &.md-tabs__item--active{
+  &.md-tabs__item--active {
 
 
-      &:after{
+    &:after {
-        content: "";
+      content: "";
-        background: #fff;
+      background: #fff;
-        position: relative;
+      position: relative;
-        display: block;
+      display: block;
-        height: 4px;
+      height: 4px;
-        width: 22px;
+      width: 22px;
-        margin-top: 6px;
+      margin-top: 6px;
-        margin-bottom: -0.2rem;
+      margin-bottom: -0.2rem;
-        opacity: 1;
+      opacity: 1;
-        transition: .3s all ease;
+      transition: .3s all ease;
 
-      }
+    }
 
 
   }
 
 }
 
-.md-tabs__list{
+.md-tabs__list {
   height: 4rem;
 }
 
-.md-tabs__link{
+.md-tabs__link {
   opacity: 1;
   font-size: 1.2rem;
 
 }
 
-.md-search__form{
+.md-search__form {
   input::placeholder {
     color: #fff !important;
   }
 }
 
 
-
+.md-search-result__meta {
-.md-search-result__meta{
   background-color: #000;
 }
 
-.md-source-file{
+.md-source-file {
   display: none;
 }
 
-.md-grid{
+.md-grid {
   max-width: 1080px;
 }
 
-.satag--padding-container{
+.satag--padding-container {
   padding: 4rem 0;
 }
 
-a.headerlink{
+a.headerlink {
   color: var(--md-primary-fg-color) !important;
 }
 
-.satag-trademark{
+.satag-trademark {
   text-transform: lowercase;
 }
 
 .md-header,
-.md-tabs{
+.md-tabs {
   background-color: #000;
 }
 
-.md-tabs__item{
+.md-tabs__item {
   text-transform: uppercase;
   font-weight: 700;
 }
 
-.md-search__input{
+.md-search__input {
   text-transform: uppercase;
   font-size: 0.7rem;
   font-weight: 400;
@@ -321,9 +332,9 @@ a.headerlink{
   color: #fff;
 }
 
-.md-search-result__list{
+.md-search-result__list {
-  h1,h2,h3,h4,h5,h6{
+  h1, h2, h3, h4, h5, h6 {
-    &:after{
+    &:after {
       content: none;
     }
   }
@@ -336,7 +347,7 @@ a.headerlink{
   width: 1rem;
 }
 
-.md-search-result__meta{
+.md-search-result__meta {
   text-transform: uppercase;
   font-size: 0.7rem;
   font-weight: 400;
@@ -345,15 +356,15 @@ a.headerlink{
 }
 
 
-.satag--webinar-form-container{
+.satag--webinar-form-container {
-  #nextcloud-form{
+  #nextcloud-form {
     width: 100%;
     border: none;
     min-height: 3500px;
     transition: height .3s ease;
     color-scheme: dark;
 
-    .ng-csp{
+    .ng-csp {
       background-color: #000 !important;
     }
   }
@@ -372,16 +383,16 @@ a.headerlink{
   padding-top: .6rem;
 }
 
-.md-footer-meta.md-typeset a{
+.md-footer-meta.md-typeset a {
   color: #fff !important;
 }
+
 .md-footer-meta {
   background-color: #000;
 }
 
 
-
+// Füge zusätzliche Navigation im Footer hinzu
-  // Füge zusätzliche Navigation im Footer hinzu
 .md-footer-custom-links {
   display: flex;
   flex-wrap: wrap;
@@ -406,22 +417,22 @@ a.headerlink{
   color: #e2e2e2;
 }
 
-.md-nav__container>.md-nav__link:first-child {
+.md-nav__container > .md-nav__link:first-child {
   text-transform: uppercase;
 }
 
-.md-nav__title{
+.md-nav__title {
   text-transform: uppercase;
   color: #fff;
 }
 
-.md-search__form{
+.md-search__form {
   &:hover {
     background-color: transparent !important;
   }
 }
 
-[data-md-toggle=search]:checked~.md-header .md-search__suggest {
+[data-md-toggle=search]:checked ~ .md-header .md-search__suggest {
   opacity: 0;
 }
 
@@ -436,15 +447,17 @@ a.headerlink{
   opacity: .7;
 }
 
-.md-top{
+.md-top {
   border-radius: 0;
   top: 4vh !important;
   font-size: 100%;
   padding: 0.8rem 1rem;
-  svg{
+
+  svg {
     vertical-align: -.15rem;
   }
 }
+
 // Buttons im CI-Design
 .md-button {
 
@@ -459,7 +472,7 @@ a.headerlink{
 
   @include transition;
 
-  &:hover{
+  &:hover {
     border-color: #8a44bd !important;
     transform: translateY(8px);
     @include transition;

docs/stylesheets/modules/header.scss

@@ -21,9 +21,12 @@ body{
   }
 
   /* Für den Fall, dass du die Seitenleiste verwendest */
-  .md-sidebar {
+  @media (min-width: 768px){
-    top: 0 !important;
+    .md-sidebar {
-    height: auto !important;
+      top: 0 !important;
+      height: auto !important;
+    }
+
   }
 
   label.md-search__icon.md-icon {

docs/stylesheets/modules/home.scss

@@ -12,21 +12,16 @@
 
     margin-top: 7rem;
 
-  .entry-text{
+    .entry-text{
-    font-size: 1.5rem;
+      font-size: 1.5rem;
-    line-height: 2.2rem;
+      line-height: 2.2rem;
-    padding-bottom: 1.6rem;
+      padding-bottom: 1.6rem;
-    padding-top: 1.6rem;
+      padding-top: 1.6rem;
-  }
+    }
-
-
-    //@include ohne-balken;
 
     h1{
-      //font-size: 6rem;
       margin-bottom: 1.75rem;
       text-align: left;
-      //line-height: 114%;
       &:after{
         height: 12px;
         width: 85px;
@@ -41,10 +36,7 @@
       margin-bottom: 0;
     }
 
-    //text-align: center;
-
     .screenshot-container{
-
       text-align: center;
     }
 
@@ -52,7 +44,6 @@
       border: 1px solid var(--md-primary-fg-color--light);
       width: 100%;
     }
-
   }
 
   .satag--home-companies{
@@ -73,21 +64,34 @@
       margin: 0 auto;
     }
 
-    //@include ohne-balken;
-
     text-align: center;
     .satag--home-companies-logo-container{
       display: flex;
       max-width: 61rem;
       margin: 0 auto;
+      flex-wrap: wrap; // Erlaubt Umbruch bei kleinen Bildschirmen
 
       .satag--home-companies-logo{
-        flex: auto;
+        flex: 0 0 25%;
         img{
           width: 80%;
           float:left;
         }
       }
+
+      // Responsive Anpassung für die Logos
+      @media screen and (max-width: 768px) {
+        .satag--home-companies-logo {
+          flex: 0 0 50%; // 2 Logos pro Zeile
+          margin-bottom: 1rem;
+        }
+      }
+
+      @media screen and (max-width: 480px) {
+        .satag--home-companies-logo {
+          flex: 0 0 100%; // 1 Logo pro Zeile
+        }
+      }
     }
   }
 
@@ -95,7 +99,6 @@
 
     width: 100%;
 
-
     h2{
       padding-bottom: 1rem;
     }
@@ -105,9 +108,13 @@
     text-align: center;
     .satag--home-counters-container{
       display: flex;
+      flex-wrap: wrap; // Erlaubt Umbruch bei kleinen Bildschirmen
+
       .satag--home-counter{
-        flex: auto;
+        flex: 1 0 auto;
         display: block;
+        padding: 1rem;
+
         .satag--home-counter-icon{
           display: block;
           font-size: 2rem;
@@ -120,9 +127,21 @@
           line-height: 1.6;
         }
       }
+
+      // Responsive Breakpoints für die Counter
+      @media screen and (max-width: 768px) {
+        .satag--home-counter {
+          flex: 0 0 50%; // 2 Counter pro Zeile
+        }
+      }
+
+      @media screen and (max-width: 480px) {
+        .satag--home-counter {
+          flex: 0 0 100%; // 1 Counter pro Zeile
+        }
+      }
     }
   }
-
 }
 
 body{
@@ -135,12 +154,14 @@ body{
     background-size: 60%;
     background-position-y: 2rem;
 
-
     .md-header, .md-tabs {
       background-color: transparent;
       box-shadow: none;
     }
 
+    // Responsive Anpassung für den Hintergrund
+    @media screen and (max-width: 768px) {
+      background-size: 100%;
+    }
   }
-
+}
-}

docs/stylesheets/modules/testimonials.scss

@@ -1,8 +1,8 @@
 // Testimonials Section
 .satag--home-testimonials-container {
   max-width: 1200px;
-
+  margin: 0 auto;
-
+  padding: 0 1rem;
 
   h2 {
     text-align: left;
@@ -31,6 +31,10 @@
   @media (min-width: 768px) {
     flex: 0 0 60%;
   }
+
+  @media (max-width: 767px) {
+    min-height: 400px; // Mehr Platz für den Text auf mobilen Geräten
+  }
 }
 
 .satag--home-testimonials-text {
@@ -48,38 +52,61 @@
   }
 
   blockquote {
-
     font-style: normal;
     margin-bottom: 1.5rem;
     color: #fff;
     border-left: none !important;
-    //border-left: 4px solid var(--md-primary-fg-color, #9c27b0);
     padding-left: 0 !important;
-    //font-size: 1.2rem;
-    //line-height: 2rem;
-    //padding-bottom: 1.6rem;
-    //padding-top: 1.6rem;
 
+    @media (max-width: 767px) {
+      font-size: 1rem; // Etwas kleinere Schrift auf mobilen Geräten
+      line-height: 1.5;
+      margin-top: 70px; // Platz für das Logo über dem Text
+    }
   }
 }
 
 .satag--home-testimonial-author {
   margin-top: 1rem;
+
+  @media (max-width: 767px) {
+    margin-top: 1.5rem; // Mehr Abstand nach oben auf mobilen Geräten
+    margin-bottom: 2rem; // Mehr Abstand nach unten auf mobilen Geräten
+  }
 }
 
-.satag--home-testimonial-text-logo{
+.satag--home-testimonial-text-logo {
   max-width: 120px !important;
   filter: grayscale(1);
+
+  @media (max-width: 767px) {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    max-width: 80px !important; // Kleineres Logo
+    margin-bottom: 1rem;
+  }
 }
 
 .satag--home-testimonial-name {
   font-weight: bold;
   margin-bottom: 0.25rem;
+
+  @media (max-width: 767px) {
+    font-size: 1.2rem; // Größerer Name auf mobilen Geräten
+    margin-bottom: 0.1rem;
+  }
 }
 
 .satag--home-testimonial-title {
   font-size: 0.9rem;
   color: #666;
+
+  @media (max-width: 767px) {
+    font-size: 1rem; // Etwas größerer Titel auf mobilen Geräten
+    margin-top: 0; // Kein negativer Abstand mehr
+  }
 }
 
 // Bilder-Container (rechts)
@@ -92,6 +119,22 @@
     flex: 0 0 40%;
     justify-content: flex-end;
   }
+
+  @media (max-width: 767px) {
+    flex-wrap: nowrap; // Keine Umbrüche, damit die Bilder horizontal scrollbar sind
+    overflow-x: auto; // Horizontales Scrollen ermöglichen
+    -webkit-overflow-scrolling: touch; // Für besseres Scrolling auf iOS
+    scrollbar-width: none; // Firefox: Scrollbar ausblenden
+    -ms-overflow-style: none; // IE/Edge: Scrollbar ausblenden
+    padding-bottom: 1rem; // Platz für die Scrollbar
+    margin-top: 1rem; // Weniger Abstand nach oben
+    justify-content: flex-start; // Links ausrichten
+
+    // Webkit: Scrollbar ausblenden
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }
 
 .satag--home-testimonial-image-wrapper {
@@ -103,21 +146,19 @@
   opacity: 0.6;
   transition: all 0.3s ease;
   border: 1px solid transparent;
-  border-radius: 0; // Leicht abgerundete Ecken statt Kreis
+  border-radius: 0;
   border-color: var(--md-primary-fg-color--dark);
-  img{
-    filter: grayscale(1);
-    //@include transition;
-  }
 
+  img {
+    filter: grayscale(1);
+  }
 
   &.active {
     opacity: 1;
     border-color: var(--md-primary-fg-color, #9c27b0);
     transform: scale(1.05);
-    img{
+    img {
       filter: grayscale(0);
-      //@include transition;
     }
   }
 
@@ -126,8 +167,14 @@
   }
 
   @media (max-width: 767px) {
-    width: 100px;
+    width: 120px; // Etwas größer als zuvor
-    height: 150px;
+    height: 180px; // Etwas größer als zuvor
+    flex: 0 0 auto; // Verhindert Schrumpfen
+    margin-right: 0.5rem; // Abstand zwischen den Bildern
+
+    &:last-child {
+      margin-right: 1rem; // Extra Platz am Ende für besseres Scrollen
+    }
   }
 }
 
@@ -156,15 +203,36 @@
   img {
     max-width: 60px;
   }
+
+  @media (max-width: 767px) {
+    bottom: 15px; // Näher am unteren Rand
+    width: 30px; // Etwas kleiner
+    height: 30px; // Etwas kleiner
+    background: rgba(0, 0, 0, 0.5); // Halbdurchsichtiger Hintergrund für bessere Sichtbarkeit
+
+    img {
+      max-width: 40px;
+    }
+  }
 }
 
 // Responsive Anpassungen
 @media (max-width: 767px) {
-  .satag--home-testimonials-text-container {
+  // Verbessertes Layout für mobile Geräte
-    min-height: 300px;
+  .satag--home-testimonials-container {
+    h2 {
+      margin-bottom: 1.5rem;
+      font-size: 1.5rem;
+    }
   }
 
-  .satag--home-testimonials-images {
+  // Entfernung der Scrollklasse für die Bilder
-    flex-wrap: wrap;
+  .satag--home-testimonials-images.scroll {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 }

docs/stylesheets/responsive/medium.scss

@@ -0,0 +1,70 @@
+
+@media (max-width: 1219px) {
+  body{
+
+    .md-grid {
+      padding: 2rem;
+    }
+    .md-grid .md-content,
+    .md-footer-container,
+    .md-footer-custom-links{
+      padding: 4rem;
+    }
+
+    .md-typeset h1,
+    h1 {
+      font-size: 3rem;
+    }
+
+    .md-typeset h2,
+    h2 {
+      font-size: 2rem;
+    }
+
+  }
+}
+
+@media (max-width: 959px) {
+
+
+
+  label.md-header__button.md-icon:last-of-type{
+    svg{
+      display: none;
+    }
+    &:after {
+      content: "\f002";
+      font-family: 'Font Awesome 6 Pro';
+      font-weight: 100;
+      font-size: 1rem;
+    }
+  }
+
+  body{
+
+    .satag--padding-container{
+      padding: 4rem 2rem;
+    }
+
+    .satag--home-companies{
+      padding: 4rem 3rem;
+
+      .satag--home-companies-logo-container{
+        .satag--home-companies-logo{
+          img {
+            float: none !important;
+          }
+        }
+      }
+
+    }
+
+    .md-button{
+      padding: 1em 2.3em !important;
+      margin-bottom: 1em;
+    }
+  }
+
+
+
+}

docs/stylesheets/responsive/mobile.scss

@@ -0,0 +1,24 @@
+@media (max-width: 479px) {
+  body{
+
+    .md-grid {
+      padding: 2rem;
+    }
+    .md-grid .md-content,
+    .md-footer-container,
+    .md-footer-custom-links{
+      padding: 1rem;
+    }
+
+    .md-typeset h1,
+    h1 {
+      font-size: 3rem;
+    }
+
+    .md-typeset h2,
+    h2 {
+      font-size: 2rem;
+    }
+
+  }
+}

mkdocs.yml

@@ -16,6 +16,7 @@ copyright: Copyright © 2025 satware AG
 # Konfiguration
 theme:
   name: material
+  font: false
   custom_dir: docs/overrides
   language: de
 
@@ -47,6 +48,8 @@ theme:
     - search.suggest
     - toc.follow
 
+
+
   #font:
    # text: Roboto
     #code: Roboto Mono

site/overrides/main.html

@@ -26,6 +26,7 @@
 <!-- End Matomo Code -->
 
 
+
 {% endblock %}
 
 {% block footer %}

site/sitemap.xml

@@ -2,102 +2,102 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
          <loc>https://satware.ai/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/faq/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/webinare/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/zugang/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/ki-innovationen-im-februar-2025-ein-umfassender-%C3%BCberblick/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/roboterliebe-20-mein-herzensprojekt-zur-globalen-ki-musikrevolution/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/satware-ai-der-launch-unserer-bahnbrechenden-ki-plattform/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/amira/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/bastian/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/bea/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/jane/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/justus/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/lara/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/luna/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/marco/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/olu/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/ki-agenten/theo/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/archive/2025/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/category/projekte/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/category/ki/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/category/musik/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/category/technologie/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
     <url>
          <loc>https://satware.ai/blog/category/innovation/</loc>
-         <lastmod>2025-05-07</lastmod>
+         <lastmod>2025-05-08</lastmod>
     </url>
 </urlset>

site/stylesheets/extra.scss

@@ -17,7 +17,12 @@
 @import 'modules/testimonials';
 @import "modules/faq";
 
-@mixin transition{
+//Responsive Design
+
+@import "responsive/medium";
+@import "responsive/mobile";
+
+@mixin transition {
   transition: all 0.5s ease;
 }
 
@@ -32,6 +37,7 @@
   src: url('../assets/fonts/assistant-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('../assets/fonts/assistant-v19-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
+
 /* assistant-regular - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
@@ -41,6 +47,7 @@
   src: url('../assets/fonts/assistant-v19-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
   url('../assets/fonts/assistant-v19-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
+
 /* assistant-700 - latin */
 @font-face {
   font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
@@ -51,11 +58,12 @@
   url('../assets/fonts/assistant-v19-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
 }
 
-html{
+html {
 
   font-size: 100% !important;
 
 }
+
 // Schriftart auf "Assistant" setzen
 :root {
   --md-text-font: "Assistant";
@@ -71,13 +79,13 @@ html{
   --md-default-fg-color--lightest: rgba(255, 255, 255, 0.07);
 
   // Primär- und Akzentfarben gemäß satware CI
-  --md-primary-fg-color: #521370;            // Primärfarbe: satware Violett
+  --md-primary-fg-color: #521370; // Primärfarbe: satware Violett
-  --md-primary-fg-color--light: #7e3a9e;     // Helle Variante
+  --md-primary-fg-color--light: #7e3a9e; // Helle Variante
-  --md-primary-fg-color--dark: #3c0e52;      // Dunkle Variante
+  --md-primary-fg-color--dark: #3c0e52; // Dunkle Variante
-  --md-accent-fg-color: #8a44bd;             // Akzentfarbe: Helleres Violett
+  --md-accent-fg-color: #8a44bd; // Akzentfarbe: Helleres Violett
 
   // Link-Farbe anpassen
-  --md-typeset-a-color: #9d65cf;             // Helleres Violett für Links
+  --md-typeset-a-color: #9d65cf; // Helleres Violett für Links
 }
 
 .md-search__scrollwrap {
@@ -88,6 +96,7 @@ html{
   background: var(--md-primary-fg-color);;
   color: #fff;
 }
+
 ::selection {
   background: var(--md-primary-fg-color);;
   color: #fff;
@@ -109,28 +118,29 @@ html{
 }
 
 
-
+body {
-body{
   font-weight: 300;
   font-size: 1.3rem;
   line-height: 2rem;
+
   .md-typeset,
-  .md-nav{
+  .md-nav {
     font-size: 1.3rem;
     line-height: 2rem;
   }
 }
 
-h1,h2,h3,h4,h5,h6 {
+h1, h2, h3, h4, h5, h6 {
   color: #fff;
-  a{
+
+  a {
     color: #fff !important;
   }
 
 }
 
-h1,h2,h3{
+h1, h2, h3 {
-  &:after{
+  &:after {
     content: "";
     background: #fff;
     position: relative;
@@ -145,8 +155,9 @@ h1,h2,h3{
 .md-typeset ul {
   list-style-type: none;
   padding: 0 0 0 2rem;
-  li{
+
-    &:before{
+  li {
+    &:before {
 
       content: "\f00c";
       font-family: "Font Awesome 6 Pro";
@@ -168,23 +179,24 @@ h1,h2,h3{
 }
 
 .md-typeset h1,
-h1{
+h1 {
   color: #fff;
   margin-bottom: 1.75rem;
   text-align: left;
   font-size: 8rem;
   line-height: 1.1;
 
-  a.headerlink{
+  a.headerlink {
     display: none !important;
   }
 }
 
 .md-typeset h2,
-h2{
+h2 {
   line-height: 3rem;
   font-size: 2.7rem;
-  &:after{
+
+  &:after {
     margin-top: .6rem;
     height: 7px;
     width: 50px;
@@ -193,11 +205,11 @@ h2{
 }
 
 .md-typeset h3,
-h3{
+h3 {
 
   font-size: 2.1rem;
 
-  &:after{
+  &:after {
     margin-top: 5px;
     margin-bottom: 1rem;
     height: 4px;
@@ -209,21 +221,21 @@ h3{
   color: #fff;
 }
 
-.md-tabs{
+.md-tabs {
   color: #fff !important;
 }
 
-.md-tabs__item{
+.md-tabs__item {
 
-  &:after{
+  &:after {
     opacity: 0;
     transition: .3s all ease;
   }
 
-  &:hover{
+  &:hover {
     transition: .3s all ease;
 
-    &:after{
+    &:after {
       content: "";
       background: #fff;
       position: relative;
@@ -239,81 +251,80 @@ h3{
 
   }
 
-  &.md-tabs__item--active{
+  &.md-tabs__item--active {
 
 
-      &:after{
+    &:after {
-        content: "";
+      content: "";
-        background: #fff;
+      background: #fff;
-        position: relative;
+      position: relative;
-        display: block;
+      display: block;
-        height: 4px;
+      height: 4px;
-        width: 22px;
+      width: 22px;
-        margin-top: 6px;
+      margin-top: 6px;
-        margin-bottom: -0.2rem;
+      margin-bottom: -0.2rem;
-        opacity: 1;
+      opacity: 1;
-        transition: .3s all ease;
+      transition: .3s all ease;
 
-      }
+    }
 
 
   }
 
 }
 
-.md-tabs__list{
+.md-tabs__list {
   height: 4rem;
 }
 
-.md-tabs__link{
+.md-tabs__link {
   opacity: 1;
   font-size: 1.2rem;
 
 }
 
-.md-search__form{
+.md-search__form {
   input::placeholder {
     color: #fff !important;
   }
 }
 
 
-
+.md-search-result__meta {
-.md-search-result__meta{
   background-color: #000;
 }
 
-.md-source-file{
+.md-source-file {
   display: none;
 }
 
-.md-grid{
+.md-grid {
   max-width: 1080px;
 }
 
-.satag--padding-container{
+.satag--padding-container {
   padding: 4rem 0;
 }
 
-a.headerlink{
+a.headerlink {
   color: var(--md-primary-fg-color) !important;
 }
 
-.satag-trademark{
+.satag-trademark {
   text-transform: lowercase;
 }
 
 .md-header,
-.md-tabs{
+.md-tabs {
   background-color: #000;
 }
 
-.md-tabs__item{
+.md-tabs__item {
   text-transform: uppercase;
   font-weight: 700;
 }
 
-.md-search__input{
+.md-search__input {
   text-transform: uppercase;
   font-size: 0.7rem;
   font-weight: 400;
@@ -321,9 +332,9 @@ a.headerlink{
   color: #fff;
 }
 
-.md-search-result__list{
+.md-search-result__list {
-  h1,h2,h3,h4,h5,h6{
+  h1, h2, h3, h4, h5, h6 {
-    &:after{
+    &:after {
       content: none;
     }
   }
@@ -336,7 +347,7 @@ a.headerlink{
   width: 1rem;
 }
 
-.md-search-result__meta{
+.md-search-result__meta {
   text-transform: uppercase;
   font-size: 0.7rem;
   font-weight: 400;
@@ -345,15 +356,15 @@ a.headerlink{
 }
 
 
-.satag--webinar-form-container{
+.satag--webinar-form-container {
-  #nextcloud-form{
+  #nextcloud-form {
     width: 100%;
     border: none;
     min-height: 3500px;
     transition: height .3s ease;
     color-scheme: dark;
 
-    .ng-csp{
+    .ng-csp {
       background-color: #000 !important;
     }
   }
@@ -372,16 +383,16 @@ a.headerlink{
   padding-top: .6rem;
 }
 
-.md-footer-meta.md-typeset a{
+.md-footer-meta.md-typeset a {
   color: #fff !important;
 }
+
 .md-footer-meta {
   background-color: #000;
 }
 
 
-
+// Füge zusätzliche Navigation im Footer hinzu
-  // Füge zusätzliche Navigation im Footer hinzu
 .md-footer-custom-links {
   display: flex;
   flex-wrap: wrap;
@@ -406,22 +417,22 @@ a.headerlink{
   color: #e2e2e2;
 }
 
-.md-nav__container>.md-nav__link:first-child {
+.md-nav__container > .md-nav__link:first-child {
   text-transform: uppercase;
 }
 
-.md-nav__title{
+.md-nav__title {
   text-transform: uppercase;
   color: #fff;
 }
 
-.md-search__form{
+.md-search__form {
   &:hover {
     background-color: transparent !important;
   }
 }
 
-[data-md-toggle=search]:checked~.md-header .md-search__suggest {
+[data-md-toggle=search]:checked ~ .md-header .md-search__suggest {
   opacity: 0;
 }
 
@@ -436,15 +447,17 @@ a.headerlink{
   opacity: .7;
 }
 
-.md-top{
+.md-top {
   border-radius: 0;
   top: 4vh !important;
   font-size: 100%;
   padding: 0.8rem 1rem;
-  svg{
+
+  svg {
     vertical-align: -.15rem;
   }
 }
+
 // Buttons im CI-Design
 .md-button {
 
@@ -459,7 +472,7 @@ a.headerlink{
 
   @include transition;
 
-  &:hover{
+  &:hover {
     border-color: #8a44bd !important;
     transform: translateY(8px);
     @include transition;