@charset "utf-8";

/* ===================================
    ALLGEMEINES */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size:	var(--font-size-basis);
	line-height: var(--line-hight-basis);
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-weight: 200;
	font-style: normal;
}

body {
	color: var(--color-gs-100);
	background-color:	var(--color-gs-400);
}

#pageLayout {
	position: relative;
  min-height: 100%;
	margin: 0 auto;
}

h1 {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 5%;
	padding-right: 5%;
}

/* ========================================
   HILFSKLASSEN */
.flex {	display:flex; }
.col { flex-direction: column; }
.row { flex-direction: row; }

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

.left {	float: left; }
.right { float: right; }
.clr { clear: both; }

.clearfix::after {
	  content: '';
	  clear: both;
	  display: block;
}

.inset {
	padding-left: 5%;
	padding-right: 5%;
}



/* ==============================
   SCHRIFTEN */
.fs-big { font-size:2rem; }
.fs-med { font-size:1.4rem; }
.fs-sml { font-size:1rem; }



/* ==============================
   GRID-SYSTEM */
.bx-1of1,
.bx-med,
.bx-1of4 {
	margin-bottom:1rem;
}

.bx-1of1,
.bx-1of1 > * {
	width:100%;
}

.bx-1of4,
.bx-1of4 > * {
	width:100px;
}



/* ============================================
   LINKS */
.links p { color: var(--color-gs-300); }

a {}
a:link {
	text-decoration: underline;
	color: var(--color-gs-300);
	background-position:	left;
}

a:visited {	color:	var(--color-gs-300); }
a:hover 	{	color:	var(--color-CI-200); }
a:active	{	color:	var(--color-gs-300); }
a:focus		{	color:	var(--color-gs-300); }



/* ========================================
   TEXTAUSWAHL  */
::-moz-selection {
  color: var(--color-gs-100);
  background-color: var(--color-CI-101);
}

::selection {
  color: var(--color-gs-100);
  background-color: var(--color-CI-101);
}



/* ========================================
   FORMULAR  */
fieldset {
	border:0;
}

fieldset > * {
	width:100%;
}

button, input, select, textarea {	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight: 300;}
	::-webkit-input-placeholder 	{ font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight: 300; }
	 :-moz-placeholder 						{ font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight: 300; }
	::-moz-placeholder 						{ font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight: 300; }
	 :-ms-input-placeholder 			{ font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-weight: 300; }

legend, label {
	display:none;
}

textarea, input, button {
	display:block;
	padding:.65rem;
	color: var(--color-gs-100);
}

textarea, input {
	background: var(--color-gs-400);
	border: 1px solid var(--color-CI-101);
}

textarea:focus,
input:focus {
	border:1px solid var(--color-CI-200);
	/* border:1px solid var(--color-gs-100); */
	/* box-shadow: 0 0 5px 0 var(--color-gs-100); */
	outline:none;
	/* background: var(--color-gs-401); */
	background-image: linear-gradient(45deg, var(--color-gs-502) 0%, var(--color-gs-400) 100%);

}

button {
	background: var(--color-CI-100);
	color: var(--color-gs-100);
	border: 1px solid var(--color-CI-100);
}

button:hover {
	/* opacity:0.8; */
	/* background-color: var(--color-CI-100); */
	background-image: linear-gradient(30deg, var(--color-CI-100) 25%, var(--color-CI-200) 100%);
/*
	-webkit-transition: background-image 2s ease-in-out;
  -moz-transition: background-image 2s ease-in-out;
  -o-transition: background-image 2s ease-in-out;
  transition: background-image 2s ease-in-out;
 */
}

textarea {
	resize: none;
	height:200px;
	width:100%;
}

form .flex > * {
	flex-basis: 100px;
}

#CAPTCHA {
	width: 106px !important;
	height: auto !important;
}

.fade input::-webkit-input-placeholder,
.fade textarea::-webkit-input-placeholder { transition: color .3s; }
.fade input::-moz-placeholder,
.fade textarea::-moz-placeholder { transition: color .3s }
.fade input:-ms-placeholder,
.fade textarea:-ms-placeholder { transition: color .3s}

.fade input:focus::-webkit-input-placeholder,
.fade textarea:focus::-webkit-input-placeholder { color:transparent; }
.fade input:focus::-moz-placeholder,
.fade textarea:focus::-moz-placeholder { color:transparent; }
.fade input:focus:-ms-placeholder,
.fade textarea:focus:-ms-placeholder { color:transparent; }

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid var(--color-CI-100);
  -webkit-text-fill-color: var(--color-gs-201);
  -webkit-box-shadow: 0 0 0px 1000px var(--color-gs-400) inset;
  transition: background-color 5000s ease-in-out 0s;
}