@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
 * Features 
 *** 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
 * 
 */

: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;
}


/* ------------------------------------------------- *
 * -------------------- 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;
}

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

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

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

/* -------------------- 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;
}

/* -------------------- 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;
}

.plan_card input:focus,
.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;
}