:root {
    --col-bg:     #222;
    --col-fg:     #fff;
    --col-blau:   #77f;
    --col-link:   #ccc;
    --col-border: #888;
    --col-th:     green;
    --col-td:     #555;
}
@media (prefers-color-scheme: light) {
    :root {
        --col-bg:     #eee;
        --col-fg:     #000;
        --col-blau:   #00f;
        --col-link:   #444;
        --col-border: #888;
        --col-th:     #0e0;
        --col-td:     #ccc;
    }
}
body {
    background: var(--col-bg);
    margin: 0 auto;
    max-width: 1000px;
    color: var(--col-fg);
    margin-top: 1em;
}
.blue a {
    color: var(--col-blau);  
}
a {
    color: var(--col-link);
}
table {
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid var(--col-border);
    padding: 0 .5em
}
th {
    background-color: var(--col-th);
}
td {
    background-color: var(--col-td);
}
.interins h2 {
    text-align: center;
}
.interins a {text-decoration: underline !important}
hr {margin-top: 1.5em;}
#zones {
    display: inline-flex;
     justify-content: space-between;
     width: 100%;
}
#zones a {display: flex;}
@media screen and (max-width: 768px) {
    * {text-align: center}
    body {
        padding: .4em;
    }
    a {
        text-decoration: none;
        width: 100%;
    }
    span {
        display: block;
        color: var(--col-border);
        font-style: italic;
        font-size: .8em;
    }
    #zones {
        display: block;
    }
    #zones a {
        display: block;
        text-align: center;
        padding: .2em;
    }
    table, tr, td, th {
        text-align: left;
    }
}
