@import url("reset.css");

/* pt-sans-regular - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/pt-sans-v17-latin-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-sans-italic - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'PT Sans';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/pt-sans-v17-latin-italic.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-sans-700 - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/pt-sans-v17-latin-700.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-sans-700italic - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'PT Sans';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/pt-sans-v17-latin-700italic.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-regular - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'PT Serif';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/pt-serif-v18-latin-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-italic - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'PT Serif';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/pt-serif-v18-latin-italic.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--text: #4E4E4E;
	--primaer: #1D277A;
	--sekundaer: #F5B82F;
}

@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'PT Serif';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/pt-serif-v18-latin-700.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-serif-700italic - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'PT Serif';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/pt-serif-v18-latin-700italic.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
	scroll-behavior: smooth;
}

body {

	font-family: 'PT Sans';
	font-size: 17px;
	line-height: 24px;
	color: var(--text);
}

a:hover {
	opacity: 0.6;
	transition: 0.3s;
}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

strong {
	font-weight: 700;
}

h3 {
	color: var(--sekundaer);
	font-size: 25px;
	font-family: 'PT Serif';
	font-weight: 700;
	line-height: 32px;
	padding-bottom: 10px;

}

h4 {
	color: var(--sekundaer);
	font-size: 25px;
	font-family: 'PT Serif';
	font-weight: 700;
	line-height: 32px;
	padding-bottom: 10px;

}

h2 {
	color: var(--primaer);
	font-family: 'PT Serif';
	font-size: 40px;
	line-height: 52px;
	font-style: italic;
	padding-bottom: 10px;

}

.kontaktleiste {
	position: fixed;
	top: 0;
	padding: 10px 10%;
	text-align: center;
	width: 100%;
	background: var(--primaer);
	z-index: 99;
}

.kontaktleiste a {
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.flex {
	display: flex;
}

.kontaktleiste .flex {
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.kontaktleiste img {
	height: 17px;
	width: 17px;
	object-fit: contain;
	object-position: bottom;
	margin-left: 30px;
	margin-right: 5px;
}

nav ul {
	z-index: 999;
	position: fixed;
	top: 44px;
	width: 100%;
	box-sizing: border-box;
	padding: 30px 10%;
	display: flex;
	background: #fff;
	justify-content: center;
	color: var(--sekundaer);
	list-style: disc;
}

nav ul li a {
	color: var(--text);
	text-decoration: none;
	padding: 0px 40px 0px 10px;
	font-weight: 700;
}

.cta {

	background: var(--sekundaer);
	color: #fff;
	padding: 8px;
	border-radius: 10px;
}

#teaser {
	width: 100%;
	margin-top: 200px;
	display: flex;
	background-image: url(../images/pabsch-wasserzeichen.svg);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: auto;
}


#teaser .images {
	display: flex;
	width: 50%;
	margin-left: -10%;
}


#teaser .images img {
	width: inherit;
	object-fit: cover;
	border-radius: 60px;
	height: 650px;
	margin-left: 20px;
}

#teaser .text {
	padding-left: 50px;
	width: 45%;
	padding-left: 10%;
	align-content: center;
}

.button {
	background: #F5B82F;
	color: #fff;
	padding: 15px;
	border-radius: 10px;
	text-decoration: none;
	display: inline-block;
	margin-top: 25px;
}

.trennstrich {
	margin-bottom: 10px;
}

.logo {
	position: absolute;
	margin-left: 10%;
	width: 250px;
	margin-top: -70px;
}

#cm-blickpunkt {
	padding: 150px 0% 100px 10%;
	background: #f0f0f0;
	margin-top: -50px;
}

#cm-blickpunkt .flex-item {
	width: 50%;
	align-content: center;
}

#cm-blickpunkt .text {
	padding-right: 10%;
}

.dropdown{
	display: none;
}

#cm-blickpunkt .box {
	padding: 40px;
	background: url(../images/gehirn-puzzle.jpg);
	height: 550px;
	padding-right: 30%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
}

#cm-blickpunkt .box ul {
	background: #fff;
	padding: 40px;
	border-radius: 40px;
	border: 15px solid;
	border-color: #f0f0f0;
	margin-top: 60px;
	height: 500px;
	list-style: url(../images/checkmark.svg);
	color: var(--primaer);
	font-style: italic;
	font-weight: 700;
	padding-left: 80px;
	font-size: 19px;
	align-content: center;
	line-height: 28px;
}

#supervision .text,
#supervision .liste {
	width: 50%;
	padding: 150px 10% 100px 0%;
	justify-content: center;
	align-content: center;
	margin-top: -50px;
}

#supervision .text {
	padding-left: 10%;
}

#supervision .liste {
	padding-left: 10%;
	padding-right: 10%;
	background: url(../images/hintergrund.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	color: #fff;
	font-style: italic;
	font-weight: 700;
}

.siegel {
	position: absolute;
	width: 250px;
	margin-left: 40%;
	margin-top: 500px;
}

#parallax {
	padding: 150px 10%;
	background: url(../images/parallax.jpg);
	background-attachment: fixed;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	font-size: 28px;
	line-height: 36px;
	color: #fff;
	font-family: 'PT Serif';
	font-style: italic;
	text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.61);
}

#arbeitsoptimierung .flex {
	align-items: center;
}

#arbeitsoptimierung .text {
	width: 50%;
	padding: 100px 5% 100px 10%;
}

#arbeitsoptimierung .bild {
	background: #f0f0f0;
	padding: 100px 10% 100px 5%;
	width: 50%;
}

#arbeitsoptimierung .bild p {
	float: left;
	width: 60%;
	padding-right: 5%;
}

#arbeitsoptimierung .bild img {
	float: left;
	width: 40%;
	padding-left: 0%;
	object-fit: cover;
	border-radius: 40px;
}

.buch img {
	width: 100% !important;
	margin-top: 50px;
}

#arbeitsoptimierung h4 {
	color: var(--primaer);
	font-size: 20px;
}

#arbeitsoptimierung ul strong {
	font-style: italic;
	color: var(--primaer)
}

#arbeitsoptimierung ul {
	margin-left: 45px;
}

#arbeitsoptimierung ul li:first-child {
	list-style: url(../images/list.png);
}

#arbeitsoptimierung ul li {
	list-style: url(../images/list-2.png);
}

#arbeitsoptimierung ul li:last-child {
	list-style: url(../images/list-3.png);
}

#grosse-ganze {
	padding: 200px 20%;
	background: url(../images/cta.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: #fff;
	text-align: center;
}

#grosse-ganze h2 {
	color: #fff;
}

#kontakt .flex-item1,
#kontakt .flex-item2 {
	width: 50%;
}

#kontakt {
	align-items: center;
}

#kontakt iframe {
	width: 100%;
	height: 650px;
}

#kontakt .flex-item2 {
	background: #f0f0f0;
	justify-content: center;
	padding: 100px 10% 100px 5%;
}

#kontakt .flex-item1 {
	justify-content: center;
	padding: 100px 5% 100px 10%;
	background-image: url(../images/pabsch-wasserzeichen.svg);
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center;
}

#kontakt .box {
	float: left;
	margin-top: 50px;
	width: 50%;
}

#kontakt .box a {

	font-weight: 700;
	text-decoration: none;
	color: var(--primaer)
}

#kontakt .box img {
	float: left;
	margin-bottom: 20px;
	margin-right: 10px;
}

.dse {
	background: var(--primaer);
	padding: 10px 10%;
	position: fixed;
	width: 100%;
	z-index: 99;
	text-align: right;
	bottom: 0;
	left: 0;
}

.dse a {
	color: #fff;
	padding-left: 20px;
	text-decoration: none;
}

#impressum{
	padding: 200px 10%;
	background: #f0f0f0
}

#impressum .flex-item{
	padding-right: 50px;
	margin-top: 30px;
}

#impressum a{
	color: #1D277A;
	text-decoration: none;
}

/*---------------------------------------
MEDIA Queries | Tablet | Phone
---------------------------------------*/

@media screen and (max-width: 1350px) {
	#cm-blickpunkt .box {
		padding-right: 10%;
	}

	#cm-blickpunkt .box ul {
		padding: 20px;
		padding-left: 60px;
	}

	nav ul li a {
		padding: 0px 30px 0px 0px;
	}

	.logo {
		width: 150px;
	}

	.siegel {
		width: 200px;
		margin-left: 39%;
		margin-top: 600px;
	}

	#kontakt .box {
		margin-top: 30px;
		width: 100%;
	}
}

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

	    #teaser .images {
        width: 70%;
        height: 250px;
    }
	#teaser .images img {
    height: 350px;
}
	
	#teaser{
		display: inherit;
	}

	#teaser .text {
		width: 100%;
		padding: 150px 10%;
	}

	.logo {
		width: 200px;
	}

	#cm-blickpunkt .flex,
	#supervision .flex,
	#arbeitsoptimierung .flex,
	#kontakt .flex, #impressum .flex {
		display: inherit;
	}

	#cm-blickpunkt .flex-item {
		width: 100%;
	}

	#cm-blickpunkt {
		padding: 100px 10% 100px 10%;
		margin-top: -50px;
	}

	#cm-blickpunkt .box {
		padding-right: 10%;
		height: auto;
		margin-top: 50px;
		padding: 30px;
	}

	#cm-blickpunkt .box ul {
		padding: 50px;
		padding-left: 60px;
		height: auto;
		margin-top: 0px;
	}

	#supervision .liste {
		width: 100%;
		padding: 100px 10%;
		margin-top: 0px;
	}

	#supervision .text {
		padding: 100px 10%;
		width: 100%;
	}

	.siegel {
		width: 180px;
		margin-left: 10%;
		margin-top: -80px;
	}

	#arbeitsoptimierung .text,
	#arbeitsoptimierung .bild {
		width: 100%;
		padding: 100px 10%;
	}

	#arbeitsoptimierung .bild p {
		float: none;
		width: 100%;
		margin-bottom: 30px;
	}

	#arbeitsoptimierung .bild img {
		float: none;
		padding-left: 0px;
	}

	#grosse-ganze
		{
		padding: 200px 10%;
	}

	#kontakt .flex-item1,
	#kontakt .flex-item2 {
		padding: 100px 10% 100px 10%;
		width: 100%;
	}

	#kontakt .box {
		float: none;
	}
	
	nav ul{
		display: none;
	}
		.dropbtn {
		background-color: #1D277A;
		color: white;
		padding: 0px;
		font-size: 36px;
		border: none;
		cursor: pointer;
	}

	.dropdown {
		position: fixed;
		top: 0px;
		right: 5%;
		display: inline-block;
		z-index: 99999;
		margin-left: auto;
		margin-right: auto;
	}

	.dropdown-content {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		text-align: center;
		padding-top: 15vh;
		background-color: rgba(29, 39, 122, 0.92);
		min-width: 160px;
		overflow: auto;
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

	.dropdown-content a {
		color: #fff;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}

	.dropdown a:hover {
		background-color: #F5B82F;
	}
	
.show {display: block;}
}

@media screen and (max-width: 660px) {
	.kontaktleiste img {
    margin-left: 15px;
    margin-right: 4px;
}
	.kontaktleiste a {
    font-size: 13px;
}
	.kontaktleiste {
    padding: 10px 5%;
}
	    #cm-blickpunkt .box ul {
        padding: 10px;
			padding-left: 50px;
        border: none;
			font-size: 17px;
			line-height: 24px;
    }
	#arbeitsoptimierung .bild img{
	}
	.kontaktleiste .flex {
    display: block;
}
	.dse a {
    color: #fff;
    padding-left: 20px;
    text-decoration: none;
    font-size: 15px;
}
	
	#teaser .images  {
    margin-left: -20%;
}
	    #teaser .images img {
        height: 250px;
    }
	    #teaser .images img {
        height: 250px;
    }
	.logo{
		width: 140px;
	}
}