/* replacement for Interstate (Pro Natura default font) */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url(../fonts/Overpass-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: bold;
  font-display: swap;
  src: url(../fonts/Overpass-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Overpass-Light.woff2) format('woff2');
}


/* body */
body {
  font-family: Overpass, sans-serif;
  margin: 4em;
  margin-bottom: 15em; /* damit das Logo Platz hat */
}

/* title */
h1 {
	font-size: 4em;
}

/* button */
button {
  display: block;
	background-color: rgb(0, 115, 63);
	color: white;
	font-weight: bold;
	border-radius: 0.5em;
	margin: 1em auto 1em auto;
	padding: 1em 1em;
	text-align: center;
	width: 100%;
	font-size: 3em;
}

/* question */
h2 {
	font-size: 3em;
	hyphens: auto;
}

#quiz {
	text-align: left;
}

#quiz ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#quiz li {
	margin: 0;
	padding: 0;
}

#quiz label {
	display: block;
	background-color: rgb(0, 115, 63);
	color: white;
	font-weight: bold;
	border-radius: 0.5em;
	margin: 1em auto 1em auto;
	padding: 1em 1em;
	font-size: 3em;
	text-align: center;
}

#quiz label:hover {
	background-color: rgb(12, 141, 77);
}

#quiz input:checked ~ label,
#quiz input:focus ~ label {
	background-color: rgb(12, 141, 77);
}

#quiz input {
	left: -9999px;
	position: absolute;
}

#quiz button:not(.startBtn) {
	display: none;
}

#quiz button,
#quiz label {
	cursor: pointer;
}


/* links */
a {
	text-decoration: none;
	color: rgb(0, 115, 63);
	font-weight: bold;	
}

a:hover {
	text-decoration: underline;
}

/* start*/

img#startlogo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5em;
}

/* header */

header {
	text-align: right;
}

header #logo {
	width: 45vw;
}

/* footer */

footer {
	position: fixed;
	text-align: left;
	font-size: 2em;
	bottom: 0em;
	left: 0em;
	background-image: linear-gradient(transparent, white, white, white, white);
	padding: 3em 2em 2em 2em;
	margin: 0;
	width: 100%;
}


/* listing with solutions */

#result {
	font-size: 3em;
}

ol#result {
	margin-top: 2em;
	font-weight: bold;
	text-align: left;
	padding-left: 0;
	margin-left: 0;
}

ol li {
	list-style-type: none;
    list-style-position: inside;
    margin: 0;
    padding:0; 
}

ol p {
	font-weight: normal;
	margin: 0.8em 0;
	hyphens: auto;
	text-align: justify;
}

ol p:nth-of-type(3) {
	margin-bottom: 2em;
}

.question {
	font-weight: bold;
	margin-bottom: -1em;
}

.correct {
	color: rgb(0, 115, 63)
}

.wrong {
	color: #c00;
}

.correct:before {
	content: '✓';
	color: rgb(0, 115, 63);
}

.correct::after {
	content: " (richtig)"
}

.wrong:before {
	content: '✗';
	color: #f00;
}

.correct:before,
.wrong:before {
	font: 2em bold;
	padding: 0 0.2em;
}

.wrong::after {
	content: " (falsch)"
}

em {
	font-style: normal;
}

/* form */

form {
	margin-top: 4em;
}

/* logo BONJOUR NATURE */

img.logobonjournature {
	margin-top: 3em;
	width: 100%;
}

/* Steini */

img.steiniwinter {
	display: block;
	width: 66vw;
	margin: 10em auto;
}

img.steinigratulation {
	display: block;
	width: 50vw;
	margin: auto;
}

/* Standort */

img.standort {
	display: block;
	width: 100%;
	margin: 4em auto;
}