body {
    background-color: #fff;
    background-image: url("/images/background.jpg");
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
    color: #000;
    font-family: "Halvetica Neue" , Halvetica, Arial, sans-serif;
    font-family: -apple-system, BlinkMacSystem, "Segoe UI" , Roboto, "Helvetica Neue" , Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.25;
    margin: 0rem;
}

.siteID {
    background-color: #1c446f;
    font-size: 10px;
    padding: 0.5rem;
}

.main {
    display: flex;
   align-items: flex-start;
    margin: 1rem;
    gap: 2rem;
}
/*max-width Muss immer gleich sein mit media-quarri in sideNavigation.css für "navigationList*/
@media (max-width: 1300px) {
    .main {
        display: flex;
        flex-direction: column;
    }
}

.mainContent {
    flex: 1;                   
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px; 
    padding: 0rem 2rem 2rem 2rem;
}

.sideSpace { /* sideSpace gleicht den Platz, den die Navigation auf der linken Seite benoetigt, rechts wieder aus. Wichtig für Textseiten*/
    width: 18%;
    margin-left: 1rem;              
    flex-shrink: 0;           
}

.mainContentText {
    max-width: 90%;
}

/*==============================================
 Design für Text/Listen (wie auf der Hauptseite) 
 ===============================================*/

.mainContentList {
    list-style: none;
}

.mainListHead {
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    margin-bottom: 1rem;
}

.mainListTyp1 {
    text-align: left;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 5px;
    background: linear-gradient( 90deg, rgba(20, 169, 159, 0.20) 0%, rgba(20, 169, 159, 0.15) 60%, rgba(20, 169, 159, 0.00) 100% );;
}

.mainListTyp2 {
    text-align: right;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 5px;
    background: linear-gradient( 270deg, rgba(2, 127, 255, 0.20) 0%, rgba(2, 127, 255, 0.15) 60%, rgba(2, 127, 255, 0.00) 100% );
}

/*===============================================
Design Bildkacheln (wie auf der Seite "produkte")
=================================================*/

.mainContentGrid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 1rem;
}
.mainContentGridImage {
    margin: 0.5rem;
    max-width: 300px;
    background-color: #4480b8;
    color: #fff;
    padding: 0.5rem;
    border-radius: 5px;
    transition: transform .3s;
}

.mainContentGridImage img{
    width: 100%;
}

.mainContentGridImageX {
    margin: 0.5rem;
    max-width: 300px;
    background-color: #1c446f;
    color: #fff;
    padding: 0.5rem;
    border-radius: 5px;

}

.mainContentGridImageX img{
    width: 100%;
}

.mainContentGridImage:hover {
    background-color: #13a89e;
    transition: transform .3s;
    transform:scale(1.05);
}

a.mainContentGridLink {
    color: #fff;
    text-decoration: none;
}

/*===================================
Design Informationsseiten ohne Design
=====================================*/

.mainContentInformation {
    padding: 1rem;
    text-align: left;
}

.mainContentInformationList {
    list-style: none;
}

/*========================================================
Design Produktseiten (Text neben Bild) und Tabelle darunter
==========================================================*/

.mainContentProductTop {
    margin: 2rem;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    justify-content: space-around;
}

@media (max-width: 768px) {
    .mainContentProductTop {
        display: flex;
        flex-direction: column;
    }
}

.mainContentProductText {
    display: flex;
    min-width: 400px;
    max-width: auto;
    text-align: left;
    flex-direction: column;
}

.mainContentProductImage{
    max-width: 400px;
}

.mainContentProductImage img {
    width: 100%;
}

.mainContentProductGrid {
  display: grid;
  grid-template-columns: 150px auto 200px;
  gap: 0.5rem;
}

.mainContentProductGridHead {
    background-color: #4480b8;
    padding: 0.5rem;
    color: #fff;
    border-radius: 5px;
}

.mainContentProductGridRow {
    padding-bottom: 0.5rem;
    border-bottom: solid 2px #1c446f;
    text-align: left;
}

.mainContentProductLink {
    padding: 1rem;
    text-decoration: none;
    background-color: #4480b8;
    border-radius: 5px;
}

.mainContentProductDownload {
    margin: 3rem;
    transition: transform .3s;
}

.mainContentProductDownload:hover {
    margin: 3rem;
    transition: transform .3s;
    transform: scale(1.05);
}

a.mainContentProductLink {
    color: #fff;
}

.mainContentProductLink:hover {
    background-color: #13a89e;
    text-decoration: underline;
    transition: transform .3s;
}