/*
Theme Name: Zehnpixel 2025
Theme URI: 
Description: A theme for Zehnpixel
Author: Zehnpixel Webdesign
Author URI: https://zehnpixel.de/
Version: 1.1.23
Template: qi
*/


/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../zehnpixel2024/fonts/roboto-v48-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ················································ */
/* :            _                 _          _    : */
/* :    _______| |__  _ __  _ __ (_)_  _____| |   : */
/* :   |_  / _ \ '_ \| '_ \| '_ \| \ \/ / _ \ |   : */
/* :    / /  __/ | | | | | | |_) | |>  <  __/ |   : */
/* :   /___\___|_| |_|_| |_| .__/|_/_/\_\___|_|   : */
/* :                       |_|                    : */
/* ················································ */



/***CONTENT---------
    
    00. Variables
    01. Allgemeine Styles
        01.01. Service Box
        01.02.  Button Styles 
    02. Logo + Nav
        02.01. Logo
        02.02. Navigation
        02.03. Fullscreen Menu
        02.04. Darkmode Switch
        
    03. Footer
    04. Aktuelles/Blog
    05. Kontaktformular
    06. Seitenspezifische Styles
        06.01. Über Zehnpixel
        

    98. Toggle Colors
        98.02. Dark theme toggle
        98.03. Navigation
        98.04. Dark Mode Switch
        98.05. Service Blocks
        98.06. Kontaktformular
        98.07. Über Zehnpixel
           
        
    99. Media Queries

*******------*/

        

/* 00. Variables*/
:root {
    --ParagraphBlack: #000000;
    --Primary: #4D81C2;
    --Secondary: #EC3E37;
    --Accent: #B3E148;
    --Accent-Two: #ff3;
    --ParagraphFont: 'Roboto';
    --Background-Dark: #262626;
    --Background-Dark-Transparent: rgba(38, 38, 38, 0.95);
    --Background-Dark-Accent:#1f1f1f;
    --Background-Light: #f3f3f3;
    --Background-Light-Transparent: rgba(243, 243, 243, 0.95);
    --Background-Light-Accent: #fbfbfb;
}


/* 01. ALLGEMEINE STYLES*/

    body, p, h1, h2, h3, h4, h5, h6, ul, ol {

        -webkit-hyphens: auto;
        -webkit-hyphenate-limit-before: 3;
        -webkit-hyphenate-limit-after: 3;
        -webkit-hyphenate-limit-chars: 6 3 3;
        -webkit-hyphenate-limit-lines: 2;
        -webkit-hyphenate-limit-last: always;
        -webkit-hyphenate-limit-zone: 8%;
        -moz-hyphens: auto;
        -moz-hyphenate-limit-chars: 6 3 3;
        -moz-hyphenate-limit-lines: 2;
        -moz-hyphenate-limit-last: always;
        -moz-hyphenate-limit-zone: 8%;
        -ms-hyphens: auto;
        -ms-hyphenate-limit-chars: 6 3 3;
        -ms-hyphenate-limit-lines: 2;
        -ms-hyphenate-limit-last: always;
        -ms-hyphenate-limit-zone: 8%;
        hyphens: auto;

        hyphenate-limit-chars: 6 3 3;
        hyphenate-limit-lines: 2;
        hyphenate-limit-last: always;
        hyphenate-limit-zone: 8%;
    }

    body {
        background-color: var(--Background-Dark)!important;
            color: var(--Accent);
            }
        
    h1, h2, h3, h4, h5, h6, p, li,  #qodef-back-to-top .qodef-back-to-top-label {
                color: var(--Accent)!important;
            }

    a, p a {
                color: var(--Accent)!important;
            }

    #qodef-page-header .qodef-header-logo-link img, #qodef-page-mobile-header .qodef-header-logo-link, #qodef-page-mobile-header .qodef-mobile-header-logo-link {
        /*height:250px;*/
        content: url("/wp-content/uploads/2024/06/zehnpixel-digitalbuero-logo_gruen.svg");
    }

    .qodef-header--standard #qodef-page-header, .qodef-header-sticky {
        background-color: var(--Background-Dark);
    }

    #qodef-page-outer {
        background-color: var(--Background-Dark);
    }

  

    #qodef-page-inner a:not(.btna), .sub-menu  a .qodef-menu-item-text, #qodef-page-footer a {
        position: relative;
        font-weight: 500;

        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 4px;
            border-radius: 4px;
            background-color: var(--Accent-Two);
            bottom: 0;
            left: 0;
            transform-origin: right;
            transform: scaleX(0);
            transition: transform .5s ease-in-out;
        }

        &:hover::before {
            transform-origin: left;
            transform: scaleX(1);
        }
	
    }


    b, strong {
        font-weight: 500!important;
    }

    ul,ol {
        list-style-position: outside!important;
        margin-left: 20px!important;
    }

    ol li {
        padding-bottom: 5px;
    }
 

    .no-show {
        display: none;
    }

    .text {
        padding: 50px;
    }

    .center {
        text-align: center;
    }

    .faq.border.top {
        border-top: none!important;
    }
    
    .border.top .qodef-qi-faq.qodef-style--border-between .qodef-e-title-holder:first-child {
        border-top: none;
    }

    #qodef-page-header .qodef-widget-holder {
        margin-left: 20px!important;
        margin-top: 5px;
    }

    .rounded-corners .elementor-video, .rounded-corners .elementor-motion-effects-container, .rounded-corners.elementor-element, .rounded-corners video, .rounded-corners img {
    border-radius: 8px!important;
    }



            #qodef-back-to-top .qodef-back-to-top-label:hover, a:hover, p a:hover  {
                color: var(--Secondary)!important;
            }

            .outline .qodef-m-title, .outline .qodef-m-subtitle, .outline .qodef-typeout {
                text-shadow:   1px 1px 3px var(--Background-Dark),
                -1px 1px 3px var(--Background-Dark),
                -1px -1px 3px var(--Background-Dark),
                1px -1px 3px var(--Background-Dark);
              }


           
            
            .square-home .elementor-icon svg {
                fill: var(--Accent)!important;
            }

            .bg-fill {
                background-color: var(--Background-Dark);
            }

            .border {
                &.top {
                    border-top: var(--Accent) 1px solid;
                    }
                
                &.bottom {
                    border-bottom: var(--Accent) 1px solid;
                    }
                
                &.right {
                    border-right: var(--Accent) 1px solid;
                    }
                
                &.left {
                    border-left: var(--Accent) 1px solid;
                    }
            }

            .border.top .qodef-qi-faq.qodef-style--border-between .qodef-e-title-holder {
                border-top: var(--Accent) 1px dotted;
                    }
                
        ul.elementor-icon-list-items {
            margin-left: 0px!important;
        }

        .elementor-icon-list-icon svg {
            fill: var(--Accent)!important;
        }


        /* 01.01. Service-Box*/
            
            .service-box {
                width: 60vmin;
                height: 50vmin;
                display: grid;
                place-content: center;        
                --border-angle: 0turn; 
                --main-bg: conic-gradient(
                    from var(--border-angle),
                    var(--Background-Dark),
                    var(--Background-Dark-Accent) 5%,
                    var(--Background-Dark-Accent) 60%,
                    var(--Background-Dark) 95%
                  );

                border: solid 3px transparent;
                border-radius: 15px;
                --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, var(--Accent), var(--Secondary) 99%, transparent);

                background: 
                            var(--main-bg) padding-box,
                  var(--gradient-border) border-box, 
                  var(--main-bg) border-box;

                background-position: center center;        
            }

            a.service-box:hover::before, a.service-box::before {
                background-color: transparent!important;
            }   

            .service-box.b-speed-1:hover, .service-box.b-speed-2:hover, .service-box.b-speed-3:hover, .service-box.b-speed-4:hover {
                animation-play-state: paused;
            }

            .service-box.b-speed-1 {
            animation: bg-spin 3s linear infinite;
                @keyframes bg-spin {
                to {
                    --border-angle: 1turn;
                }
                }
            }


            .service-box.b-speed-2 {
                animation: bg-spin 4s linear infinite;
                    @keyframes bg-spin {
                    to {
                        --border-angle: 1turn;
                    }
                    }
                }

            .service-box.b-speed-3 {
                animation: bg-spin 6s linear infinite;
                    @keyframes bg-spin {
                    to {
                        --border-angle: 1turn;
                    }
                    }
                }

            .service-box.b-speed-4 {
                animation: bg-spin 5s linear infinite;
                    @keyframes bg-spin {
                    to {
                        --border-angle: 1turn;
                    }
                    }
                }

            @property --border-angle {
                syntax: "<angle>";
                inherits: true;
                initial-value: 0turn;
            }

            @-webkit-keyframes bg-spin {
                to {
                --border-angle: 1turn;
                }
            }
        /* Service-Box Ende*/
   
        /* 01.02.  Button Styles*/ 
                a.btna{
                    display: inline-block;
                    width: auto;
                }

                    

                .btn {
                    width: 150px;
                    height: 50px;
                    font-size: 15px;
                    inset: 0;
                    cursor: pointer;
                    -webkit-tap-highlight-color: transparent;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    z-index: 0;
                    transition: 0.6s;
                    border-radius: 5px;
                    margin-top: 15px;
                    border: 3px solid var(--Accent);
                    color: var(--Background-Light);
                    background: var(--Background-Dark-Accent);
                }

                
                .btn::before, .btn::after {
                    position: absolute;
                    z-index: -1;
                    transition: 0.6s;
                    content: '';
                }
                
                .btn::before {
                    height: 50px;
                    width: 75px;
                }
                
                .btn::after {
                    width: 150px;
                    height: 15px;
                }
                
                .noselect {
                    -webkit-touch-callout: none;
                    -webkit-user-select: none;
                    -khtml-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                            user-select: none;
                }
                
                .btn:hover::before {
                    width: 0px;
                }
                
                .btn:hover::after {
                    height: 0px;
            
                }
  

               .btn:hover::before {
                background: var(--Background-Dark-Accent);
                }
                
                .btn:hover::after {
                    background: var(--Background-Dark-Accent);
                }
                
                .btn:hover {
                    background: var(--Background-Dark-Accent);
                }
                
            
                .btn::before, .btn::after {
                    background: var(--Background-Dark-Accent);
                }


            /*****/




    /*************************/


/*02. LOGO + NAV*/

    /* 02.01 Logo*/
    #qodef-page-header .qodef-header-logo-link img, #qodef-page-header .qodef-header-logo-link span, #qodef-page-mobile-header .qodef-header-logo-image.qodef--customizer {
        max-height: 75%!important;
    }

    #qodef-page-header .qodef-header-logo-link {
        width: 20%;
    }

    #qodef-page-mobile-header .qodef-header-logo-link, #qodef-page-mobile-header .qodef-mobile-header-logo-link {
        width: 200px;
        height: 50px!important;
    }

    #qodef-page-header .qodef-header-logo-link:focus {
        outline: 0px!important;
    }

   /* .qodef-mobile-header--minimal #qodef-page-mobile-header-inner {
        padding-left: 0px!important;
    }*/
    

    /* 02.02. Navigation */
    .qodef-header-navigation>ul>li {
        height: 65%!important;
    }

    .qodef-header-navigation ul li a:hover {
        color: var(--Secondary)!important;
    }
    .qodef-header-navigation ul li ul {
        width: 300px!important;
    }

    /*.qodef-header-navigation>ul>li>a {
        transition: outline 1s ease 0s;
        outline: 1px solid transparent;
        border-radius: 45%;

    }*/

    /*.qodef-header-navigation> ul > li > a:hover, .qodef-header-navigation> ul > li > a:focus {
        outline: 3px solid var(--Accent);
        border-radius: 45%;
    }*/


    .qodef-header-navigation> ul > li > a::after{
        content: "";
        background: var(--Accent-Two);
        
        width: calc(100% - 0px);
        height: 0px;
        position: absolute;
        bottom: 13px;
        left: 0px;
          transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
          z-index: -10;
          border-radius: 3px 8px 0px 5px;
      }

      .qodef-header-navigation> ul > li.current-menu-ancestor > a::after, .qodef-header-navigation> ul > li.current-menu-item > a::after{
      
        height: 8px;
        position: absolute;
        bottom: 15px;
        left: 0px;
        width: calc(100% - 0px);
          transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
          z-index: -10;
      }
      
      .qodef-header-navigation> ul > li > a:hover::after{
          height: calc(60% + 1px);
      }

        #qodef-page-mobile-header {
        background-color: var(--Background-Dark)!important;
    }

   

    /* 02.03. Fullscreen Menu */

     #qodef-fullscreen-area {
        background-color: var(--Background-Dark-Transparent)
    }
      #qodef-fullscreen-area .qodef-content-grid .qodef-fullscreen-menu {
        width: unset!important;
      }

      #qodef-fullscreen-area .qodef-fullscreen-menu-close {
        top: 27px;
        right: 34px;
     }

     .qodef-fullscreen-menu>ul>li>a {
        font-size: 40px;
        line-height: 55px;
    }

    #qodef-fullscreen-area-inner {
        flex-direction: column;
    }

    .qodef-fullscreen-widget-holder {
        right: 90px;
        top: 13px;
        position: absolute;
    }



    /*02.04. Darkmode Switch*/

     .dark-toggle {
                display: none;
            }
            
    .light-toggle svg {
                fill: white;
                transition: 1s ease 0s;
            }

    .btn-toggle {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: 3;
        background-color: transparent;
        border: none;

    }

    .btn-toggle:hover {
        cursor: pointer;
        animation-name: bounce;
        -moz-animation-name: bounce;  cursor: pointer;
        animation-name: bounce;
        -moz-animation-name: bounce;
        border: 2px solid;
        border-radius: 100%;
        transition: 1s ease 0s;
        border-color: var(--Accent);
    }

    @keyframes bounce {
        0%, 100%, 20%, 50%, 80% {
            -webkit-transform: translateY(0);
            -ms-transform:     translateY(0);
            transform:         translateY(0)
        }
        40% {
            -webkit-transform: translateY(-8px);
            -ms-transform:     translateY(-8px);
            transform:         translateY(-8px)
        }
        60% {
            -webkit-transform: translateY(-4px);
            -ms-transform:     translateY(-4px);
            transform:         translateY(-4px)
        }
    }

    /*.light-toggle svg:hover, .light-theme .dark-toggle svg:hover {
        fill: var(--Secondary);
        cursor: pointer;
    }*/

    .btn-toggle .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        top: 110%;
        right: -50%;
      }
      
      .btn-toggle:hover .tooltiptext {
        visibility: visible;
      }


/* 03. FOOTER */
    .logo-footer {
        height: 100px;
        content: url("/wp-content/uploads/2024/07/zehnpixel-digitalbuero-emblem_gruen-schwarz.svg");
        }

    #qodef-page-footer-top-area {
        border-top: var(--Accent) 1px solid;
        background-color: var(--Background-Dark)!important;
    }

    #qodef-page-footer-bottom-area {
        background-color: var(--Background-Dark)!important;
    }

    #qodef-page-footer-bottom-area-inner {
        border-top: 0px!important;
    }
    
    
    .qodef-grid.qodef-layout--columns.qodef-col-num--5>.qodef-grid-inner {
        grid-template-columns: 1fr 2fr 1fr 1fr!important;
    }

    #block-32, #block-29, #block-30{
        justify-self: end;
    }

    #qodef-page-footer-top-area {
        font-size: 0.9em;
        line-height: 1.5em;
    }
    #qodef-page-footer-bottom-area {
        font-size: 0.8em;
    }

    .qodef-grid.qodef-gutter--normal>.qodef-grid-inner {
        gap: 0px 30px!important;
    }

    #qodef-page-footer-bottom-area-inner {
        border-top: 0px!important;
    }

/* 04. BLOG */ 

    .qodef-blog.qodef--single .qodef-blog-item .qodef-e-content {
        padding-top: 0px!important;
        padding-bottom: 0px!important;
        margin-bottom: 0px!important;
        border-bottom: 0px!important;
    }

    /* 05. Kontaktformular */

    
    label {
        font-weight: 600!important;
        font-family: var(--ParagraphFont)!important;
        color: var(--Accent)!important;
    }

    input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"], input[type="date"], textarea, select, body .select2-container--default .select2-selection--single, body .select2-container--default .select2-selection--multiple, .widget[class*="_search"] button.qodef-search-form-button, .wp-block-search .wp-block-search__input, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, .widget.widget_block .wp-block-woocommerce-product-search input {
        border-color: var(--Accent)!important;
        color: var(--Accent)!important;
    }

    input[type="submit"], button[type="submit"], .qodef-theme-button.qodef--filled, button.qodef-theme-button.qodef--filled, #qodef-woo-page .added_to_cart, #qodef-woo-page .button, .qodef-woo-shortcode .added_to_cart, .qodef-woo-shortcode .button, .widget.woocommerce .button, .woocommerce-page div.woocommerce>.return-to-shop a, .woocommerce-account .button, #qodef-page-header .widget.woocommerce.widget_shopping_cart .buttons a, .widget.woocommerce.widget_shopping_cart .buttons a {
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        letter-spacing: 0em;
        text-transform: none;
        background-color: transparent!important;
        border-radius: 5px!important;
        border: 2px solid!important;
        padding: 10px 40px!important;
        margin-top: 20px!important;
        text-transform: none!important;
        border-color: var(--Accent)!important;
    }

     input[type="submit"]:hover,
            button[type="submit"]:hover,
            .qodef-theme-button.qodef--filled:hover,
            button.qodef-theme-button.qodef--filled:hover,
            #qodef-woo-page .added_to_cart:hover,
            #qodef-woo-page .button:hover,
            .qodef-woo-shortcode .added_to_cart:hover,
            .qodef-woo-shortcode .button:hover,
            .widget.woocommerce .button:hover,
            .woocommerce-page div.woocommerce > .return-to-shop a:hover,
            .woocommerce-account .button:hover,
            #qodef-page-header .widget.woocommerce.widget_shopping_cart .buttons a:hover,
            .widget.woocommerce.widget_shopping_cart .buttons a:hover {
                background-color: var(--Accent)!important;
                color: var(--ParagraphBlack);
            }

            .wpcf7 form.invalid .wpcf7-response-output {
                color: var(--Secondary)!important;
            }

        .wpcf7 form.sent .wpcf7-response-output {
            color: var(--Accent);
        }
    

/* 06. SEITENSPEZIFISCHE STYLES */

    /* 06.01. Über Zehnpixel */
        .about-logo.light {
                display: none;
            }
            


/* 98. TOGGLE Colors */

        /* 98.02. Dark Theme toggle colors*/
            body.light-theme {
                background-color: var(--Background-Light)!important;
                color: var(--Primary);
            }

            
            .light-theme #qodef-page-header .qodef-header-logo-link img, .light-theme #qodef-page-mobile-header .qodef-header-logo-link, .light-theme #qodef-page-mobile-header .qodef-mobile-header-logo-link {
                /*height:250px;*/
                content: url("/wp-content/uploads/2024/06/zehnpixel-digitalbuero-logo.svg");
            }

            .light-theme .qodef-header--standard #qodef-page-header, .light-theme .qodef-header-sticky, .light-theme #qodef-page-mobile-header  {
                background-color: var(--Background-Light)!important;
            }

            .light-theme #qodef-page-outer, .light-theme #qodef-page-wrapper {
                background-color: var(--Background-Light);
            }

            .light-theme #qodef-fullscreen-area {
                background-color: var(--Background-Light-Transparent)
            }

            .light-theme .qodef-header-navigation ul li ul {
                background-color: var(--Background-Light-Accent)!important;
            }

            .light-theme .elementor-icon-list-icon svg {
            fill: var(--Primary)!important;
        }
            
            .dark-toggle svg {
                transition: 1s ease 0s;
            }

            .light-theme .dark-toggle {
                display: block;
            }
            
            .light-theme .light-toggle {
                display: none;
            }
            
            .light-theme .square-home .elementor-icon svg {
                fill: var(--Primary)!important;
            }

            .light-theme .bg-fill {
                background-color: var(--Background-Light);
            }
            
            .light-theme h1, .light-theme h2, .light-theme h3, .light-theme h4, .light-theme h5, .light-theme h6, .light-theme p, .light-theme li, .light-theme {
                color: var(--Primary)!important;
            }

            .light-theme #qodef-back-to-top .qodef-back-to-top-label, .light-theme a, .light-theme p a{
                color: var(--Primary)!important;
            }

            .light-theme .outline .qodef-m-title, .light-theme .outline .qodef-m-subtitle, .light-theme .outline .qodef-typeout {
                text-shadow:   1px 1px 3px var(--Background-Light),
                -1px 1px 3px var(--Background-Light),
                -1px -1px 3px var(--Background-Light),
                1px -1px 3px var(--Background-Light);
              }


            .light-theme #qodef-back-to-top .qodef-back-to-top-label:hover, .light-theme a:hover, .light-theme p a:hover {
                color: var(--Secondary)!important;
            }

    

            .light-theme .white, .light-theme .white h1, .light-theme .white h2, .light-theme .white h3, .light-theme .white h4, .light-theme .white h5, .light-theme .white h6, .light-theme .white p, .light-theme .white li, .light-theme .white a {
                color: var(--Background-Light-Accent)!important;
            } 

            .light-theme #qodef-page-footer-top-area {
                border-top: var(--Primary) 1px solid;
                background-color: var(--Background-Light-Accent);
            }

            .light-theme .border {
                &.top {
                    border-top: var(--Primary) 1px solid;
                    }
                
                &.bottom {
                    border-bottom: var(--Primary) 1px solid;
                    }
                
                &.right {
                    border-right: var(--Primary) 1px solid;
                    }
                
                &.left {
                    border-left: var(--Primary) 1px solid;
                    }
            }

            .light-theme .border.top .qodef-qi-faq.qodef-style--border-between .qodef-e-title-holder {
                border-top: var(--Primary) 1px dotted;
                    }
                

            .light-theme .logo-footer {
                content: url("/wp-content/uploads/2024/06/zehnpixel-digitalbuero-emblem.svg");
            }

            .light-theme #qodef-page-footer-top-area {
                border-top: var(--Primary) 1px solid;
                background-color: var(--Background-Light)!important;
            }

            .light-theme #qodef-page-footer-bottom-area {
                background-color: var(--Background-Light)!important;
                border-top: 0px!important;
            }

            /* 98.03. Navigation*/
            .light-theme .qodef-header-navigation> ul > li > a:hover, .light-theme .qodef-header-navigation> ul > li > a:focus {
                color: var(--Primary)!important;
             }

             .light-theme .qodef-fullscreen-menu ul li a {
                color: var(--Primary);
             }


            /* 98.04. Dark Mode Switch */

            .light-theme .btn-toggle:hover {
                border-color: var(--Primary);
              }
            
            
            /*Button*/
            .light-theme .btn:hover::before {
                background: var(--Background-Light-Accent);
            }
            
            .light-theme .btn:hover::after {
                background: var(--Background-Light-Accent);
            }
            
            .light-theme .btn:hover {
                background: var(--Background-Light-Accent);
            }
            .light-theme .btn {
                border: 3px solid var(--Primary);
                color: var(--Background-Dark);
                background:var(--Background-Light-Accent);
            }
        
            .light-theme .btn::before, .light-theme .btn::after {
                background: var(--Background-Light-Accent);
            }

             /* 98.05. SERVICE BLOCKS*/
             .light-theme .service-box {
          
                --main-bg: conic-gradient(
                    from var(--border-angle),
                    var(--Background-Light),
                    var(--Background-Light-Accent) 5%,
                    var(--Background-Light-Accent) 60%,
                    var(--Background-Light) 95%
                  );

                --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, var(--Primary), var(--Secondary) 99%, transparent);
            }

            /* 98.06. Kontaktformular */
            .light-theme label {
                color: var(--Primary)!important;
            }

            .light-theme input[type="text"], .light-theme input[type="email"], .light-theme input[type="url"], .light-theme input[type="password"], .light-theme input[type="number"], .light-theme input[type="tel"], .light-theme input[type="search"], .light-theme input[type="date"], .light-theme textarea, .light-theme select, .light-theme body .select2-container--default .select2-selection--single, .light-theme body .select2-container--default .select2-selection--multiple, .light-theme .widget[class*="_search"] button.qodef-search-form-button, .light-theme .wp-block-search .wp-block-search__input, .light-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, .light-theme .widget.widget_block .wp-block-woocommerce-product-search input {
                border-color: var(--Primary)!important;
                color: var(--Primary)!important;
            }

            .light-theme input[type="submit"],
            .light-theme button[type="submit"],
            .light-theme .qodef-theme-button.qodef--filled,
            .light-theme button.qodef-theme-button.qodef--filled,
            .light-theme #qodef-woo-page .added_to_cart,
            .light-theme #qodef-woo-page .button,
            .light-theme .qodef-woo-shortcode .added_to_cart,
            .light-theme .qodef-woo-shortcode .button,
            .light-theme .widget.woocommerce .button,
            .light-theme .woocommerce-page div.woocommerce > .return-to-shop a,
            .light-theme .woocommerce-account .button,
            .light-theme #qodef-page-header .widget.woocommerce.widget_shopping_cart .buttons a,
            .light-theme .widget.woocommerce.widget_shopping_cart .buttons a {
                border-color: var(--Primary) !important;
                color: var(--ParagraphBlack);
            }
            
            .light-theme input[type="submit"]:hover,
            .light-theme button[type="submit"]:hover,
            .light-theme .qodef-theme-button.qodef--filled:hover,
            .light-theme button.qodef-theme-button.qodef--filled:hover,
            .light-theme #qodef-woo-page .added_to_cart:hover,
            .light-theme #qodef-woo-page .button:hover,
            .light-theme .qodef-woo-shortcode .added_to_cart:hover,
            .light-theme .qodef-woo-shortcode .button:hover,
            .light-theme .widget.woocommerce .button:hover,
            .light-theme .woocommerce-page div.woocommerce > .return-to-shop a:hover,
            .light-theme .woocommerce-account .button:hover,
            .light-theme #qodef-page-header .widget.woocommerce.widget_shopping_cart .buttons a:hover,
            .light-theme .widget.woocommerce.widget_shopping_cart .buttons a:hover {
                background-color: var(--Primary) !important;
            }

            .light-theme .wpcf7 form.sent .wpcf7-response-output {
            color: var(--Primary);
        }

            /* 98.07. Über Zehnpixel*/

            .light-theme .about-logo.dark {
                display: none;
            }

            .light-theme .about-logo.light {
                display: block;
            }

        
  


/* 99. MEDIA QUERIES*/

@media only screen and (min-width: 1025px) {
       .box-1.border.bottom, .box-2.border.bottom { 
            border-bottom: 0px solid;   
        }

        #qodef-page-footer-top-area-inner {
            padding-left: 77px;
        }
    }
@media only screen and (max-width: 1024px) {
        body #qodef-fullscreen-area {
        z-index: 999999;
        }

        .box-1.border.left { 
                border-left: 0px solid;   
        }

         .qodef-grid.qodef-layout--columns.qodef-col-num--5>.qodef-grid-inner {
        grid-template-columns: 1fr 3fr 3fr 2fr!important;
        }

        #qodef-page-footer-top-area-inner {
            padding-left: 34px!important;
        }
    }


@media only screen and (min-width: 768px) {
        .box-3.border.bottom { 
            border-bottom: 0px solid;   
        }

        #qodef-page-footer-top-area-inner, #qodef-page-footer-bottom-area .qodef-content-full-width {
            padding-right: 77px!important;
        }

        
    }

@media only screen and (max-width:767px) {
        .qodef-grid.qodef-gutter--normal>.qodef-grid-inner {
            gap: 30px!important;
        }

        .qodef-grid.qodef-layout--columns.qodef-col-num--5>.qodef-grid-inner {
            grid-template-columns: 2fr 2fr!important;
        }

        #block-32, #block-29, #block-30, #block-35{
            justify-self: start;
        }

        #qodef-page-footer-top-area-inner {
            padding-right: 34px!important;
        }

        #qodef-page-footer-bottom-area .qodef-content-full-width {
            padding-left: 34px!important;
        }

    }


@media only screen and (max-width:680px) { 
        .qodef-fullscreen-widget-holder {
        display: block;
        }
    }

@media only screen and (max-width:480px) { 
        #qodef-page-footer .qodef-alignment--right {
            text-align: left!important;
        }

        .qodef-grid.qodef-layout--columns.qodef-col-num--5>.qodef-grid-inner {
            grid-template-columns: 1fr!important;
        }
    }

@media (hover: none) and (pointer: coarse) {
.tooltiptext {
    display: none !important;
    }
}