:root {
    --color-primary: #99B9B7;   /* primary */
    --color-secondary: #6E777B; /* secondary */
    --color-tertiary: #EA5C52;  /* tertiary */
    --color-background: #252526;/* background */
}

/* Tabellen */
.desktop td {
    border-width: 1px;
    border-style: dotted;
    border-color: var(--color-secondary);
    border-collapse: collapse;
    padding: 5px;
}

.desktop th {
    text-align: center;
    background-color: var(--color-tertiary);
    color: var(--color-background);
}

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }

/* Druckausgabe */
@media print {
    .mu {display:none}
    .footer {display:none}
    .buttons {display:none}
}

@page {
    margin: 0.5cm;
}

/* Footer */
.footer {
    position: fixed;
    bottom: 0px;
    background: var(--color-background);
    color: var(--color-primary);
    padding: 3px;
    width: 100%;
    border-top: 1px solid var(--color-tertiary);
    margin-left: 0px;
    padding-left: 0px;
}

/* Menü */
.mu {
    position: fixed;
    top: 0px;
    border-bottom: 1px solid var(--color-tertiary);
    margin-left: 0px;
    padding: 5px;
    width: 100%;
    background: var(--color-background);
    color: var(--color-primary);
}

.mu ul {
    margin: 0;
    padding: 0;
    height: 1em; 
}

.mu li {
    list-style: none;
    float: left;
    padding-right: 2px;
}

/* Menü Elemente */
.mu li b {
    display: block;
    padding: 3px 8px;
    background-color: var(--color-primary);
    color: var(--color-background);
    text-decoration: none;
    border-radius: 4px;
}

.mu li a {
    display: block;
    padding: 3px 8px;
    background-color: var(--color-secondary);
    color: var(--color-background);
    text-decoration: none;
    border-radius: 4px;
}

.mu li ul {
    display: none; 
    width: 10em; 
    background-color: var(--color-tertiary);
}

.mu li a:hover {
    background-color: var(--color-primary);
    color: var(--color-background);
}