@charset "utf-8";
/* CSS Document */

@font-face {font-family:'source sans'; src:url('f/SourceSansPro-Regular.otf')  format('opentype');}
@font-face {font-family:'source semi'; src:url('f/SourceSansPro-Semibold.otf')  format('opentype');}
@font-face {font-family: 'AmiriWeb'; font-weight: 400; src: url('f/Amiri-Slanted.woff2') format('woff2'), url('f/Amiri-Slanted.woff') format('woff');}
@font-face {font-family: 'Asap Regular'; src: url('f/Asap-Regular.ttf') format('truetype');}

.korrekturfarbe {color:red;}

strong {
	font-family:'source semi', sans-serif;
	font-weight: normal;
}
	

html {
	padding:0px;
	margin:0px;
	scroll-behavior: smooth;
}

body {
	padding:0px;
	margin:0px;
	font-size:21px;
	background-color: #f2f2f2;
}

#rahmen {
	padding:0px;
	margin:0px;
}

#bereich-1 {
	padding:0px;
	margin:0px;
	background-image: url(images/ute-froitzheim-b1_bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	height:100vh;
	max-width: 100vw;
	overflow: hidden;
	position: relative;
}

#bereich-2 {
	padding:0px;
	margin:0px;
	background-image: url(images/ute-froitzheim-b2_bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	height:100vh;
	max-width: 100vw;
	overflow: hidden;
}

#bereich-2, #bereich-3, #bereich-4, #bereich-5 {
	padding:0px 0px 0px 0px;
	margin:0px;
	background-color: #eeedea;
	height:100vh;
	max-width: 100vw;
	overflow: hidden;
	position: relative;
	min-height:900px;
}

#bereich-3 {
	background-color: #fff;
	background-image:url(images/schweif-02.jpg);
	background-position:right bottom;
	background-repeat:no-repeat;
}

#bereich-4 {
	background-color: #f1da3d;
	padding:0px;
	margin:0px;
	background-image: url(images/ute-froitzheim-b4_bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}


#bereich-5 {
	height: auto; 
	max-height: none;
	background-color: #e0c93e;
	padding-bottom: 4em;
}

#bereich-6 {
	background-color: #f2f2f2;
}



#header {
	/**background-image:url(images/titel-01.jpg);**/
	background-size: cover;
	height:100vh;
	width:100%;
	padding:0px;
	margin:0px;
}

#titel {
	width:80%;
	max-width:1378px;
	height: 50vh;
    padding: 0;
	margin: 20vh auto 0px auto;
    z-index: 3;
    position: relative;
    left: 0;
    padding-top: 1em;
	background-image: url(images/ute-froitzheim-supervision-coaching-01a.png);
	background-size:contain;
	background-repeat:no-repeat;
}

#titel img {
    width: 1510px;
    height: auto;
    margin: auto;
    display: block;
	margin-top: 20vh;
	max-width:80vw;
}

.block-text, .block-tel {
	padding: 1.2em 1.7em 1.3em 1.4em;
	margin: auto;
	margin-top: 0;
	margin-left: 20%;
	background-color: #fff;
	-webkit-box-shadow: 20px 18px 11px -4px rgba(38,33,69,0.4);
	-moz-box-shadow: 20px 18px 11px -4px rgba(38,33,69,0.4);
	box-shadow: 20px 18px 11px -4px rgba(38,33,69,0.4);
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}

.block-tel {
	width:210px;
	border-radius: 2px;
}

.cnt-bereich-01 {
	/**margin-left: 7vw; diese Einstellung ist gut mit der H3 linksstehend! **/
	width: 100vw;
	max-width: 100vw;
	margin:0px;
	padding: 0px;
	padding-top: 22.5em;
}

#bereich-1 .block-text {
	width:45%;
	max-width:575px;
	float:left;
}

#footer {
	position: absolute;
	bottom: 1em;
	right:2%;
}
	

.block-pfeil {
	width:65px;
	height:65px;
	border-radius:100%;
	border: 1px solid #000;
	position: absolute;
	bottom: 1em;
	left: 50%;
	z-index:4;
	margin-left: -32px;
}
	
.block-pfeil img {
	width: auto;
	height:30px;
	display:block;
	margin:17px auto auto auto;
	-webkit-box-shadow: none;
	-moz-box-shadow: none ;
	box-shadow: none;
}

#bereich-profil .block-pfeil {
    width: 65px;
    height: 65px;
    border-radius: 100%;
    border: 1px solid #000;
    position: relative;
    top: 60px;
    left: 48%;
	clear: left;
}

#bereich-cv .block-pfeil {
    width: 65px;
    height: 65px;
    border-radius: 100%;
    border: 1px solid #000;
    position: relative;
    top: 0px;
    left: 48%;
	clear: left;
	margin-bottom: 30px;
}

#bereich-profil .block-pfeil img, #bereich-cv .block-pfeil img {
	width: auto;
	height:30px;
	display:block;
	margin:17px auto auto auto;
	-webkit-box-shadow: none;
	-moz-box-shadow: none ;
	box-shadow: none;
	
}

.block-pfeil-unten {
	width:65px;
	height:65px;
	border-radius:100%;
	border: 1px solid #000;
	position: relative;
	left:48%;
}
	
.block-pfeil-unten img {
	width: auto;
	height:30px;
	display:block;
	margin:17px auto auto auto;
}

#bereich-6 .block-pfeil-unten {
	width:65px;
	height:65px;
	border-radius:100%;
	border: 1px solid #000;
	position: absolute;
	left:48%;
	margin-top: -15px;
	margin-top: -100px;
}

#bereich-profil {
	height:auto;
	width:100%;
	padding:5% 0px 5% 0px;
	margin:0px;
}

#bereich-profil img {
	display: block;
	width: 550px;
	height: auto;
	margin: auto;
	margin-left:0;
	z-index: -2;
	position: relative;
	-webkit-box-shadow: 5px 5px 11px -4px rgba(89,89,89,0.8);
	-moz-box-shadow: 5px 5px 11px -4px rgba(89,89,89,0.8);
	box-shadow: 5px 5px 11px -4px rgba(89,89,89,0.8);
}

/** animiertes Bild (abgeschaltet)
#bereich-profil img {
	-webkit-animation-name: slide-img; /* Safari 4.0 - 8.0
	-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0
	animation-name: slide-img;
	animation-duration: 4s;
	animation-timing-function:ease-in-out;
	animation-fill-mode: forwards;
   animation-delay: 5s;
}

/* Safari 4.0 - 8.0 
@-webkit-keyframes slide-img {
  0%   {width:550px}
  100% {width:590px}
}

/* Standard syntax 
@keyframes slide-img {
  0%   {width:550px}
  100% {width:590px}
}
**/

#bereich-2 .block-text-01 {
	margin-left:20%;
	margin-bottom: 3%;
	margin-top: 3%;
	width:55%;
	display:block;
	position:relative;
	border:4px solid #fff;
	float:none;
	padding: 1% 1% 1.5% 2%;
	border-radius: 9px;
}

#bereich-2 .block-text {
	display:block;
	position:relative;
	float: left;
	width: 25%;
	margin: 1% 2% 1% 2%;
	padding: 1% 1% 1.5% 2%;
	-webkit-box-shadow: 30px 30px 40px -4px rgba(89,89,89,0.4);
	-moz-box-shadow: 30px 30px 40px -4px rgba(89,89,89,0.4);
	box-shadow: 30px 30px 40px -4px rgba(89,89,89,0.4);
	border-radius: 5px;
}

#bereich-2 img.zeichen-am-text{
	position:absolute;
	margin:-65px;
}

#bereich-2 .block-text-rahmen {
	display:block;
	position:relative;
	width: 75%;
	margin-left: 12.5%;
}

#bereich-3 img {
	float:left;
}

#bereich-3 .block-pfeil img {
	float: none;
}

#bereich-4 .block-zitat img {
	margin-top: -25px;
	float:right;
}

#bereich-4 .block-zitat img:first-child {
	float:none;
	margin-left: -55px;
	margin-bottom: -32px;
	margin-top: 0px;
}





.spalte-1-bereich-3 {
	float: left;
    width: 29%;
    margin-left: 11%;
    margin-right: 2%;
    padding: 0px;

}


.spalte-2-bereich-3 {
	float:left;
	width:29%;
	margin-left:2%;
	margin-right:16%;
	padding:0px;
}

.textfeld-b3 {
	width:100%;
	padding-left:0px;
	margin-bottom: 55px;
}

.textfeld-b3 img {
    margin-left: -45px;
    margin-bottom: -26px;
}


#bereich-4 .block-zitat {
	margin-left:27.5%;
	margin-bottom: 3%;
	margin-top: 35vh;
	width:45%;
	display:block;
	position:relative;
	border: none;
	float:none;
	padding: 0;
}

/**
#bereich-bild {
	background-image: url(images/bild-div-background.jpg);
	background-size: cover;
	background-repeat:no-repeat;
	height: 100vh;
	width:100%;
}
**/

	 
/**
#bereich-cv {
	background-repeat:no-repeat;
	background-position:top;
	min-height:300px;
	padding-top:70px;
}
**/

.cv-block-01 {
	width:35%;
	float:left;
	clear: left;
	margin-left:5%;
	padding-left: 203px;
	padding-top: 100px;
}

.cv-block-01 img {
	position: absolute;
	margin-left:-203px;
	margin-top: -80px;
	
}

.cv-block-02 {
	width:27%;
	float:left;
	margin-left:2%;
	margin-bottom:-40px;
	margin-top: -100px;
	width: 27%;
	position: relative;
}

.cv-block-02 img {
	-webkit-box-shadow: 15px 15px 21px rgba(126, 112, 90, 0.7);
	-moz-box-shadow: 15px 15px 21px rgba(126, 112, 90, 0.7);
	box-shadow: 15px 15px 21px rgba(126, 112, 90, 0.7);
}

.cv-block-03 {
    width: auto;
    float: left;
    margin-left: 200px;
    margin-bottom: 60px;
    background-color: #fff;
    padding: 1.5%;
    padding: 65px 1.5% 1.5% 1.5%;
	border-radius: 5px;
}

.dts-block-01 {
	width:69%;
	float: none;
	margin-left:5%;
	margin-bottom: 55px;
}

.block-zwischenimage {
	width:100%; 
	max-width:100%;
	overflow: hidden;
}

#impressum {
	clear:left;
	background: #fff;
	padding-top:70px;
	padding-bottom:80px;
	/**background-image:url(images/bg-imp-03.jpg);**/
	background-repeat:no-repeat;
	background-position: bottom;
}

#impressum-dts {
	background-image: url(images/tr-02.jpg);
	background-repeat: no-repeat;
	background-position: top;
	clear:left;
	background-color: #fff;
	padding-top:70px;
	padding-bottom:80px;
}

#bereich-dts {
	padding:0px;
	margin:0px;
}

.head-info-unterseite {
	padding-left: 5%;
	padding-top: 15px;
	margin-bottom: 30px;
}

img.image-end {
	max-width:450px;
	height: auto;
	display: block;
	margin:0 auto 5% auto;
	-webkit-box-shadow: 20px 20px 20px -4px rgba(89,89,89,0.5);
	-moz-box-shadow: 20px 20px 20px -4px rgba(89,89,89,0.5);
	box-shadow: 20px 20px 20px -4px rgba(89,89,89,0.5);
}


/* Typografie */

a, a:visited {
	color:#000;
	text-decoration:none;
}

a:hover, a:active, a:focus  {
	color:#000;
	text-decoration:underline;
}

#footer a, #footer a:visited {
	font-family:'source sans', sans-serif;
	color:#000;
	text-decoration:none;
	font-size:115%;
	letter-spacing:0.05em;
}

#footer a:hover, #footer a:active, #footer a:focus  {
	font-family:'source sans', sans-serif;
	color:#000;
	text-decoration:underline;
	font-size:115%;
	letter-spacing:0.05em;
}

#footer li {
	display: inline;
	margin-right:12px;
}

h1, h2, h3, h4, h5, p {
	margin:0px;
	padding:0px;
}

h1, h2 {
	padding-left: 19px;
	font-family:"Times New Roman", Times, serif;
	font-style:italic;
	font-size: 210%;
	font-weight:normal;
}

.head-info-unterseite h2 {
	padding-left: 0;
}

h3 {
	font-family:'source sans', sans-serif;
	margin-bottom:35px;
	font-weight: normal;
}

p, li {
	font-family:'source sans', sans-serif;
	font-weight:normal;
	letter-spacing:0.025em;
	font-size:19px;
	line-height:150%;
}

#impressum p, #impressum-dts p {
	margin-left:5%;
}

h4 {
	font-family:'source semi', sans-serif;
	font-size:135%;
	font-weight:normal;
	margin-bottom:0.5em;
}

h5 {
	font-family: 'source semi', sans-serif;
	font-size: 19px;
	font-weight: normal;
	margin-bottom: 0.5em;
}

ul, li {
	padding-left:0px;
}

#bereich-profil p, #bereich-cv p, #bereich-dts p, #bereich-profil br, #bereich-cv br, #bereich-dts br {
	margin-bottom: 1em;
}

.block-tel p {
	font-size:135%;
	text-align: center;
	padding-right: 4px;
	letter-spacing: 0;
}

p.claim-titel {
	color: #fff;
	font-size:400%;
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: normal;
	text-align: center;
}

#bereich-2 .block-text-01 p, #bereich-4 .block-zitat p {
	font-size:155%;
	line-height: 110%;
	/**font-family: "Times New Roman", Times, serif;
	font-family: "playfair";**/
	font-family: "AmiriWeb";
	font-weight: normal;
	text-align: left;
}

span.dots-claim {
	margin-left:1em;
	margin-right: 1em;
	vertical-align: 17px;
}

h3.h3-blockhead {
	float: none;
	letter-spacing:1em;
	padding-left: 85px;
	padding-top:85px;
}

/** Testweise Times Italic **/
h3.h3-blockhead {
    letter-spacing: 0.2em; 
	font-family: "Asap Regular";
    margin-bottom: 35px;
    font-weight: normal;
    font-style: normal;
	font-size: 29px;
}

#bereich-3 h3.h3-blockhead {
	margin-bottom: 85px;
}


#bereich-profil h3.h3-blockhead {
	padding-left: 5%;
	padding-top:160px;
}

#bereich-cv h3.h3-blockhead {
	float:none;
	padding-left: 5%;
	padding-top:15px;
	margin-bottom: 60px;
}

#impressum h3.h3-blockhead, #impressum-dts h3.h3-blockhead {
	float:none;
	padding-left: 5%;
	padding-top:15px;
	margin-bottom: 60px;
}

#bereich-dts h3.h3-blockhead {
	float:none;
	padding-left: 5%;
	padding-top:15px;
	margin-bottom: 60px;
}

#bereich-6 p, #bereich-6 h4, #bereich-6 h5, #bereich-6 ul {
	padding-left: 203px;
}


/** TEST TEST TEST TEST **/
#header {
	/**background-image:url(images/titel-01.jpg);**/
	background-size: cover;
	height:100vh;
	width:100%;
	padding:0px;
	margin:0px;
	background-position: inherit;
}

#header {
	background-repeat:no-repeat;
	box-sizing: border-box;
	-webkit-animation: slide 100s ease-in-out alternate; 
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
/**
@-webkit-keyframes slide {
    from { background-position: 0px 0; background-size:auto 100vh; }
    to { background-position: 0px 0px; background-size:auto 750vh;}
}**/


/** Abstand und Sichtbarkeit Elemente für Animation **/
#bereich-2 .fadeblock{
    opacity:0;
}

.fadeblock {
    opacity:0; 
}

#bereich-5 .fadeblock-bild {
    opacity:0; 
	margin-top:50px;
}






@media all and (max-width:1650px) {
#bereich-profil .block-text {margin-left: 25%;}
#bereich-2 .block-text-rahmen {width: 80%; margin-left: 10%;}
#bereich-2 h3.h3-blockhead {padding-top: 30px;}
.spalte-1-bereich-3, .spalte-2-bereich-3 {width: 25%;}
}

@media all and (max-width:1500px) {
p.claim-titel {font-size: 350%;}
span.dots-claim {margin-left: 0.5em; margin-right: 0.5em;}
}

@media all and (max-width:1450px) {
.cv-block-01 {padding-left: 120px;}
.cv-block-01 img {width:110px; height:auto; margin-left: -140px; margin-top: -40px;}
.cv-block-02 {width: 27%;}
.cv-block-02 img {width:100%; height: auto;}
.cv-block-03 {width: 27%; margin-left: 100px;}
#bereich-6 p, #bereich-6 h4, #bereich-6 h5, #bereich-6 ul {padding-left: 103px;}
}

@media all and (max-width:1350px) {
#bereich-2 .block-text-01 {margin-left: 12.5%; margin-bottom: 3em; width: 75%;}
}

@media all and (max-width:1250px) {
#header {background-position-x: -500px !important;}
.footer-navigation {font-size: 15px; letter-spacing: 0.2em;}
img.b3-schw {width:80px; height: auto;}
.spalte-1-bereich-3 {width: 30%; margin-left:18%;}
.spalte-2-bereich-3 {width: 30%;}
}

@media all and (max-width:1180px) {
p.claim-titel {font-size: 300%;}
span.dots-claim {margin-left: 0.25em; margin-right: 0.25em;}
#bereich-1 .block-pfeil {bottom: 7em;}
#footer {left: 9%;}
#bereich-2 {height: auto; max-height: none; padding-bottom: 4em;}
#bereich-2 .block-text-01 {margin-left: 10%; width: 76%;}
#bereich-2 .block-text {float: none; width: auto; margin: 1% 0 3em 0}
#bereich-4 .block-zitat {margin-left: 20%; margin-top: 30vh; width: 70%;}
}

@media all and (max-width:1075px) {
#titel {left: inherit; position: relative; 	background-image: url(images/ute-froitzheim-supervision-coaching-01b.png);}
.cnt-bereich-01 {padding-top: 2em;}
h3.h3-blockhead {float: none; padding-left: 2%;}
#bereich-1 .block-text {width: 75%; float: right; margin-right: 5vw;}
#bereich-2 img.zeichen-am-text {margin: -55px; width: 50px; height: auto;}
}

@media all and (max-width:965px) {
span.dots-claim {display: block; margin-top: -12px; margin-bottom: 12px;}
p.claim-titel {line-height: 90%;}
#bereich-2 .block-text {padding: 1em 1em 1em 1em;}
#bereich-3 {height: auto; max-width: none; padding-bottom: 4em;}
.spalte-1-bereich-3, .spalte-2-bereich-3 {width: auto; margin-left:2%; float: none; padding-left:100px; padding-right:80px;}
.spalte-2-bereich-3 {margin-right: 2%;}
.cv-block-01 {width: 70%; float: none; margin-bottom: 2em;}
.cv-block-02 {float:left; width: 40%; margin-top: 0; margin-left: 8%;}
.cv-block-03 {width: 30%; margin-left: -50px; margin-top: 17%; padding: 2% 1.5% 1.5% 80px;}
.dts-block-01 {width: 85%;}
}

@media all and (max-width:850px) {
h3.h3-blockhead {letter-spacing: 0.3em;}
#bereich-4 {-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}

@media all and (max-width:750px) {
.cv-block-03 {width: 39%; margin-left: -20px; padding-left: 40px;}
}

@media all and (max-width:610px) {
#titel {padding-top: 2em; background-image: url(images/ute-froitzheim-supervision-coaching-01c.png);}
.cv-block-01 {-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; padding-left: 0px; margin-left: 15%; padding-top: 25px;}
.cv-block-01 img {position: relative; width: 80px; height: auto; margin-left: -25px; margin-bottom: 20px;}
.cv-block-02 {float: none; width: 70%;}
.cv-block-03 {float: right; width: 60%; margin-left: 0; margin-right: 8%; padding: 1.5em 1.5em 1.5em 1.5em;}
.dts-block-01 {width: 70%; margin-left: 15%;}
#bereich-6 p, #bereich-6 h4, #bereich-6 h5, #bereich-6 ul {padding-left: 0px;}
}

@media all and (max-width:565px) {
#titel {left: 0; padding-top: 2em; height: 50vh;}
body {font-size:17px;}
#bereich-2 img.zeichen-am-text {margin: -50px auto auto -35px;}
#bereich-3 {-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}


@media all and (max-width:850px) {
#bereich-2 .fadeblock{opacity:1;}
.fadeblock {opacity:1;}
#bereich-5 .fadeblock-bild {opacity:1; 	margin-top:0px;}
}

@media all and (max-width:480px) {
h3.h3-blockhead {-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
.spalte-1-bereich-3, .spalte-2-bereich-3 {padding-left: 50px; padding-right: 30px;}
h3.h3-blockhead {letter-spacing: 0em;}
}

@media all and (max-width:465px) {
#bereich-4 .block-zitat {margin-left: 10%;width: 80%;}
#bereich-4 .block-zitat img {margin-top: 5px;}
#bereich-4 .block-zitat img:first-child {margin-left: 0px; margin-bottom: 5px;}
}

@media all and (max-width:400px) {.b3-schw {display: none;}
}

@media all and (max-width:350px) {
#titel {padding-top: 1em;}
h3.h3-blockhead {letter-spacing: 0.1em;}
}

@media all and (max-height:590px) and (orientation:landscape) {
#titel {padding-top:0em; margin-top:7vh;}
#bereich-1 .block-pfeil {bottom: 3.5em;}
}

@media all and (max-height:590px)  and (orientation:portrait) {
#titel {padding-top:0em; margin-top:7vh;}
#bereich-1 .block-pfeil {bottom: 6.5em;}
}

@media all and (orientation:landscape) and (max-width:1075px) {
#titel {padding-top: 2em; background-image: url(images/ute-froitzheim-supervision-coaching-01a.png);}
}