/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.0.1.1709221023
Updated: 2024-02-29 16:37:03

*/
/* ─── Horizontal Slider Fallback ─── */
html.slider-active body {
    overflow: hidden !important;
}


@media screen and (min-width: 1024px) and (max-width: 1919px) {
    h1, h2 {
        font-size: 40px !important;
		line-height: 44px !important;
    }
    h3 {
        font-size: 32px !important;
		line-height: 34px !important;
    }
    h4, h5 {
        font-size: 23px !important;
		line-height: 27px !important;
    }
    h6 {
        font-size: 20px !important;
		line-height: 24px !important;
    }
	p {
		font-size: 17px !important;
		line-height: 22px !important;
	}
    .projektkategorie-badge {
        font-size: 13px !important;
    }
	.elementor-slide-button {
	  	font-size: 20px !important;
		line-height: 32px !important;
	}
	.elementor-button {
	  	font-size: 20px !important;
		line-height: 32px !important;
	}
}


/* ─── Animierte SVGs und Hintergründe ─── */
/* ─── Animiertere Hintergründe ─── */
@keyframes color-animation {
    0% {
       background: #E8C7E4;
    }
	25% {
       background: #F6BD93;
    } 
	50% {
       background: #C3E5B9;
    } 
    100% {
       background: #AAC0E6;
    } 
}

.header {
   width: 100%;
   height: auto;
   animation: color-animation 30s infinite linear alternate;
   animation-delay: -0s;
}

.footer {
   width: 100%;
   height: auto;
   animation: color-animation 30s infinite linear alternate;
   animation-delay: -0s;
}

.block {
   width: 100%;
   height: auto;
   animation: color-animation 30s infinite linear alternate;
   animation-delay: -0s;
}

/* ─── Animiertes SVG ─── */
@keyframes color-animation-svg {
    0%   { fill: #E8C7E4; }
    25%  { fill: #F6BD93; }
    50%  { fill: #C3E5B9; }
    100% { fill: #AAC0E6; }
}

.svg-background {
    animation: color-animation-svg 30s infinite linear alternate;
	animation-delay: -0s;
}

/* ─── Animation zunächst deaktivieren ─── */
.block, .svg-background {
    animation: none;
}

/* ─── Klasse die per JS gesetzt wird ─── */
.animation-ready .block,
.animation-ready .header,
.animation-ready .footer,
.animation-ready .svg-background {
    animation: color-animation 30s infinite linear alternate;
}

/* ─── Black Buttons ─── */
.btn_black {
    border: 4px solid #FFFFFF00;
    border-radius: 90px;
}

.btn_black:hover {
    border: 4px solid #000000;
	background-color: #000000;
    border-radius: 90px;
    color:#FFFFFF;
    transition: 0s;
}

/* ─── Taxonomie-Badges ─── */
.projektkategorien {
    display: flex;
    flex-wrap: wrap; /* war "flex" – ungültiger Wert */
    gap: 8px;
}

.projektkategorie-badge {
    display: inline-block;
    background-color: #FFFFFF00;
    color: #ffffff;
    padding: 4px 14px;
    border: 1px solid #000000;
    border-radius: 20px;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap; /* Desktop: Badges bleiben einzeilig */
}

.projektkategorie-badge:hover {
    background-color: #FFFFFF;
    transition: background-color 0.5s ease;
}

/* ─── TABLET ─── */
@media (max-width: 1024px) {
    .projektkategorie-badge {
        white-space: normal; /* Umbruch erlauben */
        font-size: 13px;     /* optional: etwas kleiner */
    }
}

/* ─── MOBILE ─── */
@media (max-width: 767px) {
    .projektkategorie-badge {
        white-space: normal;
        font-size: 12px;
    }
}


/* ─── LOOP GRID (aufgeteilt) ─── */
.projekt-loop .elementor-loop-container {
    display: grid !important;
    grid-template-columns: 40fr 20fr 40fr;
}
.projekt-loop .e-loop-item {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-basis: auto !important;
}
.projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+1 of .e-loop-item) { grid-column: 1 / span 2; }
.projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+2 of .e-loop-item) { grid-column: 3; }
.projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+3 of .e-loop-item) { grid-column: 1 / span 3; }
.projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+4 of .e-loop-item) { grid-column: 1; }
.projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+5 of .e-loop-item) { grid-column: 2 / span 2; }


/* ─── LOOP CAROUSEL (Grid-Overrides zurücksetzen) ─── */
.projekt-carousel .elementor-loop-container {
    display: flex !important;   /* Swiper braucht flex, kein grid */
    grid-template-columns: unset !important;
}
.projekt-carousel .e-loop-item {
    width: calc((100% - 2 * 150px) / 3) !important;
    max-width: calc((100% - 2 * 150px) / 3) !important;
    flex-basis: calc((100% - 2 * 150px) / 3) !important;
    flex-shrink: 0 !important;
}

/* ─── LOOP CAROUSEL (About us Seite) ─── */
#slider-selection {
    overflow: visible !important;
}

/* .usp-slider {
    margin-right: calc(-50vw + 750px) !important; /* Bricht aus 1500px Container heraus */
/*	margin-left: -200px !important; /* Anpassen bis bündig mit Logo */
/*} */

.usp-slider {
    margin-right: -1px !important; /* fixer Überhang, unabhängig vom Viewport */
}

.usp-slider .swiper {
    overflow: visible !important;
}


/* ─── Small-Monitor (between 1440px - 1022px) ─── */
@media (max-width: 1440px) and (min-width: 1022px) {
    .usp-slider {
        margin-right: calc(-50vw + 750px) !important;
		padding-left: 60px !important;
    }
}


/* ─── TABLET (max. 1024px) ─── */
@media (max-width: 1024px) {
    .projekt-loop .elementor-loop-container {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Items positionieren */
    .projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+1 of .e-loop-item) { grid-column: 1; }
    .projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+2 of .e-loop-item) { grid-column: 2; }
    .projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+3 of .e-loop-item) { grid-column: 1 / span 2; }
    .projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+4 of .e-loop-item) { grid-column: 1; }
    .projekt-loop .elementor-loop-container > .e-loop-item:nth-child(5n+5 of .e-loop-item) { grid-column: 2; }
	
    .projekt-carousel .e-loop-item {
        width: calc((100% - 60px) / 2) !important;
        max-width: calc((100% - 60px) / 2) !important;
        flex-basis: calc((100% - 60px) / 2) !important;
        flex-shrink: 0 !important;
    }
	
    .usp-slider {
        margin-right: -1px !important;
    }
}

/* ─── MOBILE (max. 767px) ─── */
@media (max-width: 767px) {
	
    .projekt-loop .elementor-loop-container {
        grid-template-columns: 1fr !important;
    }
	
    /* Alle Items auf volle Breite */
    .projekt-loop .elementor-loop-container > .e-loop-item:nth-child(n of .e-loop-item) {
        grid-column: 1 !important;
    }
	
    .projekt-carousel .swiper-wrapper {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 40px;
        /* Swiper transform zurücksetzen */
        transform: none !important;
        transition: none !important;
    }

    .projekt-carousel .e-loop-item {
        scroll-snap-align: start !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Scrollbar ausblenden (optional) */
    .projekt-carousel .swiper-wrapper::-webkit-scrollbar {
        display: none;
    }
    .projekt-carousel .swiper-wrapper {
        scrollbar-width: none;
    }
	
    .usp-slider {
        margin-right: 0px !important;
    }
}

/* ================================================
   Pseudo-Hover Animation – Hover-Layer
   ================================================ */

/* Transition bleibt, opacity wird per JS gesetzt */
.text-layer {
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* ================================================
   h4 Schriftgrösse in Hover-Layern
   ================================================ */

.hover-layer h4 {
  font-size: 28px !important;
}

@media (max-width: 1024px) {
  .hover-layer h4 {
    font-size: 21px !important;
  }
}

/* ================================================
   Desktop-Positionen nur im Scaling-Bereich erzwingen
   1025px – 1199px: JS Scaling aktiv
   ================================================ */

@media (min-width: 769px) and (max-width: 1319px) {
  .hover-layer:nth-child(1) {
    width:  345px !important;
    height: 345px !important;
    top:    170px !important;
    left:     0px !important;
  }
  .hover-layer:nth-child(2) {
    width:  305px !important;
    height: 305px !important;
    top:      0px !important;
    left:   265px !important;
  }
  .hover-layer:nth-child(3) {
    width:  540px !important;
    height: 500px !important;
    top:      0px !important;
    left:   600px !important;
  }
  .hover-layer:nth-child(4) {
    width:  300px !important;
    height: 300px !important;
    top:    310px !important;
    left:   530px !important;
  }
  .hover-layer:nth-child(5) {
    width:  420px !important;
    height: 400px !important;
    top:    460px !important;
    left:   110px !important;
  }
  .hover-layer:nth-child(6) {
    width:  360px !important;
    height: 360px !important;
    top:    435px !important;
    left:   840px !important;
  }

  .circle1 {
    width:  45px !important;
    height: 45px !important;
    top:    330px !important;
    left:   390px !important;
  }

  .circle2 {
    width:  90px !important;
    height: 90px !important;
    top:    630px !important;
    right:   400px !important;
  }
}


/* ─── Pseudo-Hover Animation – Hover-Layer ─── */
/* Transition bleibt, opacity wird per JS gesetzt */
.text-layer {
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.text-layer.text-active {
  opacity: 1;
  pointer-events: auto;
}


/* ─── FilterEverything Grundeinstellungen ─── */
.wpc-filters-section {
  margin-bottom: 5px !important;
  position: relative;
}
.wpc-filters-ul-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 8px;
}
.wpc-filters-ul-list input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid black;
  border-radius: 45px !important;
  background-color: transparent !important;
  cursor: pointer;
}
.wpc-filters-ul-list input[type="checkbox"]:checked {
  background-color: white !important;
}
.wpc-filters-widget-containers-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}
.wpc-filters-scroll-container {
  width: 85% !important;
  order: 1;
  align-self: center !important;
}
.wpc-filters-widget-top-container {
  width: 15% !important;
  text-align: right !important;
  order: 2;
  align-self: center !important;
  background: transparent !important;
  border-bottom: none !important;
}
.wpc-filters-widget-top-container::before {
  display: none !important;
}
.wpc-filter-chip:not(.wpc-chip-reset-all) {
  display: none !important;
}
.wpc-filter-chips-list li.wpc-chip-reset-all a {
  border: none !important;
}

@media (max-width: 1024px) {
    .wpc-filters-scroll-container {
        width: 75% !important;
    }
    .wpc-filters-widget-top-container {
        width: 25% !important;
        text-align: right !important;
        order: 2;
        align-self: start !important;
        padding-top: 8px!important;
    }
}

@media (max-width: 767px) {
    .wpc-filters-scroll-container {
        width: 60% !important;
    }
    .wpc-filters-widget-top-container {
        width: 40% !important;
        text-align: right !important;
        order: 2;
        align-self: start !important;
        padding-top: 8px!important;
    }
}

/* ─── Fokus Mobile Menu deaktivieren ─── */
.elementor-nav-menu a {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.elementor-item-active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* ─── Reveal Footer ─── */
.reveal-footer {
    position: relative;
}

/* ─── Desktop: fixed pinning ─── */
.project-content-wrapper.is-pinned {
    position: fixed !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    z-index: 1;
}

/* ─── Spacer ─── */
.content-spacer {
    display: block !important;
    pointer-events: none;
}

/* ─── Desktop: Spalten scrollbar ─── */
.project-gallery,
.project-top-content {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 100px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.project-gallery::-webkit-scrollbar,
.project-top-content::-webkit-scrollbar {
    display: none;
}

/* ─── Tablet + Mobile: alles normal ─── */
@media (max-width: 1024px) {
    .reveal-footer {
        position: relative !important;
    }

    .project-content-wrapper,
    .project-content-wrapper.is-pinned {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .project-gallery,
    .project-top-content {
        max-height: none;
        overflow-y: visible;
        overflow-x: visible;
    }

    .content-spacer {
        display: none !important;
    }
}