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

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    transition: background-color var(--theme-transition), color var(--theme-transition);
}

h1, h2, h3, h4 { margin: 0; line-height: var(--line-height-tight); text-wrap: balance; }
h1 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); }
h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
p { margin: 0; }
a { color: var(--accent); }
code { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.symbol {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    color: currentColor;
    flex: none;
}

/* Ein breites Symbol behält die Höhe und nimmt sich die Breite aus seinem Seitenverhältnis. */
.symbol--breit {
    width: auto;
}

.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

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

button, input, select, textarea {
    font: inherit;
}