/* 20-layout-sections.css
 * Generated from the active LibertyRoots Code Snippets export.
 * Each block keeps the original snippet ID for safe comparison and future cleanup.
 */

/* ============================================================
 * Original Snippet ID 180: AA • Neues Layout für bestimmte Seiten (3D Design und Newmorphism) • CSS Snippet 
 * Neues Layout für bestimmte Seiten (3D Design und Newmorphism) - Text Maximale Breite anpassen - Benutzerdefinierte 404-Fehler Seite - Top Section Text Rückgabe und Garantie Seite - Blog Beiträge - Über uns Seite Video etc. - Blogseite Übersicht Top Section - Brotkrumen und Titelleiste - Startseite Top Sektion - Team-Element Schatten (3D Effekt) - Kontakt Seite Button ausblenden Desktop
 * ============================================================ */
/* Text Maximale Breite anpassen */
	.text-max-width{max-width: 740px;}
	
	
	/* Benutzerdefinierte 404-Fehler Seite */	
	.page-id-24539 .title_container .breadcrumb,
	.page-id-24539 .alternate_color .breadcrumb a{
		color: #e8e8e8 !important;
	}
	
	.suche-gross form {
		margin-bottom: 5px !important;
	}
	
	.suche-gross .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
		height: 50px;
	}
	
	
	/* Top Section Text Rückgabe und Garantie Seite */
	body.wp-night-mode-on .startseiten-text-top .top-section-immage {
		background-image: linear-gradient(0deg, 
			rgba(255, 255, 255, 0) 30%,
			rgba(255, 255, 255, 0.5) 60%,
			rgba(255, 255, 255, 0.6) 80%
		) !important;
	}
	
	.startseiten-text-top .top-section-immage {
		background-image: linear-gradient(0deg, 
			rgba(0, 0, 0, 0) 30%, 
			rgba(0, 0, 0, 0.5) 60%, 
			rgba(0, 0, 0, 0.6) 80%
		) !important;
	}
	
	.element-background {
	    		box-shadow: var(--element-3d);
		-webkit-box-shadow: var(--element-3d);
		   -moz-box-shadow: var(--element-3d);
	}
	
	body.wp-night-mode-on .element-background {
		background-color: #f4f4f4;
	}
	
	
/* Blog Beiträge */
	/* Header Bild Verlauf für Überschrift */
	
	.blog-image-top .top-section-immage{
		background-image: linear-gradient(180deg, 
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0) 10%,
			rgba(0, 0, 0, 0) 70%,
			rgba(0, 0, 0, 0.6) 100%
		);
	    		box-shadow: var(--oben-shadow-frei) !important;
		-webkit-box-shadow: var(--oben-shadow-frei) !important;
		   -moz-box-shadow: var(--oben-shadow-frei) !important;
	}
	
	
	/* Blogseite Brotkrumen */
	#top.single .title_container{
		background-color: transparent !important;
		margin-bottom: -60px !important;
		box-shadow: none !important;
	}
	
	
	/* Blogbeiträge Brotkrumen Farbe */
	.single-post .breadcrumb,
	.single-post .breadcrumb a,
	.single-post .title_container .main-title,
	.single-post .title_container .main-title a {
		color: #e8e8e8 !important;
	}
	
	
@media only screen and (max-width: 767px) { 
	/*.page-id-23737 .title_container,*/
	#top .title_container .container,
	#top.single .title_container .container {
		padding-top: 0px;
		min-height: 35px;
	}
	#top.single .title_container{
		margin-bottom: -40px !important;
	}
	.title_container{
		margin-bottom: -40px !important;
	}
}
	

/* Über uns Seite Video */
	/* Header Video Desktop */
	.top-video-section .av-section-color-overlay-wrap {
		background-image: linear-gradient(180deg,
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0) 10%,
			rgba(0, 0, 0, 0) 70%,
			rgba(0, 0, 0, 0.6) 100%
		);
		z-index: 1;
	}

	.page-id-14335 .title_container .breadcrumb,
	.page-id-14335 .alternate_color .breadcrumb a{
		color: #e8e8e8 !important;
	}
	
	
	/* Mobil Top Section Über Uns */
	.avia_mobile .top-video-section .av-section-color-overlay-wrap {
		background-image: linear-gradient(180deg,
			rgba(0, 0, 0, 0) 30%,
			rgba(0, 0, 0, 0.5) 60%,
			rgba(0, 0, 0, 0.7) 80%);
		z-index: 1;
	}

	.avia_mobile .page-id-14335 .title_container .breadcrumb,
	.avia_mobile .page-id-14335 .alternate_color .breadcrumb a{
		color: #37393f !important;
	}

	
	/* Über Uns Video Element Deckend*/
	.video-3d{
		margin-bottom: 0;
		background-image: none !important;
		background: transparent !important;
	}
	
	
/* Blogseite Übersicht Top Section */
	body.wp-night-mode-on .startseiten-text-top-2 .top-section-immage {
		background-image: linear-gradient( 180deg,
			rgba(255, 255, 255, 0.8) 5%, 
			rgba(255, 255, 255, 0.4) 15%,
			rgba(255, 255, 255, 0.4) 30%,
			rgba(255, 255, 255, 0.6) 60%,
			rgba(255, 255, 255, 0.8) 80%) !important;
	}
	
	.startseiten-text-top-2 .top-section-immage {
		background-image: linear-gradient(180deg,
			rgba(0, 0, 0, 0.8) 5%, rgba(0, 0, 0, 0.4) 15%,
			rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.6) 60%,
			rgba(0, 0, 0, 0.8) 80%) !important;
	}


/* Brotkrumen und Titelleiste */
	.title_container{
		background-color: transparent !important;
		margin-bottom: -60px !important;
	}
	
	/* Shopseite Brotkrumen ausblenden */
	.post-type-archive-product .title_container{
		display: none;
	}
@media only screen and (max-width: 767px) {
	.post-type-archive-product .page-description .entry-content-wrapper {
		padding-top: 10px !important;
	}
}
	
/* Startseite Top Sektion */
	.farb-sektion-ohne-abstand > div:nth-child(1) > main:nth-child(1) {
		padding: 6px 0 2px;
	}
	
	.farb-sektion-ohne-abstand{
		background-color: var(--gelb) !important;
	}
	
	.startseiten-slogan-top > h2:nth-child(1) {
		margin-bottom: 2px;
	}
	
	.startseiten-slogan-top h2{
		font-size: 20px !important;
		text-transform: none !important;
	}
	
@media only screen and (max-width: 767px){
	.startseiten-slogan-top h2{
		font-size: 16px !important;
	}
}
	
	/* Startseiten Image (Bild) Top */	
	.top-section-immage {
		background-image: linear-gradient(180deg, 
			rgba(0, 0, 0, 0) 50%,
			rgba(0, 0, 0, 0.9) 100%
		) !important;
	    		box-shadow: var(--oben-shadow-frei) !important;
		-webkit-box-shadow: var(--oben-shadow-frei) !important;
		   -moz-box-shadow: var(--oben-shadow-frei) !important;
	}
	
	.top-section-below {
	    		box-shadow: var(--oben-shadow) !important;
		-webkit-box-shadow: var(--oben-shadow) !important;
		   -moz-box-shadow: var(--oben-shadow) !important;
	}
	
	.top-section-below-2 {
	    		box-shadow: var(--oben-shadow) !important;
		-webkit-box-shadow: var(--oben-shadow) !important;
		   -moz-box-shadow: var(--oben-shadow) !important;
	}

	
/* Team-Element Schatten (3D Effekt) */
	.team-shadow{
	    		box-shadow: var(--element-3d);
		-webkit-box-shadow: var(--element-3d);
		   -moz-box-shadow: var(--element-3d);
	}
	
	
	/* Kontakt Seite Button ausblenden Desktop */
@media only screen and (min-width: 768px){
	.display-none-button-2 .av-l0h6m3fi-b7f33f4a11559f340ccad93fff3414fc{
		display: none;
	}
}

	
	/* Whats App Button auf Kontaktseite Hover */
	.whats-app-button:hover{
		filter: var(--element-drop-shadow) !important;
		opacity: 0.9;
	}


/* ============================================================
 * Original Snippet ID 213: Enfold/Wordpress - Story (Blog) Seite - CSS Snippet 
 * Das ist ein Beispiel-Snippet zur Demonstration, wie Du eigenen CSS-Code zu Deiner Website hinzufügen kannst. Du kannst es entfernen, oder bearbeiten, um eigenen Inhalt hinzuzufügen.
 * ============================================================ */
/* Trusted Shops ausblenden */
	.page-id-23737 #minimized-trustbadge-98e3dadd90eb493088abdc5597a70810 {
		display: none !important;
	}
	
	@media only screen and (min-width:767px) and (max-width:989px) {
		.responsive .av-masonry-entry .av-masonry-entry-title+.av-masonry-entry-content {
			display:block;
		}
	}
	
	
	@media only screen and (min-width: 1280px) { 
		.story-blog-top-beitrag-slider .avia-slideshow-fixed-height {
			padding-bottom: 50% !important;
		}
	}
	@media only screen and (min-width: 768px) and (max-width: 1279px){ 
		.story-blog-top-beitrag-slider .avia-slideshow-fixed-height {
			padding-bottom: 60% !important;
		}
	}
	@media only screen and (min-width: 480px) and (max-width: 767px){ 
		.story-blog-top-beitrag-slider .avia-slideshow-fixed-height {
			padding-bottom: 80% !important;
		}
	}
	@media only screen and (max-width: 479px) { 
		.story-blog-top-beitrag-slider .avia-slideshow-fixed-height {
			padding-bottom: 130% !important;
		}
	}
	
	@media only screen and (max-width: 767px) { 
		.story-blog-top-beitrag-slider .slideshow_caption{
			padding: 30px 0;
		}
		.story-blog-top-beitrag-slider .avia-slideshow-arrows a {
			display: none !important;
		}
		.story-blog-top-beitrag-slider .avia-caption-content {
			display: block !important;
		}
		.story-blog-top-beitrag-slider .avia-slideshow-button{
			margin-top: 10px !important;
			padding: var(--button-padding-outline) !important;
		}
		.story-blog-top-beitrag-slider .avia-caption-content p {
			margin: 0;
		}
		.dark-mode-button-blog{
    		margin-top: -25px;
    		margin-bottom: -10px;
		}
	}
	
		.story-blog-top-beitrag-slider{
			border-radius: var(--radius-element);
    		box-shadow: var(--element-3d-frei);
		}
	
		.story-blog-top-beitrag-slider .avia-featureimage-slide{
			border-radius: var(--radius-element) !important;
		}
	
		.story-blog-top-beitrag-slider .av-section-color-overlay {
			background-color: transparent !important;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.6) 100%);
		}
	
	
	/* Beitrags Slider Text */
		.story-blog-top-beitrag-slider .slideshow_caption {
			text-align: left !important;
		}
		.story-blog-top-beitrag-slider .slideshow_align_caption {
			vertical-align:bottom;
		}
	
		.story-blog-top-beitrag-slider .avia-caption-content{
			margin: 0 !important;
		}
	
		.avia-featureimage-slideshow h2.avia-caption-title::after{
			display: none;
		}
	
	
/* Element | https://liberty-roots.com/test2/ */

.av-inner-masonry {
  border-radius: var(--radius-element);
  box-shadow: var(--element-3d-frei);
}

	.av-masonry {
		left: -5px !important;
		padding-right: 10px !important;
	}

	.av-masonry-container {
		margin-left: 10px;
	}
	
	.av-inner-masonry-content-pos-content .av-masonry-date{
		display: none;
	}


/* ============================================================
 * Original Snippet ID 320: Enfold/Wordpress - Hero Section TeilenButtons - CSS
 * ============================================================ */
/* Copy to Clipboard Hacken standardmäßig ausblenden und Animieren */
		.av-share-box ul li a.lr-link-copy-animation-element-2 {
		  display: none;
		  color: #54af00 !important;
		  font-size: 14px;
		}
		
		.av-share-box ul li a.lr-link-copy-animation-element-2.lr-show {
		  display: block;
		  animation-name: font-size-animation;
		  animation-duration: 0.5s;
		  animation-timing-function: ease-in-out;
		}
		
		@keyframes font-size-animation {
		  0% {
		    font-size: 14px;
		  }
		  50% {
		    font-size: 20px;
		  }
		  100% {
		    font-size: 14px;
		  }
		}
	
		.av-share-box ul li a.lr-link-copy-animation-element-1{
			display: none;
		}
	
		.av-share-box ul li a.lr-link-copy-animation-element-1.lr-show{
			display: block;
		}
	
	.av-social-link-copy-share:hover a, .av-social-link-copy-share a:focus {
    	background-color: #ddb300;
	}
	#lr-drop-share-icons .av-share-box ul li.av-share-link:hover a, #lr-drop-share-icons .av-share-box ul li.av-share-link a:focus {
    	background-color: transparent;
	}
		
		/* Ändere das Styling der Share-Box-Liste */
		#lr-drop-share-icons .av-share-box-list li {
			display: block !important;
		}
		
		/* Ändere das Styling der Share-Box-Liste, wenn der Mauszeiger darüber schwebt */
		#lr-drop-share-icons .av-share-box-list li a:hover,
		#lr-drop-share-icons .av-share-box-list li a:active {
			background-color: rgba(255, 255, 255, 0.1) !important;
		}
		
		/* Verstecke den Tooltip-Text */
		#lr-drop-share-icons .avia-related-tooltip {
			opacity: 0 !important;
			display: none !important;
		}
		
		/* Ändere die Farbe der Share-Box-Icons */
		.lr-drop-share-icons-white li a {
			color: #ffffff !important;
		}
		
		/* Setze den Hintergrund der Share-Box auf eine Radial-Gradient mit schwarzer oder weißer Farbe */
		#top .lr-drop-share-icons-white .av-share-box ul {
			background: radial-gradient(circle at center, rgba(0, 0, 0, 0.5) -130%, transparent 130%) !important;
		}
		
		#top .lr-drop-share-icons-black .av-share-box ul {
			background: radial-gradient(circle at center, rgba(255, 255, 255, 0.7) -130%, transparent 130%) !important;
		}
		
		/* Setze die Position der Share-Box auf fixiert und setze den Z-Index auf 9999 und eine Einblend-Animation */
		#lr-drop-share-icons {
			position: fixed;
			z-index: 9999;
			width: auto;
		}
		
		/* Media Queries für mobile Geräte */
		@media only screen and (min-width: 768px) {
			#lr-drop-share-icons {
				top: 140px !important;
				right: 20px;
			}
			#lr-drop-share-icons .av-share-box ul li a{
			    padding: 10px 0;
			}
		}
		
		@media only screen and (max-width: 767px) {
			#lr-drop-share-icons {
				top: 80px;
				right: 0;
				transition: top 0.5s ease;
			}
			#lr-drop-share-icons .av-share-box ul li a{
				width: 40px;
				height: 40px;
				padding: 6px 0;
			}
		}


/* ============================================================
 * Original Snippet ID 321: Enfold/Wordpress - Produkt mit Text im Wechsel für Halbe Spalte - CSS
 * Produkt mit Text im Wechsel für Halbe Spalte
 * ============================================================ */
/* Produkt und Text im Wechsel */
    .lr-product-and-description {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .lr-product-and-description.reverse {
        flex-direction: row-reverse;
    }
    .lr-product-and-description img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 100%;
      height: auto;
      width: 283px;
    }
    .lr-product-and-description div {
        padding: 0 0 0 10px;
    }
    .lr-product-and-description.reverse div {
            padding: 0 10px 0 0;
    }
    .lr-product-and-description h4 {
        font-size: 24px;
        font-weight: bold;
        margin: 0;
    }
    .lr-product-and-description p {
        font-size: 18px;
        margin: 10px 0;
        min-width: 50%;
    }
        
        
      /*Media Query für Bildschirme kleiner als 768px*/
    @media screen and (max-width: 579px), screen and (min-width: 768px) and (max-width: 1089px) {
        .lr-product-and-description {
          flex-direction: column;
        }
        .lr-product-and-description.reverse {
          flex-direction: column;
        }
        .lr-product-and-description img {
          width: 100%;
          max-width: none;
          height: auto;
        }
        .lr-product-and-description div {
          padding: 0px 0 40px 0;
          text-align: center;
        }
    }


/* Enfold icon cards and trust boxes.
 * Moved from the former legacy parity layer into the layout sections module.
 */
#top .iconbox_top .iconbox_content {
    border-radius: var(--radius-element) !important;
    background: transparent !important;
    box-shadow: var(--element-3d) !important;
    -webkit-box-shadow: var(--element-3d) !important;
    -moz-box-shadow: var(--element-3d) !important;
}

#top .iconbox_top .iconbox_icon {
    font-size: 70px !important;
    top: -40px !important;
    padding: 0 !important;
    height: 80px !important;
    width: 80px !important;
    line-height: 70px !important;
    margin: 0 0 0 -35px !important;
    filter: var(--element-drop-shadow) !important;
    text-shadow: var(--text-shadow-h) !important;
}

#top .iconbox_top .iconbox_icon:before,
#top .iconbox_top .iconbox_icon [data-av_icon]:before,
#top .iconbox_top .iconbox_icon .av-icon-char:before {
    font-size: inherit !important;
    line-height: inherit !important;
}

#top .iconbox_content_container,
#top .iconbox_content_title {
    text-align: left !important;
}

@media only screen and (max-width: 767px) {
    #top .iconbox_top .iconbox_icon {
        top: 50% !important;
        left: 100% !important;
        margin: -40px 0 0 -100px !important;
    }

    #top .iconbox_top .iconbox_content_container,
    #top .iconbox_top .iconbox_content_title {
        margin: 0 90px 0 0 !important;
    }

    #top .iconbox_top .iconbox_content {
        padding: 25px 20px 20px 20px !important;
    }

    #top .iconbox_top {
        margin-top: 0 !important;
    }
}