/* Grundstile für alle Seiten. Nur Tokens aus tokens.css verwenden. */

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

html {
    accent-color: var(--haupt);
    scrollbar-color: var(--leise) var(--papier);
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font: 400 var(--s0)/1.6 var(--text);
    font-variant-numeric: lining-nums;
    caret-color: var(--akzent);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--hellorange); color: var(--tinte); }

h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; text-wrap: balance; }
p { margin: 0; }

a { color: var(--haupt); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2.5px; }

:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: var(--ecke-klein); }
/* Auf dem Feld in der Hauptfarbe hat Orange zu wenig Kontrast, Hellorange reicht als Fokusrahmen (≥ 3:1: Tintenblau 4,59:1, Petrol 4,18:1) */
.feld :focus-visible { outline-color: var(--hellorange); }

math { font-family: var(--formel); font-size: 1.12em; }

.wrap {
    width: 100%;
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 20px;
}

/* Feld: Hauptfarbe mit hellem Karo, trägt den Kopf jeder Seite */
.feld {
    background-color: var(--feld);
    color: var(--blatt);
    background-image:
        linear-gradient(var(--feld-karo) 1px, transparent 1px),
        linear-gradient(90deg, var(--feld-karo) 1px, transparent 1px);
    background-size: var(--karo-feld) var(--karo-feld);
    background-position: -1px -1px;
}

.fehler { padding-block: var(--abstand-xxl) var(--abstand-abschnitt); }
.fehler h1 { font-size: var(--s3); margin-bottom: var(--abstand-md); }

@media (max-width: 600px) {
    .wrap { padding-inline: 16px; }
}