/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
*/
/**

    var(--theme-palette-color-1); you can use this as your primary brand colour.
    var(--theme-palette-color-2); alternative colour, used usually for the hover action 
    var(--theme-palette-color-3); colour used for general text paragraphs
    var(--theme-palette-color-4); colour used for headings, subheadings and titles 
    var(--theme-palette-color-5); colour used for borders
    var(--theme-palette-color-6); #778d7a;  colour used for subtle backgrounds (page hero, footer)
    var(--theme-palette-color-7); colour used for the site’s background
    var(--theme-palette-color-8); lighter alternative colour, to be used in header backgrounds


	Blocksy Querys:
	@media (max-width: 767px) {}
	@media (min-width: 768px) {}
	@media (max-width: 999px) {}


	*/



/* lose und freie Klassen 
__________________________________________________________________________________*/


/* @link https://utopia.fyi/type/calculator?c=320,14,1.067,1290,16,1.125,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7686rem, 0.7614rem + 0.0356vi, 0.7901rem);
  --step--1: clamp(0.8201rem, 0.7973rem + 0.1135vi, 0.8889rem);
  --step-0: clamp(0.875rem, 0.8338rem + 0.2062vi, 1rem);
  --step-1: clamp(0.9336rem, 0.8705rem + 0.3157vi, 1.125rem);
  --step-2: clamp(0.9962rem, 0.9073rem + 0.4444vi, 1.2656rem);
  --step-3: clamp(1.0629rem, 0.9439rem + 0.5953vi, 1.4238rem);
  --step-4: clamp(1.1341rem, 0.9799rem + 0.7714vi, 1.6018rem);
  --step-5: clamp(1.2101rem, 1.0149rem + 0.9763vi, 1.802rem);
}
		
		h1, h2, .like-h2, .like-h1 h1 { 
			font-size: var(--step-3); margin-top: 0 !important; margin-bottom: 0.75em !important; }
		h3, .like-h3 { font-size: var(--step-2); margin-bottom: 1em !important; }
		h4, .like-h4  { font-size: var(--step-1); margin-bottom: 1em;  }
		h5, h6, .like-h5  { font-size: var(--step--0); margin-bottom: 1em; }

		p { font-size: var(--step-0); margin-bottom: 0.875em !important; }

		.small { font-size: var(--step--1); }
		.xsmall { font-size:var( --step--2); }
		.large { font-size:var( --step-4); }
		.xlarge { font-size:var( --step-5); }

		hr {margin: 80px auto !important; }
		b, strong { font-weight: 500 !important; }
		
		.small { font-size: 0.875em; }
		.blocksatz { text-align: justify; hyphens: auto }

		.wp-block-quote p { 
			font-size: var(--step-4);
			line-height: 1.2em;
			} 
			.wp-block-quote cite { 
				font-size: var(--step-2) !important;
				text-align: right;
				line-height: 1em;
				} 
     
		.kolumnen div.stk-block-content,
		.kolumnen div.tpgb-column-inner {
			column-count:  2;
			column-width: 300px;
			column-gap: 8em;
			column-rule: 1px solid rgba(0,0,0,0.25);
			display: block;
			hyphens: auto;
			}
			.margin-bottom-0 { margin-bottom: 0 !important; }

	

		.wp-block-image img,
		.blocks-gallery-item img { }

		.entry-content figcaption {
			text-align: right !important;
			color: #787878;
			font-size: var(--step--2) !important;
			font-weight: 300;
		}

		.wp-block-image.alignfull.size-full { margin-bottom: 24px; }

		.hyphen  p {
			 word-wrap: break-word;
		  overflow-wrap: break-word;
		-webkit-hyphens: auto;
		   -moz-hyphens: auto;
				hyphens: auto;
		}

		.keine-linkmarkierung a { link-decoration: none !important; text-decoration: none; }



	/* https://www.joshwcomeau.com/shadow-palette/ */
	:root {
	  --shadow-color: 0deg 0% 0%;
	  --shadow-elevation-low:
		0px 0.5px 0.8px hsl(var(--shadow-color) / 0),
		0px 1.5px 2.3px hsl(var(--shadow-color) / 0.08);
	  --shadow-elevation-medium:
		0px 0.5px 0.8px hsl(var(--shadow-color) / 0),
		0px 7.4px 11.1px hsl(var(--shadow-color) / 0.11);
	  --shadow-elevation-high:
		0px 0.5px 0.8px hsl(var(--shadow-color) / 0),
		0px 8.1px 12.1px hsl(var(--shadow-color) / 0.09),
		-0.1px 24.7px 37.1px hsl(var(--shadow-color) / 0.17);
		-0.1px 24.7px 37.1px hsl(var(--shadow-color) / 0.17);
		}
	.schatten-small { box-shadow: var(--shadow-elevation-low); }
	.schatten 		{ box-shadow: var(--shadow-elevation-medium); }	
	.schatten-large { box-shadow: var(--shadow-elevation-high); }



/* Header 
__________________________________________________________________________________*/


		#header  {pointer-events: none; }
		#header [data-row*='middle:boxed'] .ct-container {
				pointer-events: all;
				-webkit-backdrop-filter: blur(12px);
				backdrop-filter: blur(12px);  				
				height: auto !important;
			}		
		
		#header [data-sticky='yes:shrink'] [data-row*=boxed]>div {
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
		}

		body.home h1.page-title { display: none;}

		.hero-section,
		.hero-section figure img {
			object-position: 50% 100% !important;
		}



		@media (min-width: 999px) and (max-width: 1400px) {
				.site-branding {
					transform: scale(0.65);
					transform-origin: bottom right;
				}
		}




					/* Menü 
					__________________________________________________________________________________*/
					

					#header .menu li.menu-item, 
					#header .menu li.page_item {
						align-items: flex-end;
						padding-bottom: 24px;
					}
	
					#header .ct-language-switcher {  
						display: flex !important;
						align-items: flex-end !important;
						height: 100%;
					}
						#header ul.ct-language a {   
							border-left: 1px solid var(--theme-palette-color-1);
							padding-left: 0.5em;
							margin-left: 24px;
							margin-bottom: 12px; 
						}


						@media screen and (max-width: 1200px) and (min-width: 1000px) {
							
							#header .menu  {
								gap: 0px;
								margin-left: -24px;
								margin-right: -24px;
							}
							
							#header .menu>li>.ct-menu-link {
								padding-right: 12px; 
								padding-left: 12px;	
							}											
							
						}		

						@media (max-width: 999px) {
							button.ct-header-trigger {
								transform: scale(0.7);
								transform-origin: left bottom;
								}
							}




/* Startseite
__________________________________________________________________________________*/


















/* allgemeine Inhalte
__________________________________________________________________________________*/




	/* Projekte
	__________________________________________________________________________________*/


		[data-sidebar] {
			--sidebar-width: 318px;
			--sidebar-width-no-unit: 23;
			--sidebar-gap: 6%;
		}



	.single-projekte .jet-listing-dynamic-field-block {
			margin-bottom: 0;
		}

	.single-projekte .jet-listing-dynamic-field__content {
			display: flex;
		}

		.ct-sidebar .ct-widget:not(:last-child) {
			margin-bottom: 0 !important;
		}

	   .ct-sidebar .projekt-meta-kategorie,
	   .ct-sidebar .projekt-meta-inhalt {
			border-bottom: 1px solid oklch(45.68% 0.044 39.22 / .2) !important;
			padding: 2em 0 !important;
		}
			.single-projekte .jet-listing-dynamic-field-block:last-child .projekt-meta-kategorie,
			.single-projekte .jet-listing-dynamic-field-block:last-child .projekt-meta-inhalt {
				border-bottom: none ! important;	
			}

		.ct-sidebar .projekt-meta-kategorie {
				font-weight: 500;
				color:  var(--theme-palette-color-1);
				width: 95px;
				font-size: 0.875em;
			}
		.ct-sidebar .projekt-meta-inhalt {
				border-bottom: 1px solid oklch(45.68% 0.044 39.22 / .3);
				color:  var(--theme-palette-color-1);
				font-size: 0.875em;
				max-width: 223px;
			}
			.ct-sidebar .projekt-meta-inhalt.text {
				max-width: 95% !important;
						}

			.jet-woo-product-gallery {
				margin-top: -15px;
				margin-left: -15px !important;
			}

		.ct-dynamic-media img, 
		.ct-dynamic-media picture.fpo {
			width: inherit !important;
		}

			






		/* Metro-Block auf Startseite und bei Projekte 
		________________________________________________*/


		/* Für alle Blöcke außer dem letzten */
		.wp-block-blocksy-post-template.columns-4 article:not(:last-child),
		.post-type-archive-projekte article:not(:last-child) {
		  grid-column: span 1;
		  grid-row: span 1;
		  aspect-ratio: 1/1; /* Fügt ein Seitenverhältnis von 1:1 hinzu */
		}
		/* Immer der erste Block, alle 8 Artikel */
		.wp-block-blocksy-post-template.columns-4 article:nth-child(8n+1),
		.post-type-archive-projekte article:nth-child(8n+1) {
			  grid-column: span 2;
			  grid-row: span 2;
			  aspect-ratio: 1/1; /* Fügt ein Seitenverhältnis von 1:1 hinzu */
			}

		/* immmer der 8. Block */
		.wp-block-blocksy-post-template.columns-4 article:nth-child(8n+8),
		.post-type-archive-projekte article:nth-child(8n+8) {
		  grid-column: span 2;
		  grid-row: span 1;
		  aspect-ratio: 2/1; /* Fügt ein Seitenverhältnis von 1:1 hinzu */			
		}




			/* Für den vorletzten Block im Archiv bei 9 oder mehr Artikeln manuell anpassen */
			.post-type-archive-projekte article:nth-last-of-type(2) {
				grid-column: span 2;
				grid-row: span 2;
				aspect-ratio: 2/1; /* Fügt ein Seitenverhältnis von 2:1 hinzu */	
			}


		/* Für den letzten Block im Archiv bei 9 oder mehr Artikeln manuell anpassen */
			.post-type-archive-projekte article:last-of-type {
				grid-column: span 2;
				grid-row: span 1;
				 aspect-ratio: 2/1; /* Fügt ein Seitenverhältnis von 1:1 hinzu */	
			}
		

				article.type-projekte {
					position: relative;			
					overflow: hidden;
					}

					.projekt_metro_text {
						position: absolute;
						bottom: -1px;
						right: -1px;
						display: inline-block;
						background-color: #fff;
						text-align: right;
						xmax-width: 95%;
					}
					.projekt_metro_text h3 {
							font-size:  var( --step--1) !important;
							text-transform: uppercase;
							margin: 0 !important;
							line-height: 1.2em;
							}
					.projekt_metro_text div {
							font-size: var( --step--2) !important;
							margin: 0;
							line-height: 1.2em;
							}




					@media screen and (max-width: 1200px) {

						.projekt_metro_text {
							transform: scale(0.7);
							transform-origin: bottom right;
						}
					}


				
						
					@media screen and (max-width: 999px) {
						
						.post-type-archive-projekte article:nth-child(8n+1) {
							aspect-ratio: 2 / 1;
						}
						
						/* Für den letzten Block im Archiv bei 9 oder mehr Artikeln manuell anpassen */
						.post-type-archive-projekte article:last-of-type {
							grid-column: span 2;
							grid-row: span 1;
							 aspect-ratio: 2/1; /* Fügt ein Seitenverhältnis von 1:1 hinzu */	
						}					
						
					}



					@media (max-width: 767px) {			

							.projekt_metro_text {
								opacity: 1;
								transform: scale(0.8);
								transform-origin: bottom right;
							}
							article.type-projekte:hover .projekt_metro_text {
								opacity: 1;
							}						

							/* Für alle Blöcke außer dem letzten */
							.wp-block-blocksy-post-template.columns-4 article:not(:last-child),
							.post-type-archive-projekte article:not(:last-child) {
							  grid-column: span 4;
							  grid-row: span 4;
							  aspect-ratio: 2/1; /* Fügt ein Seitenverhältnis von 1:1 hinzu */
							}
							/* Immer der erste Block, alle 8 Artikel */
							.wp-block-blocksy-post-template.columns-4 article:nth-child(5n+1),
							.post-type-archive-projekte article:nth-child(5n+1) {
								  grid-column: span 4;
								  grid-row: span 4;
								  aspect-ratio: 2/1; /* Fügt ein Seitenverhältnis von 1:1 hinzu */
							}

							/* immmer der 8. Block */
							.wp-block-blocksy-post-template.columns-4 article:nth-child(8n+8),
							.post-type-archive-projekte article:nth-child(8n+8) {
							  grid-column: span 4;
							  grid-row: span 4;
							  aspect-ratio: 2/1; /* Fügt ein Seitenverhältnis von 1:1 hinzu */			
							}


							/* Für den letzten Block im Archiv bei 9 oder mehr Artikeln manuell anpassen */
							.post-type-archive-projekte article:last-of-type {
								  grid-column: span 4;
								  grid-row: span 2;
								  aspect-ratio:2/1; /* Fügt ein Seitenverhältnis von 1:1 hinzu */	
							 }

					}


					/* Anpassung der Post-Navigation */
					.post-navigation img { visibility: hidden; }
					.post-navigation svg { 
						fill: var(--theme-palette-color-1) !important; 
						opacity: 1 !important;  
					}
					.nav-item-prev figure { justify-content: left !important; }
					.nav-item-next figure { justify-content: right !important; }



/* Footer 
__________________________________________________________________________________*/


		body:not(.home) .hide-if-not-home {
			display: none;
		}


		footer {}
		footer [data-row=middle]  { }





/* Stackable Blocks 
__________________________________________________________________________________*/

	.stackable-container {
		padding-top: 10% !important;
		padding-bottom: 10% !important;
		}
		










/* Plugins 
__________________________________________________________________________________*/

		
		/* Gutenberg
        -------------------------------------*/





		/* Blocksy
        -------------------------------------*/

		.ct-shortcuts-container {
			z-index: 99 !important;
		}

		.ct-shortcuts-bar-items,
		[data-header*="type-1"] #offcanvas {
			-webkit-backdrop-filter: blur(6px);
			backdrop-filter: blur(6px);
		}

		#offcanvas  .sub-menu .ct-menu-link:not(:empty) { 
			padding: 0.5em 0;
			font-size: 0.875em;
				}
		#offcanvas .sub-menu .sub-menu .ct-menu-link:not(:empty) { 
			padding: 0.5em 0;
			font-size: 0.875em;
				}


		.post-navigation .item-label { display: none; }
		.post-navigation .item-title { font-weight: 300 !important;  font-size: 0.875em !important;}

		.post-navigation .nav-item-next { margin-right: 15px; }






		/* Social Feed - Instagram 

        -------------------------------------
			.social-feed-style-4 .tpgb-sf-contant-img:before {
				background: rgba(109,79,69,0.90);
				-webkit-backdrop-filter: blur(6px);
				backdrop-filter: blur(6px);
			}

			.xxmoreText,
			.tpgb-hashtag,
			.tpgb-sf-profile,
			.tpgb-sf-username,
			.tpgb-sf-logo,
			.tpgb-sf-footer,
			.tpgb-sf-header {
						display: none !important;
					}

			.tpgb-sf-usercontact {
				left: 0 !important;
			}

			.social-feed-style-4 .tpgb-sf-contant-img {
				aspect-ratio: 1/1;
			}

			@media (max-width: 767px) {		
					.social-feed-style-4 .tpgb-sf-contant-img {
						aspect-ratio: 2 / 1;
					}
			}

*/




		/* DrDsgvO Map
			-------------------------------------*/

			#drdsgvo_map { height: 100vh; }

				#drdsgvo_map .ol-control button {  background-color: var(--theme-palette-color-1); }
				#drdsgvo_map .ol-attribution li a {
					color: var(--theme-palette-color-1);
					text-decoration: none;
				}

				.ol-zoom {
					top: 0.5em;
					left: 0.3em;
					transform: scale(0.7);
				}

				.ol-touch .drdsgvo_initbtn {
					top: 3em;
					left: 1.1em;
				}

				.drdsgvo_routebtn {
					display: none;
				}





		/* Complianz
        -------------------------------------*/

			#cmplz-cookies-overview .cmplz-dropdown p, 
			#cmplz-document .cmplz-dropdown p, 
			#cmplz-document li, 
			#cmplz-document p, 
			#cmplz-document td {
				font-size: 1rem;
			}

			#cmplz-document.impressum h2, 
			#cmplz-document.impressum h3 {
				font-size: 1.5rem;
				margin-top: 1.5em;
				margin-bottom: 0 !important;			
				color: var(--paletteColor3) !important;
				opacity: 1;
			}

			#cmplz-document a {				
				text-decoration: none;
			}

			#cmplz-document b {
				font-weight: 700;
			}


		.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    		text-align: center;
		}




			/* FlowFLow
				-------------------------------------*/	

				#ff-stream-1, #ff-stream-2,
				.ff-stream { padding-top: 0 !important; padding-bottom: 0 !important; }

				#ff-stream-1 .ff-has-overlay:hover img,
				#ff-stream-2 .ff-has-overlay:hover img {
					-webkit-transform: translate(-50%, -50%) !important;
					transform: translate(-50%, -50%) !important;		
					}
				.ff-layout-grid .ff-item .ff-img-holder img {
					width: auto !important;
				}

				#ff-stream-1 .ff-item .picture-item__inner,
				#ff-stream-2 .ff-item .picture-item__inner {
					box-shadow: var(--shadow-elevation-medium);			
					}
				#ff-stream-1 .ff-item:hover .picture-item__inner,
				#ff-stream-2 .ff-item:hover .picture-item__inner {
					box-shadow: var(--shadow-elevation-high);
					background-color: #fff !important;
					}
				.picture-item__inner:hover:before {
					background: rgba(0, 0, 0, .0) !important;
					}
				.ff-slideshow-classic,

				.ff-btn { 
					border: 1px solid #ccc !important;
					background: #fff !important; 
					border-radius: var(--theme-button-border-radius, 3px);
					font-family: var(--theme-font-family);
					font-weight: var(--theme-font-weight);
					font-style: var(--theme-font-style, inherit);

					font-size: 13px !important;
					color: var(--theme-palette-color-1, oklch(45.68% 0.044 39.22)) !important;
					text-transform: none !important;
				}


					@media (max-width: 546px) {
						.ff-item { margin-bottom: 24px; }
					}


/* Animationen 
__________________________________________________________________________________*/
	
	input,
    textarea,
    input[type=submit],
    select,
	label,
	tr,
	.projekt_metro_text { 
		transition: all 0.3s ease !important;
	}