/* Basisregeln nach Nexovis Brand Kit (tokens.css "Optionale Basis-Defaults", guidance/web-app-ui.md).
 * Nur Tokens, keine Hex-Werte. Wird nach tokens.css und syncfusion-nexovis.css geladen.
 */

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

body {
    margin: 0;
    font-family: var(--nx-font-web);
    color: var(--nx-text);
    background: var(--nx-bg-subtle);
    line-height: var(--nx-leading-snug);
}

h1, h2, h3, h4 {
    font-weight: var(--nx-weight-bold);
    line-height: var(--nx-leading-tight);
    color: var(--nx-text);
}

a {
    color: var(--nx-link);
}

a:hover {
    color: var(--nx-link-hover);
}

/* Zweifarbiger Fokusring (Kit, entschieden 02.09.2026): außen das Band gegen den Grund als outline,
 * innen Sonnengelb als box-shadow, das genau den Offset füllt. Gilt für alle Elemente, auch Syncfusion. */
:focus-visible {
    outline: var(--nx-focus-w) solid var(--nx-focus-outer);
    outline-offset: var(--nx-focus-offset);
    box-shadow: 0 0 0 var(--nx-focus-offset) var(--nx-focus-inner);
}

/* Auf grüner Fläche im Light Mode die Rollen tauschen (Topbar, Seitenleiste). Im Dark Mode tauschen die
 * Tokens selbst. */
.nx-on-green :focus-visible {
    outline-color: var(--nx-focus-inner);
    box-shadow: 0 0 0 var(--nx-focus-offset) var(--nx-focus-outer);
}

@media (prefers-color-scheme: dark) {
    :root:where(:not([data-theme="light"])) .nx-on-green :focus-visible {
        outline-color: var(--nx-focus-outer);
        box-shadow: 0 0 0 var(--nx-focus-offset) var(--nx-focus-inner);
    }
}

:root[data-theme="dark"] .nx-on-green :focus-visible {
    outline-color: var(--nx-focus-outer);
    box-shadow: 0 0 0 var(--nx-focus-offset) var(--nx-focus-inner);
}

table {
    font-variant-numeric: var(--nx-numeric);
}

/* Zahlen in der Zahlenschrift mit Tabellenziffern (Kit: Metropolis hat keine Tabellenziffern). */
.nx-num {
    font-family: var(--nx-font-numeric);
    font-variant-numeric: var(--nx-numeric);
}

/* Nur für Screenreader sichtbar. */
.nx-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}