:root {
    --bg: #f6f5f1;
    --fg: #23251f;
    --muted: #5d6157;
    --link: #3f5f2a;
    --rule: #dcdad2;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161814;
        --fg: #e6e6df;
        --muted: #a3a79a;
        --link: #a9c98f;
        --rule: #33362e;
    }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
    background: var(--bg);
    color: var(--fg);
    font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--link); }

/* Startseite: ein bildschirmfüllendes Foto */

.hero {
    position: fixed;
    inset: 0;
    background: #1f2530;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 60%;
    display: block;
}

.hero footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    padding: 2.5rem 1rem .75rem;
    font-size: .8125rem;
    color: rgba(255, 255, 255, .8);
    background: linear-gradient(transparent, rgba(0, 0, 0, .45));
}

.hero footer a { color: inherit; }
.hero footer a:hover { color: #fff; }
.hero nav a + a { margin-left: 1rem; }

/* Rechtstexte */

.legal {
    max-width: 42rem;
    margin: 0 auto;
    padding: 2.5rem 1rem 4rem;
}

.legal > a:first-child {
    font-size: .875rem;
    text-decoration: none;
}

.legal h1 { font-size: 1.75rem; line-height: 1.25; margin: 1.5rem 0 2rem; }
.legal h2 { font-size: 1.125rem; margin: 2.25rem 0 .5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.legal p, .legal ul { margin: 0 0 1rem; }
.legal li { margin-bottom: .25rem; }
.legal address { font-style: normal; margin-bottom: 1rem; }
.legal .muted { color: var(--muted); font-size: .875rem; }