/* noto-sans-jp-regular - latin */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/noto-sans-jp-v42-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-jp-v42-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-jp-v42-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-jp-v42-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-jp-v42-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-jp-v42-latin-regular.svg#NotoSansJP') format('svg'); /* Legacy iOS */
}
/* noto-sans-jp-500 - latin */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/noto-sans-jp-v42-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/noto-sans-jp-v42-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/noto-sans-jp-v42-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/noto-sans-jp-v42-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/noto-sans-jp-v42-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/noto-sans-jp-v42-latin-500.svg#NotoSansJP') format('svg'); /* Legacy iOS */
}

html { overflow-y: scroll; }

body  { padding-top: 70px; padding-bottom: 70px; font-family: 'Noto Sans JP', sans-serif; line-height: 22px; }

.box { border: 1px solid #CCC; padding: 10px; margin: 10px 0; text-align: center; }
.box h1 { font-size: 20px; font-weight: 500; margin: 0 0 10px;  }
.leftbox { border: 1px solid #CCC; padding: 10px; margin: 10px 0;}
.leftbox h1 { margin: 20px 0 20px 0;  }
.top-box { margin-top: 30px; }



@media(max-width: 480px) {
	.leftbox h1 { margin: 10px 0; }
}

@media(max-width: 768px) {
   .leftbox h1 { margin: 10px 0; }
}

.header { background: #CCC;  }
.header img { display: block;  margin: 0 auto; }
.navbar { margin-bottom: 0 !important;}

img.POC { padding: 10px; border: 1px solid #ccc; }
/*.download-img { text-align: center; } */
img.POC:hover { background: #dfeaf5;}


.img-container {
  max-width: 100%; /* Container kann die volle Breite des Elternelements einnehmen */
  display: flex; /* Elemente werden in einer Zeile angeordnet */
  justify-content: space-between; /* Bilder werden gleichmäßig im Container verteilt */

}

.image-wrapper {
  max-width: 48%; /* Maximale Breite der Bild-Wrapper */
}

.img-container img {
  width: 100%; /* Das Bild nimmt die volle Breite des Wrappers ein */
  height: auto; /* Bewahrt das Seitenverhältnis des Bildes */
}

figcaption {
  text-align: center; /* Zentriert den Untertitel */
  Background: #666; color: #FFF; padding: 5px;
}

blockquote .small:before, blockquote footer:before, blockquote small:before { content: none; }