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

body{
	font-family: 'Bodoni', sans-serif;

	width:100vw;
	overflow-x: hidden;

}

h1{
	color: #f5f2e8;
	font-size:  calc(3.5rem + 0.9vw);
	text-transform: uppercase;
	font-weight: bolder;
}

h2{
	color: rgba(17,63,63,1);
	text-transform: uppercase;
	font-size:  calc(2.325rem + 0.9vw);
	padding-left: 1.15em;
	font-weight: bolder;
}


p, nav{
	font-family: 'Frutiger LT Pro', sans-serif;
	font-size: calc(.8rem + 0.1vw);
	padding: 0 2em 0 2em;
	margin-bottom: 0;
}

ul li{
	font-family: 'Frutiger LT Pro', sans-serif;
	font-size: calc(.8rem + 0.1vw);
	list-style:none;
}

.dreispaltig ul{
	max-width:90%;
	margin-left: 30px;
}

.dreispaltig ul li::before {
    content: '' !important;
    color: #fff;
    background-image: url(../Bilder/pfeil-icon.svg);
    background-size: 90%;
	background-repeat: no-repeat;
	background-position: 0 55%;
    display: inline-block;
    height: 15px;
    width: 20px;
    margin: 0 10px -0.1rem -1.9rem;
}

.navbar-nav{
	text-transform: uppercase;
	
}

.navbar-nav .nav-link:hover{
	color:rgba(17,63,63,1);

}

.navbar-nav .nav-link{
	color:rgba(17,63,63,.7);
}

.white{color:#f5f2e8;}

.container-fluid{
	padding-left:0;
	padding-right:0;
	max-width: 1740px;
	margin-left:auto;
	margin-right:auto;
	position: relative;
}



.row{
	padding: 5em 0 0 0;
	
}

.row-inline{padding: 0 0 0 0!important;margin-left:0;
	margin-right:0;}

.col-md-6{
	padding-left: 0;
	padding-right: 0;
}

.col-md-3{
	padding-left: 0;
	padding-right: 0;
}

.col-md-12{
	padding-left: 0;
	padding-right: 0;
}

.col-lg-12{
	padding-left: 0;
	padding-right: 0;
}


.zweispaltig{padding-top: 2em; padding-left:3em;padding-right:5em;}

.dreispaltig{padding-top: 2em; padding-left:3em;padding-right:1em; position: relative;}

.impressum{
	padding-left: 3em;
	padding-right: 4em;
}

/* HEADER */

.header-top{  
  height: 55vh;          
  overflow: hidden;
  position: relative;
}

.header-top img{
	width:100%;
	height: auto;
	display: block;
	transform: scale(1.2);
    transform-origin: top top;
}

.header-top-headline{
	width:100%;
	position:absolute;
	top:25%;
	text-align: center;
	color:#f5f2e8;
	font-weight: bolder;
}

.farbig-2{
	color: rgba(17,63,63,1);
	font-family: 'Bodoni', sans-serif;
	font-size:3em;
	text-transform: uppercase;	
}

.farbig-3{
	color: rgba(17,63,63,.6);
	font-family: 'Frutiger LT Pro', sans-serif;
	font-size: 1.3em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* HEADER END */

/* CONTENT */



.luftig{
	color:#f5f2e8;
	text-transform: uppercase;
	padding: 0em 1em 0 0.5em;
}

.ernst{
	color: rgba(17,63,63,1);
	text-transform: uppercase;
	padding: 0em 1em 0 0.5em;
}

h3{
	color:rgba(17,63,63,.4);
	font-family: 'Frutiger LT Pro', sans-serif;
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: bolder;
	padding: .1em 2em .5em 3.4em;
	letter-spacing: 0.08em;
}

h4{
	color:rgba(17,63,63,1);
	font-family: 'Frutiger LT Pro', sans-serif;
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: bolder;
	padding: 1.5em 0 .5em 1.5em;
	letter-spacing: 0.08em;
}

.text{
	padding-left:2em;
}

.bild-links{
	padding:0;
	overflow:hidden;
}

.bild-links img{
	height:100%;
}

.text-rechts{
	padding: 3.5em 3em 0 0.8em;
}

.text-links{
	padding: 4em 0 0 .5em;
	position: relative;
}

.textfeld-1{
	background-color:rgba(17,63,63,.1);
	padding:3.5em 3em;
	color:#030303;
	
}

.textfeld-2{
	background-color:rgba(17,63,63,.2);
	padding:3.5em 3em;
	color:#030303;
}

.textfeld-3{
	background-color:rgba(17,63,63,.4);
	padding:3.5em 3em;
	color:#030303;
}

.textfeld-4{
	background-color:rgba(17,63,63,.8);
	padding:3.5em 0em;
	color:#030303;
	display:flex;
	align-items: center;
	justify-content: center;
}

.textfeld-4 img{width:40%}

.textfeld-5{
	background-color:#f5f2e8;
	padding:3.5em 0;
	color:#030303;
	
}

.textfeld-6{
	background-color:rgba(17,63,63,1);
	padding:2em 3em;
	color:rgba(17,63,63,1);
}

.textfeld-6 a{color:#f5f2e8;text-decoration:none;padding:0 .5em;}
.textfeld-6 a:hover{color:#ccc;}

.textfeld-beratung{
	overflow:hidden;
	background-color:rgba(17,63,63,.2);
	padding:12em 3em 10em 3em;
	color:#030303;
	position: absolute;
	right: -.7em;
}

.textfeld-roadtrip{
	background-color:#f5f2e8;
	padding:3.5em 0;
	color:#030303;
	
}

.textfeld-schwan{
	background-color:#f5f2e8;
	padding:3.5em 0;
	color:#030303;
	display: flex;
	align-items: center
	
}

.bild-quadrat {overflow:hidden;}

.bild-quadrat img{
	height:100%;
}

.bild-franzi {overflow:hidden;}

.bild-franzi img{
	height:100%;
}

.autogram{
	width: 22%;
	position: absolute;
	top: 92%;
	left: 67%;
}

.kontakt{
	background-color:#f5f2e8;
	color:rgba(17,63,63,1);
	padding: 10px 20px;
	border-color: rgba(17,63,63,1);
	font-family: 'Frutiger LT Pro', sans-serif;
	text-transform: uppercase;
	border-radius: 2.5px;            
    font-size: 16px;               
    cursor: pointer; 
	transition: background-color 0.3s, color 0.3s;
	margin-left: 1.8em;
	letter-spacing: 0.08em;
}

.kontakt:hover{
	background-color: rgba(17,63,63,1);
	color: #f5f2e8;
	padding: 10px 20px;
	border-color: rgba(17,63,63,1);
	font-family: 'Frutiger LT Pro', sans-serif;
	text-transform: uppercase;
	border-radius: 2px;            
    font-size: 16px;  
}

.phone-link{
	color: rgba(17,63,63,1);
}
	
.farbig-1{
	color: rgba(17,63,63,1);
}

.bild-trenner{
	position: relative;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow: hidden;
	}

.bild-trenner img{
	width:100vw;
	}

.zitat-franzi{
	font-family: 'Frutiger LT Pro', sans-serif;
	color: rgba(17,63,63,1);
	font-size: 2em;
	position:absolute;
	text-transform: uppercase;
	margin-top:5%;
	letter-spacing: 0.08em;
	/* margin: 100px 100px 100px 100px;
	
	
	top:20%;
	left:23%; */

}

.zitat{
	font-family: 'Frutiger LT Pro', sans-serif;
	color: rgba(17,63,63,1);
	font-size: 2em;
	margin: 100px 100px 100px 100px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.textfeld-7{
	background-color:rgba(17,63,63,.8);
	display:flex;
	justify-content: center;
	align-items: center;
	
}

.textfeld-7 img{
	width: 70%;
	margin-top:15%;
}


.bild-bottom{
	overflow: hidden;	
	position:relative;
}

.overlay-60 {
	background-color:rgba(17,63,63,.7);
	position: absolute;
	height:100%;
	width:50%;
	right:0;
}

	.impressum{
		padding-left: 2em;
		padding-right: 2em;
	}
	
	.impressum .ueberschrift{
		padding: 2em 0 0 .5em;
	}

	.impressum .haftung{
		padding: 0 0 0 1.5em;
	}

@media (max-width:992px) {
	
	.navbar-toggler{
		border-color: rgba(17,63,63,.1);
	}
	
	.header-top{
		height: auto;
	}
	
	.row{
		padding: 3em 0 0 0;
	}
	
	.header-top-headline{
		top:15%;
	}
	
	h1{
		font-size:  calc(2.5rem + 0.9vw);
	}
	
	h2{
		font-size:  calc(2rem + 0.9vw);
		padding-left: 1.7em;
	}
	
	h3{
		font-size: 1.5em;
		padding: .1em 2em .5em 2.8em;
		letter-spacing: 0.08em;
	}
	
	h4{
	font-size: 1.1em;
	font-weight: bolder;
	padding: 1.5em 0 .5em 1.6em;
	letter-spacing: 0.08em;
}
	
	.farbig-2{
		font-size: 2em;	
	}
	
	.farbig-3{
		margin-top: -.5em;
		font-size:1em;
	}
	
	.bild-links img{
		width: 100%;
		height:550px;
		object-fit: cover;
	}
	
	.zweispaltig{
		padding-top: 2em; 
		padding-left:3.1em;
		padding-right:5em;
	}
	
	.dreispaltig{
		padding-top: 2em; 
		padding-left:3.1em;
		padding-right:1em;
	}

	
	.kontakt{
		margin-top: 2em;
		margin-left: 1.6em;
		letter-spacing: 0.08em;
	}
	
	.zitat-franzi{
		font-size:  calc(1rem + 0.9vw);
		letter-spacing: 0.08em;
	}
	
	.bild-trenner img{
		width:100vw;
		height:350px;
		object-fit: cover;
	}
	
	.bild-quadrat img{
	height:100%;
	}
	
	.zitat{
		font-size:  calc(1rem + 0.9vw);
		letter-spacing: 0.08em;
	}
	
	.luftig{
		padding: 0em 1em 0 .7em;
	}

	.ernst{

		padding: 0em 1em 0 .7em;
	}
	
	.textfeld-4 img{
		width:30%;
	}
	
	.textfeld-7 img{
	width: 100%;
	margin-top:20%;
}
	
	.autogram{
	position: absolute;
	width: 22%;
	top: 92%;
	left: 25%;
	}
	
	.textfeld-beratung{
    position:relative;
	padding:12em .5em 10em .5em;
 
	}
	
	.bild-bottom{
		height:250px;
	}
	
	.impressum{
		padding-left: 2em;
		padding-right: 2em;
	}
	
	.impressum .ueberschrift{
		padding: 2em 0 0 .7em;
	}

	.impressum .haftung{
		padding: 0 0 0 1.1em;
	}
	
}

@media (max-width:768px) {
	
	.navbar-toggler{
		border-color: rgba(17,63,63,.1);
	}
	
	.header-top{
		height: auto;
	}
	
	.row{
		padding: 2em 0 0 0;
	}
	
	.header-top-headline{
		top:15%;
	}
	
	h1{
		font-size:  calc(1.8rem + 0.9vw);
	}
	
	h2{
		font-size:  calc(1.8rem + 0.9vw);
		padding-left: 1.8em;
	}
	
	h3{
		font-size: 1.2em;
		padding: .1em 2em .5em 3.4em;
		letter-spacing: 0.07em;
	}
	
	h4{
		font-size: 1.1em;
		letter-spacing: 0.07em;
	}
	
	.farbig-2{
		font-size: 1.7em;	
	}
	
	.farbig-3{
		margin-top: -.8em;
		font-size:.8em;
	}
	
	.bild-links img{
		width: 100%;
		height:350px;
		object-fit: cover;
	}
	
	.zweispaltig{
		padding-top: 2em; 
		padding-left:3.1em;
		padding-right:5em;
	}
	
	.dreispaltig{
		padding-left:3em;
		padding-right: 1em;
		padding-bottom: .5em;
	}
	
	.autogram{
		width: 27%;
		top: 91%;
		left: 30%;
	}
	
	
	.kontakt{
		margin-top: 2em;
		margin-left: 1.6em;
		letter-spacing: 0.07em;
	}
	
	.zitat-franzi{
		padding: 0 2.5em 0 2.5em;
		font-size:  calc(1rem + 0.9vw);
		letter-spacing: 0.07em;
	}
	
	.bild-trenner img{
		width:100vw;
		height:350px;
		object-fit: cover;
	}
	
	.textfeld-5{
	padding:3em 3em 3em 3em;
	
	}
	
	.zitat{
		font-size:  calc(1rem + 0.9vw);
		letter-spacing: 0.07em;
	}
	
	.textfeld-schwan {
  		padding-left:1em;
	}
	
	.textfeld-roadtrip{
		
		padding-left:1em;
	}
	
	.luftig{
		padding: 0em 1em 0 .7em;
	}

	.ernst{

		padding: 0em 1em 0 .7em;
	}
	
	.textfeld-4 img{
		width:25%;
	}
	
	.textfeld-6{
	padding:2em 3em 2em 3em;
	}
	
	.textfeld-7 img{
	width: 40%;
	margin-top:8%;
	}
	
	.bild-bottom{
		height:200px;
		object-fit: cover;
	}
	
	.textfeld-beratung {
    position:relative;
	padding:4em 0em 5em 0em;
	}
	
	.impressum{
		padding-left: 2em;
		padding-right: 2em;
	}
	
	.impressum .ueberschrift{
		padding: 2em 0 0 .8em;
	}

	.impressum .haftung{
		padding: 0 0 0 1.4em;
	}
	
}


@media (max-width:576px) {
	
	.navbar-toggler{
		border-color: rgba(17,63,63,.1);
	}
	
	
	
	.header-top{
		height: auto;
	}
	
	.row{
		padding: 1.5em 0 0 0;
	}

	
	.header-top-headline{
		top:15%;
	}
	
	.row-inline {
    padding: 0 0 0 0 !important;
    margin-left: unset;
    margin-right: unset;
	}
	
	p{
	font-size: calc(.8rem + 0.1vw);
	padding: 0;
	}
	
	h1{
		font-size:  calc(1rem + 0.9vw);
	}
	
	.dreispaltig ul{
	max-width:90%;
	margin-left: 0;
	}
	
	.farbig-2{
		font-size: .8em;	
	}
	
	
	.farbig-3{
		margin-top: -1.2em;
		font-size: .4em;
	}

	.bild-links img{
		width: 100%;
		height:270px;
		object-fit: cover;
	}
	
	h2{
		font-size:  calc(1.5rem + 0.9vw);
		padding-left: 1.3em;
	}
	
	h3{
		font-size: 1em;
		padding: .1em 2em .5em 2.4em;
		letter-spacing: 0.06em;
	}
	.zweispaltig{
		padding-top: 2em; 
		padding-left:3em;
		padding-right:5em;
	}
	
	.dreispaltig{
		
		padding-left:3em;
		padding-right: 3.5em;
	}
	
	.textfeld-schwan {
  		padding-left:1em;
	}
	
	.textfeld-roadtrip{
		
		padding-left:1em;
	}
	.textfeld-beratung{
		padding:5em 3em 5em 3em;
		right:0;
	}
	
	h4{
		font-size: 1em;
		padding: 0 0 1em 0;
		letter-spacing: 0.06em;
	}
	
	.kontakt{
		margin-top: 2em;
		margin-left: 0;
		letter-spacing: 0.06em;
	}
	
	.textfeld-4 img{
		width:30%;
	}
	
	.textfeld-5{
	padding:3em 3em 3em 3.5em;
	
	}
	
	.textfeld-7 img{
		width: 50%;
		margin-top:9%;
	}
	
	.autogram{
		width: 30%;
		top: 101%;
		left: 12%;
	}

	.bild-trenner img{
		width:100vw;
		height:230px;
		object-fit: cover;
	}

	.zitat-franzi{
		font-size: 1em;
		letter-spacing: 0.06em;
	
	}
	
	.zitat{
		font-size: 1em;
		letter-spacing: 0.06em;
	}
	
	.luftig{
		padding: 0em 1em 0 0;
	}

	.ernst{

		padding: 0em 1em 0 0;
	}
	
	.impressum{
		padding-left: 3em;
		padding-right: 3em;
	}
	
	.impressum .ueberschrift{
		padding: 2em 0 0 0;
	}

	.impressum .haftung{
		padding: 0 0 0 0;
	}
	
}