/* Grundlegende Stile für die Aktionen der Zugänglichkeits-Toolbar */

/* 1. Toolbar-Container Positionierung */
#mwd-a11y-toolbar {
    position: fixed; /* Fixierte Position */
    right: 0;     /* 20px Abstand vom rechten Rand */
    top: 10vh;       /* 20px Abstand vom oberen Rand */
    z-index: 1000;   /* Sicherstellen, dass die Toolbar über anderen Elementen liegt */
    box-sizing: border-box;
    transition: right 0.3s ease-in-out;
}

.mwd-a11y-toolbar-open {
    right: 250px !important;
    transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
}

/* 2. Toggle-Button immer sichtbar und Grundstyling */
.mwd-a11y-toolbar-toggle {
    /* Nichts Spezielles hier, da der Link selbst das Styling hat */
    position: absolute;
    right: 0;
}

.mwd-a11y-toolbar-right {
    right: 0;
}

.mwd-a11y-toolbar-inner p {
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

.mwd-a11y-toolbar-toggle-link {
    padding: 10px;
    text-decoration: none;
    font-size: 30px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Kleiner Schatten für den Button */
    background-color: #415968;
    color: #ffffff;
    width: 30px;
    height: 30px;
    display: block;
}

.mwd-a11y-toolbar-toggle-link:hover {
    background-color: #000000;
}

/* 3. Overlay-Verhalten und weißer Hintergrund */
.mwd-a11y-toolbar-overlay {
    position: absolute; /* Positioniert relativ zum toolbar-container */
    top: 0; /* 10px unter dem Toggle-Button */
    left: 0; /* Rechtsbündig zum Toggle-Button */
    width: 250px; /* Feste Breite oder auto, je nach Wunsch */
    background-color: white; /* Hintergrund: Weiss */
    border: 1px solid #ccc;
    padding: 15px;
    box-sizing: border-box; /* Padding und Border in der Breite enthalten */
}

.mwd-a11y-toolbar-overlay.is-open {
    display: block; /* Zeigt das Overlay an, wenn die Klasse 'is-open' gesetzt ist */
}

/* 4. Verstecken des SR-Only Textes */
.mwd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* 5. Styling für die Liste der Toolbar-Elemente */
.mwd-a11y-toolbar-items {
    list-style: none;
    padding: 0;
    margin: 0; /* Entfernt Standard-Margin */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mwd-a11y-toolbar-items li {
    margin: 0;
}

.mwd-a11y-toolbar-item a {
    padding: 8px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    text-align: center;
    transition: background-color 0.3s ease;
    width: 90px; /* Feste Breite für die Buttons im Overlay */
    height: 70px; /* Feste Höhe für die Buttons im Overlay */
    box-sizing: border-box;
    letter-spacing: 0;
}

.mwd-a11y-toolbar-item a svg {
    padding-right: 6px;
}

.mwd-a11y-toolbar-icon {
    margin-bottom: 5px;
    line-height: 1;
}

/* Titel im Overlay */
.mwd-a11y-toolbar-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
}


/* --- Funktionalitäten CSS --- */


body {
    height: 100vh;
}


/* 1. Textgröße anpassen (resize-plus, resize-minus) */
body.mwd-a11y-resize-plus {
    
}

body.mwd-a11y-resize-minus {
    
}

/* 2. Farbschemata (grayscale, high-contrast, negative-contrast, light-background) */

/* Graustufen (grayscale) */
body.mwd-a11y-grayscale {
    filter: grayscale(100%);
}

/* Hoher Kontrast (high-contrast) */
body.mwd-a11y-high-contrast {
    background-color: black !important;
    color: yellow !important;
}
body.mwd-a11y-high-contrast a {
    color: lime !important;
    text-decoration: underline !important;
}

body.mwd-a11y-high-contrast h1 {
    background-color: transparent !important;
    background: transparent !important;
}


/* Negativer Kontrast (negative-contrast) - Invertiert Farben */
body.mwd-a11y-negative-contrast {
    filter: invert(100%);
    background-color: white !important; /* Sicherstellen, dass der Hintergrund weiß ist, bevor invertiert wird */
}

body.mwd-a11y-negative-contrast h1 {
    background-color: transparent !important;
    background: transparent !important;
}

/* Heller Hintergrund (light-background) - Setzt einen sehr hellen Hintergrund und dunklen Text */
body.mwd-a11y-light-background {
    background-color: #ffffff !important;
    color: #000000 !important;
}
body.mwd-a11y-light-background a {
    color: #000000 !important;
}

body.mwd-a11y-light-background h1 {
    background-color: transparent !important;
    background: transparent !important;
}

body.mwd-a11y-light-background #sidebar {
    background-color: #f1f1f1 !important;
    background: #f1f1f1 !important;
}

body.mwd-a11y-light-background .mwd-a11y-toolbar-toggle svg {
    fill: #ffffff !important;
}

body.mwd-a11y-light-background #ncr_title{
    background:url("../../images/20181212-logo-web.gif")no-repeat;
    background-size: contain;
    width: 100%;
}

body.mwd-a11y-light-background #sidebar ul li.active {
   border-bottom: 1px solid #000000 !important;
   background-image: none !important;
}


/* 3. Links unterstreichen (links-underline) */
body.mwd-a11y-links-underline a {
    text-decoration: underline !important;
}

/* 4. Lesbare Schriftart (readable-font) */
body.mwd-a11y-readable-font {
    font-family: "Segoe UI", "Calibri", "Arial", sans-serif !important;
    line-height: 1.6 !important;
}

/* Übergänge für sanftere Effekte (optional) */
/*
body {
    transition: all 0.3s ease-in-out;
}
body a {
    transition: color 0.3s ease-in-out, text-decoration 0.3s ease-in-out;
}
*/

.mwd-a11y-resize-font-130 .mwd-a11y-toolbar-toggle-link,
.mwd-a11y-resize-font-140 .mwd-a11y-toolbar-toggle-link,
.mwd-a11y-resize-font-150 .mwd-a11y-toolbar-toggle-link,
.mwd-a11y-resize-font-160 .mwd-a11y-toolbar-toggle-link,
.mwd-a11y-resize-font-170 .mwd-a11y-toolbar-toggle-link,
.mwd-a11y-resize-font-180 .mwd-a11y-toolbar-toggle-link,
.mwd-a11y-resize-font-190 .mwd-a11y-toolbar-toggle-link,
.mwd-a11y-resize-font-200 .mwd-a11y-toolbar-toggle-link{
    font-size: 30px !important;
    line-height: unset !important;
}

.mwd-a11y-resize-font-130 .mwd-a11y-toolbar-items,
.mwd-a11y-resize-font-140 .mwd-a11y-toolbar-items,
.mwd-a11y-resize-font-150 .mwd-a11y-toolbar-items,
.mwd-a11y-resize-font-160 .mwd-a11y-toolbar-items,
.mwd-a11y-resize-font-170 .mwd-a11y-toolbar-items,
.mwd-a11y-resize-font-180 .mwd-a11y-toolbar-items,
.mwd-a11y-resize-font-190 .mwd-a11y-toolbar-items,
.mwd-a11y-resize-font-200 .mwd-a11y-toolbar-items{
    width: 100% !important;
}

.mwd-a11y-resize-font-130 ul li,
.mwd-a11y-resize-font-140 ul li,
.mwd-a11y-resize-font-150 ul li,
.mwd-a11y-resize-font-160 ul li,
.mwd-a11y-resize-font-170 ul li,
.mwd-a11y-resize-font-180 ul li,
.mwd-a11y-resize-font-190 ul li,
.mwd-a11y-resize-font-200 ul li{
    padding-bottom: 10px;
}