/* Cockpit flex-systeme — schlichte Grundgestalt; Farben als Variablen, helles und dunkles Erscheinungsbild. */
:root {
    --grund: #f6f7f9;
    --flaeche: #ffffff;
    --text: #1b1f24;
    --text-leise: #525a66;
    --linie: #d5d9e0;
    --akzent: #1f5fbf;
    --akzent-text: #ffffff;
    --fehler: #a4161a;
    --fehler-grund: #fde8e8;
    --fokus: #f2a900;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #14171c;
        --flaeche: #1d2128;
        --text: #e8eaee;
        --text-leise: #a7afbb;
        --linie: #343a44;
        --akzent: #6ea8ff;
        --akzent-text: #0b1220;
        --fehler: #ffb4b4;
        --fehler-grund: #3a1416;
        --fokus: #f2c14e;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.marke { font-weight: 700; }

.navigation { display: flex; gap: 1rem; }

.navigation a, a { color: var(--akzent); }

.inhalt { max-width: 64rem; margin: 2rem auto; padding: 0 1rem; }

.karte {
    max-width: 24rem;
    margin: 3rem auto;
    padding: 1.5rem;
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: 8px;
}

.karte h1 { margin-top: 0; font-size: 1.4rem; }

.feld { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1rem; }

.feld label { font-weight: 600; }

.feld input {
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    font: inherit;
    color: var(--text);
    background: var(--grund);
    border: 1px solid var(--linie);
    border-radius: 6px;
}

.knopf {
    min-height: 2.75rem;
    width: 100%;
    padding: 0.5rem 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--akzent-text);
    background: var(--akzent);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.knopf:hover { filter: brightness(0.92); }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.meldung-fehler {
    padding: 0.75rem;
    margin-bottom: 1rem;
    color: var(--fehler);
    background: var(--fehler-grund);
    border-radius: 6px;
}

.hinweis { color: var(--text-leise); font-size: 0.9rem; }