html {
    background: #fff;
    color: #000;
    font-family: Arial, sans-serif;
}

html.bjpfg--variant-light * {
    outline-color: #000;
}

body h1,
html.bjpfg--variant-light .bjpfg-icon {
    color: #000;
}

body h2,
body h3,
body h4,
body h5,
body h6 {
    color: #000;
}

body button:not(.--link).--primary:not([disabled]) {
    color: #fff;
    font-weight: 600;
    background: #000;
}

body button:not(.--link).--primary:not([disabled]):hover {
    color: #000;
    font-weight: 600;
    background: #fff;
}

body .bjpfg-tos__confirm {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
}

body button:not(.--link):not([disabled]):hover {
    -webkit-box-shadow: inset 0 0 0 1px #000;
    box-shadow: inset 0 0 0 1px #000;
}

body .bjpfg-popover {
    border: 2px solid #000;
}

body button:not(.--link) {
    color: #000;
    font-weight: 600;
    background: #fff;
    background-image: none;
    -webkit-box-shadow: inset 0 0 0 1px #000, inset 0 -1px 0 #000;
    box-shadow: inset 0 0 0 1px #000, inset 0 -1px 0 #000;
}

body button:not(.--link):hover,
body button:not(.--link):not([disabled]):hover,
body button:not(.--link):hover .bjpfg-icon {
    color: #fff;
    background-image: none;
    background-color: #000;
}

body button:not(.--link):disabled:hover {
    color: rgba(92, 112, 128, 0.5);
    background-image: none;
    background-color: #f5f5f5;
}

body .bjpfg-submit {
    background-color: #f5f5f5;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

body input:not([type=checkbox]).--disabled,
body input:not([type=checkbox]):disabled,
body select.--disabled, select:disabled,
body textarea.--disabled,
body textarea:disabled,
body button:not(.--link).--disabled,
body button:not(.--link):disabled {
    background-color: #f5f5f5;
}

html.bjpfg--variant-light body a, html.bjpfg--variant-light body a:hover, html.bjpfg--variant-light body a:visited, html.bjpfg--variant-light body a:link {
    color: #000;
}

ul.bjpfg-accessibility-toolbar {
    padding: 0;
    gap: 1px;
}

/* ==================== Darkmode ==================== */

html.bjpfg--variant-dark {
    background: #121212;
    color: #fff;
}

html.bjpfg--variant-dark * {
    outline-color: #fff;
}

html.bjpfg--variant-dark .bjpfg-header img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

html.bjpfg--variant-dark h1,
html.bjpfg--variant-dark h2,
html.bjpfg--variant-dark h3,
html.bjpfg--variant-dark h4,
html.bjpfg--variant-dark h5,
html.bjpfg--variant-dark h6,
html.bjpfg--variant-dark .bjpfg-icon {
    color: #fff;
}

html.bjpfg--variant-dark main section,
html.bjpfg--variant-dark .bjpfg-popover {
    background-color: #1e1e1e;
}

html.bjpfg--variant-dark .bjpfg-submit {
    background-color: #1e1e1e;
    border-color: #444;
}

html.bjpfg--variant-dark .bjpfg-popover {
    border: 2px solid #fff;
}

html.bjpfg--variant-dark .bjpfg-popover--danger {
    border-color: #ffb3d0;
}

html.bjpfg--variant-dark .bjpfg-popover--success {
    border-color: #62d96b;
}

html.bjpfg--variant-dark .bjpfg-field__required,
html.bjpfg--variant-dark .bjpfg-field__help {
    color: #ddd;
}

html.bjpfg--variant-dark input:not([type=checkbox]),
html.bjpfg--variant-dark select,
html.bjpfg--variant-dark textarea {
    color: #fff;
    background: #2a2a2a;
    -webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
    box-shadow: inset 0 0 0 1px #8a8a8a;
}

html.bjpfg--variant-dark option {
    color: #fff;
    background-color: #2a2a2a;
}

html.bjpfg--variant-dark .bjpfg-upload-entry {
    border-color: #444;
    background: #2a2a2a;
}

html.bjpfg--variant-dark .bjpfg-submit-summary tr + tr td {
    border-top-color: #444;
}

html.bjpfg--variant-dark .bjpfg-submit-summary tr td:first-child {
    border-bottom-color: #444;
    border-left-color: #444;
}

html.bjpfg--variant-dark a,
html.bjpfg--variant-dark a:link,
html.bjpfg--variant-dark a:visited,
html.bjpfg--variant-dark a:hover,
html.bjpfg--variant-dark a.--link,
html.bjpfg--variant-dark button.--link {
    color: #fff;
}

/* Buttons */
html.bjpfg--variant-dark button:not(.--link) {
    color: #fff;
    background: #1e1e1e;
    background-image: none;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
    box-shadow: inset 0 0 0 1px #fff;
}

html.bjpfg--variant-dark button:not(.--link):not([disabled]):hover,
html.bjpfg--variant-dark button:not(.--link):not([disabled]):active {
    color: #000;
    background-color: #fff;
    background-image: none;
    -webkit-box-shadow: inset 0 0 0 1px #fff;
    box-shadow: inset 0 0 0 1px #fff;
}

html.bjpfg--variant-dark button:not(.--link):not([disabled]):hover .bjpfg-icon {
    color: #000;
    background-color: transparent;
}

html.bjpfg--variant-dark button:not(.--link).--primary:not([disabled]),
html.bjpfg--variant-dark button:not(.--link).--success:not([disabled]),
html.bjpfg--variant-dark button:not(.--link).--primary:not([disabled]) .bjpfg-icon,
html.bjpfg--variant-dark button:not(.--link).--success:not([disabled]) .bjpfg-icon {
    color: #000;
    background-color: #fff;
}

html.bjpfg--variant-dark button:not(.--link).--primary:not([disabled]):hover,
html.bjpfg--variant-dark button:not(.--link).--success:not([disabled]):hover,
html.bjpfg--variant-dark button:not(.--link).--primary:not([disabled]):hover .bjpfg-icon,
html.bjpfg--variant-dark button:not(.--link).--success:not([disabled]):hover .bjpfg-icon {
    color: #fff;
    background-color: #000;
}

html.bjpfg--variant-dark button:not(.--link).--disabled,
html.bjpfg--variant-dark button:not(.--link):disabled,
html.bjpfg--variant-dark button:not(.--link):disabled:hover {
    color: #8a8a8a;
    background-color: #2a2a2a;
    -webkit-box-shadow: none;
    box-shadow: none;
}

html.bjpfg--variant-dark .bjpfg-loading-indicator__animation {
    border-color: rgba(255, 255, 255, 0.5);
}

html.bjpfg--variant-dark .bjpfg-loading-indicator__animation:after {
    background: #fff;
}

/* ==================== Kontrastmodus ==================== */

html.bjpfg--variant-plain-light {
    background: #fff;
    color: #000;
}

html.bjpfg--variant-plain-light .bjpfg-icon {
    color: #000;
}

html.bjpfg--variant-plain-light a,
html.bjpfg--variant-plain-light a:link,
html.bjpfg--variant-plain-light a:visited,
html.bjpfg--variant-plain-light a:hover,
html.bjpfg--variant-plain-light a.--link,
html.bjpfg--variant-plain-light button.--link {
    color: #000;
    text-decoration: underline;
}

html.bjpfg--variant-plain-light input:not([type=checkbox]),
html.bjpfg--variant-plain-light select,
html.bjpfg--variant-plain-light textarea {
    border-color: #000;
}

html.bjpfg--variant-plain-light .bjpfg-submit {
    border-color: #000;
}

/* Buttons */
html.bjpfg--variant-plain-light button:not(.--link) {
    color: #000;
    background: #fff;
    background-image: none;
    border: 2px solid #000;
    -webkit-box-shadow: none;
    box-shadow: none;
}

html.bjpfg--variant-plain-light button:not(.--link):not([disabled]):hover,
html.bjpfg--variant-plain-light button:not(.--link):not([disabled]):hover .bjpfg-icon {
    color: #fff;
    background-color: #000;
    border-color: #000;
    -webkit-box-shadow: none;
    box-shadow: none;
}

html.bjpfg--variant-plain-light button:not(.--link).--primary:not([disabled]),
html.bjpfg--variant-plain-light button:not(.--link).--success:not([disabled]),
html.bjpfg--variant-plain-light button:not(.--link).--primary:not([disabled]) .bjpfg-icon,
html.bjpfg--variant-plain-light button:not(.--link).--success:not([disabled]) .bjpfg-icon {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

html.bjpfg--variant-plain-light button:not(.--link).--primary:not([disabled]):hover,
html.bjpfg--variant-plain-light button:not(.--link).--success:not([disabled]):hover,
html.bjpfg--variant-plain-light button:not(.--link).--primary:not([disabled]):hover .bjpfg-icon,
html.bjpfg--variant-plain-light button:not(.--link).--success:not([disabled]):hover .bjpfg-icon {
    color: #000;
    background-color: #fff;
}

html.bjpfg--variant-plain-light button:not(.--link).--disabled,
html.bjpfg--variant-plain-light button:not(.--link):disabled,
html.bjpfg--variant-plain-light button:not(.--link):disabled:hover {
    color: #5c7080;
    border-color: #5c7080;
    background-color: #f5f5f5;
}