html{ border-top-color: rgb(255, 255, 12); }
@media (max-width: 768px) { 
	html{ border-top-color: rgb(255, 255, 6); }
} 
	.layout { gap: 15%;	 }	
	.zeroTwelfths { 
		flex: 0 0 -15%; 
		width: -15%; display:none;
	} 
	.oneTwelfth { 
		flex: 0 0 -5.4166666666667%; 
		width: -5.4166666666667%; display:none;
	} 
	.twoTwelfths { 
		flex: 0 0 4.1666666666667%; 
		width: 4.1666666666667%; 
	} 
	.threeTwelfths { 
		flex: 0 0 13.75%; 
		width: 13.75%; 
	} 
	.fourTwelfths { 
		flex: 0 0 23.333333333333%; 
		width: 23.333333333333%; 
	} 
	.fiveTwelfths { 
		flex: 0 0 32.916666666667%; 
		width: 32.916666666667%; 
	} 
	.sixTwelfths { 
		flex: 0 0 42.5%; 
		width: 42.5%; 
	} 
	.sevenTwelfths { 
		flex: 0 0 52.083333333333%; 
		width: 52.083333333333%; 
	} 
	.eightTwelfths { 
		flex: 0 0 61.666666666667%; 
		width: 61.666666666667%; 
	} 
	.nineTwelfths { 
		flex: 0 0 71.25%; 
		width: 71.25%; 
	} 
	.tenTwelfths { 
		flex: 0 0 80.833333333333%; 
		width: 80.833333333333%; 
	} 
	.elevenTwelfths { 
		flex: 0 0 90.416666666667%; 
		width: 90.416666666667%; 
	} 
	.twelveTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
@media (max-width: 768px) { 
	.zeroTwelfths { 
		flex: 0 0 -15%; 
		width: -15%; display:none;
	} 
	.oneTwelfth { 
		flex: 0 0 1.6666666666667%; 
		width: 1.6666666666667%; 
	} 
	.twoTwelfths { 
		flex: 0 0 18.333333333333%; 
		width: 18.333333333333%; 
	} 
	.threeTwelfths { 
		flex: 0 0 35%; 
		width: 35%; 
	} 
	.fourTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.fiveTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.sixTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.sevenTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.eightTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.nineTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.tenTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.elevenTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.twelveTwelfths { 
		flex: 0 0 100%; 
		width: 100%; 
	} 
	.zeroSixths { 
		flex: 0 0 -15%; 
		width: -15%; display:none;
	} 
	.oneSixth { 
		flex: 0 0 1.6666666666667%; 
		width: 1.6666666666667%; 
	} 
	.twoSixths { 
		flex: 0 0 18.333333333333%; 
		width: 18.333333333333%; 
	} 
	.threeSixths { 
		flex: 0 0 35%; 
		width: 35%; 
	} 
	.fourSixths { 
		flex: 0 0 51.666666666667%; 
		width: 51.666666666667%; 
	} 
	.fiveSixths { 
		flex: 0 0 68.333333333333%; 
		width: 68.333333333333%; 
	} 
	.sixSixths { 
		flex: 0 0 85%; 
		width: 85%; 
	} 

} 
	html { font-size: 25px; } 
	@media (max-width: 1568.1px) { 
		html { font-size: 24.5px; } 
	} 

	@media (max-width: 1493.4px) { 
		html { font-size: 23.3px; } 
	} 

	@media (max-width: 1422.3px) { 
		html { font-size: 22.2px; } 
	} 

	@media (max-width: 1354.5px) { 
		html { font-size: 21.2px; } 
	} 

	@media (max-width: 1290px) { 
		html { font-size: 20.2px; } 
	} 

	@media (max-width: 1228.6px) { 
		html { font-size: 19.2px; } 
	} 

	@media (max-width: 1170.1px) { 
		html { font-size: 18.3px; } 
	} 

	@media (max-width: 1114.4px) { 
		html { font-size: 17.4px; } 
	} 

	@media (max-width: 1061.3px) { 
		html { font-size: 16.6px; } 
	} 

	@media (max-width: 1010.8px) { 
		html { font-size: 15.8px; } 
	} 

	@media (max-width: 962.6px) { 
		html { font-size: 15px; } 
	} 

	@media (max-width: 916.8px) { 
		html { font-size: 14.3px; } 
	} 

	@media (max-width: 873.1px) { 
		html { font-size: 13.6px; } 
	} 

	@media (max-width: 831.6px) { 
		html { font-size: 13px; } 
	} 

	@media (max-width: 792px) { 
		html { font-size: 12.4px; } 
	} 

	@media (max-width: 768px) { 
		html { font-size: 30px; } 
	} 

	@media (max-width: 754.3px) { 
		html { font-size: 29.5px; } 
	} 

	@media (max-width: 718.3px) { 
		html { font-size: 28.1px; } 
	} 

	@media (max-width: 684.1px) { 
		html { font-size: 26.7px; } 
	} 

	@media (max-width: 651.6px) { 
		html { font-size: 25.5px; } 
	} 

	@media (max-width: 620.5px) { 
		html { font-size: 24.2px; } 
	} 

	@media (max-width: 591px) { 
		html { font-size: 23.1px; } 
	} 

	@media (max-width: 562.8px) { 
		html { font-size: 22px; } 
	} 

	@media (max-width: 536px) { 
		html { font-size: 20.9px; } 
	} 

	@media (max-width: 510.5px) { 
		html { font-size: 19.9px; } 
	} 

	@media (max-width: 486.2px) { 
		html { font-size: 19px; } 
	} 

	@media (max-width: 463.1px) { 
		html { font-size: 18.1px; } 
	} 

	@media (max-width: 441px) { 
		html { font-size: 17.2px; } 
	} 

	@media (max-width: 420px) { 
		html { font-size: 16.4px; } 
	} 

	@media (max-width: 400px) { 
		html { font-size: 15.6px; } 
	} 
@media only screen and (max-width: 768px){ /*SMARTPHONE */
	.desktop {
		display: none !important;
    }

    .mobile {
		display: block;
    }

	main{
		padding-bottom: 0.5rem;
	}

	article.intro{
		padding-left: 0;
		padding-right: 0;
	}
	
	nav{
		right: 1.5rem;
	}

	nav div.menu{
		right:0.5rem;
	}

	main section:first-child article:not(.intro):first-child{
		margin-top: 15rem;
	}
	
	main section.kontakt:first-child article:not(.intro):first-child{
		margin-top: 11rem;
	}

	div.menu{
		padding-right: 0;
		transform: translateX(0);
	}

	article.intro h2 br{
		display:none;
	}

	div.imgAbout{
		width:80%;
		margin-bottom: 2rem;
		padding-bottom: 100%;
	}
	/* iPhone: Eltern-Spalte (.sixTwelfths) hat auch WOW → visibility: hidden. Ganze Spalte sichtbar machen. */
	section.about-with-video .layout > .sixTwelfths:first-child{
		visibility: visible !important;
	}
	div.imgAbout.imgAbout--video{
		min-height: 50vw;
	}
	div.imgAbout.imgAbout--video video{
		display: block;
		min-height: 200px;
	}


	p,
	a.button,
	button,
	form.message{
		font-size: 1rem;
	}

	div.lebenslauf{
		margin-top:0;
	}

	div.pitchform{
		margin-top: 4rem;
	}

	div.dienstleistungen > div{
		width:100%;
		flex-basis:100%;
		transform:translateY(0) translateX(0);
	}

	div.dienstleistungen > div:nth-child(1),
	div.dienstleistungen > div:nth-child(3),
	div.dienstleistungen > div:nth-child(4),
	div.dienstleistungen > div:nth-child(5),
	div.dienstleistungen > div:nth-child(6){
		transform:translateY(0) translateX(0);
	}

	div.dienstleistungen > div:not(:last-child) div.border.bottom-right,
	div.dienstleistungen > div:not(:last-child) div.border.bottom-left{
		display:none !important;
	}

	section.partner .layout{
		margin-bottom: 0;
	}

	section.partner div.fourTwelfths{
		margin-bottom: 2rem;
	}

	div.projectBlock a:nth-child(2){
		margin-top: 0;
	}

	div.projectBlock a > div:not(.projectImage){
		max-width: 100%;
	}

	div.projectBlock a{
		width:100%;
	}


	div.galleryColumn{
		width:100%;
	}

	div.projectImage,
	section.project article:first-child img{
		border-radius: 1.5rem;
	}

	div.gallery img{
		border-radius: .4rem;
	}

	.sixTwelfths.facts{
		margin-top: 4rem;
	}

	.hi h1,
	.hi .h1{
		margin-bottom: 1rem;
	}

	div.services{
		flex-direction: row-reverse;
		order: 2;
		margin-bottom: 1rem;

		& .fourTwelfths{
			width:70%;
			flex-basis:70%;
			align-self: center;
		}
	}

	article.intro{
		display: flex;
    	flex-direction: column;
	
		& .hi{
			order: 1;
		}
	}

	nav ul.mainNavi li a {
		font-size: 1.5rem;
	}

	nav ul.secondNavi li a{
		font-size: .8rem;
	}

	ul.social svg,
	button svg{
		width: 1.6rem;
		height: 1.6rem;
	}

	div.gallery{
		margin-top: 0rem;
		column-count: 1;
	}

	section.kontakt .social.home li{
		width: 13.5rem;
		}
}