/* Reset */

* {
	margin:0;
	box-sizing: border-box;
}
  :before,:after {
	box-sizing: border-box;
}

video {
	width: 100%;
	border-radius: 4px;
}

  img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
  }

  input, button, textarea, select {
	font: inherit;
  }  

/* #region Fonts */

@font-face {
    font-family: 'avenir-bold';
    src: url('../fonts/3B2C61_0_0.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Symbole */

@font-face {
    font-family: 'amatiksymbols';
    src: url('../fonts/amatiksymbols.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* #endregion Fonts */

.skip_navi {
	position: absolute;
	left: -999999px;
	top: -999999px;
}

:focus-visible {
	outline: 1px dashed var(--clr-blau-100);
	outline-offset: 2px;
	border-radius: 4px;
}

:root {
	--font-h3: 3.55vh; /*22px*/
	--font-h4: 1.95vh;
	--font-menu-top: 1.125rem;  /*18px*/
	--font-menu-subtext: 1.125rem;  /*18px*/
	--font-big: 1.75rem;
	--font-btn: 1.73vh;	
	--font-p: 2.74vh;
	--font-p-big: 3vh;

    --clr-schwarz: #000000;
	--clr-weiss: #ffffff;
    --clr-blau: #3A78B8;
	--clr-dunkelblau: #003063;	
	--clr-hellblau: #00A1CC;
	--clr-magenta: #D9328A;
	--clr-gruen: #00A4AF;
	--clr-lila: #7C6EB0;

	--padder: 2vh;
	--letter-spacer: 0.05em;
    --letter-spacer-neg: -.125em;
    --bs-gutter-x: 3rem;
	--delay: .1s;

	interpolate-size: allow-keywords;
}

:link {
	color: var(--clr-weiss);
}

body {
    font-family: avenir-bold;
    color: var(--clr-weiss)!important;
    background-color: var(--clr-schwarz);
	text-wrap: pretty;
}

/* #region Fontsize */

.dachzeile {
	font-size: var(--font-h4);
	margin-bottom: 1em;
	display: block;
}

h1, h2, h3, h4 {
    font-family: avenir-bold;
}

h1 {
	text-align: center;
	font-family: avenir-bold;
	font-size: 6vh;
	margin-bottom: 1em;
}

h2 {
	font-family: avenir-bold;
	font-size: var(--font-h3);
	margin-bottom: .5em;
	line-height: 1.3;
}

h3 {
	font-size: var(--font-p-big);
	margin-bottom: calc(3*var(--padder));
}

h3 + h2 {
	margin-top: calc(-3*var(--padder));
}

.startscreen h3 {
	font-size: var(--font-p-big);
	margin-bottom: calc(2*var(--padder));
	text-align: center;
	line-height: 1.2;
}

p {
	font-size: var(--font-p);
	font-family: avenir-bold;
	line-height: 1.3;
}

/* #endregion Fontsize */

.quizwrapper {
	background: var(--clr-dunkelblau);
	aspect-ratio: 9/16;
	display: block;
	margin: auto;
	height: 100vh;
	padding: var(--padder);
	position: relative;
	overflow: hidden;
}

.startscreen {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
    padding: var(--padder);
}

.startimages {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 4vh;
    animation: kleingross 8s infinite;
}

@keyframes kleingross {
    0% {
        grid-template-columns: 1fr 1fr; 
    }
    25% {
        grid-template-columns: .5fr 1fr;
    }
    50% {
        grid-template-columns: 1fr 1fr;
    }
    75% {
        grid-template-columns: 1fr .5fr;
    }

    100% {
        grid-template-columns: 1fr 1fr;
    }
}

.matcher {
	display: grid;
}

.match {
	grid-area: 1/1;
    animation: verschwinden 8s infinite;
    opacity: 1;
}

@keyframes verschwinden {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.ornot {
	grid-area: 1/1;
    animation: erscheinen;
    animation: erscheinen 8s infinite;
    opacity: 0;
}

@keyframes erscheinen {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* #region Counter */

.questionCount {
	position: absolute;
	z-index: 1;
	width: calc(50% - 2* var(--padder));
	margin: auto;
	inset: auto 0;
	height: fit-content;
	margin-top: -5vh;
}

.current {
	width: 100%;
	border: 1px solid white;
	display: block;
	background-image: linear-gradient(to right, var(--clr-weiss) 10%, transparent 10%);
	border-radius: 20px;
	color: transparent;
	  background-size: 0% 100%;
	transition: ease-in-out .2s;
    margin-bottom: var(--padder);
}

.current.one {
    background-size: 100% 100%;
  }

.current.two {
  background-size: 200% 100%;
}

.current.three {
  background-size: 300% 100%;
}

.current.four {
  background-size: 400% 100%;
}

.current.five {
  background-size: 500% 100%;
}

.current.six {
    background-size: 600% 100%;
}

.current.seven {
    background-size: 700% 100%;
}

.current.eight {
    background-size: 800% 100%;
}

.current.nine {
    background-size: 900% 100%;
}

.current.ten {
    background-size: 1000% 100%;
}

/* #endregion Counter */

/* #region Antworten */

.responses, .questions, .button.startQuiz {
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	height: 100%;
	padding: var(--padder);
	width: 100%;
}

.questions {
    padding: 0;
}

.question {
	padding: var(--padder);
	background: var(--clr-blau);
	height: 100%;
    padding-top: calc(4*var(--padder));
}

#question0, #question6 {
	background-color: var(--clr-hellblau);
}

#question1, #question7 {
	background-color: var(--clr-magenta);
}

#question3, #question8 {
	background-color: var(--clr-gruen);
}

#question4, #question9 {
	background-color: var(--clr-blau);
}

#question5, #question10 {
	background-color: var(--clr-lila);
}

.responses {
	padding-top: calc(4*var(--padder));
	background-color: inherit;
	padding-inline: 0;
	height: 100vh;
	padding-bottom: 0;
}

.button.startQuiz {
    z-index: 1;
    border: 0;
    color: var(--clr-weiss);
    bottom: 0;
}

.button.nextQuestion {
	position: absolute;
	top: 35vh;
	text-align: center;
	display: none;
	inset: 0;
	margin: 33vh auto;
	height: fit-content;
}

ul.answers li {
	list-style-type: none;
	display: grid;
	align-content: baseline;
}

.antwortintro {
	padding-inline: var(--padder);
	height: 30vh;
}

.button.nextQuestion.lastQuestion {
	font-size: 0;
}

.button.nextQuestion.lastQuestion::before {
	content: 'zur Auflösung';
	font-size: var(--font-btn);
}

/* #endregion Antworten */

/* #region Finaler Score */

.quizScore {
	margin-bottom: calc(3*var(--padder));
}

.quizScore span {
	font-size: 10vh;
	background-color: var(--clr-weiss);
	color: var(--clr-magenta);
	aspect-ratio: 1/1;
	display: block;
	width: fit-content;
	display: grid;
	place-content: center;
	border-radius: 100%;
	padding: calc(2*var(--padder));
	margin: auto;
	margin-top: calc(4 * var(--padder));
	font-family: avenir-bold;
}

.quizLevel span {
	font-size: var(--font-p-big);
	line-height: 1.3;
	margin-bottom: calc(3* var(--padder));
	display: block;
}

/* #region Buttons */

ul.answers li label {
    color: var(--clr-magenta);
}

.button, label, ul.answers li label span {
	font-family: avenir-bold;
	font-size: var(--font-btn);
	margin: auto;
	width: fit-content;
	background-color: var(--clr-weiss);
	color: var(--clr-magenta);
	padding: 1vh 1.15vh;
    border: 0px solid;
	border-radius: 3px;
	text-decoration: none;
	margin: auto;
	display: block;
    cursor: pointer;
}

.answers {
	display: grid;
	grid-template-columns: 1fr 1fr;
    gap: var(--padder);
}

input[type="radio"]{
    visibility: hidden;
    height: 0;
    width: 0;
  }
  
/*  label {
    font-family: avenir-bold;
	display: block;
	text-align: center;
	cursor: pointer;
	font-size: var(--font-btn);
    width: fit-content;
	background-color: var(--clr-weiss);
	color: var(--clr-magenta);
	padding: 1vh 1.5vh;
	border-radius: 3px;
    border: 0px solid;
	text-decoration: none;
    margin: auto;
} */

  input[type="radio"]:checked + label, input[type="radio"]:checked + label span {
    background-color: var(--clr-magenta);
    color: var(--clr-weiss);
  }

  #question1 input[type="radio"]:checked + label span, #question7 input[type="radio"]:checked + label span {
    background-color: var(--clr-hellblau);
    color: var(--clr-weiss);
  }

  input:checked + label img {
	filter: opacity(1);
	-webkit-filter: opacity(1);
}

.button.checkAnswer {
	margin-top: calc(3*var(--padder));
	display: block;
	font-family: amatiksymbols;
	font-size: 5vh;
	border-radius: 100%;
	aspect-ratio: 1/1;
	place-content: center;
}

.button.checkAnswer {
	margin-top: calc(3*var(--padder));
	display: block;
	font-family: amatiksymbols;
	font-size: 5vh;
	border-radius: 100%;
	aspect-ratio: 1/1;
	place-content: center;
	border: .5vh solid var(--clr-weiss);
	background: transparent;
	color: var(--clr-weiss);
}

ul.answers li label {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}

ul.answers input[type="radio"]:checked + label {
    background: transparent;
}

ul.answers li label img {
	margin-bottom: calc(1.5*var(--padder));
}

/* #endregion Buttons */

/* Footer */

footer {
	height: 20vh;
	background-image: url(../images/footer.png);
	margin: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-position: bottom;
	background-size: 100%;
	background-repeat: no-repeat;
}

/* Alert */

.modal-content {
	display: flex;
	padding: 10px;
	border: 1px solid #888;
	width: 50vh;
	position: absolute;
	inset: 0;
	margin: auto;
	height: fit-content;
	background: red;
	gap: var(--padder);
}