/** style.less */
/**
  * @package jda-julia-disability-access
  * @since jda-julia-disability-access 1.0.0
  */
/** 010-vars-jda.less */
/**
  * @package jda-julia-disability-access
  * @since   jda-julia-disability-access 1.2.0
  * @version 1.0.0
  */
:root {
  --font-h: 'Open Sans';
  --font-p: 'Open Sans';
  --font-i: 'Font Awesome 6 Free';
  --font-i-brands: 'Font Awesome 6 Brands';
  --icon-font-weight: bold;
}
:root {
  --icon-xmark: '\f00d';
  --icon-bars: '\f0c9';
  --icon-circle-half-stroke: '\f042';
  --icon-book-open-reader: '\f5da';
  --icon-magnifying-glass: '\f002';
  --icon-arrow-right-long: '\f178';
  --icon-circle-right: '\f35a';
  --icon-circle-left: '\f359';
  --icon-text-height: '\f034';
  --icon-volume-off: '\f026';
  --icon-volume-on: '\f028';
  --icon-keyboard: '\f11c';
  --icon-translate: '\f0ac';
  --icon-wheelchair-move: '\e2ce';
  --icon-hands: '\f2a7';
  --icon-help: '\f059';
  --icon-chevron-right: '\f054';
  --icon-chevron-down: '\f078';
}
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-dark: #666666;
  --color-gray-oparc: #00000099;
  --color-gray: #cccccc;
  --color-gray-light: #f2f2f2;
  --color-h: #ff0000;
  --color-p: #666666;
  --color-a: #ff0000;
  --color-em: #000000;
  --color-strong: #000000;
  --color-icon: #666666;
  --color-primary: #ff0000;
  --color-secondary: #007da0;
  --color-tertiary: #fc9b50;
  --color-quaternary: #967d64;
  --color-quinary: #3c9600;
  --color-on: #006900;
}
:root {
  --space-outer: 1rem;
}
@media (min-width: 768px) {
  :root {
    --space-outer: 1.5rem;
  }
}
@media (min-width: 1024px) {
  :root {
    --space-outer: 2rem;
  }
}
@media (min-width: 1440px) {
  :root {
    --space-outer: 3rem;
  }
}
:root {
  --animation-time: 0.3s;
  --shape-box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.3);
  --gradient-default: linear-gradient(48deg, #851624 0%, #ff0000 100%);
}
body.contrast-high {
  --color-black: #000000;
  --color-black-opac: #000000ee;
  --color-white: #ffffff;
  --color-white-opac: #ffffffee;
  --color-gray-dark: #000000;
  --color-gray: #000000;
  --color-gray-light: #ffffff;
  --color-h: #000000;
  --color-p: #000000;
  --color-a: #000000;
  --color-icon: #000000;
  --color-primary: #000000;
  --color-secondary: #000000;
  --color-tertiary: #ffffff;
  --color-quaternary: #ffffff;
  --color-on: #000000;
}
body.contrast-high img {
  filter: grayscale(1);
}
/** 010-vars-jda.less EOF */
/** 030-mobile-jda.less */
/**
  * @package jda-julia-disability-access
  * @since jda-julia-disability-access 1.0.0
  */
*:focus-visible {
  outline: 1px dashed magenta;
  outline-offset: 0;
}
.selection {
  background-color: #ffff0033;
  border: 1px dashed yellow;
}
.contrast-high .selection {
  background-color: #ccc;
}
/*
//#############################################################################
// style menu
// nav#disability-access.menu-disability-access.disability-access (child of JS config.selector)
.disability-access {
    padding      : 0;
    order        : 3;
    justify-self : flex-end;
    position     : relative;
    z-index      : 2;
    
    // & > a#disability-access-open.disability-access-open.open
    .disability-access-open {
        font-size       : 3rem;
        padding         : var(--space-outer);
        color           : var(--color-black);
        display         : block;
        line-height     : 1;
        text-decoration : none;
        background      : transparent;
        border          : none;
    }
    
    // & > a#disability-access-close-target.target
    .target { display : none; }
    
    // & > ul#disability-access-content.disability-access-content.content
    .disability-access-content {
        border  : none;
        margin  : auto;
        padding : 0;
        
        &:popover-open {
            top            : 0;
            display        : flex;
            flex-direction : column;
            gap            : 1rem;
        }
        
        &::backdrop { background-color : var(--color-white); }
        
        .close {
            display         : flex;
            justify-content : center;
        }
        
        .close-link {
            display          : block;
            font-size        : 1rem;
            padding          : 0.5rem 1rem;
            border-radius    : 2rem;
            background-color : transparent;
            border           : 0.2rem solid var(--color-black);
            color            : var(--color-a);
            white-space      : nowrap;
            
            margin-top       : 2rem;
        }
    }
    
    // & > ul#disability-access-content > li.disability-item
    .disability-item {
        display       : flex;
        align-content : center;
        gap           : 1rem;
        margin        : 0;
        
        //  icons  ############################################################
        // & > a.disability-icon
        .disability-icon {
            display         : block;
            background      : transparent;
            border          : none;
            text-decoration : none;
            color           : var(--color-black);
            position        : relative;
            text-align      : center;
            padding         : 1.6rem 0 0.3rem 0;
            width           : 3rem;
            height          : 3.6rem;
            font-size       : 1.3rem;
            
            &:hover { border-bottom : 0.2rem solid var(--color-black); }
            
            &:hover::after, &:focus-visible::after { content : attr(data-title); }
            
            &::before {
                font-family : var(--font-i);
                font-weight : 900;
                position    : absolute;
                left        : 0;
                top         : 0;
                width       : 3rem;
                text-align  : center;
            }
            
            &::after {
                position : absolute;
                display  : block;
                width    : 15rem;
                top      : -2rem;
                left     : calc(50% - 7.5rem);
            }
        }
        
        &:first-of-type .disability-icon::after { left : -1rem; text-align : left; }
        
        &:last-of-type .disability-icon::after { left : unset; right : -1rem; text-align : right; }
        
        &.translate .disability-icon:hover::after { left : -7.5rem; }
        
        // if the icon is disability-property is set to ON
        &.on .disability-icon, .fa-toggle-on, .active-button { color : var(--color-on); }
        
        //  content  ##########################################################
        .item-content {
            position         : fixed;
            display          : flex;
            flex-direction   : column;
            gap              : 1rem;
            align-items      : center;
            justify-content  : center;
            left             : 0;
            width            : 100dvw;
            height           : 100dvh;
            z-index          : 10;
            padding          : var(--space-outer);
            margin           : 0;
            list-style       : none;
            background-color : var(--color-white);
            
            *:focus-visible { outline-offset : 0.5rem; outline-color : var(--color-primary); }
            
            h2 { margin-bottom : 1rem; }
            
            .switch, button {
                font-size        : 2rem;
                width            : auto;
                text-decoration  : none;
                display          : block;
                position         : relative;
                text-align       : right;
                padding          : 0 0 0 3rem;
                color            : var(--color-black);
                background-color : transparent;
                border           : none;
                
                &:before {
                    display     : block;
                    position    : absolute;
                    left        : 0;
                    top         : 0.2rem;
                    font-family : var(--font-i);
                    font-weight : 900;
                }
                
                &[type=range] { padding-left : 0; }
            }
            
            select {
                -webkit-appearance : none;
                -moz-appearance    : none;
                appearance         : none;
                margin             : 1rem;
                font-size          : 1.2rem;
                padding            : 0.5rem;
            }
            
            .link { .disability-access-content .close-link; }
            
            .close {
                position        : absolute;
                display         : block;
                top             : 0;
                right           : 0;
                font-size       : 3rem;
                padding         : 1rem;
                text-decoration : none;
            }
            
            .help {
                display         : flex;
                align-items     : center;
                justify-content : center;
                position        : relative;
                padding         : 1rem;
                cursor          : pointer;
                font-size       : 3rem;
            }
            
            .description {
                max-width  : 600px;
                margin-top : 1rem;
                padding    : 1rem;
            }
            
            // hide help
            .help ~ .description {
                opacity    : 0;
                transition : opacity var(--animation-time);
                
                &.show { opacity : 1; }
            }
        }
        
        &.font-size {
            position : relative;
            
            & > a::before {
                content : var(--icon-text-height);
            }
            
            input {
                width     : 100%;
                max-width : 400px;
                margin    : 1rem;
            }
            
            .steps {display : none}
            
            #range-font-size {
                width              : 100%;
                appearance         : none;
                -webkit-appearance : none;
                margin             : 0;
                
                &::-webkit-slider-runnable-track {
                    margin-top    : 1rem;
                    width         : 100%;
                    height        : 0.5rem;
                    cursor        : pointer;
                    background    : transparent;
                    border-radius : 0.5rem;
                    border        : 0.2rem solid var(--color-black);
                }
                
                &::-moz-range-track {
                    width         : 100%;
                    height        : 0.25rem;
                    cursor        : pointer;
                    background    : transparent;
                    border-radius : 0.5rem;
                    border        : 0.2rem solid var(--color-black);
                }
                
                &::-webkit-slider-thumb {
                    height             : 1rem;
                    width              : 1rem;
                    border-radius      : 1rem;
                    background         : var(--color-black);
                    cursor             : pointer;
                    -webkit-appearance : none;
                    margin-top         : -0.4rem;
                    border             : none;
                }
                
                &::-moz-range-thumb {
                    height             : 1rem;
                    width              : 1rem;
                    border-radius      : 1rem;
                    background         : var(--color-black);
                    cursor             : pointer;
                    -webkit-appearance : none;
                    margin-top         : -0.25rem;
                    border             : none;
                }
            }
            
            #reset-font-size {
                display       : block;
                border        : 0.15rem solid var(--color-black);
                background    : var(--color-white);
                font-size     : 1rem;
                padding       : 0.5rem 1rem;
                border-radius : 2rem;
                width         : auto !important;
            }
        }
        
        &.contrast {
            & > a::before {
                content : var(--icon-circle-half-stroke);
            }
        }
        
        &.read-aloud > a::before {
            content : var(--icon-volume-off);
        }
        
        &.read-aloud.on > a::before {
            content : var(--icon-volume-on);
        }
        
        &.easy-language > a::before {
            content : var(--icon-book-open-reader);
        }
        
        &.sign-language > a::before {
            content : var(--icon-hands);
        }
        
        &.keyboard-operation > a::before {
            content : var(--icon-keyboard);
        }
        
        &.translate > a::before {
            content : var(--icon-translate);
        }
        
        &.help > a::before {
            content : var(--icon-help);
        }
        
        &.eye-able > a::before {
            content             : '';
            position            : absolute;
            display             : block;
            left                : 50%;
            transform           : translateX(-50%);
            top                 : 0;
            width               : 1.7rem;
            height              : 1.7rem;
            background-image    : url('../img/eye-able-whitelabel-icon-2.svg');
            background-repeat   : no-repeat;
            background-size     : contain;
            background-position : center;
        }
    }
    
    // show/hide .disability-access-content  ##################################
    .item-content { visibility : hidden; top : -100vh; }
    
    .visibility-true {
        visibility         : visible;
        top                : 0;
        animation-name     : jdaSlideIn;
        animation-duration : var(--animation-time);
    }
    
    .visibility-false {
        visibility         : hidden;
        top                : -100vh;
        animation-name     : jdaSlideOut;
        animation-duration : var(--animation-time);
    }
    
    @keyframes jdaSlideIn {
        from {
            top        : -100vh;
            visibility : hidden;
        }
        to {
            top        : 0;
            visibility : visible;
        }
    }
    
    @keyframes jdaSlideOut {
        from {
            visibility : visible;
            top        : 0;
        }
        to {
            top        : -100vh;
            visibility : hidden;
        }
    }
    
    // standards  #############################################################
    .display-none { display : none; }
}

// style vertical
.disability-access.is-style-vertical .disability-access-content {
    flex-direction : column;
    padding        : 0;
    z-index        : 100;
    list-style     : none;
    
    .disability-item {
        display  : flex;
        position : relative;
        height   : 2rem;
        
        .disability-icon {display : none}
        
        .item-content {
            position         : relative;
            display          : flex;
            flex-direction   : row;
            justify-content  : center;
            align-items      : center;
            width            : auto;
            height           : auto;
            left             : 0;
            top              : 0;
            visibility       : visible;
            z-index          : unset;
            list-style       : none;
            margin           : 0;
            background-color : transparent;
            padding          : 0;
            
            h2 {
                display       : none;
                margin-bottom : 1rem;
                position      : absolute;
                right         : 11rem;
                font-size     : 1rem;
                font-weight   : normal;
                color         : var(--color-black);
                text-align    : right;
                width         : 15rem;
                top           : 0.6rem;
                
                span {display : none}
            }
            
            .switch, button {
                font-size       : 1.8rem;
                width           : 5.7rem;
                text-decoration : none;
                display         : block;
                position        : relative;
                text-align      : right;
                padding         : 0;
                
                &:before {
                    display  : block;
                    position : absolute;
                    left     : 0;
                    top      : 0.3rem;
                }
            }
            
            .steps {
                font-size       : 1.8rem;
                width           : 5.7rem;
                position        : relative;
                display         : flex;
                justify-content : space-between;
                align-items     : center;
                color           : var(--color-black);
                
                i, span {cursor : pointer}
            }
            
            .steps {display : none}
            
            .link {
                font-size       : 0.1px;
                margin-top      : 0.25rem;
                display         : flex;
                align-items     : center;
                justify-content : center;
                width           : 5.8rem;
                height          : 1.9rem;
                border          : 0.2rem solid var(--color-black);
                border-radius   : 1rem;
                color           : transparent;
                
                &:before {
                    content    : 'anzeigen';
                    color      : var(--color-black);
                    text-align : center;
                    display    : block;
                    padding    : 0.1rem;
                    font-size  : 1rem;
                }
            }
            
            .close {
                display : none;
            }
            
            //input[type='range'] {display : none}
            
            .description {
                display     : block;
                position    : absolute;
                padding     : 0;
                width       : 1px;
                height      : 1px;
                overflow    : hidden;
                z-index     : -10;
                font-size   : 1px;
                text-indent : -9999px;
            }
            
            .help:hover + .description {
                right            : 2rem;
                top              : -2rem;
                width            : 20rem;
                height           : auto;
                overflow         : visible;
                font-size        : 1rem;
                background-color : var(--color-white);
                z-index          : 10;
                text-indent      : 0;
                border           : 1px solid var(--color-gray-light);
            }
        }
        
        .help {
            padding    : 0 0 0 1rem;
            margin-top : 0.4rem;
            cursor     : pointer;
        }
        
        &::before {
            font-family : var(--font-i);
            font-size   : 1.5rem;
            color       : var(--color-black);
            font-weight : 900;
            width       : 2.2rem;
            text-align  : center;
        }
        
        &.font-size {
            &::before {
                content : var(--icon-text-height);
            }
            
            #range-font-size {
                width : 5.7rem;
                top   : -0.2rem;
            }
            
            #reset-font-size {
                display : none;
            }
            
            .help {
                position   : relative;
                //padding  : 0.2rem 0 0 0.5rem;
                margin-top : 0.7rem;
            }
        }
        
        &.contrast {
            &::before {
                content : var(--icon-circle-half-stroke);
            }
        }
        
        &.read-aloud::before {
            content : var(--icon-volume-off);
        }
        
        &.read-aloud.on::before {
            content : var(--icon-volume-on);
        }
        
        &.easy-language::before {
            content : var(--icon-book-open-reader);
        }
        
        &.sign-language::before {
            content : var(--icon-hands);
        }
        
        &.keyboard-operation::before {
            content : var(--icon-keyboard);
        }
        
        &.translate::before {
            content : var(--icon-translate);
        }
        
        &.help::before {
            content : var(--icon-help);
        }
        
        &.eye-able::before {
            content             : var(--icon-help);
            color               : transparent;
            background-image    : url('../img/eye-able-whitelabel-icon-2.svg');
            background-repeat   : no-repeat;
            background-size     : contain;
            background-position : center;
        }
    }
}

// style horizontal
.disability-access.is-style-horizontal .disability-access-content {
    flex-direction : row;
}

//#############################################################################
// high contrast
.contrast-high .disability-access .disability-access-content .disability-item {
    .disability-icon {
        color : var(--color-black);
        
        &:hover { border-bottom-color : var(--color-black); }
    }
    
    &.on a.disability-icon { color : var(--color-black); }
}

.contrast-high .disability-access.is-style-vertical .disability-access-content .disability-item {
    .item-content {
        h2, .switch, button { color : var(--color-black); }
        
        .link {
            border-color : var(--color-black);
            
            &:before { color : var(--color-black); }
        }
        
        .help i:before { color : var(--color-black); }
    }
    
    &::before { color : var(--color-black); }
    
    &.font-size {
        position : relative;
        
        & > a::before {
            content : var(--icon-text-height);
        }
        
        input {
            width     : 100%;
            max-width : 400px;
            margin    : 1rem;
        }
        
        .steps { display : none; }
        
        #range-font-size {
            &::-webkit-slider-runnable-track { border-color : var(--color-black); }
            
            &::-moz-range-track { border-color : var(--color-black); }
            
            &::-webkit-slider-thumb { background : var(--color-black); }
            
            &::-moz-range-thumb { background : var(--color-black); }
        }
        
        #reset-font-size {
            border-color : var(--color-black);
            background   : var(--color-white);
        }
    }
}

.display-none { display : none !important; }

#audio-control {
    position         : fixed;
    right            : 1rem;
    bottom           : 5rem;
    display          : flex;
    flex-wrap        : wrap;
    background-color : #ccc;
    border-radius    : 3rem;
    width            : 3rem;
    height           : 3rem;
    overflow         : hidden;
    z-index          : 1;
    transition       : all 0.3s;
    
    &.expand {
        width : 12rem;
    }
    
    .control {
        display         : flex;
        justify-content : center;
        align-items     : center;
        font-size       : 1rem;
        width           : 3rem;
        height          : 3rem;
        transition      : all 0.3s;
        
        &.active {
            background-color : green;
            color            : white;
        }
    }
}

// hack eye-able
.eyeAble_topFixedPosition.eyeAble_topFixedPosition {}

 */
.disability-access {
  padding: 0;
  order: 3;
  justify-self: flex-end;
  position: relative;
  z-index: 2;
}
.disability-access .disability-access-open {
  font-size: 3rem;
  padding: 1rem;
  color: black;
  display: block;
  line-height: 1;
  text-decoration: none;
  background: transparent;
  border: none;
}
.disability-access .disability-access-content {
  border: none;
  margin: auto;
  padding: 1rem;
  background-color: transparent;
}
.disability-access .disability-access-content:popover-open {
  top: 0;
  display: flex;
  flex-direction: column;
}
.disability-access .disability-access-content::backdrop {
  background-color: white;
}
.disability-access .disability-access-content .close {
  display: flex;
  justify-content: center;
}
.disability-access .disability-access-content .button-disability-access-close {
  display: block;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  background-color: transparent;
  border: 2px solid black;
  color: black;
  white-space: nowrap;
  margin-top: 2rem;
}
.disability-access .disability-item {
  display: flex;
  align-items: center;
  color: black;
  position: relative;
  margin: 0.25rem 0;
}
.disability-access .disability-item:has(button:hover, button:focus, a:hover, a:focus) .disability-item-title {
  text-decoration: underline;
}
.disability-access .disability-item .disability-item-title {
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  width: 11rem;
  margin: 0 0.5rem;
  order: -1;
  white-space: nowrap;
  color: black;
}
.disability-access .disability-item button,
.disability-access .disability-item a {
  font-size: 1.2rem;
  line-height: 1;
  border: none;
  padding: 0;
  background-color: transparent;
  color: black;
  cursor: pointer;
}
.disability-access .disability-item button i,
.disability-access .disability-item a i {
  padding: 0.25rem;
}
.disability-access .disability-item button::after,
.disability-access .disability-item a::after {
  content: '';
  position: absolute;
  display: block;
  right: -8px;
  top: 0;
  width: 4px;
  height: 100%;
  border-right: 4px dotted transparent;
}
.disability-access .disability-item .active::before {
  content: '';
  position: absolute;
  display: block;
  right: -8px;
  width: 4px;
  height: 100%;
  border-right: 4px solid black;
}
.disability-access .settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  margin: 0;
}
.disability-access div.help {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  margin: 0;
}
.disability-access .help-content {
  margin: auto;
  padding: 1rem;
  border: none;
  width: 80%;
}
.disability-access .help-content::backdrop {
  background-color: #000000aa;
  backdrop-filter: blur();
}
.disability-access .help-button-close {
  display: block;
  border: 2px solid black !important;
  border-radius: 2rem;
  padding: 0.5rem 1rem !important;
  margin: 1rem auto;
}
#audio-control {
  position: fixed;
  right: 1rem;
  bottom: 5rem;
  display: flex;
  flex-wrap: wrap;
  background-color: #ccc;
  border-radius: 3rem;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  z-index: 1;
  transition: all 0.3s;
}
#audio-control.expand {
  width: 12rem;
}
#audio-control.display-none {
  display: none;
}
#audio-control .control {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  width: 3rem;
  height: 3rem;
  transition: all 0.3s;
}
#audio-control .control.active {
  background-color: green;
  color: white;
}
/** 030-mobile-jda.less EOF */
@media (min-width: 768px) {
  /** 040-tablet.less */
  /**
  * @package jda-julia-disability-access
  * @since jda-julia-disability-access 1.0.0
  */
  /** 040-tablet.less EOF */
}
@media (min-width: 1024px) {
  /** 050-tablet-l-jda.less */
  /**
  * @package %julia-theme-2023%
  * @since   %julia-theme-2023% 1.0.0
  * @version 1.0.0
  */
  .disability-access .disability-access-open {
    display: none;
  }
  .disability-access .disability-access-content {
    overflow: visible;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
  }
  .disability-access .disability-access-content .disability-access-close {
    display: none;
  }
  .disability-access .disability-item .disability-item-title {
    position: absolute;
    margin-left: -11.5rem;
    text-align: right;
    opacity: 0;
  }
  .disability-access .disability-item:has(button:hover, a:hover, :focus-visible) .disability-item-title {
    opacity: 1;
    text-decoration: none;
  }
  .disability-access.is-style-horizontal .disability-access-content {
    flex-direction: row;
  }
  .disability-access.is-style-horizontal .disability-item {
    flex-direction: column;
    position: relative;
  }
  .disability-access.is-style-horizontal .disability-item .disability-item-title {
    top: -1.6rem;
    width: fit-content;
    margin: 0;
  }
  .disability-access.is-style-horizontal .disability-item button,
  .disability-access.is-style-horizontal .disability-item a {
    font-size: 1.2rem;
    border: none;
    padding: 0;
    background-color: transparent;
    color: black;
  }
  .disability-access.is-style-horizontal .disability-item button i,
  .disability-access.is-style-horizontal .disability-item a i {
    padding: 0.25rem;
  }
  .disability-access.is-style-horizontal .disability-item .active::before {
    right: 50%;
    bottom: -8px;
    width: 2rem;
    height: 4px;
    border-right: unset;
    border-bottom: 4px solid black;
    transform: translateX(50%);
  }
  .disability-access.is-style-horizontal .disability-item:last-of-type .disability-item-title {
    left: -100%;
  }
  .disability-access.is-style-horizontal .disability-item .settings {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 2.5rem;
  }
  .disability-access.is-style-horizontal .disability-item .help {
    margin: 1rem 0 0 0;
  }
  .disability-access.is-style-horizontal .disability-item.font-size .settings {
    width: 5rem;
  }
  /** 050-tablet-l-jda.less EOF */
}
/** style.less EOF */
/*# sourceMappingURL=style.css.map */