/*
 * Die Oberfläche des Crawlers. Jeder Wert kommt aus tokens.css; hier steht kein Hexwert und
 * kein Pixelwert ausser 1px für Haarlinien.
 */

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

html {
    background: var(--grund);
}

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: var(--text-15);
    line-height: var(--zeile-15);
    font-weight: var(--gewicht-normal);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

h1,
h2 {
    margin: 0;
    font-weight: var(--gewicht-fett);
}

h1 {
    font-size: var(--text-28);
    line-height: var(--zeile-28);
}

h2 {
    font-size: var(--text-22);
    line-height: var(--zeile-22);
}

p {
    margin: 0;
}

/* Kopfleiste */

.kopf {
    background: var(--flaeche);
    border-bottom: 1px solid var(--haarlinie);
}

.kopf-inhalt {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: var(--abstand-16) var(--seitenrand);
    display: flex;
    align-items: baseline;
    gap: var(--abstand-16);
}

.wortmarke {
    font-size: var(--text-17);
    line-height: var(--zeile-17);
    font-weight: var(--gewicht-fett);
}

.kopf-hinweis {
    font-size: var(--text-13);
    line-height: var(--zeile-13);
    color: var(--gedaempft);
}

.wortmarke a,
.kopf-hinweis a {
    color: inherit;
    text-decoration: none;
}

.kopf-hinweis a:hover,
.inhalt a:hover {
    text-decoration: underline;
}

.inhalt a {
    color: var(--akzent);
    text-decoration: none;
}

/* Inhalt */

.inhalt {
    max-width: var(--inhalt-breite);
    margin: 0 auto;
    padding: var(--abstand-32) var(--seitenrand) var(--abstand-64);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-24);
}

.kachel {
    background: var(--flaeche);
    border: 1px solid var(--haarlinie);
    border-radius: var(--rundung-kachel);
    padding: var(--abstand-24);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-16);
}

.kachel-tabelle {
    padding-left: 0;
    padding-right: 0;
}

.kachel-tabelle > h2,
.kachel-tabelle > .leer {
    padding-left: var(--abstand-24);
    padding-right: var(--abstand-24);
}

.leer,
.hilfstext {
    color: var(--gedaempft);
}

.hilfstext {
    font-size: var(--text-13);
    line-height: var(--zeile-13);
}

.hilfstext-breit {
    flex: 1 0 100%;
    margin-top: calc(var(--abstand-8) * -1);
}

/* Hinweis */

.hinweis {
    background: var(--flaeche);
    border: 1px solid var(--haarlinie);
    border-left: var(--hinweis-kante) solid var(--akzent);
    border-radius: var(--rundung-knopf);
    padding: var(--abstand-16);
    white-space: pre-line;
}

.hinweis-gut {
    background: var(--akzent-hell);
    border-left-color: var(--akzent);
}

.hinweis-gefahr {
    background: var(--gefahr-hell);
    border-left-color: var(--gefahr);
}

/* Formular */

.formular {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-16);
    align-items: flex-end;
}

.feldgruppe {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-4);
    min-width: var(--suchfeld-breite);
}

.feldgruppe-weit {
    flex: 1 1 auto;
}

label {
    font-size: var(--text-13);
    line-height: var(--zeile-13);
    font-weight: var(--gewicht-mittel);
    color: var(--gedaempft);
}

select,
input[type="text"] {
    height: var(--feld-hoehe);
    padding: 0 var(--abstand-12);
    border: 1px solid var(--haarlinie);
    border-radius: var(--rundung-knopf);
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schrift);
    font-size: var(--text-15);
    font-variant-numeric: tabular-nums;
}

select:focus-visible,
input[type="text"]:focus-visible,
.knopf:focus-visible {
    outline: var(--fokus-breite) solid var(--akzent);
    outline-offset: var(--fokus-abstand);
}

.knopfreihe {
    display: flex;
    gap: var(--abstand-8);
    align-items: center;
}

.knopf {
    height: var(--knopf-hoehe);
    padding: 0 var(--abstand-16);
    border-radius: var(--rundung-knopf);
    border: 1px solid transparent;
    font-family: var(--schrift);
    font-size: var(--text-15);
    font-weight: var(--gewicht-mittel);
    cursor: pointer;
    transition: background var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve);
}

.knopf-primaer {
    background: var(--akzent);
    color: var(--weiss);
}

.knopf-zweit {
    background: var(--flaeche);
    border-color: var(--haarlinie);
    color: var(--text);
}

.knopf-zweit:hover:not([disabled]) {
    background: var(--grund);
}

.knopf[disabled] {
    opacity: var(--deaktiviert);
    cursor: default;
}

/* Kennzahlen */

.kennzahlen {
    display: flex;
    flex-wrap: wrap;
}

.kennzahl {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-4);
    flex: 1 1 0;
    min-width: var(--suchfeld-breite);
    padding-right: var(--abstand-24);
    border-right: 1px solid var(--haarlinie);
}

.kennzahl + .kennzahl {
    padding-left: var(--abstand-24);
}

.kennzahl:last-child {
    border-right: 0;
    padding-right: 0;
}

.zahl {
    font-size: var(--text-40);
    line-height: var(--zeile-40);
    font-weight: var(--gewicht-fett);
}

.beschriftung {
    font-size: var(--text-13);
    line-height: var(--zeile-13);
    color: var(--gedaempft);
}

.kontext {
    font-size: var(--text-15);
    line-height: var(--zeile-15);
}

/* Noten */

.noten {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-24);
}

.note {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-4);
    min-width: var(--abstand-64);
}

.note .zahl {
    font-size: var(--text-22);
    line-height: var(--zeile-22);
}

/* Tabelle */

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    font-size: var(--text-13);
    line-height: var(--zeile-13);
    font-weight: var(--gewicht-mittel);
    text-transform: uppercase;
    letter-spacing: var(--versalien-abstand);
    color: var(--gedaempft);
    text-align: left;
    padding: var(--abstand-8) var(--abstand-12);
    border-bottom: 1px solid var(--haarlinie);
    white-space: nowrap;
}

th:first-child,
td:first-child {
    padding-left: var(--abstand-24);
}

th:last-child,
td:last-child {
    padding-right: var(--abstand-24);
}

td {
    height: var(--zeilen-hoehe);
    padding: var(--abstand-8) var(--abstand-12);
    border-bottom: 1px solid var(--haarlinie);
    vertical-align: middle;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover {
    background: var(--grund);
}

.rechts {
    text-align: right;
}

.warnung {
    color: var(--warnung);
    font-weight: var(--gewicht-mittel);
}

.zeit {
    color: var(--gedaempft);
    white-space: nowrap;
}

.fehlertext {
    width: 100%;
}

/* Stand als Wort, nie als Punkt */

.stand {
    font-size: var(--text-13);
    line-height: var(--zeile-13);
    font-weight: var(--gewicht-mittel);
    padding: var(--abstand-4) var(--abstand-8);
    border-radius: var(--rundung-knopf);
    white-space: nowrap;
}

.stand-akzent {
    background: var(--akzent-hell);
    color: var(--akzent);
}

.stand-warnung {
    background: var(--warnung-hell);
    color: var(--warnung);
}

.stand-gefahr {
    background: var(--gefahr-hell);
    color: var(--gefahr);
}

.stand-gedaempft {
    color: var(--gedaempft);
}

@media (max-width: 720px) {
    .kopf-inhalt,
    .inhalt {
        padding-left: var(--seitenrand-schmal);
        padding-right: var(--seitenrand-schmal);
    }

    .kachel {
        padding: var(--abstand-16);
    }

    .kachel-tabelle {
        padding-left: 0;
        padding-right: 0;
        overflow-x: auto;
    }

    .kennzahl {
        border-right: 0;
        padding: 0 0 var(--abstand-16) 0;
    }

    .kennzahl + .kennzahl {
        padding-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* Wochenbericht: der Text, wie er aufs Handy geht, mit seinen Zeilen */

.bericht {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: var(--schrift);
}