:root {--eins: #931931; --zwei: #80A51B; --drei: #007CB0; --vier: #F59C00; --fuenf: #E6331E; --sechs: #02A7D7; --sieben: #267637; --acht: #D45521;}
.bne_check label {border: 2px solid #000000; color: #FFFFFF;}
.bereich_1 h3, .bereich_1 .ergebnis td, span.bereich_1, .bereich_1 label, .bereich_1 .nummerierung {color: var(--eins);}
.bereich_2 h3, .bereich_2 .ergebnis td, span.bereich_2, .bereich_2 label, .bereich_2 .nummerierung {color: var(--zwei);}
.bereich_3 h3, .bereich_3 .ergebnis td, span.bereich_3, .bereich_3 label, .bereich_3 .nummerierung {color: var(--drei);}
.bereich_4 h3, .bereich_4 .ergebnis td, span.bereich_4, .bereich_4 label, .bereich_4 .nummerierung {color: var(--vier);}
.bereich_5 h3, .bereich_5 .ergebnis td, span.bereich_5, .bereich_5 label, .bereich_5 .nummerierung {color: var(--fuenf);}
.bereich_6 h3, .bereich_6 .ergebnis td, span.bereich_6, .bereich_6 label, .bereich_6 .nummerierung {color: var(--sechs);}
.bereich_7 h3, .bereich_7 .ergebnis td, span.bereich_7, .bereich_7 label, .bereich_7 .nummerierung {color: var(--sieben);}
.bereich_8 h3, .bereich_8 .ergebnis td, span.bereich_8, .bereich_8 label, .bereich_8 .nummerierung {color: var(--acht);}
.bereich_1 label:hover, .bereich_1 input[type="radio"]:checked + label, .bereich_1 hr, .kreise_1, .bereich_1 .halbkreis {background-color: var(--eins);}
.bereich_2 label:hover, .bereich_2 input[type="radio"]:checked + label, .bereich_2 hr, .kreise_2, .bereich_2 .halbkreis {background-color: var(--zwei);}
.bereich_3 label:hover, .bereich_3 input[type="radio"]:checked + label, .bereich_3 hr, .kreise_3, .bereich_3 .halbkreis {background-color: var(--drei);}
.bereich_4 label:hover, .bereich_4 input[type="radio"]:checked + label, .bereich_4 hr, .kreise_4, .bereich_4 .halbkreis {background-color: var(--vier);}
.bereich_5 label:hover, .bereich_5 input[type="radio"]:checked + label, .bereich_5 hr, .kreise_5, .bereich_5 .halbkreis {background-color: var(--fuenf);}
.bereich_6 label:hover, .bereich_6 input[type="radio"]:checked + label, .bereich_6 hr, .kreise_6, .bereich_6 .halbkreis {background-color: var(--sechs);}
.bereich_7 label:hover, .bereich_7 input[type="radio"]:checked + label, .bereich_7 hr, .kreise_7, .bereich_7 .halbkreis {background-color: var(--sieben);}
.bereich_8 label:hover, .bereich_8 input[type="radio"]:checked + label, .bereich_8 hr, .kreise_8, .bereich_8 .halbkreis {background-color: var(--acht);}
.bereich_1 label {border-color: var(--eins);}
.bereich_2 label {border-color: var(--zwei);}
.bereich_3 label {border-color: var(--drei);}
.bereich_4 label {border-color: var(--vier);}
.bereich_5 label {border-color: var(--fuenf);}
.bereich_6 label {border-color: var(--sechs);}
.bereich_7 label {border-color: var(--sieben);}
.bereich_8 label {border-color: var(--acht);}
#content_chk {text-align: center; padding: 21px !important;}
#frageBox {margin-top: 30px;}
.bne_check button {margin: 60px 0; padding: 5px 20px; width: 250px; cursor: pointer; background-color: #80A51B; border-radius: 32px; color: #FFFFFF;
		text-transform: uppercase; font-weight: bold; font-family: Oswald;}
.bne_check button:hover {background: #007CB0;}
.bne_check button:disabled {opacity: 0.5; cursor: not-allowed;}
#backBtn, #nextBtn {margin: 60px 40px 0;}
#backBtn {background-color: #FFFFFF; color: #80A51B !important; border: 2px solid #80A51B;}
#backBtn:hover {color: #007CB0; border-color: #007CB0;}
.bne_check table {margin: 0 auto; text-align: left; border-collapse: collapse;}
.bne_check td {padding: 4px 8px;}
.bne_check small {color: #444444;}	
.bne_check h1 {font-size: 56px !important; text-transform: none !important;}
.bne_check h2 {font-size: 30px !important;}
.bne_check h2.wp-block-heading {margin-bottom: 50px;}
.bne_check h3.bildungsangebot {margin-bottom: 15px;}
.kreise {width: 40px; height: 40px; top: 11px; position: relative; display: inline-block; margin: 0 19px;
		-webkit-mask: url("kreise.svg") no-repeat center / contain; mask: url("kreise.svg") no-repeat center / contain;}
#startBtn {margin: 60px 20px;}
.bne_check hr {margin: 10px 0; border: none; height: 1px !important;}
.auswertung {margin-top: 80px;}
.info  {font-size: 18px; margin-bottom: 30px; min-height: 86px;}
.frage {font-size: 20px; font-weight: 600; margin: 50px 0; min-height: 64px;}
.auswertung .info {min-height: auto;}
.ergebnis {margin-bottom: 0;}
.ergebnis td { font-weight: 600;}
.hinweis {margin-bottom: 90px !important; font-size: 18px;}
.auswertung h3 {margin-bottom: 10px;}
.BtnDown {width: auto !important; padding: 10px 20px !important; margin: 20px 30px 30px !important;}
.radar {margin: 40px auto;}
.ergebnisRadar {max-width: 700px; margin: 50px auto;}
#ergebnisRadarPdf {width: 700px !important; height: 400px !important;}
.bne_check input[type="radio"] {display: none;}
.bne_check label {display: inline-block !important; padding: 3px 35px 2px; margin: 10px; border-radius: 32px; cursor: pointer;}
.bne_check input[type="radio"]:checked + label, .bne_check label:hover {color: #FFFFFF;}
input#bildungsangebot {width: 250px; padding: 10px; font-size: 18px; border: 2px solid var(--acht); border-radius: 15px; display: block; margin: 40px auto 0;}
.fortschritt {min-height: 110px;}
.fortschritt .text {display: inline-block; font-weight: 600; font-family: 'Oswald'; font-size: 20px; line-height: 1.2; top: -5px; position: relative; margin: 0 50px; opacity: 0.5;}
.fortschritt .text .oben {font-size: 32px;}
.mitte {margin: -86px auto 0; height: 120px; overflow: hidden;}
.mitte .halbkreis {height: 300px; margin: -180px auto 0; -webkit-mask: url("kreis_oben_mitte.svg") no-repeat center / contain; mask: url("kreis_oben_mitte.svg") no-repeat center / contain;}
/*Status, Kreise nur volle Farbe wenn aktiv oder vergangen*/
.bereich_1 .kreise,   .bereich_2 .kreise,   .bereich_3 .kreise  {opacity: 0.3;}
.bereich_1 .kreise_1 {opacity: 1;}
.bereich_2 .kreise_1, .bereich_2 .kreise_2 {opacity: 1;}
.bereich_3 .kreise_1, .bereich_3 .kreise_2, .bereich_3 .kreise_3 {opacity: 1;}
.bereich_4 .kreise_5, .bereich_4 .kreise_6, .bereich_4 .kreise_7, .bereich_4 .kreise_8 {opacity: 0.3;}
.bereich_5 .kreise_6, .bereich_5 .kreise_7, .bereich_5 .kreise_8 {opacity: 0.3;}
.bereich_6 .kreise_7, .bereich_6 .kreise_8 {opacity: 0.3;}
.bereich_7 .kreise_8 {opacity: 0.3;}

.alle_kreise {margin-top: -110px;}
.vier_kreise {width: calc(50% - 142px); float: left;}
.vier_kreise_mitte {width: 284px; height: 40px; float: left;}
.clear {clear: both;}

@media (max-width: 991px) {
    #startBtn {margin: 10px auto; display: block;}
	.kreise {margin-bottom: 20px;}
	.fortschritt .kreise {margin: 0 10px; width: calc((100% - 80px) / 4);}
	.alle_kreise {margin-top: 0;}
	.vier_kreise {width: 50%;}
	.vier_kreise_mitte {width: 0;}
}
@media (max-width: 767px) {
	#backBtn, #nextBtn {margin-top: 30px;}
}
@media (max-width: 420px) {
	#backBtn, #nextBtn {margin: 30px auto 0; max-width: calc(100% - 10px);}
}

@media (max-width: 400px) {
	.kreise {width: 38px; margin: 0 10px 20px;}
}