/* STARTSEITE BRANCHEN */
.branchenItem1 { grid-area: branchenItem1; } .branchenItem2 { grid-area: branchenItem2; } .branchenItem3 { grid-area: branchenItem3; } .branchenItem4 { grid-area: branchenItem4; } .branchenItem5 { grid-area: branchenItem5; } .branchenItem6 { grid-area: branchenItem6; } .branchenItem7 { grid-area: branchenItem7; } .branchenItem8 { grid-area: branchenItem8; } .branchenItem9 { grid-area: branchenItem9; } .branchenItem10 { grid-area: branchenItem10; } .branchenItem11 { grid-area: branchenItem11; }

.branchen-grid {
  display: grid;
  grid-template-areas:
    'branchenItem1 branchenItem2 branchenItem3 branchenItem4'
    'branchenItem5 branchenItem6 branchenItem7 branchenItem8';
  gap: 15px;
  background-color: #fff;
	grid-template-columns: repeat(4, 1fr);
}

.branchen-grid h3 {
  color: white;
  font-size: 20px !important;
  line-height: 30px !important;
}

.branchen-grid > div {
 	background-color: rgba(255, 255, 255, 0.8);
  	text-align: left;
  	padding: 0px;
  	font-size: 30px;
	height:240px;
	background-size:cover;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 20px; 
}

.branchenItemInner { display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 80%; padding: 10px 5px 0px 5px; background-color: #0069b4; }
.branchenItemInner h4, .branchenItemInner h4 a { margin: unset !important; color: white !important; font-size: 16px !important; line-height: 26px !important; }
.branchenItemInner img { width: 50px; }

.branchenItem5 { grid-area: branchenItem5; background-color: #ffffff !important; background: linear-gradient(225deg, transparent 40px, #0069B4 0) top right; }

.branchenItemText { color: white; width: 85%; margin: 0 auto; }
.branchenItemText span { font-size: 28px !important; line-height: 34px !important; display:block; margin-bottom: 20px; }
.branchenItemText p { font-size: 14px !important; line-height: 20px !important; }





.serviceItem1 { grid-area: serviceItem1; } .serviceItem2 { grid-area: serviceItem2; } .serviceItem3 { grid-area: serviceItem3; } .serviceItem4 { grid-area: serviceItem4; } .serviceItem5 { grid-area: serviceItem5; } .serviceItem6 { grid-area: serviceItem6; } .serviceItem7 { grid-area: serviceItem7; } .serviceItem8 { grid-area: serviceItem8; } .serviceItem9 { grid-area: serviceItem9; } .serviceItem10 { grid-area: serviceItem10; } .serviceItem11 { grid-area: serviceItem11; }

.service-grid {
	width: 100%;
  display: grid;
  grid-template-areas:
    'serviceItem1 serviceItem2 serviceItem3'
    'serviceItem4 serviceItem4 serviceItem5'
    'serviceItem6 serviceItem7 serviceItem8';
  gap: 15px;
  background-color: #fff;
	grid-template-columns: repeat(3, 1fr);
}

.service-grid > div {
 	background-color: rgba(255, 255, 255, 0.8);
  	text-align: left;
  	padding: 20px 0 0 0;
  	font-size: 30px;
	height:240px;
	background-size:cover;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 20px; 
}

.service-grid h3 {color:white !important; font-size: 20px; line-height: 30px; }

.serviceItemInner { display: flex; justify-content: flex-start; align-items: center; gap: 10px; width: 90%; }
.serviceItemInner h4, .serviceItemInner h4 a { margin: unset !important; color: white !important; font-size: 16px !important; line-height: 26px !important; }
.serviceItemInner img { width: 50px; }

.serviceItem5 { grid-area: serviceItem5; background-color: #ffffff !important; background: linear-gradient(225deg, transparent 40px, #0069B4 0) top right; }

.serviceItemText { color: white; width: 85%; margin: 0 auto; }
.serviceItemText span { font-size: 28px !important; line-height: 34px !important; display:block; margin-bottom: 20px; }
.serviceItemText p { font-size: 14px !important; line-height: 20px !important; }

/* ================================================================ */
/* __  __          _ _          ____                  _             */
/* |  \/  |        | (_)        / __ \                (_)           */
/* | \  / | ___  __| |_  __ _  | |  | |_   _  ___ _ __ _  ___  ___  */
/* | |\/| |/ _ \/ _` | |/ _` | | |  | | | | |/ _ \ '__| |/ _ \/ __| */
/* | |  | |  __/ (_| | | (_| | | |__| | |_| |  __/ |  | |  __/\__ \ */
/* |_|  |_|\___|\__,_|_|\__,_|  \___\_\\__,_|\___|_|  |_|\___||___/ */
/* ================================================================ */

@media only screen and (max-width: 1300px) {
  .branchen-grid {
    grid-template-areas:
      'branchenItem1 branchenItem2 branchenItem3'
      'branchenItem4 branchenItem5 branchenItem6'
      'branchenItem7 branchenItem8 branchenItem9';
	  grid-template-columns: repeat(3, 1fr);
  }
  .branchen-grid > div {
    background-position: center center;
  }
}


@media only screen and (max-width: 1100px) {
	.service-grid {
		width: 100%;
	  display: grid;
	  grid-template-areas:
		'serviceItem1 serviceItem2' 
		 'serviceItem3 serviceItem4' 
		  'serviceItem5 serviceItem6'
		  'serviceItem7 serviceItem8';
	  gap: 15px;
	  background-color: #fff;
		grid-template-columns: repeat(2, 1fr);
	}
}



@media only screen and (max-width: 770px) {
  .branchen-grid {
    grid-template-areas:
      'branchenItem1 branchenItem2'
      'branchenItem3 branchenItem4'
      'branchenItem5 branchenItem6'
      'branchenItem7 branchenItem8';
    grid-template-columns: repeat(2, 1fr);
  }
  .branchen-grid > div { 
    background-position: center center; 
  }
}

@media only screen and (max-width: 550px) {
  .branchen-grid {
    grid-template-areas:
      'branchenItem1' 
      'branchenItem2'
      'branchenItem3'
      'branchenItem4'
      'branchenItem5'
      'branchenItem6'
      'branchenItem7'
      'branchenItem8';
    grid-template-columns: repeat(1, 1fr);
  }
  .branchen-grid > div { 
    background-position: center center; 
  }
}