/* LoggiS --------------------------------------------------------*/

.Product_LoggiT_PageContainer {
    /*für IE9-11 */
    display: inline-block;
    background-color: transparent;
    width: 100%;
    position: relative;
    left: 0px;
    top: 0px;
    padding: 0;
    margin-top: -16px !important;
    display: flow-root;
}

    .Product_LoggiT_PageContainer > *:first-child {
        margin-top: 0px;
    }


.Product_LoggiT_HeaderImage {
    background-color: #cccccc;
    height: 310px;
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 12px 0px 0px 0px;
    position: relative;
    z-index: 1;
}


.Product_LoggiT_MenuFeld {
    background-color: #D8D8D8;
    height: 310px;
    width: 250px;
    margin: 0px 0px 0px 0px;
    position: absolute;
    z-index: 10000;
    left: 0px;
    top: 0px;
}

.Product_LoggiT_Bkgnd {
    background-color: #efefef;
    box-shadow: 0px 0px 4px #8c8c8c;
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px 20px 40px;
}

#ProductHeaderLabel {
    grid-column: 1 / -1;
}


.Product_LoggiT_Infofeld {
    background-color: transparent;
    padding: 10px 30px 40px 10px;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    column-gap: 40px;
    align-items: start;
}

.Product_LoggiT_FirstLabelFrame {
    max-width: 520px;
    padding: 20px 0 0 0;
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12pt;
    grid-column: 1;
}

.Product_LoggiT_ImageFeld1 {
    max-width: 680px;
    padding: 20px 0 0 0;
    width: 100%;
    justify-self: end; /* rechts in der Spalte */
    grid-column: 2;
}

    .Product_LoggiT_ImageFeld1 img {
        width: 100%;
        height: auto;
        display: block;
        grid-column: 2;
    }


/*------------------------- LogiS-T Abschnitt -----------------------------------------*/
.Product_LoggiS_T_Infofeld {
    background-color: transparent;
    margin: 0;
    padding: 20px 30px 30px 10px;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(220px, 360px);
    column-gap: 50px;
    align-items: start;
    position: relative; /* kann bleiben, ist aber nicht mehr kritisch */
}

/* Linke Spalte */
.Product_LoggiS_T_TextCol {
    grid-column: 1;
    min-width: 0; /* wichtig für lange Texte */
}


.Product_LoggiS_T_FirstLabelFrame {
    margin: 0;
    padding: 12px 0 0 0;
    max-width: 600px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight: normal;
    color: black;
}

.Product_LoggiS_DescriptionLabel {
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight: normal;
    color: black;
}

.Product_LoggiS_T_Item_Container {
    padding: 16px 0 0 0;
    max-width: 560px;
}

.Product_LoggiS_T_Item_Row {
    margin: 0 0 14px 0;
    padding: 0 0 10px 0px;
}

    .Product_LoggiS_T_Item_Row:last-child {
        margin-bottom: 0;
    }

/* Rechte Spalte */
.Product_LoggiS_T_ImageContainer {
    grid-column: 2;
    position: static;
    max-width: 300px;
    width: 100%;
    justify-self: end; /* rechts ausrichten */
    padding-right: 50px;
    padding-top: 50px;
}

    /* Bild responsiv */
    .Product_LoggiS_T_ImageContainer img {
        width: 100%;
        height: auto;
        display: block;
    }




/*------------------------- LogiS-TL Abschnitt -----------------------------------------*/

.Product_LoggiS_TL_Infofeld {
    background-color: transparent;
    margin: 0;
    padding: 20px 30px 30px 10px;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(220px, 460px);
    column-gap: 20px;
    align-items: start;
    position: relative; /* kann bleiben, ist aber nicht mehr kritisch */
}

/* Linke Spalte */
.Product_LoggiS_TL_TextCol {
    grid-column: 2;
    min-width: 0; /* wichtig für lange Texte */
}

.Product_LoggiS_TL_ImageCol {
    grid-column: 1;
    min-width: 0; /* wichtig für lange Texte */
}




.Product_LoggiS_TL_FirstLabelFrame {
    margin: 0;
    padding: 12px 0 0 0;
    max-width: 600px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight: normal;
    color: black;
}

.Product_LoggiS_TL_Item_Container {
    padding: 90px 0 0 0;
    max-width: 560px;
}

.Product_LoggiS_TL_Item_Row {
    margin: 0 0 14px 0;
    padding: 0 0 10px 0px;
}

    .Product_LoggiS_TL_Item_Row:last-child {
        margin-bottom: 0;
    }

/* Rechte Spalte */
.Product_LoggiS_TL_ImageContainer {
    grid-column: 2;
    position: static;
    max-width: 250px;
    width: 100%;
    justify-self:center; /* rechts ausrichten */

    padding-top: 50px;
}

    /* Bild responsiv */
    .Product_LoggiS_TL_ImageContainer img {
        width: 100%;
        height: auto;
        display: block;
    }




/*------------------------- LogiS-TH Abschnitt -----------------------------------------*/

.Product_LoggiS_TH_Infofeld {
    background-color: transparent;
    margin: 0;
    padding: 20px 30px 30px 10px;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(220px, 360px);
    column-gap: 50px;
    align-items: start;
    position: relative; /* kann bleiben, ist aber nicht mehr kritisch */
}

/* Linke Spalte */
.Product_LoggiS_TH_TextCol {
    grid-column: 1;
    min-width: 0; /* wichtig für lange Texte */
}


.Product_LoggiS_TH_FirstLabelFrame {
    margin: 0;
    padding: 12px 0 20px 0;
    max-width: 600px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight: normal;
    color: black;
}

.Product_LoggiS_TH_Item_Container {
    padding: 0 0 0 0;
    max-width: 560px;
}

.Product_LoggiS_TH_Item_Row {
    margin: 0 0 14px 0;
    padding: 0 0 10px 0px;
}

    .Product_LoggiS_TH_Item_Row:last-child {
        margin-bottom: 0;
    }

/* Rechte Spalte */
.Product_LoggiS_TH_ImageContainer {
    grid-column: 2;
    position: static;
    max-width: 300px;
    width: 100%;
    justify-self: end; /* rechts ausrichten */
    padding-right: 50px;
    padding-top: 50px;
}

    /* Bild responsiv */
    .Product_LoggiS_TH_ImageContainer img {
        width: 100%;
        height: auto;
        display: block;
    }


/*------------------------- LogiS-App Beschreibung Abschnitt -----------------------------------------*/

.Product_LoggiS_Description_Container {
    background-color: transparent; /* debug, später entfernen */
    margin: 0;
    padding: 10px 0 0px 10px;
    position: relative;
    z-index: 4;
}


/* Überschrift */
.Product_LoggiS_Description_Header {
    display: block;
    margin: 0 0 12px 0;
    font-weight: 700;
    font-size: 18px;
}

/* 2-Spalten-Layout */
.Product_LoggiS_Description_Grid {
    display: block; /* oder: display:flex; flex-direction:column; */
}



/* Text-Spalte */
.Product_LoggiS_Description_Text {
    display: flex;
    flex-direction: column;
    gap: 14px; /* Abstand zwischen den Item-Blöcken */
}


/* Wichtig: Label ist inline -> block machen */
.LoggiS_Description_Item_Container
.Product_LoggiS_Item_Header_Label {
    display: block;
    margin: 0 0 6px 0;
    font-weight: 700;
    line-height: 1.2;
}


/* Text darunter */
.LoggiS_Description_Item_Container
.Product_LoggiS_Item_Label {
    display: block;
    margin: 0;
    line-height: 1.35;
}

.LoggiS_Description_Row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    margin-bottom: 28px;
    align-items: start;
}


.Product_LoggiS_Description_Images {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* Bild */
.Product_LoggiS_Sample_Image_Container img,
.Product_LoggiS_Sample_Image_Container Image {
    width: 100%;
    height: auto;
    display: block;
}

.Product_LoggiS_ImageCaption {
    font-size: 10.5pt;
    color: #555;
    text-align: left;
    line-height: 1.2;
}


/* ===== Verlaufsgrafik – eigener Block ===== */

.Product_LoggiS_ChartSection {
    margin-left: 10px;
    padding-bottom: 40px;
    border-top: 1px solid #ddd;
}

.Product_LoggiS_ChartGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* Bild */
.Product_LoggiS_ChartImage img {
    width: 100%;
    height: auto;
    display: block;
}

/* Erklärung */
.Product_LoggiS_ChartText {
    font-size: 10.5pt;
    line-height: 1.5;
}


/* Caption */
.Product_LoggiS_ImageCaption {
    margin-top: 6px;
    font-size: 10.5pt;
    color: #555;
    text-align: center;
}




/* ===== Text Inbetriebnahme – eigener Block ===== */

.Product_LoggiS_Extension_Container {
    background-color: transparent;
    margin: 0px 0px 0px 0px;
    padding: 10px 0px 20px 10px;
    position: relative;
    top: 0px;
    left: 0px;
}

.Product_LoggiS_Extension_Item_Container
.Product_LoggiS_Item_Header_Label {
    display: block;
    margin: 0 0 6px 0;
    font-weight: 700;
}

.LoggiS_Extension_Item_Container 
.Product_LoggiS_Item_Label {
    display: block;
    margin: 0;
}

    /* Text */
.Product_LoggiS_Extension_Text {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 24px;
}

    .LoggiS_Extension_Item_Container {
        display: flex;
        flex-direction: column;
        gap: 4px; /* Abstand zwischen den Items */
    }

        .LoggiS_Extension_Item_Container:last-child {
            margin-bottom: 0px;
        }
 
    .Product_LoggiS_Description_Header {
        font-style: normal;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12pt;
        font-weight: bold;
        color: black;
    }

.Product_LoggiS_Common_Left,
.Product_LoggiS_Common_Right,
.Product_LoggiS_T_Item_Row,
.Product_LoggiS_TL_Item_Row,
.Product_LoggiS_TH_Item_Row,
.Product_LoggiS_Item_Header_Label {
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight: bold;
    color: black;
    display: block;
    margin: 0 0 0px 0
}

.Product_LoggiS_Common_Left,
.Product_LoggiS_Common_Right,
.Product_LoggiS_T_Item_Row,
.Product_LoggiS_TL_Item_Row,
.Product_LoggiS_TH_Item_Row,
.Product_LoggiS_Item_Label {
    font-style: italic;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11pt;
    font-weight: normal;
    color: black;
    margin-left: 0px;
    display: block;
}

/*================ Container Allgemein =================*/

.Product_LoggiS_Common_Container {
    background-color: transparent;
    margin: 0;
    padding: 20px 30px 30px 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 50px;
    align-items: start;
    position: relative; /* kann bleiben, ist aber nicht mehr kritisch */
}

/* Linke Spalte */
.Product_LoggiS_Common_Left {
    grid-column: 1;
    min-width: 0; /* wichtig für lange Texte */
}

/* Rechte Spalte */
.Product_LoggiS_Common_Right {
    grid-column: 2;
    min-width: 0; /* wichtig für lange Texte */
}



/*================ Mobile Ansicht =================*/
@media (max-width: 900px) {
    .Product_LoggiT_Infofeld {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }

    .Product_LoggiT_ImageFeld1 {
        justify-self: center;
    }
}

@media (max-width: 900px) {
    .Product_LoggiS_T_Infofeld {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .Product_LoggiS_T_ImageContainer {
        grid-column: 1;
        justify-self: center;
        max-width: 210px;
    }
}

@media (max-width: 900px) {
    .Product_LoggiS_TH_Infofeld {
        grid-template-columns: 1fr;
        row-gap: 24px;
    }

    .Product_LoggiS_TH_ImageContainer {
        grid-column: 1;
        justify-self: center;
        max-width: 210px;
    }
}