@charset "UTF-8";
/* CSS Document */

/* Basis-Styling */
/*  */




body {
	
  margin: 0px 5% 0px 5%!important;
  font-family: 'Work Sans', Arial, sans-serif;
	    font-weight: 300;
  color: #222;
  line-height: 1.6;
}

@media (max-width: 768px) {
  body {
    margin: 0!important;
  }
}
@media screen and (max-width: 768px) {
  .nur-desktop {
    display: none;
  }
}

html, body {
  overflow-x: hidden;
}


	@font-face {
  font-family: 'Work Sans';
  font-display: swap;
  font-style: normal;
  src:
    url('fonts/work-sans-v19-latin-300.woff2') format('woff2');
}

	@font-face {
  font-family: 'Work Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src:
    url('fonts/work-sans-v19-latin-700.woff2') format('woff2');
}



h1, h2 {
    margin: 0 0 20px;
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 2.8em!important;
}

h3 {
    margin: 0 0 20px;
    font-family: 'Work Sans', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.5em!important;
}

h4 {
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 1.1em!important;
	    line-height: 150%!important;
}

h5 {
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 0.8em!important;
    line-height: 150%!important;
}

h7 {
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 0.7em!important;
	color:white;
}


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


/* Header */
header {
  background: #27B2FD;
  color: #299ac1;
  padding: 10px 0 3px 0;
  display: flex;
  align-items: center; /* vertikal mittig */
  justify-content: space-between; /* Logo links, Nav rechts */
	  max-width: 1600px;
	  margin: 0 auto;


}

/* Logo-Container */
.logo {
	padding: 5px 10px 10px 30px;
  /* optionales Styling für Abstand */
}

/* Logo selbst */
.logo img {
  max-width: 20%;
  min-width: 20%;
  height: auto;
  display: block;         /* wichtig! */
  margin: 0;              /* kein auto, sonst zentriert es */
}





section.adresse h4 {
  /* Deine Spezifikationen hier */
  letter-spacing: 0.1em;
	    font-size: 0.9em!important;


}

section.adresse a {
  color: #fff;
  text-decoration: none;
  margin: 0 8px;
}

.adresse {
    margin-top: 10px;
    background: #27B2FD;
    color: #fff;
    padding: 3px 0px 0px 0px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 400%!important;
		  max-width: 1400px;
	  margin: 0 auto;

}

/* Impressum */

.impressum {
    background: #fff;
    padding: 30px 90px 10px 80px;
    text-align: center;
    font-size: 1.3em;
    font-family: 'Work Sans', Arial, sans-serif;
	 letter-spacing: 0.01em;
	  max-width: 1200px;
	  margin: 0 auto;
}

section.impressum p {
    /* Deine Spezifikationen hier */
    font-size: 0.75em;
	padding: 20px 40px;
		 letter-spacing: 0.01em;

}

section.impressum h4 {
    /* Deine Spezifikationen hier */
    font-size: 0.4em;
		 letter-spacing: 0.01em;

}
section.impressum h5 {
    /* Deine Spezifikationen hier */
		 letter-spacing: 0.01em;
		    color: #747375;    
	font-weight: 700;
}

section.impressum a {
    /* Deine Spezifikationen hier */
		 letter-spacing: 0.01em;
	  text-decoration: none;
	    color: #27B2FD;
	    font-weight: 700;

}

section.impressum b {
    /* Deine Spezifikationen hier */
    font-size: 0.9em;
		 letter-spacing: 0.05em;
	    text-transform: uppercase;
	    color: #27B2FD;
		    line-height: 245%;
}

/* === Smartphone-Größe (max 480px) === */
@media (max-width: 480px) {
section.impressum p {
    /* Deine Spezifikationen hier */
    font-size: 0.7em;
	padding: 3px 2px;
		 letter-spacing: 0.01em;

}
section.impressum b {
    /* Deine Spezifikationen hier */
    font-size: 0.8em;
		 letter-spacing: 0.05em;
	    text-transform: uppercase;
	    color: #27B2FD;
		    line-height: 245%;
}
  }


/* Einleitung */
.intro {
    background: #fff;
    padding: 30px 80px 10px 80px;
    text-align: center;
    font-size: 1.8em;
    font-family: 'Work Sans', Arial, sans-serif;
	 letter-spacing: 0.01em;
	  max-width: 1400px;
	  margin: 0 auto;
	

}

.intro h2 {
  margin-bottom: 0px;
	    font-size: 1.0em!important;
	    line-height: 145%;


}

section.intro b {
    /* Deine Spezifikationen hier */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 1.3em!important;
    font-weight: 700;
		    line-height: 180%!important;

}


section.intro h4 {
    /* Deine Spezifikationen hier */
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.7em!important;
    color: #F19500;
    font-weight: 700;
}

section.intro h1 {
    /* Deine Spezifikationen hier */
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: 0.22em!important;
	margin-top: 0;
}

section.intro img {
  text-align: center;
    padding: 30px;
	max-width: 65%;
}

section.intro strong {
  text-align: center;
    padding: 50px;
	font-weight: 900;
	letter-spacing: 0.03em;

}

section.Skyline_oben {
	 max-width: 1400px;
	  margin: 0 auto;

}
.Skyline_oben img {
  width: 100%;
 height: auto;
  display: block;
}


section.projects h2{
    color: #27B2FD;
	font-size: 1.9em!important;

}


section.projects {
  text-align: center;
  padding-top: 40px;
}



.portfolio {
  padding: 60px 5px;
  max-width: 1600px;
  margin: 0 auto;
}

/* === Umbruch erzwingen nur bei 480px === */

.mobile-break {
    display: none;
}


/* === MASONRY GRID === */
.grid {
  width: 100%;
}

/* 4-Spalten */
.grid-sizer,
.grid-item {
  width: 25%;
  box-sizing: border-box;
}

.grid-item {
  box-sizing: border-box;
}

/* === Abstand zwischen Bildern über Wrapper === */
.project-wrapper {
  padding: 12.5px; 
  box-sizing: border-box;
}

/* === PROJEKTKARTE === */
.project {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.project img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  border: solid;
    border-color: #FFFFFF;
    border-width: 15px;
}

.project:hover {
  transform: scale(1.02);

}

/* === HOVER OVERLAY === */
.project .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 10px;
  font-size: 1.3em;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
		  border: solid;
    border-color: #FFFFFF;
    border-width: 15px;

}

.project:hover .overlay {
  opacity: 1;
}

.project small {
  display: block;
  margin-top: 10px;
  font-size: 0.6em;
  text-transform: none;
  transition: color 0.3s ease, font-size 0.3s ease;
}

.project:hover small {
  color: #27B2FD;
  font-size: 0.5em;
  text-transform: uppercase;
}

/* === ausgeblendete Bilder === */

.hidden {
  display: none;
}

/* Anfangszustand – versteckt */
.grid-item.hidden {
  display: none !important;
}

/* Beim Anzeigen entfernt JavaScript diese Klasse */

#showMoreBtn {
  display: block;
  margin: 30px auto;
  padding: 12px 24px;
  background-color: #27B2FD;
  color: white;
  border: none;
  font-size: 1em;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#showMoreBtn:hover {
  background-color: #1a91d0;
}



/* === RESPONSIVE BREAKPOINTS === */
@media (max-width: 1200px) {
  .grid-sizer,
  .grid-item {
    width: 33.333%;
  }
}

@media (max-width: 900px) {
  .grid-sizer,
  .grid-item {
    width: 50%;
  }
}

@media (max-width: 600px) {
  .grid-sizer,
  .grid-item {
    width: 50%; /* Zwei Spalten */
  }

  .portfolio {
    padding: 0;
    margin: 0 auto;
    width: 100%;
  }

  .grid {
    width: 100%;
    margin: 0;
  }

  .project-wrapper {
    padding: 2.5px; /* Weniger Abstand zwischen den Bildern */
    box-sizing: border-box;
  }

  .project img,
  .project .overlay {
border-width: 8px; /* Optional: auch weiße Rahmen schmaler machen */
  }
}



/* Kontaktaufforderung */
.contact {
  background: #B3E5FC; /* Zartes Blau */
  font-family: 'Work Sans', Arial, sans-serif;
	text-align: center;
  font-size: 1.3em;
  padding: 60px 20px;
		 max-width: 1600px;
	  margin: 0 auto;

}

section.contact a {
  color: #4E7997;
  text-decoration: none;
  margin: 0 8px;
	border:  thin solid #4E7997;
	border-radius: 8px;
	padding: 8px 8px;
		  display: inline-block; /* <-- DAS brauchst du */
  transition: transform 0.3s ease; /* Für weichen Effekt */

}

section.contact a:hover {
transform: scale(1.05);
transition: transform 0.3s ease, color 0.8s ease;
  cursor: pointer;
	  background: #bae2f5; /* Zartes Blau */

}



section.contact h5 {
  font-size: 0.7em!important;
  color: #000;
  text-decoration: none;
  margin: 0 8px;
  padding-top: 8px;
	  cursor: pointer;

}


section.kunden h3 {
  font-size: 1.8em;
  text-transform: uppercase;
color: #000;
  text-decoration: none;
  padding-bottom: 10px;
}




/* ABOUT FF */
section.aboutFF {
    color: #FFF;
    background-color: #7B7B7B;
    width: 100%;
    text-align: left;
    letter-spacing: 0.2em;
    padding: 50px 20px;
    box-sizing: border-box;
		 max-width: 1600px;
	  margin: 0 auto;

}

section.aboutFF h2{
     text-transform: uppercase;
}


section.aboutFF p {
     font-size: 0.9em;
	color: #FFF;
    background-color: #7B7B7B;
    width: 95%;
    text-align: left;
    letter-spacing: 0.1em;
    padding: 30px 10px;
    box-sizing: border-box;
}

section.aboutFF p strong {
     font-size: 0.9em;
	color: #FFF;
	font-weight: bolder;
	  text-transform: uppercase;


}

/* Container für Text und Bild */
.aboutFF .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap; /* für mobile Darstellung */
    max-width: 1200px;
    margin: 0 auto;
}

/* Linker Textbereich */
.aboutFF .text {
    flex: 1 1 50%;
    padding-right: 50px;
}

/* Rechter Bildbereich */
.aboutFF .image {
    flex: 1 1 40%;
    text-align: right;
}

.aboutFF .image img {
    max-width: 100%;
    height: auto;
    border-radius: 0px;
	padding-top: 95px;

}

/* Optional für kleinere Bildschirme */
@media (max-width: 992px) {
    .aboutFF .content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .aboutFF .text,
.aboutFF .image {
    flex: 1 1 100%;
    width: 100%;          /* wichtig */
    padding: 5px 0;
    text-align: center;
}
	
	section.aboutFF p {
     font-size: 0.9em;
	color: #FFF;
    background-color: #7B7B7B;
    width: 90%;
    text-align: left;
    letter-spacing: 0.1em;
    padding: 30px 10px 10px 40px;
    box-sizing: border-box;
}
	
	.aboutFF .image img {
    max-width: 55%;
    height: auto;
    border-radius: 0px;
			padding-top: 5px;
		display: block;
    margin: 0 auto;
}
}

@media (max-width: 768px) {
    .aboutFF .content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .aboutFF .text,
.aboutFF .image {
    flex: 1 1 100%;
    width: 100%;          /* wichtig */
    padding: 5px 0;
    text-align: center;
}
	
	section.aboutFF p {
     font-size: 0.9em;
	color: #fff;
    background-color: #7B7B7B;
    width: 100%;
    text-align: left;
    letter-spacing: 0.1em;
    padding: 30px 3px 10px 3px;
    box-sizing: border-box;
}
	
	.aboutFF .image img {
    max-width: 60%;
    height: auto;
    border-radius: 0px;
			padding-top: 5px;
		display: block;
    margin: 0 auto;
}
}



/* Motto */
section.Motto {
    color: #7B7B7B;
    background-color: #fff;
    width: 100%;
    text-align: left;
    letter-spacing: 0.2em;
    padding: 50px 20px;
    box-sizing: border-box;
	max-width: 1600px;
	margin: 0 auto;

}

section.Motto h2{
     text-transform: uppercase;
	    max-width: 100%;
	padding-left: 20px;
	    text-align: center;

}


section.Motto p {
     font-size: 0.9em;
	color: #7B7B7B;
    background-color: #fff;
    width: 95%;
    text-align: left;
    letter-spacing: 0.1em;
    padding: 30px 10px;
    box-sizing: border-box;
}

section.Motto a {
  color: #4E7997!important;
	  text-decoration: none;
}
section.Motto a:hover{
  color: #F89E05!important;
		font-size: 1.0em;

  text-decoration: none;
}


/* Container für Text und Bild */
.Motto .content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* für mobile Darstellung */
    max-width: 1200px;
    margin: 0 auto;
}

/* Linker Textbereich */
.Motto .text {
    flex: 1 1 50%;
    padding-right: 50px;
}

/* Rechter Bildbereich */
.Motto .image {
    flex: 1 1 40%;
    text-align: right;
}

.Motto .image img {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

/* Optional für kleinere Bildschirme */
@media (max-width: 992px) {
    .Motto .content-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .Motto .text, .Motto .image {
        flex: 1 1 100%;
        padding: 10px 0;
        text-align: center;
    }
	
	section.Motto h2{
     font-size: 1.8em !important;
   }
	
	section.Motto p {
     font-size: 0.9em;
	color: #000;
    background-color: #fff;
    width: 95%;
    text-align: left;
    letter-spacing: 0.1em;
    padding: 10px 5px;
    box-sizing: border-box;
}
	.Motto .image img {
    max-width: 80%;
    height: auto;
    border-radius: 3px;
}
	
}





/* FAQ */
.faq {
  font-family: 'Work Sans', Arial, sans-serif;
	background: #fff; /* Zartes Blau */
  text-align: center;
  font-size: 1.2em;
  padding: 30px 20px;
  max-width: 1400px;
	  margin: 0 auto;

}

.faq h3{
    padding: 0px 0px 20px 0px;
}


.faq a{
    font-family: 'Work Sans', Arial, sans-serif;
    text-align: center;
    font-size: 1.2em;
    padding: 0px 20px;
    color: #27B2FD;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.faq a:hover{
    color:dimgrey;
    text-decoration: none;    
}

.faq p{
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
  font-size: 0.8em;
  padding: 1px 20px;
}
.faq card-body{
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
  font-size: 1.5em;
  padding: 60px 20px;
}




/* KUNDEN */
.kunden {
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
  font-size: 1.2em;
  padding: 60px 20px;
}

.kunden h4{
    letter-spacing: 0.08em;
	padding-bottom: 1em;
	}


.carousel slide{
		padding-bottom: 5em;
}

/* SKYLINE */
.Skyline  {
  font-family: 'Work Sans', Arial, sans-serif;
  text-align: center;
}

.Skyline img {
  width: 100%;
 height: auto;
  display: block;
		 max-width: 1400px;
	  margin: 0 auto;

}




/* footer */

.footer2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 30px;
  background-color: #27B2FD;
	max-width: 1400px;
		  margin: 0 auto;


	
  gap: 20px; /* sauberer Abstand zwischen Logo und Text */
  flex-wrap: wrap; /* damit es auf kleinen Geräten umbricht */

}

.logofooter {
  flex-shrink: 0; /* verhindert, dass das Logo kleiner wird */
}

.logofooter img {
  height: 120px;
  display: block;
}

.text {
  flex: 1; /* füllt den verbleibenden Raum */
}

.text p {
  font-family: 'Work Sans', Arial, sans-serif;
  color: #fff;
  font-size: 0.8em;
  margin: 0; /* kein zusätzlicher Abstand */
}
.text a {
  color: #fff;
	text-decoration: none;
}
.text a:hover {
  color: #1A6382;
	text-decoration: none;
}








/* Responsives Design */

@media (max-width: 992px) 
/* Tablet Hochformat (Portrait) */
 {

  .intro p {
    font-size: 0.8em;
  }

  section.intro h4 {
    font-size: 0.6em !important;
  }

  .intro h5 {
    font-size: 0.7em !important;
  }
	.intro.nur-desktop h1 {
    font-size: 0.35em !important;
  }


  .projects h2 {
    font-size: 1.9em !important;
	      margin: 0 0 0px;

  }
 .logo img {
   min-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;

}
	 section.adresse h4 {
  /* Deine Spezifikationen hier */
  letter-spacing: 0.1em;
   font-size: 0.7em !important;}

		 
	.intro {
    background: #fff;
    padding: 30px 80px 10px 80px;
    text-align: center;
    font-size: 1.4em;
    font-family: 'Work Sans', Arial, sans-serif;
	 letter-spacing: 0.01em;

}

section.intro h4 {
    /* Deine Spezifikationen hier */
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.5em!important;
    color: #F19500;
    font-weight: 700;	
}
	 section.projects {
  text-align: center;
  padding-top: 30px;
}
	 
	 .portfolio {
  padding: 20px 20px;
	}
	
	 .d-block.mx-auto {
		 width: 98%;
		 background-color: aquamarine;
		 
}
	 }
	  .logofooter {
	 min-width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
}


	
	


/* === Tablet-Größe oder kleiner (max 768px) === */
@media (max-width: 768px) 
/* Tablet Hochformat (Portrait) */
 {

  .intro p {
    font-size: 0.8em;
  }

  section.intro h4 {
    font-size: 0.6em !important;
  }

  .intro h5 {
    font-size: 0.8em !important;
  }

  .projects h2 {
    font-size: 1.5em !important;
  }
 .logo img {
	 min-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto;
}
	 
 
	 
  .footer2 {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer2 .text {
    order: 1;
    margin-bottom: 15px;
  }

  .footer2 .logofooter {
    order: 2;
    margin-bottom: 10px;

    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer2 .logofooter img {
    max-width: 60%;
    height: auto;
  }
	 
}

/* === Smartphone-Größe (max 576px) === */

@media (max-width: 576px) {
    .mobile-break {
        display: block;
    }
}

/* === Smartphone-Größe (max 480px) === */
@media (max-width: 480px) {
  header h1 {
    font-size: 2em;
  }

 

  .intro p {
    font-size: 0.6em;
  }
	
	.intro {
    background: #fff;
    padding: 30px 20px 10px 20px;
}


  .intro h5 {
    font-size: 0.5em !important;
  }
	
	 .intro h2 {
    font-size: 0.8em !important;
  }
	
	 .intro h2 b {
    font-size: 1.2em !important;
  }

  .projects h2 {
    font-size: 1.3em !important;
  }
  .logo img {
   min-width: 90%;
    height: auto;
    display: block;
    margin: 0 auto;
}
	
	section.intro h4 {
    /* Deine Spezifikationen hier */
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.5em!important;
    color: #F19500;
    font-weight: 700;	
}
	  .intro h5 {
    font-size: 0.5em !important;
  }
	
	
	.overlay {  
		font-size: 0.7em!important;
}
.project:hover small {
  color: #27B2FD;
  font-size: 0.9em;
  text-transform: uppercase;
}
	
  .carousel {
    width: 98vw;         /* volle Breite des Viewports */
  }

  .carousel-inner,
  .carousel-item,
  .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;    /* Bild füllt den Raum gut aus */
  }

	  .footer2 .logofooter img {
    max-width: 80%;
    height: auto;
  }
	


/* === Kleine Bildschirme (max 600px – optional) === */
@media (max-width: 600px) {
  header h1 {
    font-size: 2em;
  }
}

* {
  box-sizing: border-box;
}