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

.gea_main{
	height:auto;
	display:-ms-flexgea_main_person;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
	color:#515151;

}
.gea_main > article {
	display:-ms-flexgea_main_person;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-wrap: wrap;/*==========Zeilenumbruch=========*/
    -ms-flex-wrap: wrap;/*==========Zeilenumbruch=========*/
    flex-wrap: wrap;/*==========Zeilenumbruch=========*/
   	margin: 4% 2%;
   	padding: 5px;
 	-webkit-justify-content: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
  	-webkit-flex: 3 1 90%;
	-ms-flex: 3 1 90%;
         flex: 3 1 90%;
   -webkit-order: 2;
   -ms-flex-order: 2;
             order: 2;
}

.gea_main > nav {
   margin: 1%;
   padding: 1%;
   background:#FFF;
 	-webkit-justify-content: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
   	-webkit-flex: 1 6 10%;
		-ms-flex: 1 6 10%;
          	flex: 1 6 10%;
   -webkit-order: 1;
   -ms-flex-order: 1;
             order: 1;
}
 
.gea_main > aside {
	margin: 1%;
   	padding: 1%;
   background:#FFF;
 	-webkit-justify-content: space-around;
    -ms-flex-pack: space-around;
    justify-content: space-around;
   	-webkit-flex: 1 6 10%;
		-ms-flex: 1 6 10%;
          	flex: 1 6 10%;
  	 -webkit-order: 3;
	 -ms-flex-order: 3;
           	   order: 3;
}

.gea_main_wrapper{
	margin:0 auto .5%;
	width:100%;
}

.gea_main_performance{
	width:100%;
}
.gea_main_performance img{
	display:block;
	width:100%;
	margin:3% auto;
}

.gea_main_wrapper h1, h2, h4{
	color:#00579D;
}
.gea_main_wrapper h2{
	margin-top:5%;
}
.gea_main_performance p{
	margin:0 auto;
}

.gea_card_wrapper {
	display: flex;
	flex-wrap: wrap;          /* Karten rutschen automatisch in die nächste Reihe */
	gap: 16px;                /* Abstand zwischen den Karten */
	justify-content: flex-start;  /* Die Karten links */
	margin:2% auto;
}
.gea_card {
	flex: 1 1 20rem;          /* flexible Basisbreite, alle gleich groß */
	max-width: 20rem;         /* maximale Breite */
	background-color: #f0f0f0;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align:center;
}
.gea_card_advice p{color:#369;}

.gea_card img.gea_card_profil {
    width: 120px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.gea_card h3 {
    margin: 8px 0 16px;
    font-size: 1.1rem;
}

.gea_card_contact_wrapper {
	margin:0 auto;
}

.gea_card_contact {
    display: flex;
    align-items: center;      /* Icon + Text vertikal mittig */
    justify-content: flex-start;
    gap: 10px; 					/* Abstand zwischen Icon und Text */
	width: 100%;                
    margin: 8px 0;
}

.gea_card_contact img {
    width: 1.5vw;
    min-width:25px;
}

.gea_card_contact span {
    font-size: 0.95rem;
    text-align: left;
}  

.gea_card_contact span a{ 
	display:inline-block;
	color:#515151; 
	padding:3px; 
	margin-left:-3px;
	text-decoration:none;
}
.gea_card_contact span a:hover{
	background-color:#00579D;/*#FF8921*/
	color:#FFF;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-ms-transition:all .5s ease;
	-o-transition:all .5s ease;
	transition:all .5s ease;
	text-decoration:none;
	border-radius:3px;
	padding:3px;
}

.gea_main_contact {
	flex: 1 1 auto;          /* flexible Basisbreite, alle gleich groß */
	max-width: 50rem;         /* maximale Breite */
	background-color: #f0f0f0;
	border-radius: 8px;
	padding: 1%;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align:center;
	margin:5% auto;
}
.gea_main_contact h3,
.gea_main_contact h4,
.gea_main_contact p{
	margin:1% 0;
}

/* ========================== REFERENCE / CONTENT ========================== */
.gea_main_reference_wrapper {
    width: 94%;
    text-align: center;
    border: 4px solid #00F;
    border-radius: 15px;
	padding:2% 3%;
	margin:5% auto;
}
.gea_main_reference_wrapper p{
	font-weight:bold;
	padding:2%;
}
.gea_main_reference_wrapper img{
	display:block;
	margin:1% auto ;
	width:20vw;
	min-width:290px;
}
.gea_main_reference {
    display: flex;
    flex-wrap: wrap;          /* Karten rutschen in die nächste Reihe, wenn nicht genug Platz */
    gap: 20px;
    justify-content: flex-start; /* optional: center oder flex-start je nach Design */
    margin: 2% auto;
}

.gea_main_reference > a {
    flex: 1 1 220px;          /* flexible Breite, max. 220px */
    background-color: #eee;
    border: 2px solid #999;
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s, box-shadow 0.3s;
    position: relative;
}

.gea_main_reference > a:hover {
	background-color: #f0f0f0; /* helles Grau */
    box-shadow: 0 8px 20px rgba(0,0,0,0.25); /* optional: Schatten */}

.gea_main_reference_link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.gea_main_reference_header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.gea_main_reference_header img {
    width: 20px;
    height: auto;
    margin: 0;
    min-width: 20px;
}

.gea_main_reference_header h3 {
    margin: 0;
    color: #333;
}

/* Text unter Bild (sichtbar beim Hover über .hint) */
.gea_main_reference_link p {
    text-align: center;
    margin: 0;
    color: #333;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s, max-height 0.3s;
}
.gea_main_reference a{
  text-decoration: none !important;
  color: inherit !important;
}

/* ========================== REFERENCE / CONTENT ========================== */


.gea_main_hr{
	width:100%;
	margin:2% auto;
	border :none;
	border-top: 2px solid #515151;
	background-color:#FFFFFF;
	height: 1px;
}
/* ========================== GEA CONTENT / CONTENT ========================== */
.gea_content_wrapper {
	display: flex;
	flex-wrap: wrap;          /* container rutschen automatisch in die nächste Reihe */
	gap: 16px;                /* Abstand zwischen den containern */
	justify-content: flex-start;  /* Die Container links */
	margin:2% auto;
}


.gea_content {
	flex: 1 ;          /* flexible Basisbreite, alle gleich groß */
	min-width: 20rem;         /* maximale Breite */
	background-color: #f0f0f0;
	border-radius: 8px;
	padding: 0px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.gea_content img.gea_content_icon {
    width: 7vw;
    border-radius: 8px;
    margin-bottom: 10px;
}
.gea_content h4,
.gea_content p {
	padding: 16px;
}

/* ========================== GEA CONTENT / CONTENT ========================== */

/* ========================== GEA MAIN PRODUCT COWSHED / CONTENT ========================== */
.gea_main_product{
	display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* kein Umbruch bis zur Mobile-Grenze */
    gap: 50px;
    margin-bottom: 40px;
}

.gea_main_product img{
    width: 100%;
    height: auto;     /* Höhe proportional */
	flex: 1 1 40%;    /* Bild nimmt etwa 40% der Breite */
    max-width: 500px; /* obere Begrenzung auf großen Bildschirmen */
}


.gea_main_product_text{
	flex: 1 1 55%;    /* Text nimmt etwa 55% der Breite */
}

.gea_main_reverse {
    flex-direction: row-reverse;  /* Reihenfolge für Desktop: Bild rechts */
  }

.gea_main_product_image a,
.gea_main_cowshed_image a{
	opacity: 1; 
	filter: alpha(opacity=100);	
	text-decoration:none;
}

.gea_main_product_image a:hover,
.gea_main_cowshed_image a:hover{
	opacity: 0.3; 
	filter: alpha(opacity=30);
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-ms-transition:all .5s ease;
	-o-transition:all .5s ease;
	transition:all .5s ease;
}
.gea_main_cowshed_wrapper {
	display: flex;
	flex-wrap: wrap;
	margin:0;
	padding:0;
	gap: 30px;             /* Abstand zwischen Boxen */
	width: 100%;
	box-sizing: border-box;
}

.gea_main_cowshed {
	flex: 0 1 calc((100% - 2 * 30px) / 3); /* 3 Boxen pro Reihe minus Gap */
	min-width: 250px;                     /* Mindestbreite */
	box-sizing: border-box;
	text-align: left;                      /* Desktop: Text links */
}

/* Bilder innerhalb der Box */
.gea_main_cowshed img {
	width: 100%;           /* Desktop: volle Breite innerhalb Box */
	max-width: 500px;      /* Begrenzung */
	height: auto;
	display: block;
	margin: 0 0 10px 0;    /* Abstand unter dem Bild */
}

/* ========================== GEA MAIN PRODUCT COWSHED / CONTENT ========================== */
  
  
  
.gea_main_icon {
	display: flex;
	align-items: center;       /* Text vertikal mittig zum Bild */
	justify-content: flex-start;
	gap: 20px;
	width: 80%;                /* Desktop: 80 % der Seitenbreite */
	max-width: 900px;          /* Begrenzung auf große Monitore */
	margin: 0 auto;            /* Zentriert den Container */
	padding: 20px;
	flex-wrap: nowrap;
	box-sizing: border-box;}

.gea_main_icon img{
    width: 100%;
    height: auto;     	/* Höhe proportional */
	flex: 1 1 15%;    	/* Bild nimmt etwa 40% der Breite */
    max-width: 100px;	/* obere Begrenzung auf großen Bildschirmen */
	min-width:80px; 	/* untere Begrenzung auf kleinen Bildschirmen */
}

.gea_main_icon_text {
	flex: 1 1 55%;    /* Text nimmt etwa 55% der Breite */
}
.gea_main_icon_text h4{
	margin-top:0;
}


.gea_main_button{
	display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-align-items: center;
    align-items: center;
	margin:1.1% auto;
}

.gea_main_button img{
	width:20px;
	height:auto;
    margin: 0;
	min-width:20px;
}
.gea_main_button a{ 
	color:#515151; 
	padding:3px 3px 6px 3px; 
	margin-left:3px;
	text-decoration:none;
}
.gea_main_button a:hover{
	background-color:#00579D;
	color:#FFF;
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	-ms-transition:all .5s ease;
	-o-transition:all .5s ease;
	transition:all .5s ease;
	text-decoration:none;
	border-radius:3px;
	padding:3px 3px 6px 3px;
}

@media (hover: hover) and (pointer: fine) { /* Hover für Desktop */
    .gea_main_reference_link > a:hover .hint {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (hover: none) and (pointer: coarse) { /* Overlay auf Mobile immer sichtbar */
    .hint {
        opacity: 1;
        transform: translateY(0);
    }
}





@media all and (max-width: 1000px) {
  .gea_main {
		font-size:1.2em;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
  }
   /*.main{/* column for "old" android, ms, ios,.. 	*/
	/*   display:inline-block;
	   height:100%; 
	   width:100%;
   }*/
   .gea_main > article, .gea_main > nav, .gea_main > aside {
		-webkit-flex: 1 auto; /*important IE11*/
			-ms-flex: 1 auto;
				flex: 1 auto;
		-webkit-order: 0;
		-ms-flex-order: 0;
				  order: 0;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;  
  	}
   	.gea_main_wrapper{
		-webkit-flex: 1 auto; /*important IE11*/
			-ms-flex: 1 auto;
				flex: 1 auto;
		-webkit-order: 0;
		-ms-flex-order: 0;
				  order: 0;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		margin:0 auto;
   }
   .gea_card_wrapper{
		justify-content: center;  /* Zentriert die Karten in der Reihe */
		margin:2% auto 4%;
   }
   
   .gea_main > nav, .gea_main > aside{
		min-height: 10%; 
		max-height:10%;
   }

	.gea_main_wrapper{
		width:96%;
	}
	.gea_main_wrapper h2{
		text-align:center;
	}
	.gea_content_wrapper{
		text-align:center;
	}
	.gea_main_contact {
		margin:8% auto;
		max-width:100%;
	}
	.gea_main_cowshed {
    	flex: 0 1 calc((100% - 30px) / 2); /* 2 Boxen pro Reihe minus Gap */
	}
}


@media (max-width: 800px) {
	.gea_main_product{
		flex-direction: column; /* Bild oben, Text unten */
      	align-items: center;    /* Zentrieren auf Mobile */
      	text-align: center;
    }
	.gea_main_icon {
		flex-direction: column;  /* Bild über Text */
		align-items: center;
		text-align: center;
		width: 100%;             /* Mobil: volle Breite */
		max-width: none;         /* Entfernt die Desktop-Begrenzung */
	  }

    .gea_main_product img {
		flex: none;
      	max-width: 100%; /* Bild passt sich Mobilbreite an */
    }
	.gea_main_icon img {
		flex: none;
      	max-width: 30%; /* Bild passt sich Mobilbreite an */

    }

	.gea_main_product_text, .gea_main_icon  {
      	width: 100%;
    }
	.gea_main_icon h4 {
		margin-top:0;
    }
	.gea_main_cowshed_wrapper {
		flex-direction: column;  /* Boxen untereinander */
		gap: 10px;
	  }
	
	.gea_main_cowshed {
		flex: 1 1 100%;           /* erst hier volle Breite */
		min-width: unset;
		text-align: center;
		padding: 10px;
	}
	
	.gea_main_cowshed img {
		display: block;
		width: 80%;
		max-width: 300px;
		margin: 0 auto 10px auto;
	}
	  
}