/* =======================================================================
   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:410px;                  /* Breite der Bild-/Textbox alt:260px */
    text-align:center;
}

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

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

/*****************************************
/*+++++++++++ Bild links ausgerichtet, Text umfließen, Hoverfunktion*************/
.imglinksHover {
    float: left;
    width: 300px;
    margin: 0 20px 10px 0;
}

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

    /* Hover-Effekt */
    transition: transform 0.3s ease;
    transform-origin: center center;
}

/* Bild beim Überfahren mit der Maus vergrößern */
.imglinksHover img:hover {
    transform: scale(1.5);
    position: relative;
    z-index: 10;
}

/*Nächste H2-Übersicht beginnt wieder linksbündig unter dem Bild*/
.imglinksHover ~ h2 {
    clear: both;
}

/*Nächste H3-Übersicht beginnt wieder linksbündig unter dem Bild*/
.imglinksHover ~ h3 {
    clear: both;
}

@media (max-width: 600px) {
    .imglinks {
        float: none;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 15px auto;
    }

    /* Auf Touch-Geräten kein Hover-Vergrößerungseffekt */
    .imglinksHover img:hover {
        transform: none;
    }
}
/************Grid 2 Spalten Typenübersicht*****************/
.grid-2Sp {
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-rows: auto auto auto;
    width:  max-content /*100%*/;
    border: 1px solid #999;
}

.grid-2Sp > div {
    padding: 8px 10px;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
}

.grid-2Sp > div:nth-child(2n) {
    border-right: none;
}

/* Letzte Zeile ohne untere Linie */
.grid-2Sp > div:nth-last-child(-n+2) {
    border-bottom: none;
}

/* Headline-Spalte */
.grid-2Sp .headline {
    font-weight: bold;
    background-color: #e6e6e6;
}
/****************Ende Grid 2 Spalten************************/



/**************** Grid Vergleich************************/
.vergleich-grid {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr 1fr 2fr 2fr;
  gap: 1px;
  background: #ccc;
  border: 1px solid #ccc;
  margin: 1.5em 0;
}

.vergleich-grid > div {
  background: #fff;
  padding: 12px;
  line-height: 1.5;
}

.vergleich-kopf {
  font-weight: bold;
  background: #f2f2f2 !important;
}

.vergleich-prinzip {
  font-weight: bold;
}

/* Tablet */
@media (max-width: 900px) {
  .vergleich-grid {
    grid-template-columns: 1.2fr 2fr 1fr 1fr;
  }

  .vergleich-grid .vergleich-kopf:nth-child(5),
  .vergleich-grid .vergleich-kopf:nth-child(6) {
    display: none;
  }

  .vergleich-grid > div:nth-child(6n+5),
  .vergleich-grid > div:nth-child(6n+6) {
    display: none;
  }
}

/* Smartphone: Darstellung als Karten */
@media (max-width: 600px) {

  .vergleich-grid {
    display: block;
    background: none;
    border: none;
    margin: 1.5em 0;
  }

  .vergleich-kopf {
    display: none;
  }

  .vergleich-grid > div {
    display: block !important;
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 10px 12px;
  }

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

  .vergleich-prinzip {
    font-size: 1.1em;
    padding: 14px 12px !important;
    background: #f2f2f2 !important;
    border-radius: 6px 6px 0 0;
  }

  /* Jede Messmethode als eigene Karte */
  .vergleich-grid > div:nth-child(6n+1) {
    margin-top: 20px;
  }

  .vergleich-grid > div:nth-child(6n+2)::before {
    content: "Messprinzip";
  }

  .vergleich-grid > div:nth-child(6n+3)::before {
    content: "Rohrverengung";
  }

  .vergleich-grid > div:nth-child(6n+4)::before {
    content: "Druckverlust";
  }

  .vergleich-grid > div:nth-child(6n+5)::before {
    content: "Typische Anwendung";
  }

  .vergleich-grid > div:nth-child(6n+6)::before {
    content: "Berechnung";
  }

  .vergleich-grid > div:not(.vergleich-prinzip)::before {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
  }
}
/**************** Ende Grid Vergleich************************/


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