/* High Contrast Mode Styles */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
    font-size: 16px !important;
}

/* Links */
body.high-contrast a,
body.high-contrast a:link,
body.high-contrast a:visited {
    color: #ffff00 !important; /* Gelb */
    background-color: #000 !important;
}

body.high-contrast a:hover,
body.high-contrast a:focus,
body.high-contrast a:active {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

/* Standardtextelemente */
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4,
body.high-contrast h5,
body.high-contrast h6,
body.high-contrast p,
body.high-contrast span,
body.high-contrast div {
    color: #fff !important;
    background-color: #000 !important;
}

/* Bilder */
body.high-contrast img {
    filter: grayscale(100%) contrast(120%);
}

/* Buttons */
body.high-contrast .btn,
body.high-contrast button {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

body.high-contrast .btn:hover,
body.high-contrast button:hover {
    background-color: #333 !important;
}

/* Formularelemente */
body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
}

/* Navigation */
body.high-contrast .header-nav-main nav > ul > li > a {
    color: #ffff00 !important; /* Gelb für Navigationslinks */
}

/* Dropdown-Menü */
body.high-contrast .dropdown-menu {
    background-color: #000 !important;
    border: 2px solid #fff !important;
}

body.high-contrast .dropdown-item {
    color: #ffff00 !important; /* Gelb für Dropdown-Items */
}

body.high-contrast .dropdown-item:hover {
    background-color: #333 !important;
}

/* Kontrast-Umschalter */
body.high-contrast .contrast-toggle {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    border-radius: 4px;
}

body.high-contrast .contrast-toggle:hover {
    background-color: #333 !important;
}

/* Normale Version des Kontrastschalters */
.contrast-toggle {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    border-radius: 4px;
}

.contrast-toggle:hover {
    background-color: #e9ecef;
}

/* Tabellen */
body.high-contrast table,
body.high-contrast th,
body.high-contrast td {
    color: #ffffff !important; /* weiße Schrift */
    background-color: #000000 !important; /* schwarzer Hintergrund */
    border: 1px solid #ffffff !important; /* weiße Rahmen */
}

body.high-contrast table thead th {
    background-color: #222222 !important; /* dunkleres Grau für Kopfzeile */
}

body.high-contrast table tbody tr:hover {
    background-color: #333333 !important; /* Hover-Effekt für Zeilen */
}

/* Farben Grün und Rot im Hochkontrast */
body.high-contrast .text-green,
body.high-contrast .green,
body.high-contrast [style*="color: green"],
body.high-contrast [style*="color:#008000"],
body.high-contrast [style*="color:#0f0"] {
    color: #00FFFF !important; /* Cyan/Hellblau */
}

body.high-contrast .text-red,
body.high-contrast .red,
body.high-contrast [style*="color: red"],
body.high-contrast [style*="color:#ff0000"],
body.high-contrast [style*="color:#f00"] {
    color: #FFFF00 !important; /* Knallgelb */
}

/* Unterstützung für <font color="green"> und <font color="red"> */
body.high-contrast font[color="green"] {
    color: #00FFFF !important; /* Cyan */
}

body.high-contrast font[color="red"] {
    color: #FFFF00 !important; /* Gelb */
}

/* Innerhalb von Tabellen */
body.high-contrast table font[color="green"] {
    color: #00FFFF !important;
    background-color: #000 !important;
}

body.high-contrast table font[color="red"] {
    color: #FFFF00 !important;
    background-color: #000 !important;
}

#wonderchat-wrapper,
.chakra-ui-light,
.css-1dw2lj4,
.chakra-button.css-1ghl3uv,
#chatbot-dragger {
background-color: transparent !important;
}	

svg.kontrast-svg {
    fill: #999;
    height: 13px;
    width: 13px;
    position: relative;
    top: -1px;
    margin-right: 2px;
}
.body.i-html svg.kontrast-svg {
    top: 2px;
}
body.high-contrast svg.kontrast-svg {
fill: #ffff00 !important;
}
