/* CSS-Stylesheet für eingefügte Elemente */
:root {

    --color-primary: #008E8D;
    --color-secondary-dark1: #005576;
    --color-secondary-dark2: #006790;
    --color-secondary-light1: #55A894;
    --color-secondary-light2: #B8E5DB;
    --color-text: #5D6165;
    --color-secondary-grey1: #A3A9AE;
    --color-secondary-grey2: #D3D5D7;    
}

/* ------------------- Allgemein -------------------- */

/* --- Rahmen um Bilder/Grafiken --- */
.image img {
    border: 1px solid grey; /* Ändern Sie die Farbe und Breite des Rahmens nach Bedarf */
}

.image.no-border {
    border: none !important;
}

/* ------------------- Zertifikate-------------------- */

/* --- Tabelle Checkliste Bilddateien --- */

/* Dicke Linie über der Zeile "Unternehmensschriftart" */
table.custom-table-schriftart tr:nth-child(10) td {
    border-top: 1.5px solid var(--color-secondary-light2); 
}
table.custom-table-schriftart tr:nth-child(12) td {
    border-top: 1.5px solid var(--color-secondary-light2); 
}

/* Dicke Linie vertikale Tennlinie */
table.custom-table-schriftart td:nth-child(1) {
    border-right: 1.5px solid #e1e4e5; /* Trennlinie zwischen Spalte 1 und 2 */
}
table.custom-table-schriftart td:nth-child(2) {
    border-right: 1.5px solid #e1e4e5; /* Trennlinie zwischen Spalte 1 und 2 */
}
table.custom-table-schriftart td:nth-child(3) {
    border-right: 1.5px solid #e1e4e5; /* Trennlinie zwischen Spalte 1 und 2 */
}

/* Dicke Linie über der Zeile "Bilddateien" */
table.custom-table-bilddateien tr:nth-child(7) td {
    border-top: 1.5px solid var(--color-secondary-light2); 
}

/* Dicke Linie vertikale Tennlinie */
table.custom-table-bilddateien td:nth-child(1) {
    border-right: 1.5px solid #e1e4e5; /* Trennlinie zwischen Spalte 1 und 2 */
}

/* --- Tabelle Checkliste Farben --- */

/* Dicke Linie vertikale Tennlinie */
table.custom-table-farben td:nth-child(1) {
    border-right: 1.5px solid #e1e4e5; /* Trennlinie zwischen Spalte 1 und 2 */
}

/* Zellenfarbe setzen (Zeilen 2) */
 table.custom-table-schriftart tr:nth-child(n+2):nth-child(-n+19) td:first-child {
    background-color: #f3f6f6;
} 
table.custom-table-schriftart tr:nth-child(n+2):nth-child(-n+19) td:first-child {
    border-top: 1.5px solid #f3f6f6;
} 

/* Zellenfarbe setzen (Zeilen 2) */
table.custom-table-schriftart tr:nth-child(n+2):nth-child(-n+9) td:nth-child(2) {
    background-color: #f3f6f6;
} 
table.custom-table-schriftart tr:nth-child(n+2):nth-child(-n+9) td:nth-child(2) {
    border-top: 1.5px solid #f3f6f6;
} 

/* Zellenfarbe setzen (Zeilen 2) */
table.custom-table-schriftart tr:nth-child(n+13):nth-child(-n+19) td:nth-child(2) {
    background-color: transparent;
} 
table.custom-table-schriftart tr:nth-child(n+13):nth-child(-n+19) td:nth-child(2) {
    border-top: 1.5px solid transparent;
} 

/* --- Tabelle Schriftart Schriftart pro Zeile anpassen --- */

/* Schriftart für Arial */
table.custom-table-schriftart tr:nth-child(1) td:nth-child(3) {
    font-family: Arial, sans-serif;
}

/* Schriftart für Courier New nur für die gewünschte Zelle */
table.custom-table-schriftart tr.row-odd:nth-of-type(2) td:nth-child(3) p {
    font-family: "Courier New", monospace !important;
}
/* Schriftart für Garamond */
table.custom-table-schriftart tr:nth-child(3) td:nth-child(3) {
    font-family: Garamond, serif;
}

/* Schriftart für Georgia */
table.custom-table-schriftart tr:nth-child(4) td:nth-child(3) {
    font-family: Georgia, serif;
}

/* Schriftart für MS Sans Serif */
table.custom-table-schriftart tr:nth-child(5) td:nth-child(3) {
    font-family: "MS Sans Serif", sans-serif;
}

/* Schriftart für Segoe UI */
table.custom-table-schriftart tr:nth-child(6) td:nth-child(3) {
    font-family: "Segoe UI", sans-serif;
}

/* Schriftart für Tahoma */
table.custom-table-schriftart tr:nth-child(7) td:nth-child(3) {
    font-family: Tahoma, sans-serif;
}

/* Schriftart für Times New Roman */
table.custom-table-schriftart tr:nth-child(8) td:nth-child(3) {
    font-family: "Times New Roman", serif;
}

/* Schriftart für Verdana */
table.custom-table-schriftart tr:nth-child(9) td:nth-child(3) {
    font-family: Verdana, sans-serif;
}

/* Schriftart für Roboto */
table.custom-table-schriftart tr:nth-child(9) td:nth-child(3) {
    font-family: Roboto;
}

/* --- Zwei Spalten Landscape Zertifikat mit Tags und mit Dummy-Text --- */
  /* Container für die beiden Spalten */
.twocol {
    display: flex; /* Flexbox aktivieren */
    flex-wrap: wrap; /* Zeilenumbruch erlauben, wenn der Platz nicht ausreicht */
    gap: 20px; /* Abstand zwischen den Spalten */
}

/* Linke Spalte */
.leftside-landscape {
    flex: 1 1 20%; /* Flexibles Verhalten: mindestens 20% Breite */
    padding: 0px 10px 0px 0px;
    /* border-right: 1px solid var(--color-secondary-dark1); */ /* Trennlinie */
}

/* Rechte Spalte */
.rightside-landscape {
    flex: 1 1 75%; /* Flexibles Verhalten: mindestens 75% Breite */
}

/* Media Query für kleinere Bildschirme */
@media (max-width: 768px) {
    .twocol {
        flex-direction: column; /* Spalten untereinander anordnen */
    }

    .leftside-landscape {
        border-right: 1px solid white; /* Trennlinie entfernen */
        padding: 0; /* Padding anpassen */
    }

    .rightside-landscape {
        margin-left: 0; /* Abstand entfernen */
    }
}

/* --- Zwei Spalten Portrait Zertifikat mit Tags und mit Dummy-Text --- */
 /* Container für die beiden Spalten */
 .twocol {
    display: flex; /* Flexbox aktivieren */
    flex-wrap: wrap; /* Zeilenumbruch erlauben, wenn der Platz nicht ausreicht */
    gap: 20px; /* Abstand zwischen den Spalten */
}

/* Linke Spalte */
.leftside-portrait {
    flex: 1 1 20%; /* Flexibles Verhalten: mindestens 20% Breite */
    padding: 0px 10px 0px 0px;
    /* border-right: 1px solid var(--color-secondary-dark1); */ /* Trennlinie */
}

/* Rechte Spalte */
.rightside-portrait {
    flex: 1 1 75%; /* Flexibles Verhalten: mindestens 75% Breite */
}

/* Media Query für kleinere Bildschirme */
@media (max-width: 768px) {
    .twocol {
        flex-direction: column; /* Spalten untereinander anordnen */
    }

    .leftside-portrait {
        border-right: 1px solid white; /* Trennlinie entfernen */
        padding: 0; /* Padding anpassen */
    }

    .rightside-portrait {
        margin-left: 0; /* Abstand entfernen */
    }
}

/* --- Zwei Spalten Video und Newsletterbereich nebeneinander --- */
/* Container für Video und Bild nebeneinander */
.pair-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.video-side {
    flex: 1;
    padding: 0px 10px 0px 0px;
    align-self: flex-start; /* Inhalt oben ausrichten */
}

.video-side video {
    width: 100%;
    height: auto;
}

.image-side {
    flex: 1;
    padding: 0px 0px 0px 10px;
    align-self: flex-start; /* Inhalt oben ausrichten */
}

.image-side img {
    padding-top: 5px; /* Bilder 5px nach unten */
}


/* Media Query für kleinere Bildschirme */
@media (max-width: 1024px) {
    .pair-row{
        flex-direction: column; /* Spalten untereinander anordnen */
    }

    .video-side, .image-side {
        padding: 0; /* Padding anpassen */
    }

      .video-side {
        margin-bottom: 10px; /* Abstand zwischen Video und Bild */
    }
}

/* --- Scrollbar für desktop Screenshots --- */
.desktop-screenshot {
    width: 100%;
    max-height: 750px;
    overflow-y: auto;
    border: 1px solid var(--color-text);
    margin: 30px auto;
   }

/* --- Scrollbar für mobile Screenshots --- */
.mobile-screenshot {
    width: 50%;
    min-width: 320px; /* Nie kleiner als 280px */
    max-height: 750px;
    overflow-y: auto;
    border: 1px solid var(--color-text);
    margin: 30px 0;
}

/* --- Zwei Spalten für Letter-pdf und A4-Druck Ansichten --- */

/* Container für Video und Bild nebeneinander Portrait */
.one-row {
    text-align: center;
    padding-top: 30px;
    margin-bottom: 20px;
}

.double-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.pdf-side {
    flex: 50.693%;
    padding: 0px 10px 0px 0px;
    align-self: flex-start; /* Inhalt oben ausrichten */
    text-align: center;
}

.a4-side {
    flex: 49.307%;
    padding: 0px 0px 0px 10px;
    align-self: flex-start; /* Inhalt oben ausrichten */
    text-align: center;
}

/* Media Query für kleinere Bildschirme */
@media (max-width: 1024px) {
    .double-row{
        flex-direction: column; /* Spalten untereinander anordnen */
    }

    .pdf-side {
        width: 100%;
        padding: 0; /* Padding anpassen */
        margin: 0 auto 0 auto;
    }

     .a4-side {
        width: 97.267%;
        padding: 0; /* Padding anpassen */
        margin: 0 auto 0 auto;
    }

}

/* Container für Video und Bild nebeneinander Landscape */
.one-row-landscape {
    text-align: center;
    padding-top: 30px;
    margin-bottom: 20px;
}

.double-row-landscape {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.pdf-side-landscape {
    flex: 48.47%;
    padding: 0px 10px 0px 0px;
    align-self: flex-start; /* Inhalt oben ausrichten */
    text-align: center;
}

.a4-side-landscape {
    flex: 51.53%;
    padding: 0px 0px 0px 10px;
    align-self: flex-start; /* Inhalt oben ausrichten */
    text-align: center;
}

/* Media Query für kleinere Bildschirme */
@media (max-width: 1024px) {
    .double-row-landscape {
        flex-direction: column; /* Spalten untereinander anordnen */
    }

    .pdf-side-landscape {
        width: 94.074%;
        padding: 0; /* Padding anpassen */
        margin: 0 auto 0 auto;
    }

      .a4-side-landscape {
        width: 100%;
        padding: 0; /* Padding anpassen */
        margin: 0 auto 0 auto;
    }

}