/* Grundlage der Verwaltungsoberflaeche. Regeln: /doku/paradigmen-oberflaeche.
   Jeder Abstand stammt aus der Skala, jede Groesse aus der Schriftskala, jede Farbe hat eine Rolle.
   Die Kontrastwerte sind gemessen, nicht geschaetzt: Text >= 4.5:1, Rand eines Bedienelements >= 3:1.
   Tabellen stehen in tabelle.css, Formulare in formular.css. */

:root {
    --abstand-1: 0.25rem;
    --abstand-2: 0.5rem;
    --abstand-3: 0.75rem;
    --abstand-4: 1rem;
    --abstand-5: 1.5rem;
    --abstand-6: 2rem;
    --abstand-7: 3rem;

    --schrift-klein: 0.875rem;
    --schrift-grund: 1rem;
    --schrift-gehoben: 1.125rem;
    --schrift-gross: 1.375rem;
    --schrift-titel: 1.75rem;

    --grund: #ffffff;
    --flaeche: #f4f5f7;
    --text: #16181d;
    --gedaempft: #595f6b;
    --linie: #c9cdd4;
    --rand: #6b7280;
    --betont: #1d4ed8;
    --warnung: #b3261e;
    --bestaetigung: #146c43;

    --textbreite: 70ch;
    --formularbreite: 40rem;
    --breite-mittel: 20rem;
    --breite-schmal: 10rem;
    --breite-winzig: 5rem;
    --ziel-klein: 1.5rem;
    --beschriftungshoehe: 1.75rem;
    --vorschaubreite: 12rem;
    --inhaltsbreite: min(100%, 90rem);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #16181d;
        --flaeche: #20242c;
        --text: #e8eaee;
        --gedaempft: #a4abb8;
        --linie: #3b414c;
        --rand: #8a93a3;
        --betont: #8ab4ff;
        --warnung: #ff9a94;
        --bestaetigung: #6fd39a;
    }
}

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

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: var(--schrift-grund);
    line-height: 1.5;
    background: var(--grund);
    color: var(--text);
}

/* Sprungverweis: sichtbar, sobald er den Fokus hat (WCAG 2.4.1). */
.sprung {
    position: absolute;
    left: var(--abstand-4);
    top: -4rem;
    z-index: 2;
    background: var(--grund);
    color: var(--betont);
    border: 2px solid var(--betont);
    padding: var(--abstand-2) var(--abstand-4);
}

.sprung:focus {
    top: var(--abstand-2);
}

/* Zwei Reihen statt einer: oben, wer man ist und wie man geht, darunter die Navigation.
   In einer Reihe drueckt die Navigation die Abmeldung auf eine dritte Zeile, in der sie allein
   steht - vierzehn Punkte passen in keine Zeile neben Marke und Abmeldung. */
.kopf {
    display: grid;
    gap: var(--abstand-2);
    padding: var(--abstand-3) var(--abstand-4);
    border-bottom: 1px solid var(--linie);
    background: var(--flaeche);
}

.kopf .kennung {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--abstand-2) var(--abstand-4);
}

.kopf .marke {
    font-weight: 700;
    text-decoration: none;
    color: var(--text);
}

.kopf nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-1) var(--abstand-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kopf nav a {
    display: inline-block;
    padding: var(--abstand-1) var(--abstand-2);
    min-height: var(--ziel-klein);
}

.kopf nav a[aria-current="page"] {
    font-weight: 700;
    text-decoration-thickness: 0.15em;
    text-underline-offset: 0.25em;
}

/* Die Abmeldung steht neben der Marke und nicht in der Navigation: sie fuehrt nicht zu einem
   Bereich, sondern beendet die Sitzung. */
.kopf .abmelden {
    padding: var(--abstand-1) var(--abstand-2);
    min-height: var(--ziel-klein);
}

.inhalt {
    max-width: var(--inhaltsbreite);
    margin: 0 auto;
    padding: var(--abstand-5) var(--abstand-4);
}

.inhalt > p,
.inhalt > ul,
.inhalt > ol {
    max-width: var(--textbreite);
}

h1,
h2,
h3 {
    line-height: 1.25;
    margin: var(--abstand-6) 0 var(--abstand-3);
}

h1 {
    font-size: var(--schrift-titel);
    margin-top: 0;
}

h2 {
    font-size: var(--schrift-gross);
}

h3 {
    font-size: var(--schrift-gehoben);
}

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

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

button,
.knopf {
    font: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-2);
    min-height: 2.25rem;
    padding: var(--abstand-2) var(--abstand-4);
    border: 1px solid var(--rand);
    background: var(--flaeche);
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
}

button.primaer,
.knopf.primaer {
    background: var(--betont);
    border-color: var(--betont);
    color: var(--grund);
}

button.gefahr,
.knopf.gefahr {
    color: var(--warnung);
    border-color: var(--warnung);
}

.aktionen,
.werkzeugleiste {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2);
    align-items: center;
    margin: var(--abstand-4) 0;
}

.karte,
.abschnitt,
.kasten {
    border: 1px solid var(--linie);
    padding: var(--abstand-4);
    margin: var(--abstand-5) 0;
}

.abschnitt .zustand,
.hinweis {
    color: var(--gedaempft);
    font-size: var(--schrift-klein);
}

.meldung {
    color: var(--bestaetigung);
}

.meldung.fehler,
.marke-defekt {
    color: var(--warnung);
}

.fehler,
.defekte {
    border: 1px solid var(--warnung);
    color: var(--warnung);
    padding: var(--abstand-3) var(--abstand-4);
    margin-bottom: var(--abstand-5);
}

.defekte ul {
    margin: var(--abstand-2) 0 0;
    padding-left: var(--abstand-5);
}

.editierflaeche {
    border: 1px solid var(--rand);
    min-height: 6rem;
    padding: var(--abstand-2);
}

.editierflaeche img {
    max-width: 100%;
    height: auto;
}

.rohansicht {
    width: 100%;
    min-height: 10rem;
    font-family: ui-monospace, monospace;
}

.historie {
    font-size: var(--schrift-klein);
}

.fuss {
    max-width: var(--inhaltsbreite);
    margin: var(--abstand-7) auto 0;
    padding: var(--abstand-4);
    border-top: 1px solid var(--linie);
    color: var(--gedaempft);
    font-size: var(--schrift-klein);
}