/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 54
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

    
/*Globales Styling*/

html { scroll-behavior: smooth; }

body {background-color: var(--gn-bg-main);}


/*Eigene Variablen definieren*/
:root {
    --gn-text-color: #000;
    --gn-text-hover-color: #bbb;
    --gn-link-color: #999;
    --gn-border-color: #eaeaea;
    --gn-bg-main: #fdfdfd;
    --gn-bg-grey: #f8f8f8;
    --gn-bg-secondary: #f9f5f1;
    --gn-green: #4ab866;
    --gn-blue: #0058ff;

    --gn-text-font-size-small: 14px;

    --gn-max-container-width: 1600px;
}

.is-small, 
.is-small.button {
    font-size: 1em;
}

/* Deaktivieren der Flatsome Text-Transformation */
.uppercase,
.is-uppercase,
h6,
th,
td,
span.widget-title {
    text-transform: none;
    letter-spacing: 0;
    line-height: 1em;
}

label,
.label,
.shop_table,
td,
th,
.ux-swatch-selected-value,
.product p.wc-gzd-additional-info {
    font-size: 1em;
}


/*Farben*/

/* Achtung: Background-colors der Seite (#wrapper, #main, .header-main) werden über Flatsome -> Advanced -> Custom CSS gesetzt */

.is--hellbeige {
    background-color: #edebe7;
}

.is--text-center,
.medium-text-center {
    text-align: center;
}

.is--text-underline {
    text-decoration: underline;
}

.is--text-strong {
    font-weight: 700;
}

.nobr {
    white-space: nowrap;
}

.dark,
.dark a {
    color: #fff;
}

.dark a:hover {
    color: var(--gn-text-hover-color);
}

/*Überschriften*/
.title2,
.accordion_title {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    margin: 2.25rem 0rem 2rem 0rem;
}

.title3 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
    margin: 1.25rem 0rem .625rem 0rem;
}

/*Buttons global definieren*/
.button,
.button.alt, 
.button.checkout, 
.checkout-button, 
.secondary { 
    background-color: #000;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 2.5em;
    touch-action: manipulation;

    &:hover {
        background-color: #fff;
        box-shadow: none;
        color: #000;
        border-color: #000;
    }
}

.form-flat input:not([type=submit]), 
.form-flat select,
.form-flat textarea,
.form-flat button,
.form-flat input {
    border-radius: 0;
}

/* Call to action Button */
.cta-button {
    width: 280px;
    padding: 0 2rem;
    line-height: 72px;
    border: 1px solid #000;
    display: flex;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    touch-action: manipulation;

    #arrow-small-right {
        fill: #fff;
    }

    &:hover {
        background-color: #fff;
        color: #000;

        #arrow-small-right {
            fill: var(--gn-text-color);
        }
    }

}

/* Call to action ohne Hintergrund */
.cta-button-no-bg {
    width: auto;
    max-width: 280px;
    padding: 0 2rem;
    line-height: 40px;
    display: flex;
    color: #fff;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    touch-action: manipulation;

    #arrow-small-right {
        fill: #fff;
    }

    &:hover {
        color: var(--gn-text-hover-color);

        #arrow-small-right {
            fill: var(--gn-text-hover-color);
        }
    }

}

.btn--is-centered {
    margin: 0rem  auto;
}

/*Scroll to Top Button*/
.button.icon.circle {
    background-color: #fff;

    &:hover {
        color: var(--gn-text-hover-color);
        background-color: #fff;
    }
}

/* Touch-Empfindlichkeit erhöhen */
a,
button,
.button {
  touch-action: manipulation;
}

select {
    box-shadow: none;

    &:focus { box-shadow: none; }
}

body {
    font-family: 'TTNorms', sans-serif;
}

.col {
    padding: 0 1rem;
}

.form-flat select {
    height: 48px;
    font-size: 14px;
    line-height: 48px;
    background-color: transparent;
    color: var(--gn-text-color) !important;
}

.box-text-products {
    .title-wrapper {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .price-wrapper {
        .amount {
            font-weight: normal;
        }
    }
}

.wpcf7 {
    input[type=submit] {
        all: unset;
        width: 200px;
        padding: 0 2rem;
        line-height: 72px;
        border: 1px solid #000;
        box-shadow: none;
        display: flex;
        background-color: #000;
        color: #fff;
        text-align: center;
        align-items: center;
        justify-content: space-around;
        margin: 2rem 0 0 0;

        #arrow-small-right {
            fill: #fff;
        }

        &:hover {
            background-color: #fff;
            color: #000;
            box-shadow: none;

            #arrow-small-right {
            fill: var(--gn-text-color);
            }
        }

    }

    .wpcf7-spinner {
        display: none;
    }

    .wpcf7-response-output {
        padding: 12px 16px !important;
        margin: 2em 0em 1em !important;
        border-radius: 5px;
        font-size: 16px;
        border: none !important;
    }

    form.invalid .wpcf7-response-output {
        background: #ffb9001f;
        color: #e1ae29;
    }

    form.sent .wpcf7-response-output {
        background: #21bd3c26;
        color: #21bd3c;
    }
}

.wpcf7-form-control-wrap {
    input,
    textarea {
        width: 100%;
        color: #000;
        font-size: 14px;
        box-shadow: none;

        &::placeholder {
            color: var(--gn-link-color)
        }

        &:active,
        &:hover,
        &:focus {
            border-color: var(--gn-text-color);
            box-shadow: none;
        }

    }

    input {
        height: 48px;
    }

}

.form-privacy {
    font-size: 10px;
    color: #999;
    padding: 1.5rem 0 0 0;
}

.grecaptcha-badge { 
    visibility: hidden; 
}



/*-------------------  Header Styling  -------------------*/

.header-top {
    .container {
        padding: 0;

        .header-block {
            width: 100vw;
            margin: 0;
            font-size: 13px;
            text-align: center;
        }
    }

    .nav > li > a {
        font-size: 13px;
    }

    .nav-center {
        justify-content: space-around;
    }

    .rotate-content {
        padding: 10px;
        font-size: 12px;

        p {display:none;}
    }
}

.header-main {

    .header-inner {
        padding: 0 28px;
    }

    .header-nav-main.nav > li > a {
        font-size: 14px;
        font-weight: 700;
        padding: 6px 0;

        .icon-angle-down {
            display: none;
        }
    }

    .nav > li {
        margin: 0 12px;
    }

    .nav-line-grow>li>a:before {
        height: 2px;
        top: unset;
        bottom: 0;

    }

    .nav>li>a>i {
        &.icon-menu {
            font-size: 22px;
            min-width: 40px;
        }

        &.icon-search {
            font-size: 16px !important;
        }
    }

}

.header:not(.transparent) {
    .nav > li {
        a { 
            color: var(--gn-text-color); 
        }
    }
}

.header-wrapper.stuck {
    box-shadow: none;
}

.cart-icon strong {
    font-size: 8px;
    height: 16px !important;
    width: 16px !important;
    line-height: 12px !important;

    &:after {
        height: 6px !important;
        margin-left: -6px !important;
        width: 12px !important;
    }
}

.header_logo {
    max-width: 130px;
}

/*Search Lightbox Styling auch für Advanced Woo Search Plugin*/
.mfp-content:has(#search-lightbox) {
    transform: none;
    vertical-align: top;
    top: 150px;
}

.aws-container .aws-search-form {
    height: 60px;

    .aws-search-field {
        padding: 1rem;
        border: none;
        border-bottom: 1px solid;
        font-size: 16px;
    }

    .aws-search-btn.aws-form-btn {
        border: none;
        border-bottom: 1px solid;
        background-color: hsla(0, 0%, 100%, .2) !important;
        border-color: hsla(0, 0%, 100%, .09);
        margin: 0;

        svg {fill: #fff;}
    }
}

.theme-flatsome .searchform-wrapper .aws-container .aws-show-clear .aws-search-field {
    color: #fff !important;
}

.aws-search-result {

    .aws_result_link {
        padding: 1rem;
    }

    .aws_result_image { 
        padding: 0 16px 0 0;

        img {
            width: 90px;
        }
    }

    .aws_result_content {
        .aws_result_title {
            color: var(--gn-text-color);
            font-weight: 700;
            font-size: 14px;
        }

        .aws_result_price,
        span.amount {
            color: var(--gn-text-color);
            font-weight: 400;
            font-size: 13px;
        }

    }

    .aws_search_more {
        color: var(--gn-text-color);
    }
}


#search-lightbox {

    .mfp-close {
        display: none;
    }

    .form-flat input:not([type=submit]) {
        border-radius: 0;
    }
}

.mfp-container {
    padding: 1rem;
}

.mfp-bg.mfp-ready {
    opacity: .6;
}

.mfp-close {
    mix-blend-mode: normal;
    opacity: 1 !important;
    transition: none;
    height: 50px;
    line-height: 50px;
    width: 50px;
}

/* Styling der Alert messages*/
.message-wrapper {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 16px;

    &:focus-visible {
        outline: none;
    }

    .message-container {
        padding: 12px;
        border-radius: 5px;
        font-size: 16px;
    }

    .alert-color {
        background: #ffe2e2;
    }

    .success-color {
        background: #21bd3c26;

        .icon-checkmark {
            display: none;
        }
    }
}


/* Custom GN Lightbox */
/* Verhindert das Scrollen des Hintergrunds, wenn aktiv */
/* body.gn-modal-open { */
/*  overflow: hidden !important; */
/*  position: fixed;*/
/* } */

/* Das Grundgerüst */
.gn-custom-modal {
    display: none; 
    position: fixed;
    z-index: 1040 !important; 
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); 
    /* backdrop-filter: blur(3px); */
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    align-items: center;


}

/* Das Inhaltsfenster */
.gn-modal-content {
    background-color: #fff;
    /* Abstand oben/unten für Scroll-Spielraum */
    width: 90%;
    max-width: 800px;
    max-height: calc(100vh - 100px);
    min-height: 100px;
    position: relative;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* box-shadow: 0 5px 25px rgba(0,0,0,0.5); */

    .col {
        padding: 0;
    }

    .nav {
        padding: 3rem 1rem 1rem 1rem;
        column-gap: 1rem;
        row-gap: .5rem;
    }

    .nav>li>a {
        font-size: 14px;
    }

    .info-content.mb-reduced {
        margin-bottom: 2rem;
    }
}

/* Schließen-Button */
.gn-modal-close {
    position: sticky;
    top: 0;       
    float: right;   
    right: 0;        
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #000;
    z-index: 100;    /* Sicherstellen, dass es über dem Content liegt */
    
    /* Damit das X nicht den Text nach unten schiebt, geben wir ihm eine feste Höhe von 0 */
    height: 0;
    display: block;

    svg {
        padding: 15px;
        width: 50px;
        height: 50px;
    }
}

/* Animation hinzufügen */
.gn-custom-modal {
    transition: opacity 0.1s ease;
    display: none; /* JS muss hier display: block setzen */
}

/* Ein einfacher Trick für einen Fade-In Effekt über CSS */
.gn-custom-modal[style*="display: block"] {
    display: flex !important;
    animation: fadeIn 0.1s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



/* gn-modal Popups (UX-Blocks) */
.gnm-banner {
    img { width: 100%; }
}

.gnm-inner {
    max-width: 700px;
    margin: 0 auto 2rem auto;
    padding: 1rem 2rem 1rem 2rem;
    font-size: 16px;

    h1 {
        font-size: 24px;
        margin-bottom: 1rem;
    }

    h2 {
        font-size: 20px;
        margin: 3.5rem 0 1rem 0;
    }

    .gnm-headline {
        margin: 3rem 0 1rem 0;
    }

    .gnm-points-headline {
        margin: 2.5rem 0 0.25rem 0;
    }

    .gnm-point { 
        display: grid;
        grid-template-columns: 1fr 18fr;
        grid-gap: 1rem;
        padding: 1rem 0rem;

        .gnm-head {
            font-weight: 700;

            .gnm-head-headline {
                font-size: 20px;   
            }
        }	

        .gnm-clmn1 {
            .dashicons {
                padding-top: 2px;
            }

            .gnm-clmn1-number {
                font-size: 20px;
                font-weight: 700;
            }
        }
    }

    .gnm-table-2 {
        width: 100%;
        font-size: 14px;

        .gnm-tablerow {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            column-gap: 24px;
            align-items: center;
            padding: 18px 0;
            font-weight: 700;
            border-bottom: 1px solid var(--gn-border-color);
        }

        .gnm-tablerow:last-child {
            border-bottom: none;
        }

        .gnm-clmn1,
        .gnm-clmn2 {
            line-height: 1.3;
        }

        .gnm-clmn2 {
            text-align: right;
            white-space: nowrap;
        }
    }

    .gnm-table-info-headline {
        color: var(--gn-link-color);
        font-size: 14px;
        font-style: italic;

    }


    .gnm-small-info {
        margin-top: 3rem;
        color: var(--gn-link-color);
        font-size: 12px;
    }

    .gnm-bulletpoint-wrapper {
        padding: 1rem 0;
    }

    .gnm-bulletpoint {
        display: grid;
        grid-template-columns: 2fr 12fr;
        grid-gap: 1rem;
        padding: 6px 0px;
        align-items: center;

        .gnbp-head {
            a {text-decoration: underline;}
        }

    }

}

.gnm-headline.gallery-headline {
    padding: 0 2rem 1rem 2rem;
    font-size: 20px;
    max-width: 700px;
    margin: 0 auto 1rem auto;
}

.gnm-gallery {
    margin-bottom: 10px;
    display: block !important;

    .flickity-prev-next-button {
        opacity: 1;
        height: calc(100% - 28px);
    }

    .flickity-prev-next-button.previous,
    .flickity-prev-next-button.next {
        transform: none;
        color: #fff;

        &:hover {
            color: #fff;
        }
    }

    .box-text {
        padding: 10px 32px;

        p {
            font-size: 14px;
            color: var(--gn-link-color);
        }
    }

}

.gnm-tabs {
    max-width: 800px;
    margin: 0 auto;
}
    
.gn-modal-open {

    .mfp-bg.mfp-ready {
        opacity: .8;
    }

    .mfp-figure:after {
        box-shadow: none;
    }

    .mfp-arrow {
        top: calc(50% - 40px);
        width: 60px;
        opacity: 1;


        i {
            font-size: 32px !important;
        }
    }

}



@media only screen and (min-width: 550px) {
/*************** Tablet Viewport Breakpoint ***************/

    .header_logo {
        max-width: 166px;
    }

    .gnm-inner {
        .gnm-bulletpoint {
            grid-template-columns: 1fr 12fr;
        }
    }


}




@media only screen and (min-width: 850px) {
/*************** Tablet Landscape Breakpoint ***************/
    
    /*Header Styling*/
    .header-main {
        padding: 0 2rem;
    }

    .header_logo {
        max-width: 190px;
    }

    /*Search Lightbox Styling*/
    .mfp-content:has(#search-lightbox) {
        top: 250px !important;
    }

    .gn-modal-open {
        .mfp-arrow {
            top: 50%;
        }
    }
        

}




@media only screen and (min-width: 1110px) {
/*************** Desktop Breakpoint ***************/

    /*Überschriften*/
    .title2,
    .accordion_title {
        font-size: 36px;
        line-height: 42px;
    }

    /*Header Styling*/
    .header-main {
        padding: 0 6rem;
   
        .nav > li { margin: 0 22px }
    }    
  

}