/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

html[data-theme='light'] {
    --menu-bg: rgba(255, 255, 255, 0.85);
}

html[data-theme='dark'] {
    --primary: #E30000;
    --secondary: #008BE3;
    --secondary-2: #00E340;
    --dark-1: #FFFFFF;
    --dark-2: #FFFAFA;
    --dark-3: #F6F6F6;
    --dark-4: #D4D4D4;
    --dark-5: #B3B3B3;
    --dark-6: #919191;
    --light-6: #808080;
    --light-5: #6B6B6B;
    --light-4: #575757;
    --light-3: #333333;
    --light-2: #1C1C1C;
    --light-1: #000000;

    --menu-bg: rgba(0, 0, 0, 0.85);

}

html.accesability-mode {
    --primary: #000000;
    --secondary: #000000;
    --secondary-2: #000000;

}


a {
    text-decoration: none;
}

.hidden {
    display: none;
}




/* MENÜ */
header.site-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: var(--menu-bg);
}
header.site-header .inside-header {
    padding: 16px 40px;
}
.main-navigation .menu-bar-items {
    gap: 10px;
}
.main-navigation .menu-bar-items svg:hover {
    fill: var(--primary);
}
#theme-toggle #moon, #theme-toggle #sun {
  display: none;
}
html[data-theme="light"] #theme-toggle #moon {
  display: inline-block;
}
html[data-theme="dark"] #theme-toggle #sun {
  display: inline-block;
}
html[data-theme="light"] #theme-toggle #moon:hover::before {
    position: absolute;
    content: 'Dunkle Ansicht';
    padding: 4px 8px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    right: 25px;
    top: 1px;
    font-weight: 600;
    border-radius: 5px;
    width: max-content;
    line-height: 1;
}
html[data-theme="dark"] #theme-toggle #sun:hover::before {
    position: absolute;
    content: 'Helle Ansicht';
    padding: 4px 8px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    right: 25px;
    top: 1px;
    font-weight: 600;
    border-radius: 5px;
    width: max-content;
    line-height: 1;
}
#accesability-btn:hover::before {
    position: absolute;
    content: 'zur barrierefreien Ansicht';
    padding: 4px 8px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    right: 20px;
    top: 0;
    font-weight: 600;
    border-radius: 5px;
    width: max-content;
    line-height: 1;
}
.accesability-mode #accesability-btn:hover::before {
    position: absolute;
    content: 'zur Standardansicht';
    padding: 4px 8px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    right: 20px;
    top: 0;
    font-weight: 600;
    border-radius: 5px;
    width: max-content;
    line-height: 1;
}
.copyright-bar {
    display: flex;
    align-items: center; 
}


/* POPUP */
html.pum-open.pum-open-overlay.pum-open-scrollable body > *:not([aria-modal="true"]) {
    padding-right: 0 !important;
}
.pum {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.20);
}
.pum .popmake {
    width: calc(1280px - 40px) !important;
    height: auto !important;
    top: 20px !important;
    left: 50% !important;
    transform: translate(-50%, 0px);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.95);
}

/* CAROUSEL */
.slick-slider .slick-list .slick-track .slick-slide:focus {
    outline: none;
}
.slick-next:before, .slick-prev:before {
    font-size: 25px !important;
}
.slick-slider .slick-next {
    right: 10px !important;
    z-index: 99 !important;
}
.slick-slider .slick-prev {
    right: 45px !important;
    left: auto;
    z-index: 99 !important;
}
.slick-next, .slick-prev {
    bottom: -45px;
    top: auto !important;
    width: 25px !important;
    height: 25px !important;
}
.wp-block-cb-carousel .slick-next:before, .wp-block-cb-carousel .slick-prev:before {
    color: var(--light-4) !important;
}