body {
    background: linear-gradient(to bottom, #000033, #000066); /* Ändere die Hintergrundfarbe auf Nachtblau */
    padding: 0;
    margin: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white; /* Ändere die Textfarbe auf Weiß */
}
/* Header ist nicht in Anwendung, darf aber nicht glöscht werden*/
header {
    margin-top: 24px;  
    margin-bottom:  24px;
  }
  

.mitte {
    display: flex;
    justify-content: center;
    align-items: center;
}

#teaser {
    width: 100%; 
    height: 300px;
    display: flex; /* Fügt Flexbox-Layout hinzu */
    justify-content: center; /* Zentriert den Inhalt horizontal */
 }
 
 #teaser img {
    max-width: 900px; /* Maximale Breite des Bildes auf 900px begrenzen */
    height: 100%; 
    object-fit: cover; 
 }
 
 @media screen and (min-width: 800px) {
    #teaser {
       height: 400px; /* Ändert das Verhalten des Teaser-Bildes je nach Größe des Bildschirms */
    } 
 }
nav{
    position: sticky; /* Linkleiste soll oben stehen bleiben*/
    top: 0px;
    backdrop-filter: blur(6px); /* Hintergrund verschwimmt hinter der Liste */
    z-index: 1; /* damit die Liste über der gesamten Seite den Blur effekt hat. */
}

footer ul, nav ul {/* Kopf und Fußliste werden gleichermaßen designt */
    list-style: none;/*keine Punkte vor einer Auflistung */
    margin: 0; /* 0=kein Platzhalter für die Punkte der Liste Seitenausrichtung*/
    padding: 0;
    padding-top: 24px;/* damit Auflistungen weiter unter das Bild gehen und nicht darunter kleben*/
    padding-bottom: 24px; 
    
}

nav ul li a,
footer ul li a {
    color: wheat; /* Ändere die Textfarbe für Links in der Nav-Liste und im Footer auf Weiß */
}

footer ul li a, nav ul li a { /* Liste Fetter und Breiter anzeigen */
    font-weight: 600;
  padding: 16px;  /* kann verändert werden, wenn in der vertikalen Liste zu viele Links stehen, und die Seite nicht mehr stimmt. rechter Rand weiß.z.B */
}

section{/* Zentriert den Text, wenn die Breite des Bildschirms sich ändert */
   max-width: 800px;/* Breite des gesamten Textes im Block */
   margin-left: auto;
   margin-right: auto; 
   padding-left: 30px;/* Rand nach links */
   padding-right:30px;/* Rand nach rechts */

   /* Bild zentriert über dem nächsten Text  */
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;

}
section img {    /* Größe für das Bild in der Sektion */
    width: 400px; 
    margin-bottom: 20px; /* Füge etwas Abstand unterhalb des Logos hinzu */
}

#Omail_Logo_transparent {
    width: 100px;
    margin-bottom: 20px;
}
#OConnect_Logo_transparent {
    width: 150px;;
    margin-bottom: 20px; 
}
#ONet_Logo_transparent {
    width: 100px;
    margin-bottom: 20px;
}
#OTrim_Logo_transparent {
    width: 100px;;
    margin-bottom: 20px;
}
#OTracker_Logo_transparent {
    width: 100px;
    margin-bottom: 20px;
}
#ODesk_Logo-transparent {
    width: 100px;;
    margin-bottom: 20px;
}
#QR_jointhefuture {
    width: 200px;;
    margin-bottom: 20px;  
}



.logo-container {
    text-align: center; /* Zentriert das Bild horizontal */
    margin-bottom: 20px; /* Abstand unterhalb des Bildes */
}

.logo-container img {
    width: 300px;
    height: auto;
    display: inline; /* Ändert das Display-Verhalten auf "inline" */
}


style

        h1, h2, h3, h4, h5, h6 {
            text-align: center; /* Zentriert alle Überschriften */
            margin: 0 auto; /* Horizontal zentrieren */
            max-width: 800px; /* Maximal zulässige Breite */
        }

        h1 {
            font-size: 50px;
            font-weight: bolder; /* Dicke */
            text-align: center; /* Zentriert h1 */
            margin: 0 10px; /* Reduziert horizontalen Abstand auf 10px */
             max-width: 800px; /* Maximal zulässige Breite für h1 */
            color: rgb(0, 270, 240); /*  Farbe für h1 */
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            margin-bottom: 20px; /* Erhöht den Abstand unterhalb von h1 auf 20px (oder einen anderen gewünschten Wert) */

            
        }

/*  Farbe für h1 */
        h1 .highlight-blue {
            color: rgb(0, 270, 240); 
        }

        
 /* Stil für den Allgemeinen Text*/
        p {
            text-align: justify;/* Blocksatz- Text*/
            color: white; /* Farbe für den normalen Text */
            max-width: 800px;/* Breite des Blocksatzes im Text */
            margin-top: 20px; /* Platz über dem Text */
            margin-bottom: 20px; /* Platz unter dem Text */
            font-size: 20px; /* Schriftgröße */
        }


 /* Hellblaue Farbe für herforgehobene Wörter im allgemeinen Text*/
        p .highlight-blue {
            color:rgb(0, 270, 240); 
            font-weight: bold; /* Fetter Text */
            margin-bottom: 20px;
            margin-top: 20px;
        }

 /* Stil für das zentrierte h2 */
        h2 {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
            font-size: 30px; /* Schriftgröße-anpassen nach Bedarf */
            font-weight: bolder; /* Schriftbreite / Dicke -anpassen nach Bedarf */
            color:rgb(0, 270, 240); /*  Textfarbe */
            margin-top: 20px; /* Erhöht den Abstand oberhalb von h2 auf 20px (oder einen anderen gewünschten Wert) */
            margin-bottom: 10px; /* Erhöht den Abstand unterhalb von h2 auf 10px (oder einen anderen gewünschten Wert) */
        }

        h3{
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 50px; /* Schriftgröße-anpassen nach Bedarf */
            color: white; /*  Textfarbe */
            margin-top: 20px; /* Erhöht den Abstand oberhalb von h2 auf 20px (oder einen anderen gewünschten Wert) */
            margin-bottom: 10px; /* Erhöht den Abstand unterhalb von h2 auf 10px (oder einen anderen gewünschten Wert) */
    }


/* Verringert die Schriftgröße, wenn auf einem Smartphone angesehen wird*/
    @media only screen and (max-width: 600px) {
        h1, h2, h3 {
          max-width: none;
          overflow: visible;
        }
      
        h1 {
          font-size: 20px;
        }
      
        h2 {
          font-size: 20px;
        }
      
        h3 {
          font-size: 20px;
        }
      
        p {
          font-size: 14px !important;
        }
      }

/* Zeilenumbruch Smartphone */
      @media only screen and (max-width: 600px) {
        nav ul {
            flex-wrap: wrap; /* Umbruch der Elemente auf neue Zeilen */
          }
          nav li {
            padding: 5px; /* Padding zwischen den Elementen */
          }

          
        }
        .popup {
            display: none;
            position: relative;
            top: 100%;
            left: 0;
            text-align: center;
            width: 90%; /* Ändere die Breite auf einen Prozentsatz, z.B. 90% */
            max-width: 800px; /* Ändere "max-width" zu "width", falls gewünscht */
            background-color: turquoise; /* Ändere die Hintergrundfarbe des Pop-ups, z.B. auf leichtes Grau mit geringer Deckkraft */
            border: 2px solid #ccc;
            padding: 10px;
            z-index: 1;
            color: black; /* Ändere die Textfarbe des Pop-ups auf Schwarz */
          }
          
    

/* Ändere die Textausrichtung für .OES.html p auf links */
     .OES.html p {
    text-align: left; 
}

.o-mail.html p {
    text-align: justify;
}

.centered-text {
    text-align: justify;
}
        .left-align {
            text-align: left; /* Links ausrichten */
        }
        
        .justify-align {
            text-align: justify; /* Im Blocksatz ausrichten */
        }
        


/* Stil für das Wort "SaaS" */
        .saas-text {
            cursor: pointer; /* Ändert den Cursor, um anzuzeigen, dass es anklickbar ist */
            text-decoration: underline; /* Unterstreicht den Text "SaaS", um anzuzeigen, dass er anklickbar ist */
            color: #2664b4c1; /* Textfarbe des Wortes "SaaS"*/
        }

 /* Stil für das Wort "SaaS", wenn die Maus darüber schwebt */
        .saas-container:hover .popup {
            display: block; /* Zeigt das Popup an, wenn der Container gehovered wird */
        }   


/* Zentriere die Bilder horizontal */
    .image-container {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh; /* Vollständige Bildschirmhöhe */
         position: relative; /* Für die Positionierung der Bilder */  
         }


/* Stil für das Wasserzeichenbild */
.watermark-image {
    opacity: 0.5; /* Ändere die Opazität nach Bedarf */
    position: absolute;
    z-index: 1; /* Hinter dem Hauptbild */
}

/* Stil für das Hauptbild */
.main-image {
    z-index: 2; /* Vordergrund */
}

/* Media Query für Smartphones (maximale Bildschirmbreite von 600px) */
@media (max-width: 600px) {
    .image-container {
        flex-direction: column; /* Staple die Bilder vertikal */
        height: auto; /* Automatische Höhe basierend auf Bildgröße */
    }

    .watermark-image,
    .main-image {
        width: 100%; /* Vollständige Bildschirmbreite */
        max-width: 100%; /* Begrenze die Bildbreite auf den Bildschirm */
        height: auto; /* Behalte das Seitenverhältnis bei */
    }
}


        
        /* Zentriere die Bilder horizontal */
        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* Vollständige Bildschirmhöhe */
            position: relative; /* Für die Positionierung der Bilder */
        }

        /* Stil für das Wasserzeichenbild */
        .watermark-image {
            opacity: 0.5; /* Ändere die Opazität nach Bedarf */
            position: absolute;
            z-index: 1; /* Hinter dem Hauptbild */
        }

        /* Stil für das Hauptbild */
        .main-image {
            z-index: 2; /* Vordergrund */


        }
/* Stil für den Ref-Link */
.link {
    text-decoration: none; /* Entfernt die Standardunterstreichung von Links */
    padding: 10px 20px; /* Fügt Innenabstand hinzu */
    font-size: 25px; /* Setzt die Schriftgröße */
    color: transparent; /* Macht den Text unsichtbar */
    background-image: url('Ref\ Link\ Join.png'); /* Setzt das Hintergrundbild */
    background-size: contain; /* Ändert die Hintergrundbildgröße (contain verhindert das Zuschneiden) */
    background-repeat: no-repeat; /* Verhindert die Wiederholung des Bildes */
    transition: transform 0.3s; /* Fügt eine animierte Übergangseffekt hinzu */
    margin-bottom: px; /* Fügt Abstand unter dem Link hinzu (kann angepasst werden) */
    margin-top: 50px;
    background-position: 60px center; /* Verschieben Sie das Bild um 10 Pixel nach rechts */
}

/* Stil für das Hand.ico-Bild */
.hand-icon {
    width: 20px; /* Die Breite des Hand.ico-Bildes anpassen */
    height: 20px; /* Die Höhe des Hand.ico-Bildes anpassen */
    background-image: url('hand.ico'); /* Pfad zum Hand.ico-Bild */
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 0px; /* Abstand zwischen dem Link und dem Hand.ico-Bild */
    display: inline-block; /* Damit die nachfolgenden Elemente nebeneinander angezeigt werden */
}


/* Stil für den Ref-Link beim Schweben (Hervorhebung) */
.link:hover {
    transform: scale(1.5); /* Vergrößert das Bild beim Schweben um 10% */
}


/* Stil für den Übersetzungstext neben dem Video */
    .translation-text {
         text-align: center; /* Zentriert den Text horizontal */
         color: black; /* Textfarbe auf Schwarz setzen */
         margin-top: 10px; /* Abstand nach oben */
         font-size: 16px; /* Schriftgröße anpassen */
         margin-right: 20px; /* Fügt rechten Abstand hinzu (20px, kann angepasst werden) */
         margin-left: 20px; /* Fügt linken Abstand hinzu (20px, kann angepasst werden) */
    }

/*Der Kasten für den Übersetzungstext */
    #translationWindow {
         position: absolute;
         right: 10px; /* Passe den Abstand zum rechten Rand an */
         top: 2300px; /* Passe den Abstand zum oberen Rand an */
         width: 440px; /* Passe die Breite nach Bedarf an */
         height: 100%; /* Vollständige Bildschirmhöhe */
         background-color: rgb(0, 270, 240);
         color: black;
         font-size: large;
         overflow-y: scroll;
         z-index: 999;
         padding: 20px; /* Fügt Innenabstand hinzu (20px auf allen Seiten) */
    }
 

/* Button Formatieurng ÜbersetzungO-Connect*/
#openTranslation {
    background-color: rgb(0, 270, 240); /* Ändere die Hintergrundfarbe nach Bedarf */
    color: black; /* Ändere die Textfarbe nach Bedarf */
}

/* Text <p> anders als der übrige Text auf der Homepage */
.translation-paragraph {
    font-size: 16px; /* Ändere die Schriftgröße nach Bedarf */
    font-weight: normal; /* Ändere die Schriftgewicht nach Bedarf (fett) */
    color: black; /* Ändere die Textfarbe nach Bedarf */
    margin-bottom: 10px;
    /* Füge weitere CSS-Regeln hinzu, um die gewünschte Formatierung zu erreichen */
}

.translation-paragraph-with-padding {
    padding: 10px; /* Fügt Innenabstand hinzu (20px auf allen Seiten) */
    margin-bottom: 3px;
}


/* Standard-Stile für Videos */
video {
    max-width: 100%; /* Videos auf die maximale Bildschirmbreite begrenzen */
    height: auto; /* Das Seitenverhältnis beibehalten */
}

/* Media Query für Smartphones (maximale Bildschirmbreite von 600px) */
@media (max-width: 600px) {
    video {
        width: 100%; /* Vollständige Bildschirmbreite für Videos auf Smartphones */
        max-width: none; /* Begrenzung der maximalen Breite aufheben */
    }
}


/* Bilder auf der linken Seite vom Text */
  .image-with-text {
          display: flex;
          align-items: center;
         justify-content: flex-start; /* Linksbündige Ausrichtung des Inhalts */
         margin: 20px; /* Abstand vom Rand */
         position: relative; /* Relative Positionierung für das Bild */
}

    .image {
         margin-right: 10px; /* Abstand zwischen Bild und Text */
         
    }

   .image img {
         max-width: 100%; /* Das Bild passt zur Container-Breite */
         height: auto; /* Behält das Seitenverhältnis bei */
         position: absolute; /* Absolute Positionierung des Bildes */
         left: -410px; /* Negative Position, um das Bild nach links zu verschieben */
    }

   .text {
         flex: 1; /* Der Text nimmt den verbleibenden Platz ein */
    }

/* Smartphones Bild links  (maximale Bildschirmbreite von 600px) */
    @media screen and (max-width: 600px) {
    .image-with-text {
        flex-direction: column; /* Auf Stapelrichtung ändern */
        text-align: center; /* Text zentrieren */
    }

    .image img {
        position: relative; /* Position zurücksetzen */
        left: 0; /* Zurücksetzen der Position auf 0 */
        margin-bottom: 10px; /* Einen Abstand zwischen Bild und Text hinzufügen */
    }
}