/* cerbnet – Basis: Schriften, Farben, Reset. Wird von Startseite und Tools geladen. */

@font-face {
    font-family: "Selawik";
    src: url("../fonts/selawik-light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Selawik";
    src: url("../fonts/selawik-semilight.woff2") format("woff2");
    font-weight: 350;
    font-display: swap;
}
@font-face {
    font-family: "Selawik";
    src: url("../fonts/selawik-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Selawik";
    src: url("../fonts/selawik-semibold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}
/* Selawik hat für „…“ nur einen einzelnen Punkt. Dieses eine Zeichen kommt deshalb aus einer
   Systemschrift oder, falls keine da ist, aus der eigenen JetBrains Mono. Je Gewicht eine eigene
   Fläche (sonst kombiniert der Browser sie nicht mit Selawik); sie stehen nach den
   Selawik-Flächen, damit sie für U+2026 Vorrang haben. */
@font-face {
    font-family: "Selawik";
    src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), url("../fonts/jetbrainsmono-500.woff2") format("woff2");
    font-weight: 300;
    unicode-range: U+2026;
    font-display: swap;
}
@font-face {
    font-family: "Selawik";
    src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), url("../fonts/jetbrainsmono-500.woff2") format("woff2");
    font-weight: 350;
    unicode-range: U+2026;
    font-display: swap;
}
@font-face {
    font-family: "Selawik";
    src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), url("../fonts/jetbrainsmono-500.woff2") format("woff2");
    font-weight: 400;
    unicode-range: U+2026;
    font-display: swap;
}
@font-face {
    font-family: "Selawik";
    src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), url("../fonts/jetbrainsmono-500.woff2") format("woff2");
    font-weight: 600;
    unicode-range: U+2026;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrainsmono-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

:root {
    /* Akzentfarben – alle mit Kontrast >= 4.5:1 zu Weiß */
    --c-blue: #1d6fc4;
    --c-darkblue: #2b5797;
    --c-cyan: #0f6e8c;
    --c-teal: #00757a;
    --c-green: #1e7145;
    --c-lime: #2d7d0f;
    --c-amber: #a3550a;
    --c-orange: #b83b1c;
    --c-red: #b91d47;
    --c-magenta: #9f00a7;
    --c-purple: #603cba;
    --c-plum: #7e3878;
    --c-gray: #5a5a5a;
    --brand: #f5a61c;

    --bg: #16161a;
    --surface: #222228;
    --surface-2: #2c2c33;
    --text: #ffffff;
    --text-muted: #b4b4bc;
    --border: #5c5c66;
    --border-strong: #9a9aa4;
    --focus: #ffffff;
    --pass: #2e9d5b;
    --fail: #e0475f;
    --warn: #d98c1a;

    --font: "Selawik", "Segoe UI", "Open Sans", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --ease-out: cubic-bezier(0.1, 0.9, 0.2, 1);
    --accent: var(--c-blue);

    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #ececef;
        --brand: #d98a0b;
        --surface: #ffffff;
        --surface-2: #f4f4f6;
        --text: #18181b;
        --text-muted: #55555e;
        --border: #8e8e98;
        --border-strong: #3c3c44;
        --focus: #18181b;
        --pass: #1e7145;
        --fail: #b91d47;
        --warn: #8a4a00;
        color-scheme: light;
    }
}

/* Akzent per data-accent auf Kachel oder <html> */
[data-accent="blue"] { --accent: var(--c-blue); }
[data-accent="darkblue"] { --accent: var(--c-darkblue); }
[data-accent="cyan"] { --accent: var(--c-cyan); }
[data-accent="teal"] { --accent: var(--c-teal); }
[data-accent="green"] { --accent: var(--c-green); }
[data-accent="lime"] { --accent: var(--c-lime); }
[data-accent="amber"] { --accent: var(--c-amber); }
[data-accent="orange"] { --accent: var(--c-orange); }
[data-accent="red"] { --accent: var(--c-red); }
[data-accent="magenta"] { --accent: var(--c-magenta); }
[data-accent="purple"] { --accent: var(--c-purple); }
[data-accent="plum"] { --accent: var(--c-plum); }
[data-accent="gray"] { --accent: var(--c-gray); }

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-weight: 350;
    font-size: 1rem;
    line-height: 1.5;
}

a {
    color: inherit;
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.icon {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: square;
    stroke-linejoin: miter;
    flex-shrink: 0;
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.site-footer a {
    color: inherit;
    text-decoration: none;
}

.site-footer button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.site-footer a:hover,
.site-footer a:focus-visible,
.site-footer button:hover,
.site-footer button:focus-visible {
    color: var(--text);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        transition-duration: 1ms !important;
    }
}