/* ------------------------------------------------ *
 * -------------------- Inhalt -------------------- *
 * ------------------------------------------------ */
/**
 *
 * Deklaration globaler Variablen 
 * Plugin und main Basis Design
 * Section
 *** Sidebar
 *** Right
 * Items
 *** Card Header
 *** Button 
 *** Input
 *** Radiobutton
 *
 *
 * Responsives Design in den einzelnen media-sytlesheets
 * Werte in em, % und vh / vw angeben
 * 
 */

 @media (min-width: 481px) and (max-width: 1024px) {

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

	/* -------------------- Sidebar -------------------- */
	.kalkulator-wrapper section.sidebar {
		display: flex;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: space-between;
		height: 4em;
		margin-bottom: 3em;
		height: 4em;
	}

	.kalkulator-wrapper .sidebar {
		bottom: 95%;
		right: 2em;
	}

	.kalkulator-wrapper .circle_element {
		height: 2em;
		width: 2em;
		margin: 1em 0;
		font-size: 1.2em;
	}

	.kalkulator-wrapper .sidebar_copy {
		display: var(--display-none);
	}

	/* -------------------- Right -------------------- */
	.kalkulator-wrapper .step_card {
		top: 15%;
		left: 2em;
	}

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


	/* -------------------- Button -------------------- */
	.kalkulator-wrapper .button-nav {
		left: 2em;
	} 

	.kalkulator-wrapper button {
		height: 4em;
	}

	/* -------------------- Input -------------------- */
	.kalkulator-wrapper .input-field { 
		height: 4em;
	}

	/* -------------------- Radiobutton -------------------- */
	.kalkulator-wrapper .card_row {
		gap: 1em;
	}

	.kalkulator-wrapper .plan_card_label {
		height: 4em;
	}

}