/********************************************************
* Filename:     form.css
* Description:  css-Datei für Online-Formular
* Author:		    Ing. Andreas Gabriel - 2024-02-26
********************************************************/


/****************************************
  Standardelemente
****************************************/
* { outline:none; }

html, body {
  font-family:'Roboto',sans-serif;
	font-weight:300;
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  font-size: 19px;
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
}
body {
  margin:0;
	padding:1em;
  background-color:#41508A;
  line-height:1.7;
	color:#fff;
  overflow:hidden;
}
h2 {
	font-family:'Ubuntu Condensed',sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:130%;
	margin:0
}
a {
	color:#00bfff;
	text-decoration:none;
	font-weight:500;
}
a:hover {
	color:#a0e7ff;
}


/****************************************
  Allgemeine Klassen
****************************************/
.clear { clear:both; }
.right { text-align:right; }


/****************************************
  Schriften
****************************************/
.little {
	font-size:80%;
	line-height:1.5;
}
.dn20 {
	font-size:80% !important;
  line-height: initial;
}
.dn30 {
	font-size:70%;
  line-height: initial;
}
.up20 {
	font-size:120%;
  line-height: initial;
}
.uc {
	font-family:'Ubuntu Condensed',sans-serif;
  font-weight:400;
  font-style:normal;
	letter-spacing:0.02em;
	padding:0 .2em;
}
.caps {
	text-transform:uppercase;
}


/****************************************
  Layout (Grid mit Spalten)
****************************************/
.grid { display:grid; }

.salutationgrid { grid-template-columns:max-content max-content max-content auto; grid-gap:.5em; }
.salutationgrid div:last-child { text-align:right; align-self:end; }
.formgrid1	{	grid-template-columns:calc(50% - 1em) 50%; grid-gap: .5em 1em; }
.formgrid2	{	grid-template-columns:calc(35% - .5em) 65%; grid-gap: .5em; }
.checkgrid	{	grid-template-columns:calc(25% - 1em) 75%; grid-gap: .5em 1em; }
.checkgrid div:nth-child(2) { margin-bottom:1em; }


/****************************************
  Formular-Felder
****************************************/
input, select, textarea, input[type=radio] + span {
	font-family:'Ubuntu Condensed',sans-serif;
  font-weight:400;
  font-style:normal;
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  font-size: 19px;
  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
}

input, select, textarea {
  padding:.3em .3em .25em .3em;
	color:#ff0;
	background-color:#29376D;
}

input:hover, select:hover, textarea:hover {
	cursor:pointer;
	background-color:#1A2758;
}

input:focus, select:focus, textarea:focus {
	background-color:#6675AF;
	cursor:auto;
}

input[type=text],
input[type=email],
select {
	border:none;
	border-radius:3px;
}

option.favorites {
	background-color:#41508A;
}

.w100 input { width:calc(100% - .6em); }
.w100 select { width:100%; }

.label {
	font-size:70%;
	margin-left:.3em;
	opacity:.55;
}

#salutation {
	margin-bottom:1em;
}
input[type=radio] {
	cursor:pointer;
  margin:0 .2em 0 0;
  width:.9em;
  height:.9em;
}
input[type=radio] + span {
	padding-left:.3rem;
	margin-right:1rem;
	cursor:pointer;
}
input[type=radio]:checked + span {
	color:#ff0;
}


/****************************************
  Agreement
****************************************/
#agreement {
	padding-top:2em;
}
#agreement label {
	display:grid;
  grid-template-columns:auto auto;
	grid-gap:.8em;
}
#agreement .checkbox,
#agreement .text {
	cursor:pointer;
}
#agreement .checkbox {
	width:.9em;
	height:.9em;
	margin:.1em 0;
}


/****************************************
  Buttons
****************************************/
#buttons {
	position: absolute;
  bottom: 1em;
  width: 100%;
  right: 1em;
  text-align: right;
}
#back {
	margin-right:.5em;
}
input[type=button], input[type=submit] {
  padding:.5em .8em;
  cursor:pointer;
  border:none;
  border-radius:5px;
  letter-spacing:.04em;
  font-size:110%;
  text-transform:uppercase;
  transition:all .2s;
  background-color:#00bfff;
  color:#1A2758;
}
input:hover[type=button], input:hover[type=submit] {
  background-color:#a0e7ff;
	color:#000;
}


/****************************************
  Diverses
****************************************/
#checkdata {
	margin:2.5em 0;
}
#thanks {
	line-height:1.7;
}


/************************************************************
  Responsive Layouts
************************************************************/

@media (max-width:590px) {
	body { overflow-y:scroll; }
	#buttons {
		position:initial;
		margin-top:2em;
	}
	.salutationgrid {
		grid-template-columns:max-content auto;
		grid-gap:0;
	}
	.formgrid1 {
		grid-template-columns:auto;
		grid-gap:.2em;
	}
	.checkgrid { grid-template-columns:auto; }
	.checkgrid div { text-align:left; }
	.uc { padding:0; }
	
}

@media (max-width: 800px) {
}

@media (max-width: 700px) {
}

@media (max-width: 400px) {
}




/****************************************
  ENDE
****************************************/