:root {
    --navy: #0b1b33;
    --blau: #1565c0;
    --hell: #ffffff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--navy);
    color: var(--hell);
}

a { color: #7fb4ff; }

.mitte {
    min-height: 100vh;
    display: grid;
    place-content: center;
    text-align: center;
    padding: 1rem;
}

main { min-height: 100vh; }

.seite { max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem; }

.knopf {
    display: inline-block;
    padding: .6rem 1.2rem;
    border: 0;
    border-radius: .4rem;
    background: var(--blau);
    color: var(--hell);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.knopf.leise { background: transparent; border: 1px solid #5b6f8f; }
.knopf.klein { padding: .25rem .6rem; font-size: .85rem; }

.hinweis { padding: .6rem 1rem; border-radius: .4rem; background: #4a3a10; color: #ffe08a; }
.klein { font-size: .85rem; color: #b7c4d9; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem .5rem; border-bottom: 1px solid #24395c; text-align: left; vertical-align: top; }
th { color: #b7c4d9; font-weight: 600; }

.zeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .3rem; }
select, input[type="text"], input[type="datetime-local"] {
    padding: .3rem .4rem; border: 1px solid #5b6f8f; border-radius: .3rem;
    background: #10264a; color: var(--hell); font: inherit;
}