/*
Theme Name: Friends-of-the-Arts Theme
Theme URI: 
Author: retina GbR
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: spectra-one
Text Domain: friends-of-the-arts-theme
Tags: 
*/



body {

}

@media (max-width: 767px){body {font-size: 18px;}}

.swt-svg.swt-scroll-top {
    background-color: #706F6F;
    box-shadow: 2px 2px 4px #00000092;
    z-index: 10;
}

@media (max-width: 767px){.slogan {font-size: 36px!important;}}


.wp-block-spacer {
    max-height: 150px;
    min-height: 40px;
}

@media (max-width: 767px){.wp-block-spacer {max-height: 40px;}}


.wp-block-uagb-image.wide img.lazyautosizes {
    width: 100vw!important;
    max-width: 100%;
}


.wp-block-column strong {
    font-weight: 600!important;
}

/****************** Foerder-Button *****************/
.wp-block-uagb-container.foerder-button {
    height: 0px;
}

.wp-block-uagb-container.foerder-button .wp-block-uagb-image{
    position: absolute;
    top: -70px;
    z-index: 1;
}

@media (max-width: 991px){.wp-block-uagb-container.foerder-button .wp-block-uagb-image {top: -60px; width:130px!important; height: 130px!important;}}



/****************** Headlines *****************/

.wp-block-group.box {
    padding-left: 1.8vw;
    padding-right: 0px;
    width: 100%;
    height: 21vw;
    max-width: 550px;
    max-height: 316px;
    background-image: url(../friends-of-the-arts-theme/images/title-box.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}

.wp-block-group.box.white {

    background-image: url(../friends-of-the-arts-theme/images/title-box-hell.svg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
}

@media (max-width: 457px){body .wp-block-group.box {max-width: 280px!important; min-width: unset!important; min-height: 170px!important; padding-left: 4vw;}}
@media (max-width: 991px){.wp-block-group.box {min-width: 360px!important; min-height: 210px!important; padding-left: 4vw;}}
@media (min-width: 1500px){.wp-block-group.box {padding-left: 30px; min-width: 360px; min-height: 209px;}}

.wp-block-group.box h2 {
    white-space: nowrap;
    letter-spacing: 2px;
    /* font-size: clamp(26px, 2.68vw, 42px); */
    font-size: calc(26px + (42 - 26) * ((100vw - 991px) / (1500 - 991)));
    transition: all 1.5x;
}

@media (max-width: 457px){body .wp-block-group.box h2  {font-size: 20px;}}
@media (max-width: 991px){.wp-block-group.box h2  {font-size: 26px;}}
@media (min-width: 1500px){.wp-block-group.box h2  {font-size: 42px;}}


/******************* Header *******************/

.wp-block-post-featured-image img {
    background-position: center;
    min-height: 900px;
    max-height: 900px;
    transition: all 1s;
}

@media (max-width: 767px){body .wp-block-post-featured-image img {min-height: 450px!important;}}
@media (max-width: 991px){.wp-block-post-featured-image img {min-height: 600px!important;}}

@media (max-width: 991px){.wp-block-uagb-image--align-none.uag-hide-desktop {display: flex!important;}}

.instagram_header .wp-block-group  {
    position: absolute;
    z-index: 10;
}

@media (max-width: 991px){.instagram_header .wp-block-group {top: 36px; left: 20px;}}



/*************** Header - Menü ***************/

header .wp-block-navigation__container {
    display: grid!important;
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) auto minmax(100px, 1fr) minmax(100px, 1fr);
    align-items: center;
    text-align: center;
    gap: 2rem; /* Abstand zwischen den Items */
}


.homepage_logo a{
    display: block;
    content: url(../friends-of-the-arts-theme/images/fota_logo.svg);
    max-width: 290px;
    width: 22vw!important;
    height: auto;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-indent: -9999px;
    overflow: hidden;
}

header .wp-block-navigation-item {
    white-space: nowrap;
    font-size: clamp(16px, 1.7vw, 22px)!important;
}

.wp-block-navigation-item.flow {
    position: relatives!important;
    margin-left: calc(
    10px + 
    max(0px, (1500px - 100vw) * 0.12));
}

@media (max-width: 991px){.wp-block-navigation-item.flow {margin-left: 0px;}}

header .wp-block-navigation-item a {
    display: flex;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    letter-spacing: 2px;
}


@media (max-width: 991px){header .wp-block-navigation-item a {font-size: 30px; margin-bottom: 20px;}}
@media (max-width: 991px){.homepage_logo a {display: none!important;}}

@media (max-width: 767px){.mobile-logo img {max-height: 120px!important;}}

.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-open svg {
    width: 50px;
    height: 50px;
}

.wp-block-navigation__responsive-container-close {
    top:18px;
}

.wp-block-navigation.items-justified-space-between {
    justify-content: end;
}

@media (max-width: 991px){.wp-block-navigation.items-justified-space-between  {position: absolute; right: 16px; top: 0px;}}

@media (max-width: 991px){.wp-block-navigation__responsive-container-content ul.wp-block-navigation__container  {display: block!important;}}


@media (max-width: 991px){#modal-1.has-transparent-background-color {
    background-color: rgba(0, 0, 0, 0.5)!important;
    backdrop-filter: blur(6px);
}}


@media (max-width: 991px){.wp-block-navigation__responsive-container-content  {padding-top: 110px!important;}}


.wp-block-navigation__container .current-menu-item {
    position: relative;
}

header .wp-block-navigation__container .current-menu-item::after {
    position: absolute;
    content: "";
    bottom: 0px;
    width: 88px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

@media (max-width: 991px){.wp-block-navigation__container .current-menu-item::after {width: 30%; bottom: 10px!important;}}

header .wp-block-navigation__container .current-menu-item.homepage_logo::after {
    bottom: -10px;
}

/* Spectra One Theme - Nur Mobile Menu Breakpoint, ohne Layout-Änderungen */

/* Mobile Modus: ab hier mobile Navigation anzeigen */
@media (max-width: 991px) { /* <-- Hier deinen gewünschten Breakpoint einstellen */
    
    /* Hamburger Button anzeigen */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
    
    /* Desktop Navigation verstecken wenn nicht geöffnet */
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
}

/* Desktop Modus: ab hier Desktop Navigation anzeigen */
@media (min-width: 992px) { /* <-- 1px über dem Breakpoint */
    
    /* Hamburger Button verstecken */
    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }
}

/*************** Column - Layout ***************/

.wp-block-columns {
    row-gap: 40px!important;
}

.wp-block-columns.left .wp-block-preformatted,
.wp-block-columns.right .wp-block-preformatted {
    padding-left: 150px!important;
}

@media (max-width: 991px){body .wp-block-columns .wp-block-preformatted, .wp-block-columns.right .wp-block-preformatted {padding-left: 0px!important; padding-right: 0px!important;}}
@media (max-width: 1200px){.wp-block-columns.left .wp-block-preformatted, .wp-block-columns.right .wp-block-preformatted   {padding-left: 0px!important;}}


@media (max-width: 991px){.wp-block-columns {flex-wrap: wrap !important;}}

@media (max-width: 991px){.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
	flex-basis: 100% !important;
}}

@media (max-width: 991px){.wp-block-columns.right .wp-block-group.has-global-padding {padding-left: 0px!important;}}
@media (max-width: 1200px){.wp-block-columns.right .wp-block-preformatted  {padding-right: 0px!important;}}



/*************** Termin - Layout ***************/

.wp-block-group.termine {
    padding-left: 150px!important;
}

.wp-block-group.termine hr {
    margin-right: 50px!important;
}


@media (max-width: 991px){.wp-block-group.termine hr {display: none;}}
@media (max-width: 991px){.wp-block-group.termine  {padding-left: 0px!important;}}

.wp-block-group.termine span {
    line-height: normal;
}

.wp-block-group.termine h3 {
    font-family: "Fira Sans"!important;
    color: black!important;
    font-size: 42px!important;
    font-weight: 500!important;
}


/*************** Footer - Menü ***************/

footer .wp-block-navigation .wp-block-navigation-item__content::before {
    content: "|";
    margin-right: 10px;
    margin-left:  10px;
}

@media (max-width: 768px){footer .wp-block-group {flex-direction: row;}}

@media (max-width: 768px){footer .wp-block-navigation .wp-block-navigation-item:first-child .wp-block-navigation-item__content::before {content: none;}}

/****************** Karussell *****************/


.wp-block-cb-carousel-v2 .cb-button-prev,
.wp-block-cb-carousel-v2 .cb-button-next {
    display: block;
    width: 40px;
    height: 40px;
}


.wp-block-cb-carousel-v2 .cb-button-prev {
    left: 0px!important;
}

.wp-block-cb-carousel-v2 .cb-button-prev::after {
    background-image: url(./images/arrow-left.svg);

}

.wp-block-cb-carousel-v2 .cb-button-next {
	right: 0px!important;
}

.wp-block-cb-carousel-v2 .cb-button-next::after {
    background-image: url(./images/arrow-right.svg);


}

.wp-block-cb-carousel-v2 .cb-button-prev::after,
.wp-block-cb-carousel-v2 .cb-button-next::after {
    display: block;
    content: "";
    width: 40px!important;
    height: 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}


/****************** Datenschutz *****************/

.wp-block-uagb-container.datenschutz {
    background-color: black;
    background-size: 100%!important;
}

.wp-block-uagb-container.datenschutz h4 {
    font-size: 28px;
    margin-bottom: 10px;
    margin-top: 30px;
}

.wp-block-uagb-container.datenschutz p {
    font-size: 22px;
    margin-top: 0px;
    margin-bottom: 40px;
}

.wp-block-uagb-container.datenschutz ul {
    padding-left: 0px;
}

.wp-block-uagb-container.datenschutz ul  ul {
    padding-left: 40px;
    margin-bottom: 30px;
}

.wp-block-uagb-container.datenschutz .wp-block-group.has-global-padding {
    padding: 0px!important;
}

.wp-block-uagb-container.datenschutz .wp-block-group.has-global-padding  {
    padding-left: 150px!important;
}

@media (max-width: 991px){.wp-block-uagb-container.datenschutz .wp-block-group.has-global-padding  {padding-left: 0px!important;}}