/* SCHRIFTEN */
@font-face {				font-family:'Titillium Web'; font-style: normal; font-weight: 200; font-display: swap; src: local('Titillium Web ExtraLight'), url('/cpj/fonts/TitilliumWeb-ExtraLight.ttf') format('woff2');}
@font-face {				font-family:'Titillium Web'; font-style: normal; font-weight: 300; font-display: swap; src: local('Titillium Web Light'), url('/cpj/fonts/TitilliumWeb-Light.ttf') format('woff2');}
@font-face {				font-family:'Titillium Web'; font-style: normal; font-weight: 700; font-display: swap; src: local('Titillium Web'), url('/cpj/fonts/TitilliumWeb-Bold.ttf') format('woff2');}

html						{height: 100%; background: #fff;}
body						{width: 700px; height: 100%; padding: 0; margin: 0 auto 0 auto; text-align: left; font-family: 'Titillium Web', sans-serif; font-weight: 200; font-size: 18px;}
@media only screen and (max-width: 770px) {body{width: auto; padding: 0 5%;}}

img							{border: none;}
a							{color: #000; text-decoration: none;}
a:hover						{color: #000;}
p							{margin: 0 0 10px 0;}
li							{display: block; list-style-type: square;}
ul							{padding: 0; margin: 0;}
.fll						{float: left;}
.flr						{float: right;}
.clr						{clear: both;}
h1							{margin: 0 0 4% 0; font-size: 200%; text-align: right; line-height: 100%;}
h2							{margin: 0; font-size: 130%; line-height: 100%;}
h3							{margin: 0; font-weight: 300; font-size: 100%;}
.hut						{margin: -4% 0 4% 0; text-align: right; font-size: 120%;}

/* TRANSITION*/
a							{-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;}

/* RASTER */
#lgo						{margin: 3% 0 0 0;}
#nvg						{margin: 0% 0 4% 0;}
#inh						{margin: 2% 0 5% 0;}
#fss						{margin: 5% 0 5% 0;text-align: right;}
.lgo						{width: 30px; height: auto; float: right;}
@media only screen and (max-width: 300px) {.lgo{width: 75%;}}
.spt						{float: left; width: 49%;}
@media only screen and (max-width: 450px) {.spt{float:inherit;}}
.spt1						{width: 34%; margin-right: 3%;}
.spt2						{width: 63%;}
@media only screen and (max-width: 450px) {.spt1,.spt2{width:100%;margin-right:0;}}

/* NAVIGATION */
#nvg ul, #fss ul			{font-size: 120%;}
.li_akt						{font-weight: 300;}

/* INDEX */
#glr						{width: 100%;}
@media only screen and (min-width: 500px) {#glr{height: 350px; background: url(/msk/wird_geladen.jpg) no-repeat center center;}}
#kontakt #glr				{height: 350px;}
.jssorb05 div				{margin: 330px 0 0 20px; background: url(/msk/nvg.svg) no-repeat 0 0; cursor: pointer;}
.jssorb05 div:hover			{background-position: 0 -30px;}
.jssorb05 .av				{background-position: 0 -60px;}
.jssor_bdr					{font-size: 90%; position: absolute; bottom: 10px; right: 20px; padding: 0 5px; background: url(/msk/trp.png) repeat 0 0;}

/* ARCHITEKTUR/WEBENTWICKLUNG */
.br2						{float: left; margin-bottom: 2.5%; width: 48.5%;}
.br2_mrg					{margin-left: 3%;}
@media only screen and (max-width: 500px) {.br2{float:inherit; width: 100%;}.br2_mrg,.br3_mrg{margin-left:0;}}
.br2 img					{width: 100%; height: auto;}
#webentwicklung .br2 img	{border: 1px solid #ddd;}
.utt						{margin: -0.5% 0 0 0; line-height: 100%;}
.bdr						{font-size: 80%;}

/* KÖPFE */
.kpf						{width: 18%; height: auto;}
.lbl						{margin: 10% 0 10% 5%; width: 77%;}
.jhr						{float: left;}
.ttk						{margin-left: 130px;}
@media only screen and (max-width: 500px) {.lbl{width: 100%; margin-left: 0;}.kpf{width: 85px;}}
@media only screen and (max-width: 400px) {.jhr{float: none;}.ttk{margin: 0 0 2% 0;}}

/* KONTAKT */
#map 						{width: 100%; height: 100%;}
fieldset					{border: none; margin: 0; padding: 0; }
label						{width: 34%; margin-right: 3%;}
input, textarea				{width: 61%; float: right; height: auto; border: none; background-color: #eee; padding: 0.5% 1%; font-family: 'Titillium Web'; font-size: 100%;}
@media only screen and (max-width: 500px) {label{display: block; width: 100%;}input, textarea{float: none; width: 100%;}}
.fml						{margin-bottom: 3%;} 
#abschicken					{float: right; margin-top: 3%; width: auto; cursor: pointer;}
#abschicken:hover			{background-color: #ccc; color: #fff;}
label.error					{display: block; margin-left: 37%; width: 63%; color: #990000;}
input.error, textarea.error	{outline: 1px solid #990000;}
@media only screen and (max-width: 500px) {label.error{margin-left: 0;}}

 /* IMPRESSUM */
#inh a, #ie a				{text-decoration: underline;}
#inh li						{display: list-item; margin: 0 0 0 3%; list-style-type: circle; list-style-type: '= '; list-style-position: outside;}

/* FEHLER */
#ie							{color: #990000;}