@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

/* ------------------------------------------------ *
 * -------------------- Inhalt -------------------- *
 * ------------------------------------------------ */
/**
 *
 * Deklaration globaler Variablen 
 * Plugin und main Basis Design
 * Section
 *** Sidebar
 *** Right
 * Feature
 *** Space
 *** Text
 *** Required
 * Items
 *** Card Header
 *** Button 
 *** Input
 *** Radiobutton
 *** Checkbox
 * Error
 *** Input 
 *** Radiobutton
 *** Checkbox
 *
 *
 * Responsives Design in den einzelnen media-sytlesheets
 * Werte in em, % und vh / vw angeben
 *
 * Ausnahmefälle: Pixel Angaben des Schattens und Randstärke/Outline
 * 
 */

:root {
	--white: #FBFBFC;
	--text: #2A3033;
	--lightgrey: #CAD0D3;
	--checkmark-color: #DBE0E2;
	--err-color: #E75F6833;
	--err-txt-color: #AA253A;
	--red-shadow: #A40930C0;

	--shadow: 1px 1px 5px #CAD0D3;

	--font: 'Roboto', sans-serif;

	--display-none: none;
	--display-flex: flex;
	--display-block: block;
	--flex-attributes: center;
	--flex-direction-row: row;
	--flex-direction-column: column;

	--position-abs: absolute;
	--position-rel: relative;

	--cursor-point: pointer;
	--cursor-def: default;

	--overflow-hide: hidden;
	--overflow-auto: auto;
}

/** 
 * Wenn der Klakulator auf einer anderen Seite eingefügt wird, bitte einbinden! 
 * Seitenbody: page-id-01234 -> und dann wie die folgenden im CSS mit dem korrekten hex Farbwert deklarieren
 */

/* solutionsrot auf „Solutions“ (ID 4503)
body.page-id-4503 .kalkulator-wrapper {
	--accent: #A40931;
    --light-accent: #C85C77;
} */

/* fullmanageditblau auf „Full Managed-IT“ (ID 12)
body.page-id-12 .kalkulator-wrapper {
	--accent: #2A6EF2;
    --light-accent: #558BF5;
} */

/* solutionsrot auf „Solutions“ (ID 4503) */
body.page-id-4503 .kalkulator-wrapper {
	--accent: var(--e-global-color-primary, #A40931);
	--light-accent: var(--e-global-color-accent, #C85C77);
}

/* fullmanageditblau auf „Full Managed-IT“ (ID 12) */
body.page-id-12 .kalkulator-wrapper {
	--accent: var(--e-global-color-primary, #2A6EF2);
	--light-accent: #558BF5;
}

.kalkulator-wrapper {
	background-color: var(--white);
	border: 2px solid var(--accent);
	display: var(--display-flex);
	flex-direction: var(--flex-direction-row);
	color: var(--text);
	font-family: var(--font);
	font-size: 1em;
	padding: 2em;
	box-shadow: 0 0 5px var(--lightgrey);
}

.kalkulator-wrapper main {
	display: var(--display-flex);
	flex-direction: var(--flex-direction-row);
	gap: 2em;
	height: 75vh;
	max-height: 750px;
}


.kalkulator-wrapper h3:focus-visible {
	outline: none;
}

/* ------------------------------------------------- *
 * -------------------- Section -------------------- *
 * ------------------------------------------------- */

/* -------------------- Sidebar -------------------- */
.kalkulator-wrapper section.sidebar {
	padding: 1.5em;
}

.kalkulator-wrapper .sidebar {
	background-color: var(--text);
	color: var(--white);
	position: var(--position-abs);
	top: 2em;
	left: 2em;
}

.kalkulator-wrapper .circle_element {
	display: var(--display-flex);
	align-items: var(--flex-attributes);
	justify-content: var(--flex-attributes);
	margin-right: 1em;
	color: var(--white);
	border-style: solid;
	border-color: var(--white);
	border-radius: 50%;
	border-width: 2px;
}

.kalkulator-wrapper .sidebar_element {
	display: var(--display-flex);
	flex-direction: var(--flex-direction-row);
	margin: 1em;
	pointer-events: auto;
	cursor: var(--cursor-point);
}

.kalkulator-wrapper .sidebar_element.disabled {
	pointer-events: none;
	cursor: var(--cursor-def);
	opacity: 0.4;
}

.kalkulator-wrapper .sidebar_element:not(.disabled):hover {
	opacity: 1;
}

/* -------------------- Right -------------------- */
.kalkulator-wrapper .right {
	width: 100%;
	padding: 2em 0;
}

.kalkulator-wrapper fieldset {
	flex-direction: var(--flex-direction-column);
	outline: none;
	border: none;
}

.kalkulator-wrapper .step_card {
	position: var(--position-abs);
	right: 2em;
	bottom: 7.5em;
	overflow-y: var(--overflow-auto);
	overflow-x: var(--overflow-hide);
	min-height: 0;
	padding: 0 2em;
}


/* -------------------- thankslide -------------------- */
.kalkulator-wrapper #thankSlide {
	display: flex;
	flex-direction: column;
}

/* -------------------------------------------------- *
 * -------------------- Features -------------------- *
 * -------------------------------------------------- */

/* -------------------- Space -------------------- */
.kalkulator-wrapper .space {
	height: 1.5em;
}

/* -------------------- Text -------------------- */
.kalkulator-wrapper p {
	line-height: 1.5em;
}

.link-effect {
	color: var(--accent);
	font-weight: bold;
}

.link-effect:hover {
	color: var(--text);
}

/* -------------------- Required -------------------- */
.kalkulator-wrapper .req {
	color: var(--accent);
}

/* ----------------------------------------------- *
 * -------------------- Items -------------------- *
 * ----------------------------------------------- */

/* -------------------- Card Header -------------------- */
.kalkulator-wrapper .card_header {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 3em;
}

.kalkulator-wrapper .text,
.kalkulator-wrapper .header_caption.thanking {
	font-size: 1em;
	line-height: 2em;
}

.kalkulator .step_card h3.no-focus-ring:focus,
.kalkulator .step_card h3.no-focus-ring:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* -------------------- Button -------------------- */
.kalkulator-wrapper .button-nav {
	position: absolute;
	bottom: 2.5em;
	right: 2em;
}

.kalkulator-wrapper .button-nav .div_nav_button {
	display: var(--display-flex);
	gap: 0.8em;
	width: 100%;
}

.kalkulator-wrapper .button-nav .div_nav_button button {
	flex: 1 1 0;
	min-width: 0;
}

.kalkulator-wrapper button {
	padding: 0.8em;
	font-weight: 600;
	border: none;
}

/* next */
.kalkulator-wrapper .next {
	color: var(--white);
	background-color: var(--accent);
	box-shadow: var(--shadow);
}

.kalkulator-wrapper .next:hover,
.kalkulator-wrapper .next:active,
.kalkulator-wrapper .next:focus {
	background-color: var(--light-accent);
}

/* back */
.kalkulator-wrapper .back {
	color: var(--accent);
	background-color: var(--white);
	box-shadow: var(--shadow);
}

.kalkulator-wrapper .back:hover,
.kalkulator-wrapper .back:active,
.kalkulator-wrapper .back:focus {
	color: var(--text);
	background-color: var(--white);
}

.kalkulator-wrapper .next:focus-visible,
.kalkulator-wrapper .back:focus-visible {
	outline: 2px solid var(--lightgrey);
	outline-offset: 4px;
	border-radius: 0;
}

/* -------------------- Input -------------------- */
.kalkulator-wrapper .input-field {
	font-size: 0.8em;
	padding: 1em;
	border: none;
	border-bottom: 1px solid var(--accent);
	background-color: var(--white);

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	-moz-appearance: textfield;
	/* entfernt hoch-runter Buttons */
	appearance: default;
}

.kalkulator-wrapper .input-field:focus {
	outline: 1px solid var(--lightgrey);
	border-bottom: 1px solid var(--accent);
}

/* -------------------- Radiobutton -------------------- */
.kalkulator-wrapper .radio-container {
	border: none;
}

.kalkulator-wrapper .card_row {
	display: var(--display-flex);
	flex-direction: var(--flex-direction-column);
	flex-wrap: nowrap;
	height: auto;
	margin: 0;
}

.kalkulator-wrapper .plan_card {
	cursor: var(--cursor-point);
	text-align: var(--flex-attributes);
	border: 1px solid var(--text);
	box-shadow: var(--shadow);
	margin: 0;
}

.kalkulator-wrapper .plan_card:hover {
	cursor: var(--cursor-point);
	border: 1px solid var(--accent);
}

.kalkulator-wrapper .plan_card input[type="radio"] {
	cursor: var(--cursor-point);
	pointer-events: auto;
	position: var(--position-abs);
	width: auto;
	height: auto;
	margin: 0;
	opacity: 0;
}

.kalkulator-wrapper .plan_card input:checked~.plan_card_label {
	color: var(--white);
	border-color: var(--lightgrey);
	background-color: var(--text);
	font-weight: bold;
	transition: all 0.3s ease;
	width: 100%;
}

.kalkulator-wrapper .plan_card_label {
	cursor: var(--cursor-point);
	text-align: var(--flex-attributes);
	display: var(--display-flex);
	justify-content: var(--flex-attributes);
	align-items: var(--flex-attributes);
	width: 100%;
	margin: 0;
}

.kalkulator-wrapper .plan_card input:focus~.plan_card_label,
.kalkulator-wrapper .plan_card input:focus-visible~.plan_card_label {
	outline: 2px solid var(--lightgrey);
	outline-offset: 4px;
}

.kalkulator-wrapper .plan_card input:focus,
.kalkulator-wrapper .plan_card input:focus-visible {
	cursor: var(--cursor-def);
}

/* -------------------- Checkbox -------------------- */
.kalkulator-wrapper .checkbox-container {
	display: var(--display-block);
	position: var(--position-rel);
	padding: 0.17em 0 0 2em;
	margin-bottom: 0.75em;
	cursor: var(--position-rel);
	font-size: 1em;
	line-height: 1.2em;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Default Checkbox verstecken */
.kalkulator-wrapper .checkbox-container input {
	position: var(--position-abs);
	opacity: 0;
	cursor: var(--cursor-point);
	height: 0;
	width: 0;
}

/* Custom CB */
.kalkulator-wrapper .checkmark {
	position: var(--position-abs);
	top: 0;
	left: 0;
	height: 1.5em;
	width: 1.5em;
	background-color: var(--checkmark-color);
}

.kalkulator-wrapper .checkbox-container:hover input~.checkmark {
	background-color: var(--lightgrey);
}

.kalkulator-wrapper .checkbox-container input:focus-visible+.checkmark {
	outline: 2px solid var(--lightgrey);
	outline-offset: 2px;
}

.kalkulator-wrapper .checkbox-container input:checked~.checkmark {
	background-color: var(--text);
}

/* Checkmark/Indicator (hidden wenn nicht checked) erstellen */
.kalkulator-wrapper .checkmark:after {
	content: "";
	position: var(--position-abs);
	display: var(--display-none);
}

/* Checkmark bei check zeigen */
.kalkulator-wrapper .checkbox-container input:checked~.checkmark:after {
	display: var(--display-block);
}

/* Style den Checkmark/Indicator */
.kalkulator-wrapper .checkbox-container .checkmark:after {
	left: 0.5em;
	top: 0.3em;
	width: 0.3em;
	height: 0.625em;
	border: solid var(--white);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* ----------------------------------------------- *
 * -------------------- Error -------------------- *
 * ----------------------------------------------- */
/* -------------------- Input -------------------- */
/* color */
.kalkulator-wrapper .input-error {
	background-color: var(--err-color) !important;
	border-radius: 2px;
}

/* message */
.kalkulator-wrapper .error-text {
	display: var(--display-none);
	color: var(--err-txt-color);
	font-size: 0.8em;
	padding-left: 0.2em;
}

/* -------------------- Radiobutton -------------------- */
.kalkulator-wrapper .plan_card.input-error {
	background-color: var(--err-color);
}

/* -------------------- Checkbox -------------------- */
.kalkulator-wrapper .checkmark.checkbox-error {
	box-shadow: 0 0 0 2px var(--red-shadow);
	background-color: var(--err-color);
	border-radius: 2px;
}