/* ------------------------------------------------ *
 * -------------------- 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 (max-width: 480px) {

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

	/* -------------------- Sidebar -------------------- */
	.kalkulator-wrapper section.sidebar {
		display: var(--display-none);
	}

	/* -------------------- Right -------------------- */
	.kalkulator-wrapper .step_card {
		top: 2em;
		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;
	}

}