﻿html, body  {	-webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.10; }
		
		@media screen and (min-width :    0px)	{	body  {	font-size: 4.000vmin; }}
		@media screen and (min-width :  700px)	{	body  {	font-size: 2.000vmin; }}
		@media screen and (min-width : 1200px)	{	body  {	font-size: 0.938vw; }}
			
a, label,
button		{	display: inline-block; text-decoration: none; cursor: pointer; }
i			{	font-style: normal; }
ul			{	list-style: none; line-height: 1.40; }
small	{	font-size: 0.72em; }
strong	{	font-size: 1.05em; }
.nob    {	white-space: nowrap; }


.btn	{	font-size: 0.88em; line-height: 1.00; }

h1, h2, h3			{	font-style: normal; font-weight: normal; }
		h1  		{	font-size: 2.44em; text-transform: uppercase; }	
		h1 > span 	{	font-size: 0.95em; display: inline-block; padding: 0 0.25em 0.15em; }	
		h2	  		{	font-size: 1.88em;  text-transform: uppercase; line-height: 1.20; max-width: calc(45.00em / 1.88); }	
 .intro h2			{	text-transform: none; }	
 .intro h2 > span	{	font-size: 0.75em; }	
		h3  		{	font-size: 1.20em; }	

 h2 + span, 
 h3 + span  {	display: inline-block; }
 
 p				{	font-size: 0.90em; line-height: 1.60; }
 p.item			{	margin-left: 1.10em; text-indent: -1.10em; }
		
	ul.txt				{	font-size: 0.90em; max-width: 45.00em; }
	ul.txt > li			{	position: relative; padding-left: 1.50em; }
	ul.txt > li:before	{	position: absolute; top: 0.45em; left: 0; width: 0.75em; height: 0.75em; border-radius: 100.0%; opacity: 0.35; content: ''; }

	h1, p	{	-ms-hyphens: 		auto;	-ms-hyphenate-limit-chars: 		auto 4;	-ms-hyphenate-limit-lines: 		4;
				-moz-hyphens:		auto;	-moz-hyphenate-limit-chars: 	auto 4;	-moz-hyphenate-limit-lines: 	4;
				-webkit-hyphens: 	auto;	-webkit-hyphenate-limit-chars: 	auto 4;	-webkit-hyphenate-limit-lines: 	4;
				hyphens: 			auto; 	hyphenate-limit-chars: 			auto 4;	hyphenate-limit-lines: 			4; }

	p.quote	{	margin-left: 0.35em; text-indent: -0.35em; }
	

header span, 
footer span		{	font-size: 0.72em; line-height: 1.60; }

.check label	{	font-size: 0.72em; line-height: 1.00; }

.designby		{	font-style: oblique; }

.menu > a		{font-size: 0.72em; line-height: 1.00}

/* --- Eyecatcher --- */

.eyecatcher:after {	display: block; text-align: center; white-space: pre;	}

/* --- Kino --- */

#kino label						{	font-size: 0.75em; }
#kino input:checked + label		{	font-size: 1.25em; }	@media screen and (max-width : 1200px)	{	#kino input:checked + label 	{ font-size: 0.75em; }}

	
/* --- Intro --- */

.intro > div + div > *	{	text-align: center; }

/* --- FAQ --- */

#faq label	{	font-size: 0.72em; line-height: 1.40; }
			
/* --- Chart --- */

figcaption				{	font-size: 0.75em; line-height: 1.60; }
.graphic figcaption		{	text-align: center; }

.donut > div:before	{	font-size: 2.25em; line-height: 1.00; letter-spacing: -0.0125em; }

.illu > div > div:after, .illu-qs > div + div > div:after		{	font-size: 1.50em; line-height: 1.00;}
.illu span														{	font-size: 0.75em; line-height: 1.20; text-align: center; }
.illu span > span												{	font-size: 1.25em; }			

							
/* --- Form --- */

textarea,
input, select,
.form-label-group > label	{	font-size: 0.72em; line-height: 1.00; }

.form-label-group *:not(:placeholder-shown) ~ label	{	font-size: 0.72em; line-height: 1.00; width: unset; right: 0; left: unset; }

input[type=checkbox].DSGVO-ok + label	{	font-size: 0.72em; line-height: 1.50; }

.thank 	{	font-size: 0.72em; line-height: 1.50; }

/* --- Spacing --- */

h1 + *,
h2 + *,
h3 + * 		{	margin-top: 1.50em; }
	
video + *,
p + ul,
p + p,
ul + p		{	margin-top: 1.00em; }

li + li		{	margin-top: 0.50em; }

/*	=================================
		FONTS
	================================= */
	
body, h1, h2, input, select, textarea
	{	font-family: 'sofi-300', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; }

strong, h3, .donut > div:before, .illu > div > div:after, .illu span > span, figcaption, .menu > a.on, .illu-qs > div + div > div:after
	{	font-family: 'sofi-400', Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; }
	
	@font-face 	{   font-family: 'sofi-300'; src: url('../fonts/ToyotaType-Book.woff2') format('woff2'); }	
	@font-face 	{   font-family: 'sofi-400'; src: url('../fonts/ToyotaType-Semibold.woff2') format('woff2'); }		
	
/*	=================================
		END
	================================= */