body {
    font-family: sans-serif;
    max-width: 800px;
    margin: auto;
    padding: 1em;
}
header {
    background-color: #eee;
    padding: 1em;
    margin-bottom: 1em;
}

:root {
    --goetheblau: rgb(0, 97, 143);
    --purple: rgb(134, 0, 71);
    --emorot: rgb(179, 6, 44);
    --hellgrau: rgb(248, 246, 245);
}

@media (prefers-color-scheme: dark) {
    :root {
        --goetheblau: rgb(139, 207, 238);
        --purple: rgb(228, 96, 164);
        --emorot: rgb(179, 6, 44);
        --hellgrau: rgb(77, 75, 70); /* eig. Dunkelgrau */
    }
    body {
        background: #181a1b;
        color: #e0e0e0;
    }
    header {
        background-color: #23272a;
    }
    main {
        background: #23272a;
    }
    table {
        background: #23272a;
        color: #e0e0e0;
    }
    input,
    select,
    button {
        background: #23272a;
        color: #e0e0e0;
        border-color: #444;
    }
}

/* Responsive Design */
@media (max-width: 600px) {
    body {
        max-width: 100vw;
        padding: 0.5em;
    }
    header,
    main {
        padding: 0.5em;
        margin-bottom: 0.5em;
    }
    h1 {
        font-size: 1.3em;
        text-align: center;
    }
    table {
        font-size: 0.95em;
        width: 100%;
        display: block;
        overflow-x: auto;
    }
    th,
    td {
        padding: 0.3em 0.5em !important;
        word-break: break-word;
    }
    form {
        flex-direction: column !important;
        gap: 0.5em !important;
        max-width: 100% !important;
    }
    input,
    select,
    button,
    label {
        width: 100% !important;
        font-size: 1em !important;
        box-sizing: border-box;
    }
    .github-icon-link {
        top: 8px;
        right: 8px;
        width: 24px;
        height: 24px;
    }
    img[alt="Logo"] {
        height: 36px !important;
    }
    #popup {
        max-width: 98vw !important;
        left: 50% !important;
        transform: translate(-50%, -25%) !important;
        padding: 0.5em !important;
    }
    #popup-getraenke button {
        font-size: 1em !important;
        padding: 0.5em 0.7em !important;
    }
}