*{
	background-color: white;
}

body{
  background-color: white;
  margin: 0;
  height: 100%;
}

main {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-direction: -webkit-row;
	flex-direction: -ms-row;
	flex-direction: row;

	width: 60%;
	min-width: 1050px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 60px;
	border: 2px black solid;
	padding: 30px;
}


#version{
	font-family: monospace;
	font-size: 10px;
	margin-bottom: 30px;
}

#links, #rechts {
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	width: 48%;
}

canvas {
	width: 100%;
	height: auto;
}

#plakat_output{
	width: 100%;
	height: auto;
	z-index:1;
}



#links {
	height: 0;
	padding-bottom: calc(1 / (5 / 7) * 48%);
	margin: 0;
	border: 2px black solid;
	z-index:2;
}


#rechts {
	font-family:Roboto, sans-serif;
	margin-left: 4%;
 	height: 100%;
}

h1{
	vertical-align: top;
	line-height: 30px;
	font-size: 30px;
	margin-bottom: 10px;
	font-weight: 900;

}

#steuerung {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-direction: -webkit-row;
	flex-direction: -ms-row;
	flex-direction: row;
	height: auto;
}

form {
	font-size: 13px;
}


fieldset {
	padding: 0;
	border: 0;
}

#control_panel, #rechts2 {
	width: 48%;
}

#control_panel {
	vertical-align: top;
	margin-right: 4%;
}

#details {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-left:1px black solid;
	border-bottom:1px black solid;
	border-top:1px black solid;
	height: 700px;
}

#rechts2{
}

legend{
	font-size: 15px;
	font-weight: 500;
}

h2{
	font-size: 15px;
	font-weight: 500;
}

textarea{
	font-family:Roboto, sans-serif;
	width:100%;
	border: 1px black solid;
	font-size: 13px;

}

textarea:hover{
	border-color:red;
}

textarea:focus{
	border-color:red;
}


button{
 	border-bottom: 1px black solid;
	background-color: white;
	cursor: pointer;
	margin-top: 10px;
}

button:hover{
	border-color:red;
	background-color:red;
	color:white;
}

select{
	cursor: pointer;
	margin-top:10px;
	margin-bottom:10px;
	border:1px black solid;
}

select:hover{
	border-color:red;
}

input{
	cursor: pointer;
	height: 15px;
	width:15px;
	background-color: white;
	border: 1px black solid;
}

input[type=color] {
	-webkit-appearance: none;
	-moz-appearance: none;
}

input[type=color]::-webkit-color-swatch-wrapper {
	padding: 0;
}

input[type=color]::-webkit-color-swatch {
	border: none;
}

input:hover{
	border-color:red;

}


#line{
	content:"";
	border-top:1px solid black;
	width:140%;
	transform: rotate(45deg);
	transform-origin: 0% 0%;
}

/*variationsauswah*/

#variation_1{
	display:none;
}

#variation_2{
	display:block;
}

#variation_3{
	display:none;
}

#variation_4{
	display:none;
}

b{
	font-weight:normal;
	font-size: 20px;
}

b:hover{
	cursor: pointer;
	color: red;
}

#size{
	display:none;
}

#fontwahl{
	display:inline;
}

.info_main{
	display:inline;
	width: 90%;
}

.small{

	font-weight:900;
	font-size: 10px;

}

.cheks{
	font-weight:normal;
}

#text_loud_color{
	display:block;
}
/* ab hier für SVG */

#backLayer02{
	color: #F6CEF5;
	fill: currentColor;
}

#backLayer01{
	color: red;
	fill: currentColor;
}

#objectDuo01{
	fill:black;
}

#objectDuo02{
	fill:white;
}


#text_loud_object{
	color:yellow;
}

#text_loud_100{ /*werte optimieren für 100 zeichen loud*/
  font-size: 85px;
  font-weight: inherit;
  font-family: inherit;
  display: none;
}


#text_loud_text_100{
	fill: currentColor;
	mix-blend-mode: multiply;
}


#text_loud_text_100_2{
	fill:none;
	stroke: currentColor;
	stroke-width: 2.5;
}

#text_loud_78{ /*werte optimieren für 78 zeichen loud*/
  font-size: 110px;
  font-weight: inherit;
  font-family: inherit;
  display: none;
}

#text_loud_text_78{
	fill: currentColor;
	mix-blend-mode: multiply;
}

#text_loud_text_78_2{
	fill:none;
	stroke: currentColor;
	stroke-width: 2.5;

}

#text_loud_25{ /*werte optimieren für 25 zeichen loud*/
  font-size: 185px;
  font-weight: inherit;
  font-family: inherit;
  display: inline;
}

#text_loud_text_25{
	fill: currentColor;
	mix-blend-mode: multiply;
}

#text_loud_text_25_2{
	fill:none;
	stroke: currentColor;
	stroke-width: 2.5;
}

#text_loud_object{
	font-family:Roboto, sans-serif;
	font-weight:900;
}

#sticker_back{
	color: black;
	fill: currentColor;
}

#info{
	font-family:Roboto, sans-serif;
	font-weight:500;
	fill: white;
	font-size:15px;
}

#sticker{
	display: none;
}

.platzhalter{
	fill:none;
	stroke: none;
}

/*zusätzlicher Kram zur Umfrage*/

.infomation{
	width: 60%;
	min-width: 1050px;
	margin-left: auto;
	margin-right: auto;
	font-family:Roboto, sans-serif;
	padding-top: 30px;
	border: 2px black solid;
	padding-left:30px;
	padding-right:30px;
	margin-top:30px;
}

#wichtig{
	font-size: 50px;
	line-height: 70px;
}

.block{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-direction: -webkit-row;
	flex-direction: -ms-row;
	flex-direction: row;

	width: 100%;
	min-width: 1050px;
	padding-top: 50px;
	font-size:20px;
	font-weight: normal;
	line-height:30px;
	margin-bottom:30px;
}

.rechter_block, .linker_block {
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	width: 48%;
}

.linker_block{
	margin-left: 4%;
}

h3{
	font-weight:900;
}

.beispiel{
	border: 2px black solid;
}

.betont{
	font-weight:700;
}

.betont:hover{
	cursor: auto;
	color: black;
}

.link{
	color:red;
	text-decoration:none;
}

.link:hover{
	color:black;
	text-decoration:none;
}

#kontakt{
		font-weight:900;
		padding-top:30px;
}

#kontaktborder{
	margin-bottom:60px;
	padding-top: 0px;
}

#alteverweise{
	font-weight:400;
	text-align:right;
	font-size: 15px;
}

#tothetop{
	position:fixed;
	top: 0;
	left:0;
	background-color: white;
	width:100%;
	display:none;
}

#tothetop2{
	width: 61%;
	min-width: 1070px;
	border-bottom: 2px black solid;
	margin-left:auto;
	margin-right:auto;
	padding-left:30px;
	padding-right:30px;
	font-family: Roboto;
	font-weight: 500;
	text-align:center;
	font-size: 15px;

}

#pfeil{
	font-size: 20px;
	font-family: Roboto;
	font-weight: 500;

}

.link2{
	color:black;
	text-decoration:none;
}

.link2:hover{
	color:red;
	text-decoration:none;
}

blockquote{
	font-style:italic;
}