body {
    background: transparent; /* Ä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: auto; /* Ändere die Höhe auf "auto", damit das Bild das Seitenverhältnis beibehält */
    display: flex;
    justify-content: center;
    align-items: center;
}

#teaser img {
    max-width: 100%; /* Ändere die maximale Breite auf 100% für responsives Verhalten */
    height: auto; /* Ändere die Höhe auf "auto", damit das Bild das Seitenverhältnis beibehält */
    object-fit: cover;
}

@media screen and (max-width: 768px) {
    #teaser {
        height: auto; /* Höhe automatisch anpassen */
    }
}



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 Beige */
}

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: 300px; 
    margin-bottom: 20px; /* Füge etwas Abstand unterhalb des Logos hinzu */
}
#Omail_Logo_transparent {
    width: 100px;
    margin-bottom: 5px;
    margin-top: 40px;
}
#OConnect_Logo_transparent {
    width: 100px;;
    margin-bottom: 5px; 
    margin-top: 40px;
}
#ONet_Logo_transparent {
    width: 100px;
    margin-bottom: 5px;
    margin-top: 40px;
}
#OTrim_Logo_transparent {
    width: 100px;;
    margin-bottom: 20px;
    margin-top: 40px;
}
#OTracker_Logo_transparent {
    width: 100px;
    margin-bottom: 20px;
    margin-top: 40px;
}
#ODesk_Logo-transparent {
    width: 100px;;
    margin-bottom: 20px;
    margin-top: 40px;
}
/* Größe und Abstände für das Bild außerhalb einer Section */
#OES-APP {
    width: 500px; /* Neue Breite für das Bild außerhalb der Section */
    margin-bottom: 10px; /* Neuer Abstand unterhalb des Bildes außerhalb der Section */
    margin-top: 30px; /* Neuer Abstand oberhalb des Bildes außerhalb der Section */
}

/* Media Query für Omail Logo */
@media screen and (max-width: 768px) {
    #OES-APP {
        width: 60%; /* Die Breite des Logos auf 60% ändern */
        margin-bottom: 20px; /* Geringerer Abstand unterhalb des Logos */
    }
}

/* Media Query für Omail Logo */
@media screen and (max-width: 768px) {
    #Omail_Logo_transparent {
        width: 60%; /* Die Breite des Logos auf 60% ändern */
        margin-bottom: 10px; /* Geringerer Abstand unterhalb des Logos */
    }
}

/* Media Query für OConnect Logo */
@media screen and (max-width: 768px) {
    #OConnect_Logo_transparent {
        width: 60%; /* Die Breite des Logos auf 60% ändern */
        margin-bottom: 10px; /* Geringerer Abstand unterhalb des Logos */
    }
}

/* Media Query für ONet Logo */
@media screen and (max-width: 768px) {
    #ONet_Logo_transparent {
        width: 60%; /* Die Breite des Logos auf 60% ändern */
        margin-bottom: 10px; /* Geringerer Abstand unterhalb des Logos */
    }
}
/* Media Query für ONet Logo */
@media screen and (max-width: 768px) {
    #OTrim_Logo_transparent {
        width: 60%; /* Die Breite des Logos auf 60% ändern */
        margin-bottom: 10px; /* Geringerer Abstand unterhalb des Logos */
    }
}

/* Media Query für ONet Logo */
@media screen and (max-width: 768px) {
    #OTracker_Logo_transparent {
        width: 60%; /* Die Breite des Logos auf 60% ändern */
        margin-bottom: 10px; /* Geringerer Abstand unterhalb des Logos */
    }
}
/* Media Query für ONet Logo */
@media screen and (max-width: 768px) {
    #ODesk_Logo-transparent {
        width: 60%; /* Die Breite des Logos auf 60% ändern */
        margin-bottom: 10px; /* Geringerer Abstand unterhalb des Logos */
    }
}

.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; /* erzwingt keinen Zeilenumbruch wird horizontal ausgerichtet undnimmt nur so viel Breite ein, wie der Inhalt erfordert */
}


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;
        }

/* hellbaue Farbe  für Links innerhalb von .highlight-blue - WIRD NICHT VERWENDET */
        p .highlight-blue a {
            color: rgb(0, 270, 240);
            font-weight: normal;
            margin-bottom: 20px;
            margin-top: 20px;
        }
/* hellbaue Farbe  für Links innerhalb von .highlight-blue */
.highlight-blue-link a {
           color: rgb(0, 270, 240) !important; /* Hellblaue Farbe für Links innerhalb von .highlight-blue-link */
           font-weight: normal;
            margin-bottom: 20px;
            margin-top: 20px;
}





        /* unterstrichen und kursiv im allemeinen Text */
        .underline-italic {
            text-decoration: underline;
            font-style: italic;
        }
        
        

    /* Dunkelblauer Text für Impressum und Datenschutz*/    
      p .info {
            text-align: justify;/* Blocksatz- Text*/
            color: darkblue; /* 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 */
      }

 /* 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: 10px; /* Erhöht den Abstand oberhalb von h2 auf 20px (oder einen anderen gewünschten Wert) */
            margin-bottom: 20px; /* Erhöht den Abstand unterhalb von h2 auf 10px (oder einen anderen gewünschten Wert) */
        }

         h4{
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            font-size: 50px; /* Schriftgröße-anpassen nach Bedarf */
            color: darkblue; /*  Textfarbe */
            margin-top: 10px; /* Erhöht den Abstand oberhalb von h2 auf 20px (oder einen anderen gewünschten Wert) */
            margin-bottom: 20px; /* 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: 768px) {
        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;/* Important ist wichtig, funktioniert sonst nicht*/
        }
      }

/* Zeilenumbruch Smartphone */
      @media only screen and (max-width: 768px) {
        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 */
          }
          
    
/*Textausrichtung*/
    /* Ändere die Textausrichtung für .OES.html p auf links */
        .OES.html p {
             text-align: left; 
        }
/* Ändere die Textausrichtung für .o-mail..html p auf links */
        .o-mail.html p {
    text-align: justify;
        }
/* Definierte Textabschnitte Einzelne Textabschnitte werden zentriert */
        .centered-text {
    text-align: center; /* zentrieren*/
        }
        .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: 768px) {
    .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: 70vh; /* 70 von 100, damit nicht der gesamte Bildschirm mit Logo voll ist */
            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 Bild-Join the future*/
.link {
    text-decoration: none;

    margin-top: 20px; /* Passen Sie den oberen Abstand an */
    padding: 20px 40px; /* Passen Sie den Innenabstand an */
    font-size: 0; /* Schriftgröße auf 0 setzen, da Sie keinen sichtbaren Text haben */
    color: transparent;
    background-image: url('Ref_Link_Join.png');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.5s;
    background-position: center; /* Zentrieren Sie das Bild horizontal */
    display: inline-block; /* Inline-Block, damit Sie die Breite und Höhe festlegen können */
    width: 100px; /* Breite des Links anpassen */
    height: 10px; /* Höhe des Links anpassen */
    text-align: center; /* Zentrieren Sie den Text innerhalb des Links horizontal */
}

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


/* Media Query für kleinere Bildschirme wie Smartphones */
@media (max-width: 768px) {
    .link {
        background-position: center;
        background-size: 150px 30px;
      
        margin-bottom: 0px;
    }
}

/* 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 */
    margin-right:px;
}


/* Stil für den animierten Link auf größeren Bildschirmen */
.animated-link {
    text-decoration: underline;
    color: black;
    transition: transform 0.3s; /* Hinzugefügte Transition für die Transformation */
    animation: pulse 2s infinite alternate; /* Pulsieren Animation */
}

@keyframes pulse {
    0% {
        color: black;
        transform: scale(1); /* Normalgröße */
    }
    50% {
        color: rgb(0, 270, 240);
        transform: scale(1.1); /* Vergrößern auf 110% der Originalgröße */
    }
    100% {
        color: black;
        transform: scale(1); /* Zurück zur Normalgröße */
    }
}

/* Media Query für Smartphones */
@media screen and (max-width: 768px) {
    /* Stil für den animierten Link auf Smartphones */
    .animated-link {
        display: block;
        text-align: center;
        padding: 10px 0;
        font-size: 18px;
        animation: pulse 2s infinite alternate; /* Pulsieren Animation auf Smartphones aktivieren */
    }
}





/* 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) */
    }

/* Media Query für Smartphones (maximale Bildschirmbreite von 768px) */
@media (max-width: 768px) {
    .translation-text {
        font-size: 14px; /* Kleinere Schriftgröße */
        line-height: 1; /* Verringert den Zeilenabstand, um den Text enger beieinander anzuordnen */
        margin: 10px 0; /* Reduziert den vertikalen Abstand um den Text (0 oben/unten, 10px links/rechts) */
    }
}



/*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) */
    }
 
/* Media Query für Smartphones (maximale Bildschirmbreite von 768px) */
@media (max-width: 768px) {
    #translationWindow {
        right: auto; /* Setzt den Abstand zum rechten Rand zurück */
        left: 50%; /* Zentriert das Element horizontal */
        transform: translateX(-50%); /* Verschiebt das Element um 50% seiner eigenen Breite nach links, um es zu zentrieren */
        width: 90%; /* Ändere die Breite nach Bedarf */
        max-width: 400px; /* Maximal zulässige Breite */
    }
}


/* 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: 90%; /* Videos auf die maximale Bildschirmbreite begrenzen */
    height: auto; /* Das Seitenverhältnis beibehalten */
}



/* Video  - Media Query für Smartphones */
@media (max-width: 768px) {
    /* Ändern Sie die Breite und den Rand für das Video-Container */
    #videoContainer {
        width: calc(100% - 60px); /* Die Breite auf die Bildschirmbreite minus 60px (30px rechts und 30px links) setzen */
        margin: 0 30px; /* 30px Rand links und rechts hinzufügen */
    }

    /* Ändern Sie die Video-Breite und Höhe */
    video {
        width: 100%;
        height: auto;
    }
}




    .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 */
    }