/*
----------------------------------------
Datei: basis.css
Beschreibung: Globale Grundlagen – Schrift, Farben, Links, Fokus, Code.
----------------------------------------
*/

@layer basis {
    body {
        background: var(--farbe-seite);
        color: var(--farbe-text);
        font-family: var(--schrift-standard);
        font-size: var(--schriftgroesse-3);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
        line-height: 1.25;
        font-weight: 600;
    }

    a {
        color: var(--farbe-primaer);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

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

    code,
    pre {
        font-family: var(--schrift-monospace);
        font-size: var(--schriftgroesse-2);
    }

    code {
        padding: 1px var(--abstand-1);
        border-radius: var(--radius-klein);
        background: var(--farbe-flaeche-sekundaer);
    }

    ::selection {
        background: var(--farbe-primaer-hell);
    }

    .icon {
        flex: none;
    }
}