/* Kontaktseite */

a.p1 {
  width: 75px;
  height: 100px;
  text-decoration: none;
  background: #fff;
  border: 0px;
  margin: 20px 0 0 20px;

}

a.p1 img {
  border: 0px;
}

a.p1:hover {
  text-decoration: none;
  color: #000;
  position: relative;
}

a.p1 b {
  position: absolute;
  left: -9999px;
  padding: 10px;
  opacity: 0;
  -o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -o-border-radius: 8px;
  -icab-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-transition: opacity 0.6s ease-in-out;
}

a.p1:hover b {
  top: -85px;
  left: 60px;
  padding: 10px;
  border: 1px solid #aaa;
  background: #fff;
  opacity: 1.0;
}

.info {
  text-align: left
}


/* Qualitätseite Zertifikat */

a.p2 {
  width: 75px;
  height: 100px;
  text-decoration: none;
  background: #fff;
  border: 0px;
  margin: 20px 0 0 20px;

}

a.p2 img {
  border: 0px;
}

a.p2:hover {
  text-decoration: none;
  color: #000;
  position: relative;
}

a.p2 b {
  position: absolute;
  left: -9999px;
  padding: 10px;
  opacity: 0;
  -o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -o-border-radius: 8px;
  -icab-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-transition: opacity 0.6s ease-in-out;
}

a.p2:hover b {
  top: -400px;
  left: 90px;
  padding: 10px;
  border: 1px solid #aaa;
  background: #fff;
  opacity: 1.0;
}

#info2 {
  text-align: left;
}


/* Qualitätseite Bilder unten */


a.p3 {
  width: 75px;
  height: 100px;
  text-decoration: none;
  background: #fff;
  border: 0px;
  margin: 20px 0 0 20px;

}

a.p3 img {
  border: 0px;
}

a.p3:hover {
  text-decoration: none;
  color: #000;
  position: relative;
}

a.p3 b {
  position: absolute;
  left: -9999px;
  padding: 10px;
  opacity: 0;
  -o-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -icab-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -khtml-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.4);
  -o-border-radius: 8px;
  -icab-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-transition: opacity 0.6s ease-in-out;
}

a.p3:hover b {
  top: -400px;
  left: 90px;
  padding: 10px;
  border: 1px solid #aaa;
  background: #fff;
  opacity: 1.0;
}

#info3 {
  text-align: left;
}



/***************************************/
/* Hover PDFs */
  /* Standard-Stile für den Container */


    /* Standard-Stile für das Bild */
    .textbox {
      display: inline-flex;
      width: 200px; /* Setze die Breite des Behälters */
      height: 200px; /* Setze die Höhe des Behälters */

    }

    .textbox img {
      width: 100%; /* Bildgröße auf 100% der Containerbreite setzen */
      height: auto; /* Automatische Höhe beibehalten */
      transition: transform 0.6s ease-in-out; /* Füge eine sanfte Übergangsanimation hinzu */
    }

    /* Stile für den Hover-Effekt */
    .textbox:hover img {
      transform: scale(2.5) translate(30%, 15%); /* Vergrößere und verschiebe das Bild */
    }

     /* Clearfix für nachfolgenden Text */
    .clear {
      clear: both;
    }

/****************************************/