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

/* parisienne-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: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/parisienne-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-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: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-500 - 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: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-500italic - 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: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-600 - 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: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-600italic - 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: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-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: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-800 - 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: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-800italic - 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: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-900 - 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: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* playfair-display-900italic - 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: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/playfair-display-v40-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* nunito-200 - 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: 'Nunito';
  font-style: normal;
  font-weight: 200;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-200italic - 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: 'Nunito';
  font-style: italic;
  font-weight: 200;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-300 - 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: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-300italic - 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: 'Nunito';
  font-style: italic;
  font-weight: 300;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-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: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-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: 'Nunito';
  font-style: italic;
  font-weight: 400;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-500 - 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: 'Nunito';
  font-style: normal;
  font-weight: 500;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-500italic - 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: 'Nunito';
  font-style: italic;
  font-weight: 500;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-600 - 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: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-600italic - 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: 'Nunito';
  font-style: italic;
  font-weight: 600;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-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: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-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: 'Nunito';
  font-style: italic;
  font-weight: 700;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-800 - 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: 'Nunito';
  font-style: normal;
  font-weight: 800;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-800italic - 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: 'Nunito';
  font-style: italic;
  font-weight: 800;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-900 - 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: 'Nunito';
  font-style: normal;
  font-weight: 900;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-900italic - 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: 'Nunito';
  font-style: italic;
  font-weight: 900;
  src: url('/typo3conf/ext/sitepackage/Resources/Public/Fonts/nunito-v32-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--color-light-shades: #F5EFE6;
	--color-light-accent: #A7825F;
	--color-main-brand: #D4A657;
	--color-dark-accent: #333333;
	--color-dark-shades: #000000;
	
}

.mainbrand{
	background-color: var(--color-main-brand);
	color: var(--color-light-shades);
}

.light-shades{
	background-color: var(--color-light-shades);
	color: var(--color-dark-shades);
}

.dark-shades{
	background-color: var(--color-dark-shades);
	color: var(--color-light-shades);
}

.light-accent{
	background-color: var(--color-light-accent);
	color: var(--color-dark-shades);
}

.dark-accent{
	background-color: var(--color-dark-accent);
	color: var(--color-light-shades);

}

.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Playfair Display';
	color: var(--color-main-brand);
}

h2{
	font-size: 3em;
}

@media (max-width:768px){
	h2{
		font-size: 2em;
	}	
	
}

p{
	font-family: 'Nunito';
	font-size: 1.1em; 
	line-height: 1.5;
}

.btn-primary{
	background-color: var(--color-main-brand);
	border-color: var(--color-main-brand);
	color: var(--color-light-shades);
	
}

.btn-primary:hover{
	background-color: var(--color-light-shades);
	border-color: var(--color-light-shades);
	color:  var(--color-main-brand);
	
}

.padding-tb{
	padding-top: 15vh !important;
	padding-bottom: 20vh !important;
}


html, body{
	max-width: 100%;
	overflow-x: hidden;
}

/* HEADER VARIANTE 1 */

#headmenu1{
	border-bottom: .5px solid var(--color-dark-shades);
	padding-top: 3vh;
	display: flex;
	
	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);

}


@media (min-width:769px){
	#headmenu1{
		padding-top: 0;

	}
} 

#headmenu1 #logo{
	width: 15vw;
	float: left;
	padding: 2vh;

}


#headmenu1 #mainmenu{
	width: 85vw;
	float: left;	
	
}

@media (max-width:768px){
	#headmenu1 #logo{
		width: 60vw;
		float: left;
		padding: 2vh;
	}
	
	#headmenu1 #mainmenu{
		width: 40vw;
		float: left;	

	}	
}	 



#headmenu1 #mainmenu .container-fluid{
	justify-content: flex-end;
}


#headmenu1 .navbar{
	
}

#headmenu1 .navbar-nav{
	margin-right: 4vw;
}

#headmenu1 .navbar-brand{
	color: var(--color-main-brand);
}

#headmenu1 .nav-link{
	color: var(--color-light-shades);

	font-size: 1.2em;
}

#headmenu1 .nav-link:hover{
	color: var(--color-main-brand);	
}

#headmenu1 .offcanvas{
	color: var(--color-light-shades);
	background-color: var(--color-dark-shades);
	max-width: 70%;
}

#headmenu1 .offcanvas-logo{

}

#headmenu1 .offcanvas .nav-link:hover{
	color: var(--color-main-brand);	
}


#headmenu1 .offcanvas .dropdown-menu a{
	white-space: pre-wrap
}


#headmenu1 .offcanvas-logo{
	padding: 20px;

}

@media (max-width:768px){
	.navbar-dark .navbar-toggler-icon,
	.navbar-toggler-icon{
		filter: brightness(0) invert(1);
	}
}

@media (max-width:768px){
	.offcanvas .btn-close{
		filter: brightness(0) invert(1);
		opacity: 1; /* Bootstrap dimmt es sonst */
	}
}


/* ENDE HEADER VARIANTE 1 */


/* HEADSLIDER */

#headslider{
	position: relative;
	height: 80vh;
	overflow: hidden;
}

#headslider .image-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(000,000,000,0) 0%, rgba(000,000,000,1) 100%);
  pointer-events: none; /* Damit es keine Klicks blockiert */
}

#headslider img{
	width: 100%;
	height: auto;
	animation: shrink 10s ease-out forwards;

}

@keyframes shrink {
      0% {
        transform: scale(1.1); /* Bild startet größer */
      }
      100% {
        transform: scale(1); /* wird kleiner beim Laden */
      }
    }

#headslider .carousel-caption{
	position: absolute;
	top: 5vh;
	left: 5vw;
	text-align: left;
	height: 60vh;
	padding-left: 1vw;
	width: 60vh;
	
}

#headslider .carousel-caption h1{
	font-size: 6em;
	font-weight: 100;
	text-transform: uppercase;
	color: var(--color-main-brand);
	line-height: 1em;
	margin-bottom: 5vh;
}

#headslider .carousel-caption h5{
	font-family: 'Parisienne';
	font-size: 3em;
}

#headslider .carousel-caption .btn{
	margin-top: 5vh;
}


#headslider .carousel-control-prev, #headslider .carousel-control-next{
	width: 5%;
} 



@media (max-width:768px){
	#headslider{
		height: auto;
		min-height: unset;
		overflow: visible;
	}
	
	#headslider .image-overlay{
		display: none;
	}
	
	#headslider .carousel-inner{
		height: auto;
		min-height: unset;
		overflow: visible;
	}
	
	
	#headslider .carousel-caption{
		position: static;
		top: 5vh;
		padding-left: 10vw;
		text-align: left;
		height: auto;
		width: 80vw;

	}
		
	#headslider .carousel-caption h1{
		font-size: 3em;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--color-main-brand);
	}
	
	#headslider .carousel-caption h5{
		font-family: 'Parisienne';
		font-size: 2em;
	}
	
	
}


/* ENDE HEADSLIDER */


/* WELCOME */
#welcome .pic{
	padding: 10vw;
	position: relative;
	padding-bottom: 30vw;
}

@media (max-width:768px){
	#welcome .pic{
		padding: 2vw;
		min-height: 50vh;
	}
}

#welcome .pic1{
	position: absolute;
	width: 50%;
	top: 10vh;
	left: 10vw;
}

@media (max-width:768px){
	#welcome .pic1{
		top: 0;
	}
}

#welcome .pic1 img{
	width: 100%;
	height: auto;
}

#welcome .pic2{
	position: absolute;
	width: 50%;
	top: 20vh;
	left: 20vw;
}

@media (max-width:768px){
	#welcome .pic2{
		top: 10vh;

	}
}

#welcome .pic2 img{
	width: 100%;
	height: auto;
}

#welcome .text{
	padding: 10vh;
}

@media (max-width:768px){
	#welcome .text{
		padding: 2vh;
	}
}


/* ENDE WELCOME */


/* LEISTUNGEN */

#leistungen{
	padding: 10vh;
}

@media (max-width:768px){
	#leistungen{
		padding: 2vh;
	}
}

#leistungen .headline{
	padding: 2vh;
}

#leistungen .headline h2{
	color: var(--color-dark-accent);
}

#leistungen .leistung{
	padding: 2vh;
	position: relative;
}

#leistungen .leistung-inner{
	position: relative;
}

#leistungen .leistung-inner h2{
	font-size: 4em;
}

#leistungen .leistung-inner p{
	font-size: 2em;
	color: var(--color-light-shades);
}

@media (max-width:768px){
	#leistungen .leistung-inner h2{
		font-size: 2em;
	}

	#leistungen .leistung-inner p{
		font-size: 1em;
	}
}

#leistungen .leistung-inner img{
	width: 100%; 
	height: auto;
}

#leistungen .leistung-inner .leistung-overlay{
	position: absolute;
	top: 2vh;
	bottom: 2vh;
	left: 2vh;
	right: 2vh;
	text-align: center;
	border: 2px solid var(--color-main-brand);
	background-color: rgba(0,0,0,0.20);
	opacity: 0;
	transition: opacity 1s ease;
	padding: 5vh;
}

@media (max-width:768px){
	#leistungen .leistung-inner .leistung-overlay{
		opacity: 1;
	}
}

#leistungen .leistung-inner:hover .leistung-overlay{
	opacity: 1;
	transition: opacity 1s ease;
}


/* ENDE LEISTUNGEN */


/* REZENSIONEN */
#rezensionen{
	padding: 12vh;
}

@media (max-width:768px){
	#rezensionen{
		padding: 2vh;
	}
}


#slider-rezensionen{
	position: relative;

}


#slider-rezensionen .carousel-item{
	padding: 10vh;

}

@media (max-width:768px){
	#slider-rezensionen .carousel-item{
		padding: 2vh;

	}
	
}

#slider-rezensionen .carousel-item .text{
	text-align: center;
	padding: 10vh;
	padding-top: 0;
}


@media (max-width:768px){
	#slider-rezensionen .carousel-item .text{
		padding: 2vh;
	}
}

#slider-rezensionen .carousel-item .text img{
	width: 20%;
	height: auto;
}


#slider-rezensionen .carousel-item .pic img{
	width: 100%;
	height: auto;

}


#slider-rezensionen .carousel-control-prev, #slider-rezensionen .carousel-control-next{
	width: 5%;
} 

#slider-rezensionen .carousel-control-prev-icon,
#slider-rezensionen .carousel-control-next-icon{
	filter: brightness(0) saturate(100%);
}



@media (max-width:768px){
	#slider-rezensionen{
		
	}
	
	#slider-rezensionen img{
		width: 220%;
	}
	
	#slider-rezensionen .carousel-caption h1{
		font-size: 3em;
		font-weight: 700;
		text-transform: uppercase;
		color: var(--color-main-brand);
	}
	
	
}


/* ENDE REZENSIONEN */


/* SALON */
#salon{
	padding: 10vh;

}

@media (max-width:768px){
	#salon{
		padding: 2vh;

	}
}

#salon .text{
	padding: 10vh;
	padding-left: 20vh;
	
	z-index: 10;
}

@media (max-width:768px){
	#salon .text{
		padding: 2vh;

	}
}

#salon .pic{
	position: relative;
	
	z-index: 100;
}

@media (max-width:768px){
	#salon .pic{
		overflow: hidden;
	}
}

#salon .salonpic{
	position: relative;
	top: 10vh; 
	left: 10vh;
}

#salon .salonpic:nth-of-type(2){
	position: relative;
	top: 0vh; 
	left: 0vh;
}

#salon .salonpic:nth-of-type(3){
	position: relative;
	top: -5vh; 
	left: 15vh;
}

@media (max-width:768px){
	#salon .salonpic:nth-of-type(3){
		position: relative;
		top: -5vh; 
		left: 5vh;
	}

}

#salon .pic .salonpic img{
	width: 100%;
	height: auto;
}

/* ENDE SALON */


/* ZITAT */
#quote{
	position: relative;
}

#quote .background{
	overflow-x: hidden;
}

#quote .background img{
	width: 100%;
	height: auto;
	
}

@media (max-width:768px){
	#quote .background img{
		width: 300%;
		height: auto;

	}
}


#quote .quotetext{
	position: absolute;
	top: 20vh;
	right: 10vw;
	width: 40vw;
	font-family: 'Playfair Display';

	
}

#quote .quotetext .quotetext-text{
	font-size: 2.5em;
	
}


#quote .quotetext .quotetext-person{
	font-size: 1.5em;
	text-align: right;
	
}

@media (max-width:768px){
	#quote .quotetext{
		top: 20vh;
		right: 10vw;
		width: 80vw;
		background-color: rgba(255,255,255,0.5);
		padding: 5vh;

	}
	
	#quote .quotetext .quotetext-text{
		font-size: 1.5em;

	}


	#quote .quotetext .quotetext-person{
		font-size: 1.0em;
		text-align: right;

	}
}

/* ENDE ZITAT */


/* ABOUT */
#about{
	padding: 10vh;

}

@media (max-width:768px){
	#about{
		padding: 2vh;

	}
}

#about .text{
	padding: 10vh;
	padding-right: 20vh;
	
	z-index: 10;
}

@media (max-width:768px){
	#about .text{
		padding: 2vh;
	}
}

#about .pic{
	position: relative;
	
	z-index: 100;
}

#about .aboutpic{
	position: relative;
	top: 10vh; 
	right: 10vh;
	transform: rotate(45deg);
	overflow: hidden;
}
	
	@media (max-width:768px){
		#about .aboutpic{
			right: 0vh;

		}
	}

#about .aboutpic img{
	transform: rotate(-45deg);
	width: 100%;
	height: auto;
}

/* ENDE ABOUT */

/* FOOTER */

#footer{
	padding: 10vh;
}

#footer h4{
	opacity: .6;
}

#footerlogo img{
	margin-left: 60%;
	width: 40%;
	height: auto;
	
}

@media (max-width:768px){
	#footerlogo img{
		width: 100%;
		margin: 0;
		padding: 10%;
		height: auto;

}

}

#footer #kontakt .kontaktitem{
	margin-top: 2vh;
}

#footer #kontakt .pic{
	filter: invert(67%) sepia(35%) saturate(582%) hue-rotate(359deg) brightness(95%) contrast(90%);
}

#footer #kontakt .text{
	font-size: 1.8em; 
	font-weight: 700;
	margin-left: 1vw;
}

@media (max-width:768px){
	#footer #kontakt .text{
		font-size: 1.2em; 
	}
}

#footer .pic img{
	width: 100%;
	height: auto;
}

#footer .footeritem{
	margin-top: 10vh;
}

#footer .trenner{
	margin-top: 10vh;
}

#footer #footersocials{
	
}

#footer #footersocials img{
	width: 25%;
	height: auto;
	float: left;
	filter: brightness(0) saturate(100%) invert(99%) sepia(3%) saturate(128%) hue-rotate(61deg) brightness(113%) contrast(100%);
}

#footer #footerimprint{
	text-align: right;
	
}

#footer #footerimprint a{
	text-decoration: none;
	color: var(--color-light-shades);
}

#footer #footerimprint a:hover{
	color: var(--color-main-brand);
}

@media (max-width:768px){

	
	#footer #footersocials{
		margin-top: 5vh;
	}
	
	#footer #footerimprint{
		margin-top: 5vh;
	}
}

/* ENDE FOOTER */