/* 
Theme Name: Sonnenseite - Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


:root {
    --sonne-padding-left-right: 40px;
    --sonne-white:#FDFDFD;
    --sonne-gelb:#F5CC14;
    --sonne-blau:#5982C2;
    --sonne-gelb-light:#ffe173;
    --sonne-gelb-light-2:#f5cc147d;
    --sonne-dark:#161514;

    --header-height:125px;
    --header-height-scroll:88px;

    --header-height-mobile:90px;
    --header-height-mobile-scroll:60px;
}

/* Break Word, Hyphens Auto */
p, h1, h2, h3, h4, h5, h6 {
    word-break: break-word;
    hyphens: auto;
}

.sonne-container {
    padding-left: var(--sonne-padding-left-right);
    padding-right: var(--sonne-padding-left-right);
}

.sonne-padding-100 {
    padding-top:100px;
    padding-bottom:100px;
}

.sonne-padding-150 {
    padding-top:150px;
    padding-bottom:150px;
}

.anchor-link {
    padding-top:var(--header-height-scroll);
    margin-top: calc(-1 * var(--header-height-scroll));
    height:0;
}
@media screen and (max-width:767px) {
    .anchor-link {
        padding-top:var(--header-height-scroll-mobile);
        margin-top: calc(-1 * var(--header-height-scroll-mobile));
        height:0;
    }
}

.no-break p {
    word-break:keep-all;
    hyphens: none;
}

.magenta {
    color: #FF00FF !important;
}

/* Desktop and Widescreen (> 1181px) */

@media screen and (min-width:1181px) {

 
}

/* Smaller than Desktop (< 1180px) */

@media screen and (max-width:1180px) {
    .sonne-padding-100 {
        padding-top:60px;
        padding-bottom:60px;
    }

    .sonne-padding-150 {
        padding-top:90px;
        padding-bottom:90px;
    }

}

/* Tablet (> 768px and < 1180px) */

@media screen and (min-width:768px) and (max-width:1180px) {

}

/* Mobile (< 767px) */

@media screen and (max-width:767px) {
   .sonne-container {
        padding-left: calc(var(--sonne-padding-left-right) / 2);
        padding-right: calc(var(--sonne-padding-left-right) / 2);
    }
    
}

/* --- Header --- */

#sonne-header {
    background:var(--sonne-white);
    transition: all 300ms ease;
    height:var(--header-height);
    width: 100% !important;
}

#sonne-header.scrolled {
    height:var(--header-height-scroll);
}

.header-offset {
    padding-top:var(--header-height) !important;
}

@media screen and (max-width:767px) {
    #sonne-header {
        height:var(--header-height-mobile);
    }

    #sonne-header.scrolled {
        height:var(--header-height-mobile-scroll);
    }

    .header-offset {
        padding-top:var(--header-height-mobile) !important;
    }
}

#sonne-header .sonne-logo {
    display:block;
    pointer-events: all;
    transition: opacity 300ms ease;
}

#sonne-header.scrolled .sonne-logo {
    display: none;
    pointer-events: none;
}

#sonne-header .sonne-logo-scroll {
    display: none;
    pointer-events: none;
    transition: opacity 300ms ease;
}

#sonne-header.scrolled .sonne-logo-scroll {
    display:block;
    pointer-events: all;
}

/* animated logo */

#sonne-header .sonne-logo-animated-container .sonne-logo-animated-sun,
#sonne-header .sonne-logo-animated-container .sonne-logo-animated-s {
    height: 90px;
}

#sonne-header.scrolled .sonne-logo-animated-container,
#sonne-header .sonne-logo-animated-container .sonne-logo-animated-s,
#sonne-header .sonne-logo-animated-container .sonne-logo-animated-sun,
#sonne-header .sonne-logo-animated-container .elementor-icon,
#sonne-header .sonne-logo-animated-container .elementor-icon svg {
    transition: all 300ms ease;
}

#sonne-header.scrolled .sonne-logo-animated-container,
#sonne-header.scrolled .sonne-logo-animated-container .sonne-logo-animated-s,
#sonne-header.scrolled .sonne-logo-animated-container .sonne-logo-animated-sun {
    min-height:60px;
    height: 60px;
}

#sonne-header.scrolled .sonne-logo-animated-container .elementor-icon {
    font-size:60px;
}

#sonne-header.scrolled .sonne-logo-animated-container .elementor-icon svg {
    height:60px;
}
@media screen and (max-width:767px) {
    #sonne-header .sonne-logo-animated-container,
    #sonne-header .sonne-logo-animated-container .sonne-logo-animated-sun,
    #sonne-header .sonne-logo-animated-container .sonne-logo-animated-s,
    #sonne-header .sonne-logo-animated-container .elementor-icon svg {
        height: 70px;
    }
    #sonne-header .sonne-logo-animated-container .elementor-icon {
        font-size:70px;
    }

    #sonne-header.scrolled .sonne-logo-animated-container,
    #sonne-header.scrolled .sonne-logo-animated-container .sonne-logo-animated-s,
    #sonne-header.scrolled .sonne-logo-animated-container .sonne-logo-animated-sun {
        min-height:40px;
        height: 40px;
    }

    #sonne-header.scrolled .sonne-logo-animated-container .elementor-icon {
        font-size:40px;
    }

    #sonne-header.scrolled .sonne-logo-animated-container .elementor-icon svg {
        height:40px;
    }
}

.elementskit-menu-hamburger:hover,
.elementskit-menu-hamburger:focus {
    background-color:transparent !important;
}


.rotating .elementor-icon {
  animation: rotate 32s linear infinite;
}
.rotating-reverse .elementor-icon {
  animation: rotate-reverse 32s linear infinite;
}


@keyframes rotate-in {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes rotate-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* #sonne-header #sonne-header-menu {
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

#sonne-header.scrolled #sonne-header-menu {
    opacity: 1;
    pointer-events: all;
} */

/* --- Footer --- */

#sonne-footer .elementor-widget-text-editor a {
    color: var(--sonne-black);
}
#sonne-footer .elementor-widget-text-editor a:hover {
    color: var(--sonne-gelb);
}

#sonne-footer .cky-banner-element {
    cursor: pointer;
}
#sonne-footer .cky-banner-element {
    cursor: pointer;
}

/* Cookie Banner */

.cky-modal .cky-accordion-header button:hover,
.cky-modal .cky-accordion-header button:focus {
    border:none;
    padding:0;
    background:transparent;
}
.cky-modal .cky-switch #ckySwitchnecessary,
.cky-modal .cky-switch #ckySwitchanalytics,
.cky-modal .cky-switch #ckySwitchfunctional,
.cky-modal .cky-switch #ckySwitchperformance, 
.cky-modal .cky-switch #ckySwitchadvertisement {
    padding: 0;
    border-radius: 20px;
}

/* --- Intro --- */

#sonne-intro .video-placeholder-normal {
    height: 100% !important;
    padding-bottom: 20%;

}
#sonne-intro .elementor-background-video-container {
    height: auto;
    aspect-ratio: 4 / 3;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}


/* --- Wohnungen --- */
#wohnungen-tablepress {
    overflow-x: scroll;
}
/* Table row */
#wohnungen-tablepress tr.is-hover {
    background: var(--sonne-gelb);
}

#wohnungen-tablepress a:hover {
    color:black;
    text-decoration: underline;
}

/* SVG section */
#wohnungen-svg g.is-hover rect,
#wohnungen-svg g.is-hover polygon,
#wohnungen-svg g.is-hover polyline {
    fill: var(--sonne-gelb);
}

#wohnungen-svg g {
    cursor: pointer;
    transition: 0.2s;
}


#wohnungen-svg #EG-Hover,
#wohnungen-svg #OG1-Hover,
#wohnungen-svg #OG2-Hover {
    cursor: pointer;
}

/* #wohnungen-svg g[id] * {
    pointer-events: none;
}

#wohnungen-svg g[id] {
    pointer-events: all;
} */

/* #wohnungen-svg g[id="EG"],
#wohnungen-svg g[id="OG1"],
#wohnungen-svg g[id="OG2"] {
    pointer-events: visiblePainted;
} */

#wohnungen-svg g rect {
    transition: fill .2s;
}
@media screen and (max-width:767px) {
    #wohnungen-svg svg {
        height:47vw;
    }
}

#wohnungen-svg #Railing {
    pointer-events: none;
}

#wohnungen-svg #HoverAreas {
    position: relative;
}

#wohnungen-svg .st0 {
    fill: transparent;
    pointer-events: all;
}


/* --- Lage --- */

.sonne-google-maps-tabs .e-n-tab-title-text {
    text-transform: capitalize;
}

.sonne-google-maps-tabs .e-n-tab-title {
    background-color: transparent !important; 
}

.sonne-google-maps-tabs .e-n-tab-title[aria-selected=true] {
    background-color: var(--sonne-blau) !important; 
}




#mikro-hotspot .elementor-repeater-item-bc1f6cb .e-hotspot__button {
    background-color:var(--sonne-blau);
}

#mikro-hotspot .elementor-repeater-item-bc1f6cb .e-hotspot__button svg {
    fill: var(--sonne-gelb);
}

/* --- FAQ --- */

.faq-accordion .elementor-tab-title.elementor-active a {
    text-decoration: underline;
}
.faq-accordion a {
    color:var(--sonne-white);
} 

/* Single Post Template */

#sonne-single-post-template a {
    text-decoration: underline;
}