*{font-family:Poppins, sans-serif; font-size:18px; line-height:24px;}

body{height:100vh; margin:0; padding:0; /* overflow:hidden; */}
.background{background: #ff4733; background: linear-gradient(180deg, rgba(231,29,115,1) 0%, rgba(255,71,51,1) 15%, rgba(233,78,27,1) 68%, rgba(249,178,51,1) 100%); position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1;}

h1{font-family: Poppins,sans-serif; font-size: 32px; line-height: 40px; margin-bottom:40px; font-weight: 600; overflow-wrap: break-word; word-wrap: break-word; text-transform: uppercase;   letter-spacing: 2px; text-align:center;}
h2{font-family: Poppins,sans-serif; font-size: 26px; line-height: 26px; font-weight: 600; overflow-wrap: break-word; word-wrap: break-word; text-transform: uppercase;   margin-bottom:20px;}
h3{margin:0;}
.floatend{clear:both;}

.container{max-width: 1200px; margin:auto; padding: 0 20px; position: relative;}


.emblem{display:block; margin: 0 auto 10px; height:calc(25vh - 20px); padding-top:10px;}

.fieldset_0{ padding:30px 150px 80px 150px; height:calc(75vh - 120px); margin-top:0; margin-bottom:30px; }
fieldset{display:none; background: rgba(255, 255, 255, 0.8); border:initial; padding:30px 150px 80px 150px; height:calc(100vh - 160px); margin-top:30px; margin-bottom:30px; position:relative; overflow:auto;width:calc(100% - 300px);}
fieldset.active{display:inline-block;}
fieldset button, fieldset .next_btn{ margin:0; position: fixed; bottom: 46px; left: calc(50% - 75px); width: 150px; text-align:center;}
fieldset .next_btn.startbutton{position:initial;}

button, .next_btn, .button{display:block; width: fit-content; background: #ff4733; font-family: Poppins, sans-serif; text-transform: uppercase; letter-spacing:2px; font-weight:700; text-decoration:none; padding:10px 20px; border-radius:10px; margin:30px auto; color:#fff; border:none;}

.control-label{font-family:Poppins, sans-serif; display:block; margin-bottom:5px;}
.frage{font-weight:600; display:block; margin-top:10px; margin-bottom:20px; }
input[type=text] { margin-bottom: 20px; font-family: Poppins, sans-serif; padding: 10px; border: initial; width: calc(100% - 20px); letter-spacing: 1px; font-size: 14px;
}

.bild_frage{width:calc(50% - 40px); margin-right:40px; float:left;}
/*.form-check-group{width:50%; float:left;}*/
.form-check-group .control-label{margin-bottom:10px;}
.radio{font-family: Poppins, sans-serif; margin-bottom:20px; font-size:18px; line-height:24px;}
input[type="radio"] { margin-right: 10px;}

.fortschritt{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap:3px; position:absolute; bottom: 40px; z-index:999; left:50px; right:50px;}
.stroke{height:4px;}
.stroke.active{background:#ff4733; transition: all 0.3s ease;}

.results{background: rgba(255, 255, 255, 0.8); border:initial; padding:30px; height:calc(75vh - 130px); margin-bottom:30px 30px 80px; position:relative; overflow-y:auto;}
.results h2{text-align:center; margin-bottom:40px;}
.result_frage h3{margin-bottom:5px;}
.results_button{display:block; width:fit-content; padding: 10px 20px; background: #aaa; color:#fff; margin-bottom:20px; font-family: Poppins, sans-serif; text-transform: uppercase; letter-spacing:2px; font-weight:700; border-radius:10px; margin:0 auto 20px; text-align:center;}
.results_button.invisible{display:none; transition: all 0.3s ease;}
.results_wrapper{display:none; padding:20px; background: rgba(255, 255, 255, 0.7);}
.result_frage{margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid grey;}

.loesung_inner{display:block; padding: 5px 0; font-family:Poppins, sans-serif; letter-spacing:1px;}
.richtig{padding:10px 20px; background:limegreen; margin-right:10px; color:#fff; width:90px; text-align:center; display:inline-block;}
.falsch{padding:10px 20px; background:crimson; margin-right:10px; color:#fff; width:90px; text-align:center; display:inline-block;}

.points_wrapper{font-family: Poppins,sans-serif; font-size: 20px; line-height: 20px; font-weight: 600; letter-spacing: 1px; margin:60px 0 30px; text-align:center;}
.button_bestenliste{display:block; width:fit-content; padding: 10px 20px; background: #ff4733; color:#fff; font-family: Poppins, sans-serif; text-transform: uppercase; letter-spacing:2px; font-weight:700; border-radius:10px; margin:60px auto 20px; text-decoration:none;}

.bestenliste{background: rgba(255, 255, 255, 0.8); border:initial; padding:30px; height:calc(100vh - 340px); margin-bottom:30px; position:relative; overflow-y:auto;}

.item_beste{display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; margin-bottom:5px; gap:5px;}

.item_beste .col{background: rgba(255, 255, 255, 0.6); padding:5px 10px; text-align:center;}
.item_beste .head_col{background: #ff4733; text-transform:uppercase; color:#fff; font-weight:600;}

.blackstories h1{text-align: center; color:#fff;}
.blackstories h2{text-align: center; color:#fff; font-size:24px; line-height:32px;}
.wrapper_grid {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 15px;}
.blackstory_button {text-decoration:none; background: rgba(255, 255, 255, 0.8); color: #222; padding: 10px; text-align:center; font-size:1.5em;}

.raetsel{font-size: 2.2em; line-height:1.4em; font-style:italic; color:#fff; font-weight:300;}
.loesung_wrapper{display:flex; background: rgba(255, 255, 255, 0.8); width:fit-content; padding:10px; margin:50px 0;}
.loesung_button{font-size:1.5em; cursor:pointer;}
.loesung{font-size:1.5em; margin-left:20px;}
.loesung.inactive{display:none;}

.grid_twice{display:grid; grid-template-columns:2fr 1fr; gap:80px;}

.hints{font-size:18px; line-height:24px; font-family: Poppins, sans-serif; }

.counter{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; max-width:768px; margin: 50px auto; text-align:center; color:#fff;}
.count p{font-size:50px;}
.beschreibung{font-weight:300;}


/* #yform-form_quiz-vorname { padding: 0 150px; margin-top: 30px;}
#yform-form_quiz-name { padding: 0 150px; } */

@media(max-width:1023px){
	fieldset{padding:20px 30px 60px; width:calc(100% - 64px);}
	
}

@media (max-width:767px){
	*{font-size:16px; line-height:22px;}
	
	.grid_twice{display:block;}
	#yform-form_quiz-vorname{margin-top:40px;}
	
	.container{padding:0 5px;}
	.form-check-group{width:100%; float:initial;}

	h1, h2{font-size:20px; line-height:24px; margin-bottom:30px;}
	.fieldset_0{padding:30px 30px 40px 30px; height:calc(75vh - 78px);}
	fieldset{padding:30px 30px 40px 30px; height:calc(100vh - 86px); margin-top:8px;}
	fieldset button, fieldset .next_btn{ padding:5px 10px; left: calc(50% - 75px);}
	
	.results{    height: calc(75vh - 116px);}
	
	.results h2{margin-bottom:30px;}
	.points_wrapper{margin:30px 0;}
	.button_bestenliste{margin:30px auto 0;}
	
	.bestenliste{padding: 20px 20px 80px;}
	
	.headline_beste{display:none;}
	.item_beste{grid-template-columns:1fr 1fr 1fr; margin-bottom:20px;}
	.col.platz{font-weight:600;}
	
	.wrapper_grid {display: grid; grid-template-columns: 1fr 1fr 1fr;}
	
	.blackstories h1{font-size: 18px; line-height: 22px; margin-top:0;}
	.blackstories h2{font-size:14px; line-height:22px; margin-bottom:10px;}
}

@media(max-width:460px){
	.item_beste{grid-template-columns:1fr 1fr;}
	.col.platz{    -ms-grid-column: 1; grid-column: span 2; -ms-grid-column-span: 2;}
	.col.details{    -ms-grid-column: 1; grid-column: span 2; -ms-grid-column-span: 2;}
	
}