/*
Theme Name: BlankSlate
Theme URI: https://opencollective.com/blankslate
Author: Bryan Hadaway
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/bhadaway/blankslate/issues. Thank you.https://blockq:8890/wp-admin/theme-editor.php?file=editorstyle.css&theme=blankslate
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2024.2
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2024
BlankSlate is distributed under the terms of the GNU GPL
*/

body,html {
	/* margin: 0 !important; */
	padding: 20px !important;
	overflow-x: hidden;
	/* Definierte Maximal-Breite der Website */
	max-width: 1720px;
    margin-left: auto !important;
    margin-right: auto !important;
}

p {
    font-family: roboto, sans-serif;
    font-weight: 100;
	font-size: clamp(0.5rem, 3vw, 1rem);
	line-height: 1.4rem;
    color: #333333;
}

ol, ul {
	font-family: roboto, sans-serif;
    font-weight: 400;
	font-size: clamp(0.5rem, 3vw, 1rem);
	line-height: 2rem;
}

a {
	text-decoration: none;
	color: #000;
}

h1, h2, h3, h4 ,h5, h6 {
	font-weight: 100;
	font-family: roboto, sans-serif;	
}

h1 {
	font-size: clamp(2.4rem, 4vw, 2.5rem);
}

h2 {
	font-size: clamp(2.0rem, 3vw, 2.2rem);
}

h3 {
	font-size: clamp(1rem, 1.5vw, 1.8rem);
}


.title_main {
	color: #fff;
	top: 100%;
	position: absolute;
	font-family: roboto, sans-serif;
    font-weight: 100;
	opacity: 1;
	z-index: 2;
	padding: 12px;
	height: 100%; 
	width: 100%;
	background-color: rgba(255,255,255,0.4); 
	backdrop-filter: blur(12px);
	transition: 0.8s;
}


.arrow {
 vertical-align: middle;
    /* Empfehlung: */ 
    margin-right: 5px;
	margin-top: -2px;
	height: 8px;
}

.image-class {
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center bottom;
}

.moreplus {
	opacity: 0;
	font-size: 38px;
	padding: 12px 24px;
	color: #fff;
	background-color: #000;
	transition: 0.8s;
}

hr {
	border-top: solid 0.5px #ededed;
}


.topheader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0 30px 0;
}

ul {
	  list-style-type: none;
}

.menu-item p {
	border-color: #000;
	border-bottom: 1px solid #ededed;
	border-radius: 0px;

	padding: 2px 12px 2px 12px; 
	transition: 0.8s;
}

.menu-item:hover  {
	p {
		color: #fff;
		background-color: #2E0B0B;
	}
}

.menu-item:active  {
	p {
		color: #fff;
		background-color: #2E0B0B;
	}
 	
}

/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v32-latin-100.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v32-latin-100.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v32-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v32-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v32-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v32-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

.sitemargin {
    min-height: 2em;
	content: "";
}

.menu_container {
    max-width: 2120px;
    margin: 0 auto;
}

.content-container {
    max-width: 2120px;
    justify-content: left;
    text-align: left;
	
}

.mygrid {
	
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 128px; 
	
}

.singleitem {	
	
}



#wrapper {
	max-width: 2120px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 20px 0 20px; 
}


.img_container {
	margin-left: 0; /*  -100%; */
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	opacity: 0;
}



.image-class {
    width: 100%;
   /* 	aspect-ratio: 16 / 9; */
	aspect-ratio: 1 / 0.7 ;
	transition: 1.6s;	 
}

.project_title {
  opacity: 0;
}

.project_title p {
    margin-top: 12px;
    line-height: 18px;
}



.img_container:hover .image-class {
	/* Zoom Effekt der Bilder auf der Homepage */
 	 transform: scale(1.01,1.01); 
}

.img_container:hover .moreplus {
	transform: scale(0.78,0.78);
	opacity: 1;
}

.project_title p{
	transition: 0.3s;
	text-shadow: 0 0 0px transparent; /* Platzhalter-Schatten */
}

.singleitem:hover .project_title p{
 
  text-shadow: 0 0 0.6px black; /* Leichter Schatten */
}

.imageholder {
	min-height : 100vh !important;
 	 min-width : 10vw !important;
  	background-size:100% 100% !important;
  	overflow-y: hidden !important;
  	overflow-x: hidden !important;
  	-webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
	margin: 0;
	padding: 0;
}

.site_spacing {
	content: "";
	min-height: 164px;
}

/* Burger Menu*/

.menu-wrapper {	
	position: fixed;
	top: 0;
	left: 0;
	width: 0%;
	height: 0%;
	background-color: #e2e2e2;
	padding: 30px;

	opacity: 0;
	z-index: 10000;
}


.page-header-inner {
	top: 0;
    left: 0;
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-content: center;
    z-index: 100000;
    border: 0.5px solid #e2e2e2;
    background-color: #fff;
}

.myheader {
	display: contents;
    left: 0;
    width: 100%;
    max-width: 2024px;
	
	top: 0;
    left: 0;
	width: 100%;
	
	z-index: 10000;
	background-color: #e2e2e2;
}

.innerheader {
	display: flex; 
	justify-content: end;
	background-color: #fff;
	max-width: 2120px;
	height: 120px;
}


/* Off Canvas Menü */
/* Das Scrollen des bodys verhindern */

body.no-scroll {
  //overflow: hidden;
  //height: 100vh;
}


.menu_logo {
	width:120px; 
	height: auto;
	margin: 0 0 30px 0;
	opacity: 0;
}

#menu-icon {
	 width: 30px;
	height: 30px; 
	cursor: pointer; 
	margin-top: 18px; 
	position: fixed; 
	z-index: 100000; 
	padding: 9px; 
	background-color: #f8f8f8;
	transition: 1s;
}



#menu-icon:hover {
	 width: 30px;
	height: 30px; 
	cursor: pointer; 
	/* margin-top: 18px; */
	position: fixed; 
	z-index: 10000; 
	padding: 9px; 
	background-color: #e8e8e8;
}


.menuwrapper {
  display: flex;
  justify-content: center; /* zentriert den Container */

}

.content {
  position: relative;  /* damit das Burger-Icon relativ dazu positioniert wird */
  max-width: 1200px;
  width: 100%;
}

#burger {
  position: absolute;
  right: calc((100vw - 2024px) / 2);
  top: 20px;
		  z-index: 999;

}


.offcanvas-menu {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
   opacity: 0;
  transition: top 0.9s ease-in-out;
  z-index: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.offcanvas-menu.open {
  top: 0;
}

.offcanvas-content {
  display: flex;
  flex-direction: column;
  align-items: center;
;
}

.offcanvas-content a {
  text-decoration: none;
  color: #333;
}

#menu-link-a, #menu-link-b, #hrline, #menu-link-c, #menu-link-d {
	opacity: 0;
}


.offcanvas-content a :hover {
	font-weight: 400;
}

.submenu a {
	font-size: 12px; 
	text-align: center;
	text-decoration: none;
	font-weight: 100;
}

.submenu a :hover {
	font-weight: 400;
}


hr {
	opacity: 0;
}


.toggle-menu {
	padding: 30px 0 20px 0;
}


.blockqmenu {

	
	max-width: 2120px;
	height: 80px;
	background-color: #e2e2e2;
	border-radius: 8px;
}

.blockqnav {

}

/* Slider */

.contentcontainer {
    width: 100%; /* 94%; */
	/* Hier 100% für eine Fullwidth - Slideshow */
    margin-left: auto;
    margin-right: auto;
}

.mySwiper {
    z-index: 1;
    overflow: visible;
}

.swiper-container p {
    margin: 0px;
    padding: 0px;
}
  swiper-container {
      width: 100%;
      height: 100%;

    }


:root {
    --swiper-theme-color: #1E3547;
}


.slidetext {
    position: absolute;

    border: 0px #ededed solid;
    border-radius: 12px;
  
    max-width: 90%;

    text-align: center;
    
    left: 0;
    right: 0;
    margin: 0 auto;
  

}

.slidetext p {
    margin: 0;
    padding: 0;
	
}
/* Formular */

.cr_form-input{
    max-width: 280px;
}


.swiper-wrapper p {
	padding-top: 30px;
	margin-bottom: 164px;
}

.swiper1 {
	opacity: 0;
	margin-left: auto;
	margin-right: auto;
	
	height: 78vh;
	
  overflow: visible !important;


}


.swiper-slide {
	
   display: flex;
  align-items: center;     /* vertikal zentrieren */
  justify-content: center; /* horizontal zentrieren */
  height: 100%;
  width: 100%;
	
 background-color: #fcfcfc;;
}


.swiper-slide img{

	
	
	  height: 100%;  /* volle Höhe des Slides */
  width: auto;    /* keine Verzerrung */
  max-width: 100%; /* bei zu breiten Bildern */
  display: block;
  margin: 0 auto;   /* horizontal zentrieren */
	
	 object-fit: cover;
	

	/*	border: solid #BDBDBD 0.1px; 
	box-shadow: 3px 3px 5px rgba(240, 240, 240, 0.05)  ; 
	-webkit-box-shadow: 3px 3px 5px rgba(240, 240, 240, 0.05)  ; 
	-moz-box-shadow: 3px 3px 5px rgba(240, 240, 240, 0.05)  ; */
}

.swiper-slide img {
  margin: auto;
}




.swiper-scrollbar {
   /* left: 0px; */
   width: 100% !important;
   margin-top: 30px;
	background: #fff !important;
}

.swiper-spacing {
	content: "";
	min-height: 164px;
}
.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
	position: relative !important;
  left: 0px !important;

}

.lazyblock .lzb-preview-server img {
	max-width: 100% !important;
	height: auto !important;
}

.footermenu p {
	font-size: 12px;
}

/* Top Ikon */

.totop {
	width: 34px;
}

/* Gutenberg Klassen */

.dreispalter {
	margin: 9%;
}

/* Responsive */
@media only screen and (max-width: 600px) {
	body, html {
		padding: 8px !important;
	}

	.lottielogo {

	width: 120px; 
	height: auto; 
	}
	
	
	.mygrid {
    	grid-template-columns: 100%;
		 gap: 16px; 
	}
	
	.swiper1 {
		height: 45vh;
	}
	
   .swiper-spacing {
     
     min-height: 80px;
	}
	
	.swiper-button-prev, .swiper-button-next {
		display: none !important;
	}
	
	
}




#burgerbut {
	width: 40px;
	height: auto;
	margin-left: 32px;
}

/* CSS nur für die Seite WerWirSind */

.page-id-23 { 
	
	#main h2 {
		opacity: 0;
	}
	
	#main p {
		opacity: 0;
	}
} 

user agent stylesheet
div {
    display: block;
    unicode-bidi: isolate;
}
.wp-block-column {
    flex-grow: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}
:root {
    --swiper-navigation-size: 44px;
}
:root {
    --swiper-theme-color: #007aff;
}
:root {
    --swiper-theme-color: #1E3547;
}
:root {
    --wp--preset--aspect-ratio--square: 1;
    --wp--preset--aspect-ratio--4-3: 4 / 3;
    --wp--preset--aspect-ratio--3-4: 3 / 4;
    --wp--preset--aspect-ratio--3-2: 3 / 2;
    --wp--preset--aspect-ratio--2-3: 2 / 3;
    --wp--preset--aspect-ratio--16-9: 16 / 9;
    --wp--preset--aspect-ratio--9-16: 9 / 16;
    --wp--preset--color--black: #000000;
    --wp--preset--color--cyan-bluish-gray: #abb8c3;
    --wp--preset--color--white: #ffffff;
    --wp--preset--color--pale-pink: #f78da7;
    --wp--preset--color--vivid-red: #cf2e2e;
    --wp--preset--color--luminous-vivid-orange: #ff6900;
    --wp--preset--color--luminous-vivid-amber: #fcb900;
    --wp--preset--color--light-green-cyan: #7bdcb5;
    --wp--preset--color--vivid-green-cyan: #00d084;
    --wp--preset--color--pale-cyan-blue: #8ed1fc;
    --wp--preset--color--vivid-cyan-blue: #0693e3;
    --wp--preset--color--vivid-purple: #9b51e0;
    --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%);
    --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100%);
    --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100%);
    --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100%);
    --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100%);
    --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100%);
    --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
    --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100%);
    --wp--preset--gradient--luminous-dusk: linear-gradient(135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100%);
    --wp--preset--gradient--pale-ocean: linear-gradient(135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100%);
    --wp--preset--gradient--electric-grass: linear-gradient(135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100%);
    --wp--preset--gradient--midnight: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
    --wp--preset--font-size--small: 13px;
    --wp--preset--font-size--medium: 20px;
    --wp--preset--font-size--large: 36px;
    --wp--preset--font-size--x-large: 42px;
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}
:root {
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--huge: 42px;
}

/* Der Slider in den Projhekten */

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled

 {
    opacity: .15;
    height: 48px;
    width: 48px;
    cursor: auto;
    background-color: #efefef;
    pointer-events: none;
}


.swiper-button-prev, .swiper-button-next {
	z-index: 1 !important;
    width: 48px !important;
    height: 48px !important;
    right: var(--swiper-navigation-sides-offset, 40px) !important;
	background-color: #efefef;
	margin-top: calc(296px -(var(--swiper-navigation-size) / 2)) !important;
}


.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 40px) !important;
    right: auto;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 24px !important;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: #000;
    font-weight: 800 !important;
}



.swiper-button-prev, .swiper-rtl .swiper-button-next {

    left: var(--swiper-navigation-sides-offset, 40px) !important;
    right: auto;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {

    right: var(--swiper-navigation-sides-offset, 40px) !important;
    left: auto;
}

/* Scroll Buttons sollen ma Bild kleben, wenn der Bildschrim größer wird */
@media only screen and (min-width: 1720px) {
	
	.swiper-button-prev, .swiper-rtl .swiper-button-next {
		left: var(--swiper-navigation-sides-offset, calc(50% - 840px)) !important;	
	}
	
	.swiper-button-next, .swiper-rtl .swiper-button-prev {
   	 right: var(--swiper-navigation-sides-offset, calc(50% - 840px)) !important;
	}
	/* 858px für Pfeile ausserhalb */
}

/* Seite Wer wir sidn - Bilder einblenden */

.fade-in {
  opacity: 0;       /* Start unsichtbar */

}

/* Logo */

.lottielogo {
    margin-top: -40px;
    padding: 20px 0 20px 0;
    right: -8px;
    width: 160px;
    height: auto;
    /* margin: 0 -4px 0 0; */
}

	/* geändert */
	/* damit man die weiteren Slides nicht in der Smartphone Ansicht sieht */
	
.wp-block-column {
  
    overflow: hidden;
}
 
a, button {
    -webkit-tap-highlight-color: transparent; /* Mobile Tap-Effekt entfernen */
    outline: none;                             /* Focus-Rahmen entfernen */
}

.theme_image img{

	width: 100% !important;
	height: auto !important;
	text-align: end;
}

.text_justify {
	 text-align: justify;
}