/* inter-300 - 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: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('./fonts/inter-v18-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-300italic - 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: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url('./fonts/inter-v18-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/inter-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-italic - 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: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('./fonts/inter-v18-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('./fonts/inter-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700italic - 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: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('./fonts/inter-v18-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--malerino-gap: 30px;
	--malerino-maincolor: #164194;
}

.row {
	margin: 0 var(--malerino-gap);
}

@media screen and (min-width: 900px) {
	:root {
		--malerino-gap: 60px;
	}
}
@media screen and (min-width: 1200px) {
	:root {
		--malerino-gap: 120px;
	}
}

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body, html {
	height: 100%;
	font-family: 'Inter', sans-serif;
	font-style: normal;
	font-weight: 400;
    }
    
    html {
	    font-size: 10px;
    }
   
    
    .ueberuns-container { 
	    background: var(--malerino-maincolor);
    }

    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 50px;
      z-index: 9999999 !important
    }
    
    /* Der weiße Verlauf-Hintergrund */
	.fade-bg {
	  position: fixed;
	  top: -150px;
	  left: 0;
	  width: 100%;
	  height: 250px;
	  background: linear-gradient(to bottom, white, transparent);
	  z-index: 8888888px !important; /* hinter dem Header */
	  transition: top 0.4s ease;
	  pointer-events: none; /* klickt nicht blockieren */
	}
    
	/* Wenn der Body gescrollt ist */
	body.scrolled .fade-bg {
	  top: 0;
	  z-index: 100000
	}

    .logo {
      width: 150px;
    }

    .nav-container {
      display: flex;
      align-items: stretch;
      font-size: 1.7rem;
      position: relative;
      z-index: 200
    }

    .nav-box {
      background: white;
      -webkit-border-radius: 60px 0 0 60px;
      border-radius: 60px 0 0 60px;
      padding: 20px 30px;
      display: flex;
      position: relative;
      flex-direction: column;
      justify-content: center;
      min-height: 60px;
    }
    .nav-box:after {
	    content: '';
	    position: absolute;
	    right: -50px; 
	    top: 0;
	    height: 100%;
	    width: 55px;
	    background: #fff;
	    z-index: 10
    }

    .nav-box nav a {
      text-decoration: none;
      color: #333;
      margin: 5px 10px;
      font-weight: bold
    }

    .phone-box {
      background-color: var(--malerino-maincolor);
      color: white;
      display: flex;
      align-items: center;
      padding: 0 30px;
     -webkit-border-radius: 60px 60px 60px 60px;
     border-radius: 60px 60px 60px 60px;
      font-weight: bold;
      width: auto;
      position: relative;
      z-index: 100
    }
    
    .phone-box a { 
	    color: #fff;
	    text-decoration: none;
	    display: block
    }

    main {
      /* background: rgba(255, 255, 255, 0.9); */
    }
    
    
    main  h1 { 
	    font-size: 3rem;
	    margin: 0 0 20px 0;
	    color: #164194;
    }
	
    
    #stage {
	    width: 100%; height: auto;
    }
    #stage img { 
	    /* object-fit: contain; */
	    /* object-position: top center; */
	    width: 100%;
	    height: 100%;
    }
    
    main p,
    #malerino-main-content ul,
    #malerino-main-content ol {
	    margin: 5px 0 10px 0;
	    font-size: 1.5rem;
	    line-height: 1.5em;
	    color: var(--malerino-maincolor);
    }
    
    #intro { position: relative; margin: -200px 0 0 0 }
    
    
    .nav-link {
      text-decoration: none;
      color: #666;
      padding: 0.5rem;
      transition: color 0.3s;
    }
    
    .nav-link.active {
      color: red;
      font-weight: bold;
    }
    
    
    
    
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 100px;
    }
    
    #intro .text {
	    padding: 100px 0 0 0
    }
    
    .text, .image {
      flex: 1;
      min-width: 300px; /* damit sie auf kleinen Screens umbrechen */
    }
    
    /* Optional: Bild anpassen */
    .image img {
      max-width: 100%;
      height: auto;
      display: block;
    }
    
    /* Responsive Verhalten (optional verfeinern) */
	@media (max-width: 1300px) {
	  #intro .text {
		      padding: 0 0 0 0
	      }
	      
	      .nav-container {
	      font-size: 1.4rem;
	      }
	      
	}
	
	@media (max-width: 1000px) {
		.nav-box {
			padding: 15px
		}
		
		.nav-box nav a.nav-link { display: none }
		.nav-box nav a.nav-link:last-child { display: block }
		
		#stage {
			height: 800px;
		}
		#stage img { object-fit: cover; background-position: top center; }
	}
	
	@media (max-width: 850px) {
		#stage {
			height: 600px;
		}
		
		.phone-box {
			position: fixed;
			bottom: 0;
			right: 30px;
			bottom: 30px;
			height: 50px;
		}
		.nav-box::after { 
			display: none
		}
		
		.nav-box {
		      -webkit-border-radius: 60px 60px 60px 60px;
		      border-radius: 60px 60px 60px 60px;
		      padding: 0 20px;
		      background: var(--malerino-maincolor);
		      color: #fff;
		  }
		  .nav-box nav a {
			  margin: 0;
			  color: #fff
		  }
		  
		  .fade-bg {
			  height: 40%;
			  background: #ffffff;
			  background: -webkit-linear-gradient(180deg,rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 95%);
			  background: -moz-linear-gradient(180deg,rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 95%);
			  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 95%);
			  filter: progid:DXImageTransform.Microsoft.gradient(
			    startColorstr="#FFFFFF",
			    endColorstr="#FFFFFF",
			    GradientType=0
			  );
			  z-index: 1000
			  
		  }
	}
	
	@media (max-width: 650px) {
		.logo { width: 100px }	
		
		header {
			padding: var(--malerino-gap);
		}
		
		#stage {
			height: 400px;
			margin: 70px 0 0 0;
			position: relative
		}
		
		.stage-gradient { 
			width: 100%;
			height: 80px;
			top: 0;
			position: absolute;
			left: 0;
			top: 0;
			background: #ffffff;
			background: -webkit-linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
			background: -moz-linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
			background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient(
			  startColorstr="#FFFFFF",
			  endColorstr="#FFFFFF",
			  GradientType=0
			);
		}	
		/* .fade-bg {
			top: 0;
			height: 350px;
			-webkit-transition: all 300ms ease-in-out;
			-moz-transition: all 300ms ease-in-out;
			-ms-transition: all 300ms ease-in-out;
			-o-transition: all 300ms ease-in-out;
			transition: all 300ms ease-in-out;
		}
		.scrolled .fade-bg {
			opacity: .8
		} */
		
		#intro {
			margin: -100px 0 0 0
		}
		
		main h1 {
		  font-size: 2rem; 
	  }
	}
	
    /* Responsive Verhalten (optional verfeinern) */
    @media (max-width: 768px) {
      .container {
	flex-direction: column;
      }
      
		
    }
    
    
    @media (max-width: 550px) {
   
    
	#stage {
	height: 350px;
	}
	
	.stage-gradient { 
		height: 50px;
	}
	
	#intro {
		margin: -50px 0 0 0
	}
	
}
    
    
	.responsive-container {
	  display: flex;
	  flex-wrap: wrap; 
	  align-items: stretch;
	  width: 100%;
	  margin: 0 auto;
	  box-sizing: border-box;
	  background: var(--malerino-maincolor);
	}
    
	.left-column {
	  width: 50%;
	  min-height: 100%;
	  position: relative
	}
    
	.right-column {
	  flex: 1;
	  padding: var(--malerino-gap);
	  box-sizing: border-box;
	}
    
	@media (max-width: 768px) {
	  .responsive-container {
	    flex-direction: column; 
	  }
    
	  .left-column {
	    width: 100%; /* Links nimmt die gesamte Breite */
	    height: 400px; /* Feste Höhe von 400px */
	    min-height: auto; /* keine minimale Höhe mehr */
	  }
    
	  .right-column {
	    width: 100%; /* Rechts nimmt ebenfalls die gesamte Breite */
	  }
	}
	
	.left-column-imagetop {
		width: 50%;
		height: calc(100% + 50px);
		position: absolute;
		right: 0;
		bottom: 0;
	}
	
	.left-column-imagebottom {
		width: 50%;
		height: calc(90% - 0px);
		position: absolute;
		left: 0;
		bottom: -50px;
	}
	
	.logo-column {
		position: absolute;
		mix-blend-mode: multiply;
		bottom: 0;
		width: 100%;
		text-align: center;
	}
	
	.logo-column img { 
		width: 60%;
		height: auto;
		vertical-align: middle
	}
	
	.right-column-inner {
		padding: 100px 50px 200px 0;
		color: #fff;
	}
	.right-column-inner p {
		color: #fff
	}
	
	.right-column-inner  h2 { 
		font-size: 2.4rem;
		margin: 30px 0 7px 0;
	}
	 
	    #ueberuns {
		    padding: 100px 0	    
	    }
	    
	    .leftcol-image {
		    overflow: hidden
	    }
	    .leftcol-image img {
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		    object-position: center center;
	    }
	    
		@media (max-width: 1150px) {
			.right-column-inner {
				padding: 50px 50px 100px 0;
				color: #fff;
			}
			
			.left-column-imagebottom {
				height: calc(60% - 0px);
			
			}
			
			.left-column-imagetop {
			  width: 50%;
			  bottom: auto;
			  top: 0;
			  margin-top: -50px;
			  height: calc(60% + 50px);
			

		  }
			
		}
		
		
		
		.swiper {
		      width: 100%;
		      height: 100%;
		      
		      --swiper-navigation-color: #fff;
		    }
		
		    .swiper-slide {
		      text-align: center;
		      font-size: 18px;
		      background: #fff;
		      height: 600px !important;
		      width: auto !important
		    }
		
		    .swiper-slide img {
		      display: block;
		      width: 100%;
		      height: 100%;
		      object-fit: cover;
		    }
		    
		    .referenzen-intro {
			    padding: 0 0 0 var(--malerino-gap);
		    }
		    
		    .referenzen-intro h2 { 
			    font-size: 3rem;
			    color: red;
			    margin: 0 0 10px 0
		    }
		    .referenzen-intro h3 { 
				font-size: 2rem;
				color: var(--malerino-maincolor);
			}
		
			.referenzen-intro-inner { max-width: calc(50% - var(--malerino-gap)) }
	
			.swiper-slide.swiper-firstbox {
				width: calc(var(--malerino-gap) - 10px) !important;
				background: none;
				height: 100px ;
			}
			
			.referenzen-slider {
				padding: 100px 0
			}
			
			.swiper-button-prev,
			.swiper-button-next {
				position: absolute;
				width: 100px !important;
				height: 100px !important;
				background: var(--malerino-maincolor);
				-webkit-border-radius: 70px 70px 70px 70px;
				border-radius: 70px 70px 70px 70px;
			}
			
			.swiper-button-prev:hover,
			.swiper-button-next:hover {
				background: red
			}
			
			.swiper-button-prev {
				left: calc(var(--malerino-gap) - 50px) !important;
			}
			.swiper-button-next {
				right: calc(var(--malerino-gap) - 50px) !important;
			}
			.swiper-button-next::after {
				margin: 0 -10px 0 0;
			}
			.swiper-button-prev::after {
				margin: 0 0 0 -10px;
			}
			
			@media (max-width: 1150px) {
				.swiper-slide {
					height: 500px !important;
				}
			}
			
			@media (max-width: 750px) {
				.swiper-slide {
					height: 400px !important;
				}
				
				.referenzen-intro-inner { max-width: calc(100% - var(--malerino-gap)) }
			}
		
	
	.footer-section-container {
	  display: flex;
	}
	
	.footer-section-container .column {
	  width: 40%;
	  box-sizing: border-box;
	}
	
	.footer-section-container .left {
		width: 40%;
	}
	
	.footer-section-container .right {
		width: calc(60% - var(--malerino-gap));
		text-align: right
	}
	
	.footer-section-container .right svg {
		width: 500px;
		height: auto;
		vertical-align: middle
	}
	
	.left-column-nav {
		padding: 40px 0 30px var(--malerino-gap);
	} 
	
	.left-column-nav ul {
		list-style-type: none;
	}
	.left-column-nav li { display: inline-block; font-size: 1.4rem; margin: 0 20px 0 0 }
	.left-column-nav li a { text-decoration: none; color: #888; }
	
	@media (max-width: 1000px) {
		.footer-section-container .right svg {
			width: 300px;
		}
	}
	
	@media (max-width: 600px) {
	.footer-section-container {
	  display: block;
	  text-align: center;
	}
	
	:root {
		--swiper-navigation-size: 30px !important;
	}
	
	.swiper-button-prev { left: 20px !important }
	.swiper-button-next { right: 20px !important }
	
	
	.swiper-button-prev, .swiper-button-next {
		width: 60px !important;
		height: 60px !important
	}
	
	.footer-section-container .left {
		width: 100%;
	}
		.footer-section-container .right {
			text-align: center !important;
			width: 100%
		}

	}
	
	
	.contactrow {
	   	display: flex;
	       flex-wrap: wrap;
	       margin: 0 0 100px 0
	  }
	
	  .contactrowcolumn {
	    box-sizing: border-box;
	  }
	
	  .contactrowcolumn-left {
	      width: 40%;
	      color: #fff;
	      box-sizing: border-box;
	      position: relative
	    }
	    
	    .contactrowcolumn-left:before {
		    content: '';
		    position: absolute;
		    top: -50px;
		    left: 0;
		    width: calc(100% + 200px);
		    height: calc(100% + 50px);
		    background-color: var(--malerino-maincolor);
	    }
	    
	    .contactrowcolumn-left p {
		    color: #fff;
	    }
	    
	    .contactrowcolumn-left--inner {
		    padding: 0 60px 40px;
		    position: relative;
		    z-index: 20
	    }
	    
	    .contactrowcolumn-left--inner a {
		    color: #fff;
	    }
	    
	    .contactrowcolumn-left--inner p:first-of-type a {
		    display: block;
		    color: yellow;
		    font-size: 2rem; 
		    font-weight: 700;
		    margin: 5px 0 0 0;
		    text-decoration: none;
	    }
	    .contactrowcolumn-left--inner p:first-of-type {
		    padding: 0 0 80px 0
	    }
	    .contactrowcolumn-right {
	      width: 60%;
	      background-color: #d0d0d0;
	      box-sizing: border-box;
	      position: relative;
	      z-index: 100
	    }
	    .contactrowcolumn-right-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden }
	    .contactrowcolumn-right-image img { object-fit: cover; width: 100%; height: 100%; object-position: bottom right }
	    
	    .salvatore-portrait { position: absolute; bottom: 0; left: -50px; width: auto; height: 90% }
	    	.salvatore-portrait img { height: 100%; width: auto; }
	  /* Mobile: Spalten untereinander */
	  
	  @media (max-width: 850px) {
	    .contactrow {
	      flex-direction: column;
	    }
	    
		.contactrowcolumn-left {
			width: calc(100% - 100px);
			margin: 0 50px;
			background-color: var(--malerino-maincolor);
		}
		.contactrowcolumn-left:before {
			display: none
		}
		.contactrowcolumn-left--inner {
			padding: 40px 
		}
		
		.contactrowcolumn-right {
			background-color: var(--malerino-maincolor);
			height: 400px;
			width: calc(100% + calc( 2* var(--malerino-gap)));
			margin: 0 50px 0 calc(-1 * var(--malerino-gap));
		}
		.salvatore-portrait { left: -80px; }
	  }
	  
	  @media (max-width: 650px) {
		  .contactrowcolumn-right {
			  height: 280px
		  }
		  .salvatore-portrait { left: -20px; }
		  
		  .contactrowcolumn-left {
			  width: calc(100% + calc( 2* var(--malerino-gap) ));
			  margin: 0 0 0 calc(-1 * var(--malerino-gap));
		  }
		  
		  .fade-bg {
			  height: 300px
		  }
		  
		  .nav-link.active {
			  color: yellow;
		  }
	  }
	  
	  
	  
	  #malerino-main-content {
		  padding: 250px 0 100px 0
	  }
	  
	  #malerino-main-content * a {
		  color: var(--malerino-maincolor);
	  }
	  
	  #malerino-main-content h2 {
		  color: var(--malerino-maincolor);
		  font-size: 2.4rem
	  }
	  
	  #malerino-main-content h3 {
		    color: var(--malerino-maincolor);
		    font-size: 1.9rem;
		    margin: 20px 0 5px 0
	    }
	    
	   #malerino-main-content h4 {
		       color: var(--malerino-maincolor);
		       font-size: 1.5rem;
		       margin: 20px 0 5px 0
	       }
	       
	       
	       #malerino-main-content ul,
		   #malerino-main-content ol {
			   margin: 10px 0 10px 30px
		   }
		  
		  
		  .intro-text-link-container a {
			  color: #fff;
			  padding: 15px 25px;
			  background: yellow;
			  border: 2px solid yellow;
			  color: var(--malerino-maincolor);
			  display: inline-block;
			  margin: 20px 0 0 0;
			  font-size: 1.5rem;
			      line-height: 1.5em;
			      font-weight: bold;
			  text-decoration: none;
			  -webkit-transition: all 300ms ease;
			  -moz-transition: all 300ms ease;
			  -ms-transition: all 300ms ease;
			  -o-transition: all 300ms ease;
			  transition: all 300ms ease;
		  }
		  
		  .intro-text-link-container a:hover {
			  padding: 15px 35px;
			  background: none;
			  color: yellow
		  }
		  
		  .wp-block-group.zertifikate .wp-block-image {
			  border: 1px solid #fff;
			  -webkit-box-shadow: -40px 40px 60px 0 rgba(0,0,0,0.2);
			  box-shadow: -40px 40px 60px 0 rgba(0,0,0,0.2);
		  }
		  
		 .wp-block-group.zertifikate :where(.wp-block-columns.is-layout-flex) {
		    gap: 8em;
		  }