/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */

/* CSS-Variables */
:root {
    --black: #1d1d1b;
    --white: #ffffff;
    --green: #a9b751;
    --blue: #445d82;
    --violet: #9d75b1;
}

/*Startseite*/
#top.home {
    #wrap_all {
        #main {
            h1 {
                font-size: 200%;
            }
            h2 {
                font-size: 225%;
            }
            /* .p-big p {
                font-size: 175%;
            } */
            .av-special-heading-h2 .av-subheading_above {
                margin-bottom: 0.5em;
                font-size: 125%;
            }
            .av-special-heading-h1 .av-subheading_above {
                margin-bottom: 0.5em;
                font-size: 100%;
            }
            /* .avia-button-wrap {
                .avia-button.avia-size-large {
                    font-size: 120%;
                }
            } */
        }
    }
}
/* Mobiles Menu */
.html_av-overlay-full #top #wrap_all #av-burger-menu-ul {
    li.current_page_item a {
        text-decoration: underline 3px;
        text-underline-offset: 8px;
    }
}

/* General Custom CSS */
#top {
    #wrap_all {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            letter-spacing: 0.02em;
        }
        .social_bookmarks {
            a {
                color: var(--white);
                background-color: var(--black);
                line-height: 1.75rem;
            }
        }
        .av-social-link-linkedin:hover a,
        .av-social-link-linkedin a:focus {
            background-color: var(--green);
        }
        .header_color .social_bookmarks .avia-svg-icon a svg:first-child {
            fill: var(--white);
            height: 1rem;
            margin-top: 6px;
        }
        #header {
            .av-main-nav li a {
                .avia-menu-text {
                    color: var(--black);
                }
                .avia-menu-text:hover {
                    text-decoration: underline;
                    text-decoration-style: solid;
                    text-decoration-skip-ink: auto;
                    text-decoration-thickness: 2px;
                    text-underline-offset: 30%;
                }
            }
            .av-main-nav li a:focus {
                text-decoration: underline;
                text-decoration-style: solid;
                text-decoration-skip-ink: auto;
                text-decoration-thickness: 1px;
                text-underline-offset: 30%;
            }
            .avia-menu.av_menu_icon_beside {
                padding-right: 0.5rem;
            }
            .logo {
                a {
                    align-content: center;
                    img {
                        max-height: 75% !important;
                    }
                }
            }
        }
        #main {
            .hide {
                display: none !important;
            }
            .no-margin {
                margin: 0;
            }
            .p-big p {
                font-size: 125%;
            }
            .av-special-heading-h1 {
                .av-subheading_above {
                    font-size: 100%;
                }
            }
            .avia_textblock {
                a:where(:not(.wp-element-button)) {
                    text-decoration: underline;
                    text-decoration-style: solid;
                    text-decoration-skip-ink: auto;
                    text-decoration-thickness: 1px;
                    text-underline-offset: 15%;
                }
                a:where(:not(.wp-element-button)):hover {
                    text-decoration-thickness: 2px;
                }
                a:where(:not(.wp-element-button)):focus {
                    border: 2px solid;
                }
            }
            .avia_textblock.p-no-margin-top p {
                margin-top: 0;
            }
            .hero-section {
                background-position: 50% 25%;
                .container {
                    margin: 0;
                    padding: 0;
                    /* .flex_column {
                        backdrop-filter: blur(10px);
                    } */
                }
            }
            .avia-button-wrap {
                .avia-button {
                    transition: all 0.3s ease-in-out;
                    margin-top: 0.75em;
                    .avia_button_icon_right {
                        margin-left: 0.25em;
                    }
                }
                .avia-button:hover {
                    transition: 0.3s ease-in-out;
                    opacity: 1;
                }
                .avia-button.avia-size-large {
                    font-size: 100%;
                    padding: 1em 1.6em 0.9em 1.6em;
                }
                a:focus {
                    background-color: #a9b751bf;
                    border: 4px solid var(--black);
                }
            }
            /* Ueber uns */
            .about-box {
                .av_textblock_section {
                    padding: 0 20px;
                }
            }
            .avia_image {
                border-radius: 0;
            }
            /* Weiterlesen */
            .av_textblock_section {
                summary {
                    width: fit-content;
                    font-size: 85%;
                    font-weight: 700;
                    color: var(--blue);
                    text-decoration: underline 3px;
                    text-underline-offset: 8px;
                }
                summary:hover {
                    background-color: rgba(68, 93, 130, 0.15);
                    text-decoration: underline 4px;
                }
                .avia_textblock ul li::marker {
                    content: "+  ";
                    font-weight: 700;
                    color: --var(--green);
                }
            }

            #footer {
                a:where(:not(.wp-element-button)) {
                    text-decoration: underline;
                    text-decoration-style: solid;
                    text-decoration-skip-ink: auto;
                    text-decoration-thickness: 1px;
                    text-underline-offset: 15%;
                }
                a:where(:not(.wp-element-button)):hover {
                    text-decoration-thickness: 2px;
                }
                a:where(:not(.wp-element-button)):focus {
                    border: 2px solid;
                }
            }
            .socket_color {
                background-color: var(--blue);
            }
        }
        /* Werbelink */
        .socket_color a[href*="thamm-it.de"] {
            font-size: 18px;
            line-height: 26px;
        }

        .socket_color a[href*="thamm-it.de"] span span {
            background: #ffffff;
            color: #6d7780;
            padding: 0.25rem;
            border-radius: 0.25rem;
            font-size: 0.5rem;
            line-height: 1;
            vertical-align: top;
            display: inline-block;
        }
    }
    /*To-Top-Button*/
    #scroll-top-link {
        border-radius: 40px !important;
        border: 1px solid var(--black);
        height: 55px !important;
        width: 55px !important;
        line-height: 72px !important;
        background-color: rgba(255, 255, 255, 0.5);
        color: var(--black) !important;
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
    }
    .avia_pop_class.avia-svg-icon::before {
        content: url("/wp-content/uploads/2025/05/arrow-up-short.svg");
        display: inline-block; /* Stellt sicher, dass das Bild angezeigt wird */
    }
    #scroll-top-link:hover {
        background-color: var(--white);
        border: 2px solid var(--black);
    }
    #scroll-top-link.avia-svg-icon svg:first-child {
        display: none;
    }
}
/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */
@media only screen and (min-width: 990px) {
    #top {
        #wrap_all {
            #main {
                .hero-section {
                    .flex_column {
                        width: 35rem;
                    }
                }
                #footer {
                    p {
                        font-size: 80%;
                    }
                }
                #socket {
                    font-size: 14px;
                }
            }
        }
    }
}

@media only screen and (max-width: 989px) {
    #top {
        #wrap_all {
            #main {
                .hero-section {
                    .flex_column {
                        width: 30rem;
                    }
                }
                .avia-section.responsive-no-bg-image {
                    background-image: none;
                }
                #footer {
                    div .av_one_third {
                        width: 30%;
                        margin-left: 0;
                        margin-right: 6%;
                    }
                    div .first {
                        width: 100%;
                    }
                    .el_after_av_one_third {
                        .widget {
                            margin: 0;
                        }
                    }
                }
            }
        }
        #scroll-top-link {
            right: 1rem;
        }
    }
}

@media only screen and (min-width: 768px) {
    /* Add your Desktop Styles here */
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
    .responsive #top {
        #wrap_all {
            #header_main {
                .logo img {
                    max-height: 60px !important;
                }
            }
            #main {
                .hero-section {
                    max-height: 600px;
                    .flex_column {
                        width: 100%;
                    }
                }
                .avia-section-huge .content {
                    padding-top: 70px !important;
                    padding-bottom: 70px !important;
                }
                #footer {
                    div .av_one_third {
                        width: 100%;
                    }
                    .el_after_av_one_third {
                        .widget {
                            margin: 0;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 479px) {
    .responsive #top {
        #wrap_all {
            #header {
                .social_bookmarks {
                    display: block;
                }
                #header_main > .container .main_menu .av-main-nav > li > a {
                    padding: 0 1rem 0 20px;
                }
            }
            #main {
                .hero-section {
                    max-height: 100vw;
                }
            }
        }
    }
}
/* Hero-Section Box */
@media only screen and (max-width: 1199px), screen and (max-height: 899px) {
    #home-h1-big {
        display: none;
    }
    #home-h1-small {
        display: block !important;
    }
}
@media only screen and (min-width: 768px) and (min-height: 990px) {
    #home-h1-big {
        display: block;
    }
    #home-h1-small {
        display: none !important;
    }
}