* {
    box-sizing: border-box
}
a {
    color: #173a83;
    text-decoration: underline;
}
.nav-content{
    font-weight: bold;
}
.nav-content a{
    text-decoration: none;
}
.inhalt img {
    max-width: 100%;
    height: auto;
}
body {
    background-color: #c7d3e9;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 5px
}

table, tr, td, p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px
}

h1, h2, h3, h4, h5, h6 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0 0 15px 0
}

.main-container {
    max-width: 780px;
    background-color: #e9f47b;
    border: 1px outset #000;
    margin: 10px auto 0 auto;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.header {
    width: 100%
}

.header img {
    width: 100%;
    height: auto;
    display: block
}

.content-wrapper {
    display: flex;
    flex-wrap: wrap;
    min-height: 400px
}

.nav {
    flex: 0 0 150px;
    padding: 5px;
    background-color: #e9f47b
}

.nav-content {
    font-size: 12px
}

.nav-content > table > tbody > tr {
    padding: 5px 0;
}

.inhalt {
    flex: 1;
    padding: 10px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    word-break: break-word
}

.inhalt table {
    max-width: 100%;
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    margin: 1em 0;
    background: #fffbe5;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #dd9;
    table-layout: auto
}

.inhalt th, .inhalt td {
    border: 1px solid #dd9;
    padding: 8px;
    text-align: left;
    vertical-align: top
}

.inhalt th {
    background: #f3f37b;
    font-weight: bold
}

.inhalt tr:nth-child(even) {
    background: #fcfde7
}

.inhalt td a {
    color: #4169e1;
    text-decoration: underline
}

@media (max-width: 900px) {
    .main-container {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        border: 0;
        border-radius: 0;
        padding-left: 0;
        padding-right: 0
    }

    body {
        padding: 0
    }

    .inhalt table {
        min-width: 600px;
        font-size: 11px
    }

    .inhalt th, .inhalt td {
        padding: 6px 4px;
        min-width: 70px;
        white-space: nowrap
    }
}

@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column
    }

    .nav {
        flex: none;
        order: 1;
        margin-bottom: 10px;
        padding: 8px;
        border-bottom: 2px solid #d4d45a
    }

    .inhalt {
        order: 2;
        padding: 8px
    }

    h1 {
        font-size: 16px;
        margin-bottom: 10px
    }

    .inhalt table {
        min-width: 500px;
        font-size: 11px
    }

    .inhalt th, .inhalt td {
        padding: 6px 4px;
        min-width: 70px;
        white-space: nowrap
    }

    .inhalt th:first-child, .inhalt td:first-child {
        min-width: 100px;
        position: sticky;
        left: 0;
        background: #f3f37b;
        z-index: 10;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1)
    }

    .inhalt td:first-child {
        background: #fffbe5;
        font-weight: bold
    }

    .inhalt tr:nth-child(even) td:first-child {
        background: #fcfde7
    }
}

@media (max-width: 600px) {
    .inhalt {
        padding: 6px 10px
    }

    .inhalt table {
        min-width: 450px;
        font-size: 10px
    }

    .inhalt th, .inhalt td {
        padding: 4px 2px;
        font-size: 10px
    }

    .inhalt th:first-child, .inhalt td:first-child {
        min-width: 90px
    }

    .inhalt::-webkit-scrollbar {
        height: 8px;
        background: #eee
    }

    .inhalt::-webkit-scrollbar-thumb {
        background: #c7d3e9;
        border-radius: 8px
    }
}

@media (max-width: 768px) {
    .nav-content {
        display: flex;
        flex-wrap: wrap;
        gap: 8px
    }
}

@media (max-width: 480px) {
    .nav-content {
        flex-direction: column;
        gap: 5px
    }
}

@media (max-width: 780px) {
    .header img {
        max-width: 100%;
        height: auto
    }
}

.inhalt tr:nth-child(even) {
    background: #fcfde7
}