/* IMPORTANT: read this before editing
   docs/ui_themes_farben.md */

/**
 * Design Tokens: Farben, Typografie, Abstände für Dark- und Light-Mode.
 * Niemals Farben hardcoden — immer CSS-Variablen aus dieser Datei verwenden.
 *
 * @see docs/ui_themes_farben.md
 */
:root {
    --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --font-body: Inter, var(--font-fallback);
    --font-heading: Inter, var(--font-fallback);
    --font-code: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    --base-font-size: 100%;
    --base-line-height: 1.2;
    --intermediate-line-height: 1.5;
    --heading-line-height: var(--base-line-height);
    --heading-letter-spacing: -0.031rem;
    --font-content-line-height: 1.75;
    --font-body-strong-weight: 600;
    --type-heading-h1-font-size: 2.488rem;
    --type-heading-h2-font-size: 2.074rem;
    --type-heading-h3-font-size: 1.728rem;
    --type-heading-h4-font-size: 1.44rem;
    --type-heading-h5-font-size: 1.2rem;
    --type-base-font-size-rem: 1rem;
    --type-smaller-font-size: 0.833rem;
    --type-tiny-font-size: 0.694rem;
    --type-heading-h1-font-size-mobile: 1.802rem;
    --type-heading-h2-font-size-mobile: 1.602rem;
    --type-heading-h3-font-size-mobile: 1.424rem;
    --type-heading-h4-font-size-mobile: 1.266rem;
    --type-heading-h1-font-size-mobile: 1.802rem;
    --type-emphasis-m: var(--font-body-strong-weight) var(--type-smaller-font-size) /1.23 var(--font-body);
    --type-label-s: 600 var(--type-tiny-font-size) /1.2 var(--font-heading);
    --type-heading-h1: 600 var(--type-heading-h1-font-size-mobile) /var(--heading-line-height) var(--font-heading);
    --type-heading-h2: 500 var(--type-heading-h2-font-size-mobile) /var(--heading-line-height) var(--font-heading);
    --type-heading-h3: 300 var(--type-heading-h3-font-size-mobile) /var(--heading-line-height) var(--font-heading);
    --type-heading-h4: 400 var(--type-heading-h4-font-size-mobile) /var(--heading-line-height) var(--font-heading);
    --type-heading-h5: 400 var(--type-heading-h5-font-size) /var(--heading-line-height) var(--font-heading);
    --type-heading-h6: 400 var(--type-base-font-size-rem) /var(--heading-line-height) var(--font-heading);
    --type-article-p: 400 var(--type-base-font-size-rem) /var(--font-content-line-height) var(--font-body);
    --max-width: 1440px;
    --gutter: 1rem;
    --top-navigation-height: 4rem;
    --top-navigation-offset: -4rem;
    --z-index-back: -1;
    --z-index-top: 999;
    --z-index-mid: 500;
    --z-index-nav-menu: 200;
    --z-index-low: 10;
    --z-index-sidebar: 600;
    --elem-radius: 0.25rem;
    --focus-effect: 0 0 0 3px var(--accent-primary-engage);
    --form-elem-height: 2.6rem;
    --sticky-header-height: 0;
    --top-nav-height: 4.5rem;
    --main-document-header-height: 6rem;


    --top-level-front-size: 1.3rem;
    --sub-level-front-size: 1.1rem;
    --icon-size: 1.6rem;

    --accent_blue: #0085f220;
    --accent_blue_active: #0085f250;
    --accent_red: #ff000020;
    --accent_red_active: #ff000050;

}


@media screen and (min-width:769px) {
    :root {
        --type-heading-h1: 600 var(--type-heading-h1-font-size) /var(--heading-line-height) var(--font-heading);
        --type-heading-h2: 500 var(--type-heading-h2-font-size) /var(--heading-line-height) var(--font-heading);
        --type-heading-h3: 300 var(--type-heading-h3-font-size) /var(--heading-line-height) var(--font-heading);
        --type-heading-h4: 400 var(--type-heading-h4-font-size) /var(--heading-line-height) var(--font-heading)
    }
}

.light {
    --surface-bg: var(--background-primary);
    --text-primary: #1b1b1b;
    --text-secondary: #4e4e4e;
    --text-inactive: #9e9e9ea6;
    --text-link: #0069c2;
    --text-invert: #fff;
    --background-primary: #fff;
    --background-secondary: #eee;
    --background-tertiary: #ddd;
    --background-toc-active: #ebeaea;
    --background-mark-yellow: rgba(199, 183, 0, .4);
    --background-mark-green: rgba(0, 208, 97, .4);
    --background-information: rgba(0, 133, 242, .1);
    --background-warning: rgba(255, 42, 81, .1);
    --background-critical: rgba(211, 0, 56, .3);
    --background-success: rgba(0, 121, 54, .1);
    --border-primary: #aaa;
    --border-secondary: #ccc;
    --border-tertiary: #eee;
    --button-primary-default: var(--accent_blue);
    --button-primary-hover: var(--accent_blue_active);
    --button-red-default: var(--accent_red);
    --button-red-hover: var(--accent_red_active);
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #1b1b1b;
    --button-secondary-default: #fff;
    --button-secondary-hover: #ddd;
    --button-secondary-active: #cdcdcd;
    --button-secondary-inactive: #f9f9fb;
    --button-secondary-border-focus: #0085f2;
    --button-secondary-border-red: #ff97a0;
    --button-secondary-border-red-focus: #ffd9dc;
    --icon-primary: #696969;
    --icon-secondary: #b3b3b3;
    --icon-information: #0085f2;
    --icon-warning: #ff2a51;
    --icon-critical: #d30038;
    --icon-success: #007936;
    --accent-primary: #0072d4;
    --accent-primary-engage: rgba(0, 114, 212, .12);
    --accent-secondary: #0072d4;
    --accent-tertiary: rgba(0, 114, 212, .1);
    --shadow-01: 0px 1px 2px rgba(43, 42, 51, .05);
    --shadow-02: 5px 5px 20px rgba(0, 0, 0, .3);
    --shadow-03: 5px 5px 20px rgba(116, 116, 116, 0.3);
    --focus-01: 0px 0px 0px 3px rgba(0, 144, 237, .4);
    --scrollbar-bg: transparent;
    --scrollbar-color: rgba(0, 0, 0, .25);
    --text-primary-red: #d93025;
    --text-primary-green: #188038;
    --text-primary-blue: #1a73e8;
    --text-primary-yellow: #a67a00;
    --link-color: #006666;
    --link-color-hover: #004c4c;

    /* Semantic Colors (Light) */
    --bg-semantic-red: rgba(217, 48, 37, 0.08);
    --bg-semantic-secondary-red: rgba(217, 48, 37, 0.16);
    --text-semantic-red: #c5221f;
    --bg-semantic-green: rgba(24, 128, 56, 0.08);
    --bg-semantic-secondary-green: rgba(24, 128, 56, 0.16);
    --text-semantic-green: #137333;
    --bg-semantic-blue: rgba(26, 115, 232, 0.08);
    --bg-semantic-secondary-blue: rgba(26, 115, 232, 0.16);
    --text-semantic-blue: #1967d2;
    --bg-semantic-yellow: rgba(234, 134, 0, 0.08);
    --bg-semantic-secondary-yellow: rgba(234, 134, 0, 0.16);
    --text-semantic-yellow: #b06000;
    --bg-semantic-purple: rgba(126, 34, 206, 0.08);
    --bg-semantic-secondary-purple: rgba(126, 34, 206, 0.16);
    --text-semantic-purple: #7e22ce;

    color-scheme: light
}

.dark {
    --surface-bg: var(--background-primary);
    --text-primary: #fff;
    --text-secondary: #a0a0a0;
    --text-inactive: #cdcdcda6;
    --text-link: #8cb4ff;
    --text-invert: #1b1b1b;
    --background-primary: #1b1b1b;
    --background-secondary: #262626;
    --background-tertiary: #353535;
    --background-toc-active: #343434;
    --background-mark-yellow: rgba(199, 183, 0, .4);
    --background-mark-green: rgba(0, 208, 97, .4);
    --background-information: rgba(0, 133, 242, .1);
    --background-warning: rgba(255, 42, 81, .1);
    --background-critical: rgba(211, 0, 56, .3);
    --background-success: rgba(0, 121, 54, .1);
    --border-primary: #777;
    --border-secondary: #555;
    --border-tertiary: #333;
    --button-primary-default: var(--accent_blue);
    --button-primary-hover: var(--accent_blue_active);
    --button-red-default: var(--accent_red);
    --button-red-hover: var(--accent_red_active);
    --button-primary-active: #9e9e9e;
    --button-primary-inactive: #fff;
    --button-secondary-default: #4e4e4e;
    --button-secondary-hover: #444;
    --button-secondary-active: #9e9e9e;
    --button-secondary-inactive: #4e4e4e;
    --button-secondary-border-focus: #0085f2;
    --button-secondary-border-red: #ff97a0;
    --button-secondary-border-red-focus: #ffd9dc;
    --icon-primary: #eee;
    --icon-secondary: #b3b3b3;
    --icon-information: #5e9eff;
    --icon-warning: #afa100;
    --icon-critical: #ff707f;
    --icon-success: #00b755;
    --accent-primary: #4d94e8;
    --accent-primary-engage: rgba(77, 148, 232, .12);
    --accent-secondary: #4d94e8;
    --accent-tertiary: rgba(77, 148, 232, .1);
    --shadow-01: 0px 1px 2px rgba(251, 251, 254, .2);
    --shadow-02: 5px 5px 20px rgba(255, 255, 255, .3);
    --shadow-03: 5px 5px 20px rgba(0, 0, 0, 1);
    --focus-01: 0px 0px 0px 3px rgba(251, 251, 254, .5);
    --scrollbar-bg: transparent;
    --scrollbar-color: hsla(0, 0%, 100%, .25);
    --text-primary-red: #ef8b8b;
    --text-primary-green: #5ec97e;
    --text-primary-blue: #7bafed;
    --text-primary-yellow: #d4a832;
    --link-color: #b2ffff;
    --link-color-hover: #e0ffff;

    /* Semantic Colors (Dark) */
    --bg-semantic-red: rgba(239, 139, 139, 0.1);
    --bg-semantic-secondary-red: rgba(239, 139, 139, 0.2);
    --text-semantic-red: #ef8b8b;
    --bg-semantic-green: rgba(94, 201, 126, 0.1);
    --bg-semantic-secondary-green: rgba(94, 201, 126, 0.2);
    --text-semantic-green: #5ec97e;
    --bg-semantic-blue: rgba(123, 175, 237, 0.1);
    --bg-semantic-secondary-blue: rgba(123, 175, 237, 0.2);
    --text-semantic-blue: #7bafed;
    --bg-semantic-yellow: rgba(212, 168, 50, 0.1);
    --bg-semantic-secondary-yellow: rgba(212, 168, 50, 0.2);
    --text-semantic-yellow: #d4a832;
    --bg-semantic-purple: rgba(192, 162, 235, 0.1);
    --bg-semantic-secondary-purple: rgba(192, 162, 235, 0.2);
    --text-semantic-purple: #c0a2eb;
    color-scheme: dark
}


@media(prefers-color-scheme:light) {
    :root:not(.light):not(.dark) {
        --text-primary: #1b1b1b;
        --text-secondary: #4e4e4e;
        --text-inactive: #9e9e9ea6;
        --text-link: #0069c2;
        --text-invert: #fff;
        --background-primary: #fff;
        --background-secondary: #eee;
        --background-tertiary: #ddd;
        --background-toc-active: #ebeaea;
        --background-mark-yellow: rgba(199, 183, 0, .4);
        --background-mark-green: rgba(0, 208, 97, .4);
        --background-information: rgba(0, 133, 242, .1);
        --background-warning: rgba(255, 42, 81, .1);
        --background-critical: rgba(211, 0, 56, .3);
        --background-success: rgba(0, 121, 54, .1);
        --border-primary: #aaa;
        --border-secondary: #ccc;
        --border-tertiary: #eee;
        --button-primary-default: var(--accent_blue);
        --button-primary-hover: var(--accent_blue_active);
        --button-red-default: var(--accent_red);
        --button-red-hover: var(--accent_red_active);
        --button-primary-active: #9e9e9e;
        --button-primary-inactive: #1b1b1b;
        --button-secondary-default: #fff;
        --button-secondary-hover: #ddd;
        --button-secondary-active: #cdcdcd;
        --button-secondary-inactive: #f9f9fb;
        --button-secondary-border-focus: #0085f2;
        --button-secondary-border-red: #ff97a0;
        --button-secondary-border-red-focus: #ffd9dc;
        --icon-primary: #696969;
        --icon-secondary: #b3b3b3;
        --icon-information: #0085f2;
        --icon-warning: #ff2a51;
        --icon-critical: #d30038;
        --icon-success: #007936;
        --accent-primary: #0072d4;
        --accent-primary-engage: rgba(0, 114, 212, .12);
        --accent-secondary: #0072d4;
        --accent-tertiary: rgba(0, 114, 212, .1);
        --shadow-01: 0px 1px 2px rgba(43, 42, 51, .05);
        --shadow-02: 5px 5px 20px rgba(0, 0, 0, .3);
        --shadow-03: 5px 5px 20px rgba(116, 116, 116, 0.3);
        --focus-01: 0px 0px 0px 3px rgba(0, 144, 237, .4);
        --scrollbar-bg: transparent;
        --scrollbar-color: rgba(0, 0, 0, .25);
        --text-primary-red: #d93025;
        --text-primary-green: #188038;
        --text-primary-blue: #1a73e8;
        --text-primary-yellow: #a67a00;
        --link-color: #006666;
        --link-color-hover: #004c4c;

        /* Semantic Colors (Light) */
        --bg-semantic-red: rgba(217, 48, 37, 0.08);
        --bg-semantic-secondary-red: rgba(217, 48, 37, 0.16);
        --text-semantic-red: #c5221f;
        --bg-semantic-green: rgba(24, 128, 56, 0.08);
        --bg-semantic-secondary-green: rgba(24, 128, 56, 0.16);
        --text-semantic-green: #137333;
        --bg-semantic-blue: rgba(26, 115, 232, 0.08);
        --bg-semantic-secondary-blue: rgba(26, 115, 232, 0.16);
        --text-semantic-blue: #1967d2;
        --bg-semantic-yellow: rgba(234, 134, 0, 0.08);
        --bg-semantic-secondary-yellow: rgba(234, 134, 0, 0.16);
        --text-semantic-yellow: #b06000;
        --bg-semantic-purple: rgba(126, 34, 206, 0.08);
        --bg-semantic-secondary-purple: rgba(126, 34, 206, 0.16);
        --text-semantic-purple: #7e22ce;

        color-scheme: light
    }
}


@media(prefers-color-scheme:dark) {
    :root:not(.light):not(.dark) {
        --text-primary: #fff;
        --text-secondary: #a0a0a0;
        --text-inactive: #cdcdcda6;
        --text-link: #8cb4ff;
        --text-invert: #1b1b1b;
        --background-primary: #1b1b1b;
        --background-secondary: #262626;
        --background-tertiary: #353535;
        --background-toc-active: #343434;
        --background-mark-yellow: rgba(199, 183, 0, .4);
        --background-mark-green: rgba(0, 208, 97, .4);
        --background-information: rgba(0, 133, 242, .1);
        --background-warning: rgba(255, 42, 81, .1);
        --background-critical: rgba(211, 0, 56, .3);
        --background-success: rgba(0, 121, 54, .1);
        --border-primary: #777;
        --border-secondary: #555;
        --border-tertiary: #333;
        --button-primary-default: var(--accent_blue);
        --button-primary-hover: var(--accent_blue_active);
        --button-red-default: var(--accent_red);
        --button-red-hover: var(--accent_red_active);
        --button-primary-active: #9e9e9e;
        --button-primary-inactive: #fff;
        --button-secondary-default: #4e4e4e;
        --button-secondary-hover: #858585;
        --button-secondary-active: #9e9e9e;
        --button-secondary-inactive: #4e4e4e;
        --button-secondary-border-focus: #0085f2;
        --button-secondary-border-red: #ff97a0;
        --button-secondary-border-red-focus: #ffd9dc;
        --icon-primary: #eee;
        --icon-secondary: #b3b3b3;
        --icon-information: #5e9eff;
        --icon-warning: #afa100;
        --icon-critical: #ff707f;
        --icon-success: #00b755;
        --accent-primary: #4d94e8;
        --accent-primary-engage: rgba(77, 148, 232, .12);
        --accent-secondary: #4d94e8;
        --accent-tertiary: rgba(77, 148, 232, .1);
        --shadow-01: 0px 1px 2px rgba(251, 251, 254, .2);
        --shadow-02: 5px 5px 20px rgba(255, 255, 255, .3);
        --shadow-03: 5px 5px 20px rgba(0, 0, 0, 1);

        --focus-01: 0px 0px 0px 3px rgba(251, 251, 254, .5);
        --scrollbar-bg: transparent;
        --scrollbar-color: hsla(0, 0%, 100%, .25);
        --text-primary-red: #ef8b8b;
        --text-primary-green: #5ec97e;
        --text-primary-blue: #7bafed;
        --text-primary-yellow: #d4a832;
        --link-color: #b2ffff;
        --link-color-hover: #e0ffff;

        /* Semantic Colors (Dark) */
        --bg-semantic-red: rgba(239, 139, 139, 0.1);
        --bg-semantic-secondary-red: rgba(239, 139, 139, 0.3);
        --text-semantic-red: #ef8b8b;
        --bg-semantic-green: rgba(94, 201, 126, 0.1);
        --bg-semantic-secondary-green: rgba(94, 201, 126, 0.2);
        --text-semantic-green: #5ec97e;
        --bg-semantic-blue: rgba(123, 175, 237, 0.1);
        --bg-semantic-secondary-blue: rgba(123, 175, 237, 0.2);
        --text-semantic-blue: #7bafed;
        --bg-semantic-yellow: rgba(212, 168, 50, 0.1);
        --bg-semantic-secondary-yellow: rgba(212, 168, 50, 0.2);
        --text-semantic-yellow: #d4a832;
        --bg-semantic-purple: rgba(192, 162, 235, 0.1);
        --bg-semantic-secondary-purple: rgba(192, 162, 235, 0.2);
        --text-semantic-purple: #c0a2eb;

        color-scheme: dark
    }
}