:root {
	/*FARBEN*/
	---color-primary: #2668B2;
	---color-secondary:#00104B;
	---color-accent:#F89723;
	---color-text:#000000;
	---color-accent-text:#ffffff;
	---color-grey:#e3e3e3;
	/*SCHATTEN*/
	---box-shadow-button: 0px 0px 10px 0px rgba(248, 151, 35, 0.25);
	---box-shadow-button-hover: 0px 0px 5px 0px rgba(248, 151, 35, 0.75);
	---box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
	/*RAHMEN*/
	---border-radius: 4px;
}

.generator {
	/*FADE-IN*/
	---fade-duration: 1s;
	---fade-curve: ease-in-out;
}

body{	
	font-size:1rem;
	color: var(---color-text);
}

.generator input, .generator textarea, .generator select {
	margin-top:0.25rem;
	border: 1px solid var(---color-grey);
	border-radius: var(---border-radius);
	background-color:var(---color-accent-text);
}
.generator input[type=text], .generator textarea {
	padding: 0.5em 1em;
}
.generator input:focus, .generator textarea:focus {
	outline:none;
	border:1px solid var(---color-primary);
}
.generator_question_content {
	margin:1em 0;
	overflow:hidden;
	overflow-y:auto;
}

.generator label {
	padding:0.5rem 0;
	font-size:0.8rem;
	font-weight:800;
	display:block;
}
.generator .generator_checkbox_label {
	display:flex;
	align-items: center;
}
.generator .generator_instructions p {
	font-size:0.8em;
	line-height:1.2em;
	margin-bottom:0;
}
.generator_question {
	margin-bottom:1rem;
	display:flex;
	flex-direction:column;
}
.generator_question_title {
	font-size:1.2em;
	font-weight:800;
	margin-bottom:0;
}
.generator_tooltip_icon {
	position: relative;
	display: inline-block;
	width:fit-content;
	font-size:0.6em;
	vertical-align:top;
	color:var(---color-primary);
}
.generator_tooltip {
	position:absolute;
	width:fit-content;
	max-width:400px;
	display:inline-block;
	font-size:0.8em;
	font-weight: 600;
	background-color: var(---color-primary);
	color: var(---color-accent-text);
	padding:0.25em 1em;
	border-radius:var(---border-radius);
	box-shadow:var(---box-shadow);
	z-index: 1;
}
.generator_question > label {
	line-height:1.5em;
}

input[type="checkbox"].generator_checkbox, input[type="radio"].generator_radio {
	margin-right: 1rem;
	line-height:1.75em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:0;
	color:var(---color-accent-text);
	cursor:pointer;
}
input[type="checkbox"].generator_checkbox::before,
input[type="radio"].generator_radio::before{
	display:block;
	content: '\2800';
	height: 2em;
	width: 2em;
	text-align: center;
	line-height:1.75em;
	border-radius: var(---border-radius);
	border: 1px solid var(---color-grey);
	transition: all 0.5s ease;
}
input[type=checkbox].generator_checkbox:checked::before {
	content:'\2713';
	font-weight:800;
}
input[type="radio"].generator_radio:checked::before{
	content:"\2718";
}
input[type=checkbox].generator_checkbox:checked::before,
input[type="radio"].generator_radio:checked::before{
	background-color: var(---color-accent);
	border-color: var(---color-accent);
}
input[type="radio"].generator_radio::before {
	border-radius:50%;
}

.generator_buttons {
	border-top:1px solid var(---color-grey);
	padding-top:2em;
	display: flex;
	justify-content: space-between;
}
.kl-link-button,
button.generator_button,
button[type=submit].generator_button:hover{
	font-size:0.8em;
	font-weight:800;
	line-height:1.4em;
	border:1px solid var(---color-accent);
	box-shadow:var(---box-shadow-button);
	color:var(---color-accent);
	padding:1em 2em;
	background-color:var(---color-accent-text);
}
.kl-link-button:hover,
button.generator_button:hover,
button[type=submit].generator_button {
	background-color:var(---color-accent);
	color:var(---color-accent-text);
}
.gernator .kl-link-button,
button.generator_button:hover,
button[type=submit].generator_button:hover {
	transform:scale(0.975);
	box-shadow:var(---box-shadow-button-hover);
}
.generator button[disabled] {
	border:1px solid var(---color-grey);
	color:var(---color-grey);
	box-shadow:none;
}
.generator button[disabled]:hover {
	background:none;
	transform:none;
	cursor:not-allowed;
}
/**********ERGEBNIS-AUSGABE**********/

#generator_results_content ul {
	margin-bottom:1rem;
}
#generator_results_content .generator_user_input {
	font-style:italic;
}
#generator_results_content {
	font-size:1.2em;
}
.kl_fett {
	font-weight:600;
}