/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

img{border:1px solid #A7A8AA; border-radius:0.8em; display:block; margin:auto}

s1{color:#0072EC; font-family:'Open Sans', verdana, sans-serif; font-size:32px}
s2{color:#0072EC; font-family:'Open Sans', verdana, sans-serif; font-size:28px}
s3{color:#0072EC; font-family:'Open Sans', verdana, sans-serif; font-size:24px}
s4{color:#0072EC; font-family:'Open Sans', verdana, sans-serif; font-size:20px}
s5{color:#7578AA; font-family:'Open Sans', verdana, sans-serif; font-size:16px}
s6{color:#75787B; font-family:'Open Sans', verdana, sans-serif; font-size:12px}
s7{color:#A7A8AA; font-family:'Open Sans', verdana, sans-serif; font-size:8px}
s8{color:#75787B; font-family:'Open Sans', verdana, sans-serif; font-size:6px}

.grau {height:10px; width:90%; margin-left:auto; margin-right:auto; background-color:#A7A8AA; border-radius:4px; border:none}

/* gesamter body */
body { border:1px solid #FFFFFF;
	border-radius:0.8em;
	padding: 10px; }

/* gesamter grid-container */
.grid-container { border:1px solid #FFFFFF;
	border-radius:0.8em;
	margin: auto auto;
	max-width: 80em;
	/* font-family: verdana; */
	display: grid;
	gap: 0.2em 0.4em;
	grid-template-areas:
		'obli obmi obmi obmi obre'
		'hrob hrob hrob hrob hrob'
		'mali mami mami mami mare'
		'hrun hrun hrun hrun hrun'
		'unli unmi unmi unmi unre';
	grid-template-columns: 220px auto auto auto 220px;
	background-color: #FFFFFF;
	padding: 10px; }

/* alle grid-elemente */
.grid-item1 { grid-area: obli;
	justify-self: start;
	align-self: start; }
.grid-item2 { grid-area: obmi;
	justify-self: center;
	align-self: center; }
.grid-item3 { grid-area: obre;
	justify-self: end;
	align-self: start; }
.grid-item4 { grid-area: hrob; }
.grid-item5 { grid-area: mali; }
.grid-item6 { grid-area: mami; }
.grid-item7 { grid-area: mare; }
.grid-item8 { grid-area: hrun; }
.grid-item9 { grid-area: unli;
	justify-self: start;
	align-self: end; }
.grid-item10 { grid-area: unmi;
	justify-self: center;
	align-self: center; }
.grid-item11 { grid-area: unre;
	justify-self: end;
	align-self: end; }

/* alle grid-element-.inhalte */
.grid-container > div { border:1px solid #FFFFFF;
	border-radius:0.8em;
	/* background-color: rgba(255, 255, 255, 0.8); */
	/* text-align: center; */
	padding: 10px; }