*, *:before, *:after { box-sizing: border-box; }
img { border: none; height: auto; max-width: 100%; display: block; }
::selection { background:#ffcc00;} 
html { -webkit-text-size-adjust: 100%;  scroll-behavior: smooth; } 
strong { font-weight: 700;}
.test, b {background: pink; font-weight: normal;}

/*  F A R B E N
Grau 333333
Pink FF0066
Gelb FFCC00
Lila 990099
Rot CC000
Dunkellila 660066
========================= */

/* merriweather-300 - latin */
@font-face {
	font-family: 'Merriweather';
	font-style: normal;
	font-weight: 300;
	src: local('Merriweather Light'), local('Merriweather-Light'),
	     url('merriweather-v22-latin-300.woff2') format('woff2'), 
	     url('merriweather-v22-latin-300.woff') format('woff'); 
	font-display: swap;
}
/* merriweather-regular - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: local('Merriweather Regular'), local('Merriweather-Regular'),
       url('merriweather-v22-latin-regular.woff2') format('woff2'),
       url('merriweather-v22-latin-regular.woff') format('woff');
	font-display: swap;
}
/* merriweather-700 - latin */
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: local('Merriweather Bold'), local('Merriweather-Bold'),
       url('merriweather-v22-latin-700.woff2') format('woff2'), 
       url('merriweather-v22-latin-700.woff') format('woff'); 
	font-display: swap;
}

body {
	background: #eee;
	font: normal 62.5%/1.9 'Merriweather', Georgia, serif; 
	font-weight: 300;
	color: #333;
	margin: 0;
	padding: 0;
	}	
header 	{ 
	width: 100%;
	height: 200px;
    margin: 0; 
    padding: 40px 0 0 0;
	position: relative;
	}
.logo {
	max-width: 382px;
	height: auto;
	float: left;
	margin: 0;
	padding: 0;
	}
main { 
	width: 100%;
	height: auto;
	overflow: hidden;
    margin: 0; 
    padding: 0px;
    font-size: 1rem;
    background: none;
	}
a {
	color: #c00;
	text-decoration: none;
	}
a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	}
	

.col 	{ float: left; }
p 		{ margin-bottom: 40px; }
.wrp {
	max-width: 1100px;
	font-size: 1.1rem;
	margin: 0 auto;
	padding: 0 50px;
	position: relative;
	}
.wrp:after {
	content: " "; 
	display: table; 
	clear: both; 
	}
section {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	margin: 0;
	padding: 0;
	}
#ichbin {	
	/* https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+21,cc0000+21 */
	background: #cc0000; /* Old browsers */
	background: linear-gradient(to bottom,  #eee 0%,#eee 12%,#cc0000 12%); 
	padding: 0 0 200px 0; /* wegen Bild */
	color: #eee;
	}
#ichbin .col {
	width: 38%;
	margin-right: 7%;
	}	
#ichbin .col:last-child {
	width: 50%;
	margin-right: 0%;
	padding: 200px 0 0 0;
	}	
#ichbiete {
/* 	background: #333; */
	padding: 200px 0;
	}
#ichbiete .col {
	width: 55%;
	margin-right: 15%;
	}	
#ichbiete .col:last-child {
	width: 30%;
	margin-right: 0%;
	padding-top: 300px;
	}	
.dunkel {
	background: #333;
	color: #eee;
	}
.dunkel .txt {
	display: none;
}
.hell {
	background: #fc0;
	color: #333;
	}
.hell img {
	transform: scaleY(-1);
	}
.hell .txt {
	display: block;
	}
#klick { cursor: pointer; }
#klick_txt {
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 4px;
}
#klick_txt:hover {
	text-decoration: none;
}
#top {
	position: fixed;
	bottom: 60px;
	right: 9%;
	font-weight: bold;
	mix-blend-mode: difference;
	color: rgb(50, 173, 2);
	font-size: 2rem;
	z-index: 98;
	transform: rotate(-90deg);
	display: none;
	}	
#top:hover {
	text-decoration: none;
	color: #fff;
}
	
#stories {
	color: #333;
	padding: 200px 0;
	}
#uebersicht #stories, #datenschutz #daten {
	padding: 100px 0;
	}
#stories .col {
	width: 30%;
	margin-right: 5%;
	margin-bottom: 40px;
	position: relative;	
	}
#stories .col:nth-child(5), 
#stories .col:nth-child(8) {
	margin-right: 0%;
	}

#stories p {
	max-width: 550px;
	}
.kundenlogo {
	background: #fff;
	padding: 40px 20px;
	}

.kat_bild {
	z-index: 1;
	overflow: hidden;
	width: 300px;
	height: 300px;
	}
.kat_bild img {
	transform: scale(1.1);
	transition: all 0.1s ease-out;
	filter: grayscale(100%);
	}
.kat_bild img:hover {
	transform: scale(1.0);
	transition: all 0.2s ease-out;
	filter: grayscale(0%);
	}
.off .kat_bild img {
	transform: scale(1.0);
	transition: all 0.2s ease-out;
	filter: blur(0px);
	}
	
#kunden {
	background: #660066;
	padding: 200px 0;
	color: #eee;
	}
#kunden ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}
#kunden ul li {
	margin-bottom: 20px;
	}
#kunden a {
	color: #eee;
	text-decoration: underline;
	text-underline-offset: 4px;
	}
#kunden a:hover {
	color: #fff;
	text-decoration: none;
	}
.neu {
	color: #fc0;
}

#kontakt {
	background-image: url('../img/buero.jpg');
	background-size: cover;
/* 	background-position: center top; */
	background-repeat: no-repeat;
	background-color: #333;
	padding: 150px 0 200px 0;
	color: #eee;
	}
footer { 
	font-size: 1rem;
    }	
footer:after { 
	content: " "; 
	display: table; 
	clear: both; 
	}	
footer a {
	color: #eee;
	text-decoration: none;
	}
footer a:hover {
	color: #fff;
	text-decoration: underline;
	}
.socialmedia {
	margin: -10px 0 20px 0;
	}
.socialmedia img {
	display: inline-block; 
	margin: 0 20px 0 0;
	width: 22px;
	height: auto;
	position: relative;
	}


h1 {
	font-size: 5rem;
	line-height: 1.3;
	font-weight: 300;
	margin: 0px 0 50px 0;
	}	
#start h2 {
	font-size: 5rem;
	line-height: 1.3;
	font-weight: 300;
	margin: 0 0 50px 0;
	}	

/* --- SUBSEITEN ---------------------------------------------- */
#story header {
	height: 150px;
	}
#story h2 {
	font-size: 1.8rem;	
	margin: 0 0 15px 0;
	}
#intro {
	padding: 100px 0 100px 0;
	}
#intro .col {
	width: 55%;
	margin-right: 10%;
	}	
#intro .col:last-child {
	width: 30%;
	margin-right: 0%;
	padding-top: 25px;
	}	

.screens {
	padding: 0 0 200px 0;
	}
.screens:after {
	content: " "; 
	display: table; 
	clear: both; 
	}
.screens .wrp {
	margin-bottom: 40px;
	}
.breadcrumb {
	margin: 0px 0 20px 0;
	}
.breadcrumb a {
	color: #333;
	text-decoration: none;
	}
.breadcrumb a:hover {
	color: #c00;
	text-decoration: underline;
	}

.eins .col {
	width: 100%;
	margin-right: 0%;
	}
	
.zwei .col {
	width: 47%;
	margin-right: 6%;
	}
.zwei .col:last-child {
	margin-right: 0;
	}	
	
.drei .col {
	width: 30%;
	margin-right: 5%;
	margin-bottom: 40px;
	position: relative;
	}
.drei .col:nth-child(3), 
.drei .col:nth-child(6) {
	margin-right: 0;
	}
/* 
.drei .col:last-child {
	margin-right: 0;
	}	
 */

.vier .col {
	width: 22%;
	margin-right: 4%;
	}
.vier .col:last-child {
	margin-right: 0;
	}
.zwei .col img, .drei .col img, .vier .col img {
	margin-bottom: 20px;
	}



.rand {
/* 	border: 1px solid #666; */
	border-radius: 7px;
	background: #efefef;
	overflow: hidden;
	}
.browser {
	width: 100%;
	height: auto;
	background: #ccc;
	position: relative;
	border-radius: 5px 5px 0 0;
	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
	}
.browser i {
	font: normal bold 28px/1.3 Georgia, serif;	
	color: #efefef;
	margin-left: 20px;
	}
.browser .url {
	width: 50%;
	height: 24px;
	background: #efefef;
	position: absolute;
	top: 8px;
	left: 25%;
	border-radius: 3px;
	padding: 0 20px;
	font-family: 'Courir', sans-serif;
	font-size: 0.8rem;
	}
	
nav ul {
	display: none;
	list-style-type: none;
	position: absolute;
	top: 50px;
	right: 0px;
	padding: 0 50px 30px 100px;
	z-index: 3;
	background: #eee;
	}
nav li {
	text-align: right;
	padding: 10px 0;
	}
nav a {
	color: #333;
	text-decoration: none;
	font-size: 1.3rem;
/* 	padding: 30px 20px; */
	}	
nav a:hover {
	color: #cc0000;
	}	

.hamburger {
	cursor: pointer;
	position: relative;
	float: right;
	padding: 10px 15px;
	display: block;
	margin: -15px -15px 0 0;
	z-index:5;
	}
.bar1, .bar2, .bar3 {
	width: 40px;
	height: 4px;
	background-color: #333;
	margin: 8px 0;
	transition: 0.4s;
	border-radius: 2px;
	}
.change .bar1 { transform: rotate(-45deg) translate(-5px, 12px); }
.change .bar2 { opacity: 0; }
.change .bar3 {	transform: rotate(45deg) translate(-5px, -12px); }
	
/*  per JS an ul.hauptnavi  */
.anzeigen { 
	display: block; 
	opacity: 1; 
	}

	
/* --- RESPONSIVE ---------------------------------------------- */

@media screen and (max-width: 650px) {

header 	{ 
	height: 150px;
	}
.col {
	width: 100%;
	float: none;
	}
.logo {
	width: 200px;
	height: auto;
	}
.wrp {
	padding: 0 30px;
	}
#ichbin {	
	background: #cc0000; /* Old browsers */
	background: linear-gradient(to bottom,  #eee 0%,#eee 8%,#cc0000 8%); 
	padding: 0 0 50px 0; 
	}
.nora {
	margin-bottom: 30px;
	}
	
#ichbiete,
#stories,
#kunden,
#kontakt,
#daten,
#intro,
.projektauswahl
	{
	padding: 50px 0;
	}

#ichbin .col,
#ichbin .col:last-child,
#ichbiete .col,
#ichbiete .col:last-child,
#stories .col,
#intro .col,
#intro .col:last-child,
.projektauswahl .col,
.eins .col, .zwei .col, .drei .col, .vier .col
	{
	width: 100%;
	margin-right: 0;
	padding: 0;
	}	
	
h1 {
	font-size: 3rem;
	}
h2 {
	font-size: 3rem;
	line-height: 1.2;
	margin: 50px 0 30px 0;
	}
#start h2 {
	font-size: 4rem;
	}
	/* mobil URL ausblenden  */
.browser .url { 
	color: rgba(0,0,0,0.0);
	}


 }