/* =======================================================================
   IMAGES für Seite magnetisch-induktive-Durchflussmesser + kalorimetrisch
========================================================================== */    
.image-container {
  display: flex;
  gap: 10px;
  width: 100%;
}

.image-container > div {
  flex: 1;
}

.image-container img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
}
/*=============================================================================================
Gallery mit Bildunterschriften für Seite magnetisch-induktive-Durchflussmesser + kalorimetrisch
===============================================================================================*/
.gallery-container{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;   /* statt center */
    align-items:flex-start;
    gap:40px;

    margin-left:0;
    padding-left:0;
}

.gallery{
    width:260px;                  /* Breite der Bild-/Textbox */
    text-align:center;
}

.gallery img{
    width:250px;                  /* Bild größer */
    height:auto;                  /* Seitenverhältnis beibehalten */
    display:block;
    margin:0 auto;
}

.desc{
    margin-top:10px;
    font-size:0.95rem;
}

/*****************************************
Grid 3 Spalten für Vergleich Auswertung
*****************************************/
  .gridcontainer3Sp {
display: grid;
grid-template-columns: 1fr 1.5fr 1.5fr;
width: 100%;
border: 1px solid #ccc;
box-sizing: border-box;
}

.gridcontainer3Sp > div {
padding: 12px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}

.gridcontainer3Sp > div:nth-child(3n) {
border-right: none;
}

.gridcontainer3Sp > div:nth-last-child(-n + 3) {
border-bottom: none;
}

.gridcontainer3Sp .gridheader {
font-weight: bold;
background-color: #f2f2f2;
text-align: left;
}

/* Responsive Darstellung für Smartphones */
@media (max-width: 700px) {
.gridcontainer3Sp {
grid-template-columns: 1fr;
}

.gridcontainer3Sp .gridheader {
display: none;
}

.gridcontainer3Sp > div {
border-right: none;
border-bottom: 1px solid #ccc;
}

.gridcontainer3Sp > div:nth-last-child(-n + 3) {
border-bottom: 1px solid #ccc;
}

.gridcontainer3Sp > div:nth-child(3n + 1) {
font-weight: bold;
background-color: #f2f2f2;
}
}



/* Responsive */
@media (max-width: 600px) {
    .gallery-wrapper {
        flex-direction: column;
        align-items: center;
    }
}