:root {
	--primary:#7952b3;
	--secondary:#61428f;
	--border_color:#dee2e6;
	--max-width:2000px;
	--border_radius:0.25rem;
	--button_text:#fff;
	--button_focus:0 0 0 3px rgba(121, 82, 179, 0.25);
	--link_color:#7952b3;
	--text_main:#363636;
	--text_bright:#000;
	--body_bg_color:#f9fafb;
	--footer_bg_color:#fff;
	--form_bg_color:#fff;
	--input_text_color:#000;
	--input-text-disabled:#7a7a7a;
	--input-placeholder-color:#c2c2c2;
	--input_border_color:#ccc;
	--input_background_color:#fff;
	--input-disabled:#f5f5f5;
	--input-focus:0 0 0 3px rgba(121, 82, 179, 0.25);
	--error:#dc3545;
	--success:#198754;
	--warning:#664d03;
	--info:#0c5460;
	--alert-error-bg:#f8d7da;
	--alert-warning-bg:#fff3cd;
	--alert-success-bg:#d4edda;
	--alert-info-bg:#d1ecf1;
	--alert-red-bg:#f44242;
	--hoehe_header_wert: 80;
	--hoehe_header: 80px;
	--footer_header_wert: 30;
	--footer_header: 30px;
	--footer-height: 50px;
	--main_width: 100%;
	--main_width_wert: 100;
	--main_height: 100%;
	--breite_bild: 50%;
}

html {
	font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
}

* {
	box-sizing: border-box;
	font-size:1rem;
	line-height:1.25;
}

/* Elemente */
	body {
		background-color:var(--body_bg_color);
		min-height: 100%;
		
		display:flex;
		flex-direction:column;
		color:var(--text_main);
	}
	
	h1 {
		margin: 0;
		font-size: 1.2rem;
		color:var(--text_main);
		text-shadow: 1px 1px 2px white;
	}
	
	table (
		margin-left: auto;
		margin-right: auto;
		border-collapse: collapse;
	)
	
	#show_menue_button{
		visibility: visbile;
	}

	/* aus dem "entliehenen" Layout */
		form.userkennung {
			width: 350px;
			margin:1rem auto;
			border:solid 1px var(--border_color);
			padding:1rem;
			border-radius:var(--border_radius);
			background-color:var(--form_bg_color)
		}
		
		form> section {
			display:flex;
			flex-direction:row;
			justify-content:space-between;
			align-items:center;
			margin-bottom:1rem
		}
		
		form h1 {
			padding:5px 0;
			font-size:1.4rem;
			font-weight:400;
			text-align:center;
			color:var(--text_bright)
		}
		form i {
			margin-left:-30px;
			cursor:pointer
		}
		form p {
			margin-bottom:.5rem
		}
		form> section {
			display:flex;
			flex-direction:row;
			justify-content:space-between;
			align-items:center;
			margin-bottom:1rem
		}
		form>footer {
			text-align:center;
			border-top:solid 1px var(--input_border_color);
			padding:.5rem 0;
			font-size:.8rem
		}
		form>div {
			margin-bottom:.75rem
		}
		
		nav li a {
			text-decoration:none;
			color:var(--text-main)}a{color:var(--link_color);
			text-decoration:none
		}
		
		label {
			display:inline-block;
			margin-bottom:5px;
			vertical-align:top;
			width:100%
		}

		input,select,textarea {
			background-color:var(--input_background_color);
			color:var(--input_text_color);
			border:1px solid var(--input_border_color);
			border-radius:var(--border_radius);
			display:inline-block;
			padding:.5rem .75rem;
			width:100%;
			font-family:inherit;font-size:1rem
		}

		a:hover { 
			text-decoration:none
		}
		
		a em,a i,button {
			display:inline-block;
			background:var(--primary);
			color:var(--button_text);
			border:1px solid var(--primary);
			border-radius:var(--border_radius);
			font-size:1em;
			font-weight:400;
			text-align:center;
			padding:.5em .75em;
			min-width:10ch;
			user-select:none;
			font-style:normal;
			text-decoration:none;
			transition:color .15s ease-in-out,background-color .15s ease-in-out,border_color .15s ease-in-out,box-shadow .15s ease-in-out
		}
		a em:hover,a i:hover,button:hover {
			background:var(--secondary);
			border-color:var(--border_color);
			cursor:pointer
		}
		a em:focus,a i:focus,button:focus {
			outline:0;
			color:var(--button_text);
			background-color:var(--secondary);
			border-color:var(--border_color);
			box-shadow:var(--button_focus)
		}
		a em,button[type=button] {
			background-color:#fff;
			color:var(--primary);
			border-color:var(--primary)
		}
		a em:hover,button[type=button]:hover {
			background:var(--secondary);
			color:var(--button_text);
			cursor:pointer
		}
		form>button {
			display:block;width:100%
		}
		form>div>div>label {
			width:auto;
			cursor:pointer;
			display:inline-block;
			position:relative;
			border-radius:var(--border_radius)
		}
		form>div>p>label {
			display:block;
			margin-left:auto;
			margin-bottom:.75rem
		}
		label+label {
			margin-left:1rem
		}
		input[type=checkbox],input[type=radio] { 
			vertical-align:baseline;
			width:auto
		}
		

/* Klassen */

	.header {
		padding: 5px;
		background-color: #9933cc;
		color: #ffffff;
		background-image: url('https://ernst-thomas-hesse.de/pack_RdGA/public/images/rdga_2024.jpg');
		background-repeat: no-repeat;
		background-size: contain;
		background-attachment: fixed;	
		vertical-align: middle;
	}
	
	
	
	.header img {
		width: 20px;
	}
	
	.newfooter {
		/*position: absolute;*/
		/*bottom: 0;*/
		/*height: var(--footer-height);*/
		/*width: 100%;*/
		padding: 5px;
		background-color: #9933cc;
		color: #ffffff;
	}
	
	.row {
		
	}

	*,::after,::before {
		margin:0;
		padding:0;
	}
	
	.row::after {
		content: "";
		clear: both;
		display: table;
	}
	
	[class*="col-"] {
		float: left;
		padding: 15px;
		/* border: 1px solid red; */
		/* overflow: scroll; */
	}

	[class*="col-"] {
		width: 100%;
		/*max-height: 30%;*/
	}
	
	.menu {
		display: none;
	}
	
	.menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.menu li {
		padding: 8px;
		margin-bottom: 7px;
		background-color: #33b5e5;
		color: #ffffff;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	}	

/* media spezifisches */
	/* For tablets or landscape */
	@media only screen and (min-width: 600px) {

		h1 {
			font-size: 2rem;
		}
		
		#show_menue_button{
			visibility: visible;
		}
		

		.header img {
			width: 40px;
		}


		.col-s-1 {
			width: 8.33%;
		}
		.col-s-2 {
			width: 16.66%;
		}
		.col-s-3 {
			width: 25%;
		}
		.col-s-4 {
			width: 33.33%;
		}
		.col-s-5 {
			width: 41.66%;
		}
		.col-s-6 {
			width: 50%;
		}
		.col-s-7 {
			width: 58.33%;
		}
		.col-s-8 {
			width: 66.66%;
		}
		.col-s-9 {
			width: 75%;
		}
		.col-s-10 {
			width: 83.33%;
		}
		.col-s-11 {
			width: 91.66%;
		}
		.col-s-12 {
			width: 100%;
		}

	}
	
	/* For desktops */
	@media only screen and (min-width: 768px) {

		#show_menue_button{
			visibility: hidden;
		}

		.menu {
			display: block;
			position: inherit;
		}
		
		.col-m-1 {
			width: 8.33%;
		}
		.col-m-2 {
			width: 16.66%;
		}
		.col-m-3 {
			width: 25%;
		}
		.col-m-4 {
			width: 33.33%;
		}
		.col-m-5 {
			width: 41.66%;
		}
		.col-m-6 {
			width: 50%;
		}
		.col-m-7 {
			width: 58.33%;
		}
		.col-m-8 {
			width: 66.66%;
		}
		.col-m-9 {
			width: 75%;
		}
		.col-m-10 {
			width: 83.33%;
		}
		.col-m-11 {
			width: 91.66%;
		}
		.col-m-12 {
			width: 100%;
		}

	}
	
	/* For large screens */
	@media only screen and (min-width: 1500px) {

		.row {
			max-width: 1500px;
			min-width: 1500px;
			margin: 0 auto;	
			height: 100%;			
		}

		.header {
			max-width: 1500px;
			min-width: 1500px;
			margin: 0 auto;		
		}
		
		.newfooter {
			max-width: 1500px;
			min-width: 1500px;
			margin: 0 auto;		
		}
		
		.footer_zwischen {
			max-width: 1500px;
			min-width: 1500px;
		}

		.col-1 {
			width: 8.33%;
		}
		.col-2 {
			width: 16.66%;
		}
		.col-3 {
			width: 25%;
		}
		.col-4 {
			width: 33.33%;
		}
		.col-5 {
			width: 41.66%;
		}
		.col-6 {
			width: 50%;
		}
		.col-7 {
			width: 58.33%;
		}
		.col-8 {
			width: 66.66%;
		}
		.col-9 {
			width: 75%;
		}
		.col-10 {
			width: 83.33%;
		}
		.col-11 {
			width: 91.66%;
		}
		.col-12 {
			width: 100%;
		}

	}