table {
    border-spacing: 1px;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    /*max-width: 1200px;*/
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
table * {
    position: relative;
}
table td, table th {
    padding-left: 8px;
}
table th {
    color: white;
}
table thead tr {
    height: 60px;
    background: #00B5AF;
    font-size: 16px;
}
table tbody tr {
    height: 48px;
    border-bottom: 1px solid #E3F1D5;
}
table tbody tr:last-child {
    border: 0;
}
table td, table th {
    text-align: left;
}
table td.l, table th.l {
    text-align: right;
}
table td.c, table th.c {
    text-align: center;
}
table td.r, table th.r {
    text-align: center;
}
/*
Richtwerte für das Umbrechen:
60.0em bei 7 Spalten
50.0em bei 6 Spalten
35.0em bei 3 Spalten
*/
@media screen and (max-width: 50.0em) {
    table {
        display: block;
    }
    table > *, table tr, table td, table th {
        display: block;
    }
    table thead {
        display: none;
    }
    table tbody tr {
        height: auto;
        padding: 8px 0;
    }
    table tbody tr td {
        padding-left: 45%;
        margin-bottom: 12px;
    }
    table tbody tr td:first-child {
        background: #00B5AF;
        font-weight: bold;
        color: white;
    }

    table tbody tr td:last-child {
        margin-bottom: 0;
    }
    table tbody tr td:before {
        position: absolute;
        /*font-weight: 700;*/
        width: 40%;
        left: 10px;
        top: 0;
    }
    table tbody tr td:nth-child(1):before {
        content: "";
        background: #00B5AF;
    }

    /*
    hier müssen die Namen aus der ersten Zeile mit den Überschriften stehen, damit der Umbruch der Tabelle auf den Mobile-Gerät funktioniert:
     */
    table tbody tr td:nth-child(2):before {
        content: "Produkt";
    }
    table tbody tr td:nth-child(3):before {
        content: "Steckverbinder";
    }
    table tbody tr td:nth-child(4):before {
        content: "Schnittstelle";
    }
    table tbody tr td:nth-child(5):before {
        content: "Anwendung";
    }

}
body {
    background: #F6F6F6;
    font: 400 14px "Calibri", "Arial";
    padding: 0px;
    margin: 0px auto 0px auto;
}

blockquote {
    color: white;
    text-align: center;
}

img {
    width: 120px;
}
a {
    color: #00B5AF;
    font-weight: bold;
}