/*
 * Vivarium — Darstellung.
 *
 * Eigene Datei, weil die CSP in der .htaccess `style-src 'self'` setzt:
 * Eingebettete <style>-Bloecke werden vom Browser verworfen.
 */

:root {
    --grund: #14161a;
    --feld: #1c1f25;
    --rand: #2b3039;
    --schrift: #d8dce3;
    --gedaempft: #8b93a1;
    --akzent: #7fb3d5;
    --gut: #7fd58f;
    --schlecht: #e07a7a;
}

* {
    box-sizing: border-box;
}

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

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

.mitte {
    max-width: 24rem;
    margin: 12vh auto;
    padding: 0 1.5rem;
}

h1 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 .25rem;
}

.unterzeile {
    color: var(--gedaempft);
    font-size: .9rem;
    margin: 0 0 2rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

label {
    font-size: .85rem;
    color: var(--gedaempft);
    margin-top: .9rem;
}

input[type="text"],
input[type="password"] {
    background: var(--feld);
    border: 1px solid var(--rand);
    border-radius: .35rem;
    color: var(--schrift);
    font: inherit;
    padding: .6rem .7rem;
}

input:focus {
    border-color: var(--akzent);
    outline: none;
}

button {
    margin-top: 1.6rem;
    background: var(--akzent);
    border: 0;
    border-radius: .35rem;
    color: var(--grund);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: .65rem;
}

button:hover {
    filter: brightness(1.1);
}

.fehler {
    background: rgba(224, 122, 122, .12);
    border-left: 3px solid var(--schlecht);
    color: var(--schlecht);
    font-size: .9rem;
    margin: 0 0 1rem;
    padding: .6rem .8rem;
}

.hinweis {
    color: var(--gedaempft);
    font-size: .8rem;
    margin-top: 2rem;
}

.klein {
    color: var(--gedaempft);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}