/*:root {
    --sd-color-primary: #0071bc;
    --sd-color-secondary: #6c757d;
    --sd-color-success: #28a745;
    --sd-color-info: #17a2b8;
    --sd-color-warning: #f0b37e;
    --sd-color-danger: #dc3545;
    --sd-color-light: #f8f9fa;
    --sd-color-muted: #6c757d;
    --sd-color-dark: #212529;
    --sd-color-black: black;
    --sd-color-white: white;
    --sd-color-primary-highlight: #0060a0;
    --sd-color-secondary-highlight: #5c636a;
    --sd-color-success-highlight: #228e3b;
    --sd-color-info-highlight: #148a9c;
    --sd-color-warning-highlight: #cc986b;
    --sd-color-danger-highlight: #bb2d3b;
    --sd-color-light-highlight: #d3d4d5;
    --sd-color-muted-highlight: #5c636a;
    --sd-color-dark-highlight: #1c1f23;
    --sd-color-black-highlight: black;
    --sd-color-white-highlight: #d9d9d9;
    --sd-color-primary-bg: rgba(0, 113, 188, 0.2);
    --sd-color-secondary-bg: rgba(108, 117, 125, 0.2);
    --sd-color-success-bg: rgba(40, 167, 69, 0.2);
    --sd-color-info-bg: rgba(23, 162, 184, 0.2);
    --sd-color-warning-bg: rgba(240, 179, 126, 0.2);
    --sd-color-danger-bg: rgba(220, 53, 69, 0.2);
    --sd-color-light-bg: rgba(248, 249, 250, 0.2);
    --sd-color-muted-bg: rgba(108, 117, 125, 0.2);
    --sd-color-dark-bg: rgba(33, 37, 41, 0.2);
    --sd-color-black-bg: rgba(0, 0, 0, 0.2);
    --sd-color-white-bg: rgba(255, 255, 255, 0.2);
    --sd-color-primary-text: #fff;
    --sd-color-secondary-text: #fff;
    --sd-color-success-text: #fff;
    --sd-color-info-text: #fff;
    --sd-color-warning-text: #212529;
    --sd-color-danger-text: #fff;
    --sd-color-light-text: #212529;
    --sd-color-muted-text: #fff;
    --sd-color-dark-text: #fff;
    --sd-color-black-text: #fff;
    --sd-color-white-text: #212529;
    --sd-color-shadow: rgba(0, 0, 0, 0.15);
    --sd-color-card-border: rgba(0, 0, 0, 0.125);
    --sd-color-card-border-hover: hsla(231, 99%, 66%, 1);
    --sd-color-card-background: transparent;
    --sd-color-card-text: inherit;
    --sd-color-card-header: transparent;
    --sd-color-card-footer: transparent;
    --sd-color-tabs-label-active: hsla(231, 99%, 66%, 1);
    --sd-color-tabs-label-hover: hsla(231, 99%, 66%, 1);
    --sd-color-tabs-label-inactive: hsl(0, 0%, 66%);
    --sd-color-tabs-underline-active: hsla(231, 99%, 66%, 1);
    --sd-color-tabs-underline-hover: rgba(178, 206, 245, 0.62);
    --sd-color-tabs-underline-inactive: transparent;
    --sd-color-tabs-overline: rgb(222, 222, 222);
    --sd-color-tabs-underline: rgb(222, 222, 222);
    --sd-fontsize-tabs-label: 1rem;
    --sd-fontsize-dropdown: inherit;
    --sd-fontsize-dropdown-title: .9rem;
    --sd-fontweight-dropdown-title: 400
}*/

span.eqno {
    float: right;
}
span.eqno a.headerlink {
    position: relative;
    z-index: 1;
}

.tippy-box { 
    background-color: var(#84878a);
    color: var(--popover-foreground);
    border: 1px solid var(--sd-color-card-border);
}
/* ---- Inter (bundled, SIL OFL) as site font — same typeface as the GitBook site and the Ergonizer app */
@font-face {
    font-family: "Inter";
    src: url("fonts/Inter-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
:root, :host {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --default-font-family: var(--font-sans);
}
html, body { font-family: var(--font-sans); }

/* ---- Changelog page: spacing as on the former GitBook page
   (8 px between list items, 20 px between blocks, 24 px line height) */
#content #ergonizer-changelog h2 { margin-top: calc(var(--spacing) * 10); }
#content #ergonizer-changelog h3 { margin-top: calc(var(--spacing) * 8); }
#content #ergonizer-changelog h4 { margin-top: calc(var(--spacing) * 5); font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
#content #ergonizer-changelog section > p { margin-top: calc(var(--spacing) * 5); line-height: 1.5; }
#content #ergonizer-changelog ul:not(.search) { margin-top: calc(var(--spacing) * 5); }
#content #ergonizer-changelog ul:not(.search) > li { margin-top: calc(var(--spacing) * 2); line-height: 1.5; }
#content #ergonizer-changelog ul:not(.search) > li:first-child { margin-top: 0; }
#content #ergonizer-changelog ul:not(.search) p { margin-top: 0; }
#content #ergonizer-changelog figure, #content #ergonizer-changelog img { margin-top: calc(var(--spacing) * 5); }
#content #ergonizer-changelog figcaption { margin-top: calc(var(--spacing) * 1); font-size: var(--text-sm); }
#content #ergonizer-changelog hr { margin-top: calc(var(--spacing) * 8); margin-bottom: 0; }
#content #ergonizer-changelog .admonition { margin-top: calc(var(--spacing) * 5); }

/* ------------------------------------------------------------------
   Links im Inhalt
   Das Theme setzt Links auf font-weight 500 + Unterstreichung in
   Textfarbe. Hier stattdessen: normale Schriftstärke, Linkfarbe aus
   dem Ergonizer-Blau (#3fb6fe), dünne Unterstreichung in der
   Linkfarbe; beim Hover/Fokus wird die Linie kräftiger.
   Kontrast (WCAG): #0a6fb0 auf Weiß 5.4:1, #5cc0ff auf Dunkel 10:1.
   ------------------------------------------------------------------ */
:root {
    --link-color: #0a6fb0;
    --link-color-hover: #08598d;
}
@media (prefers-color-scheme: dark) {
    :root {
        --link-color: #5cc0ff;
        --link-color-hover: #8fd4ff;
    }
}
#content a:not(.toc-backref):not(.headerlink) {
    font-weight: inherit;
    color: var(--link-color);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--link-color) 45%, transparent);
    text-underline-offset: 3px;
    transition: color 120ms ease, text-decoration-color 120ms ease;
}
#content a:not(.toc-backref):not(.headerlink):hover,
#content a:not(.toc-backref):not(.headerlink):focus-visible {
    color: var(--link-color-hover);
    text-decoration-color: currentColor;
}

/* Logo in der Kopfzeile: größer (Theme: 24 px), mehr Abstand zur
   Wortmarke, mittig zur Textzeile. Sichtbarkeit hell/dunkel regeln die
   Theme-Klassen, daher hier kein display. */
header a > img[alt="Logo"] {
    width: 2rem;
    height: 2rem;
    margin-right: 0.75rem;
    align-self: center;
    flex-shrink: 0;
}

/* Kopfzeile: Wortmarke "Ergonizer Software" und Menüpunkte stehen auf
   einer gemeinsamen Schriftlinie (Theme: nur mittig ausgerichtet, wegen
   der unterschiedlichen Schriftgrößen sitzt die Wortmarke dann tiefer).
   Die Zeilenhöhe der Wortmarke entspricht der Logohöhe, so bleibt das
   Logo mittig zum Text. */
header div:has(> a > img[alt="Logo"]) {
    align-items: baseline;
}
header a:has(> img[alt="Logo"]) {
    align-items: baseline;
}
header a:has(> img[alt="Logo"]) > span {
    line-height: 2rem;
}

/* Hover-Unterstreichung in Kopfzeile und linker Seitenleiste: 2 px dicke
   Linie knapp 2 px unter der Schriftlinie, unter Unterlängen (g, j, p, q, y, Komma …) gerade unterbrochen,
   genau so breit wie die Unterlänge auf Höhe der Linie plus 1,5 px.
   nav-underline.js legt den Linktext in span.ul-text (Inline-Element, das
   zeilenweise unterstrichen wird; die Linie ist ein Hintergrundverlauf),
   misst jede Unterlänge in der echten Schrift aus und legt das Zeichen in
   span.descender mit Lage und Breite der Aussparung (--cut-x, --cut-w).
   Dessen Hintergrund in Hintergrundfarbe (--gap) deckt die Linie dort ab;
   das Zeichen selbst liegt darüber. Das padding von 4 px links und rechts
   (mit negativem margin, das Layout bleibt gleich) gibt Raum für
   Unterlängen, die über den Buchstaben hinausragen, z. B. beim j.
   Endet der Linktext mit einer Unterlänge (span.ul-text.ul-end-desc),
   läuft die Linie 3 px weiter. padding-bottom verlängert den Bereich für
   die Linie unter die Schrift; das Skript misst die Lage der Linie daran,
   deshalb gilt es auch ohne Hover.
   Die Lücken von text-decoration-skip-ink sind zu schmal und nicht
   einstellbar. */
header nav a:hover,
header nav a:focus-visible,
#left-sidebar a:hover {
    text-decoration: none;
}
header nav a .ul-text,
#left-sidebar a .ul-text {
    padding-bottom: var(--ul-pad);
}
header nav a .descender,
#left-sidebar a .descender {
    padding: 0 4px var(--ul-pad);
    margin: 0 -4px;
}
header nav a:hover .ul-text,
header nav a:focus-visible .ul-text,
#left-sidebar a:hover .ul-text {
    --gap: var(--color-background);
    background-image: linear-gradient(var(--ul-color), var(--ul-color));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
}
header nav a:hover .descender,
header nav a:focus-visible .descender,
#left-sidebar a:hover .descender {
    background-image: linear-gradient(var(--gap), var(--gap));
    background-repeat: no-repeat;
    background-size: var(--cut-w) 3px;
    background-position: var(--cut-x) 100%;
}
header nav a .ul-text.ul-end-desc,
#left-sidebar a .ul-text.ul-end-desc {
    padding-right: 3px;
    margin-right: -3px;
}

/* Abstand der Linie: Die Schrift (14 px) reicht 3 px unter die
   Schriftlinie; 0,75 px zusätzlicher Bereich setzt die 2 px dicke Linie
   1,75 px unter die Schriftlinie. Gleicher Wert in Kopfzeile und
   Seitenleiste. */
header nav a,
#left-sidebar a {
    --ul-pad: 0.75px;
}

/* Kopfzeile: blaue Linie; Text beim Hover leicht heller (Theme: dunkler,
   60 % → 80 %). */
header nav a {
    --ul-color: var(--link-color);
}
header nav a:hover,
header nav a:focus-visible {
    color: color-mix(in srgb, var(--color-foreground) 50%, transparent);
}
/* Kopfzeile deckend (Theme: 90 % durchscheinend), damit die Aussparung in
   Hintergrundfarbe nicht als heller Fleck sichtbar ist. */
header {
    background-color: var(--color-background);
}

/* Banner über der Kopfzeile (_templates/layout.html): Logoblau, weiße
   Schrift, Link unterstrichen. */
.site-banner {
    padding: 0.5rem 1rem;
    background-color: #005FB8;
    color: #fff;
    font-size: 0.875rem;
    text-align: center;
}
.site-banner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.site-banner a:hover {
    text-decoration-thickness: 2px;
}

/* Sprachumschalter in der Kopfzeile (_templates/header.html): Kürzel klein
   geschrieben, in Größe und Farbe der Menüpunkte, die aktuelle Sprache in
   Textfarbe. Sichtbarer Abstand zum Suchfeld wie zum Hell-/Dunkel-Symbol
   rechts (dort 0,5 rem + Lücke 0,25 rem + Rand im 36-px-Knopf um das
   16-px-Symbol, zusammen 22 px; links 16 px Lücke + 6 px). */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.375rem;
    margin-right: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.language-switcher a {
    color: color-mix(in srgb, var(--color-foreground) 60%, transparent);
}
.language-switcher a[aria-current] {
    color: var(--color-foreground);
}

/* Linke Seitenleiste: Linie in Textfarbe. Beim Eintrag der aktuellen
   Seite hat die Aussparung dessen Hintergrundfarbe. */
#left-sidebar a {
    --ul-color: currentColor;
}
#left-sidebar a.current:hover .ul-text {
    --gap: var(--color-accent);
}

/* Logo in der Titelüberschrift der Startseite (index.rst, |logo|):
   als Block über dem Text, mit Abstand zur Wortmarke. Die Breite wird
   in index.rst über :width: gesetzt. */
#content h1 img.title-logo {
    display: block;
    height: auto;
    margin: 0 0 1.25rem 0;
}

/* Sprungziele (Glossar-Begriffe, Fußnoten, Tabellen, Formeln) beim
   Anspringen nicht unter der fixierten Menüleiste verstecken; das Theme
   macht das nur für Abschnitte (#content section). */
#content [id] {
    scroll-margin-top: calc(var(--spacing) * 20);
}

/* Mehrfach zitierte Fußnoten (z. B. im Glossar): Die Rücksprung-Links
   "(1,2)" stehen klein unter der Nummer statt in einer eigenen Zeile vor
   dem Text. */
#content .footnote > .backrefs {
    float: left;
    clear: left;
    margin: 0;
    font-size: 0.75em;
}

/* E-Mail-Schutz (siehe conf.py, Rolle :email:): Fallback ohne JavaScript
   steht rückwärts im Quelltext und wird hier lesbar gedreht. */
.email-fallback {
    unicode-bidi: bidi-override;
    direction: rtl;
    white-space: nowrap;
}

/* Formeln im Fließtext (MathJax, z. B. V̇O₂max mit Punkt über dem V) sind
   höher als die Schrift und vergrößerten sonst den Abstand zur Zeile
   darüber bzw. darunter. Sie tragen jetzt nicht mehr zur Zeilenhöhe bei;
   abgesetzte Formeln (display="true") bleiben unverändert. */
mjx-container:not([display="true"]) {
    line-height: 0;
}
mjx-container:not([display="true"]) > mjx-math {
    margin-block: -0.3em;
}
