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

/* ----------------------------------------------------------------------------- *
 *                           Style by www.a-krueger.eu                           *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- * 
 * Colors

/* Dark mode */
:root.dark {
    --primary: #A64B4B;
    --secondary: #D99C9C;
	--third: #e8cdc2;
	--contrast-dark: #000000;
	--contrast-light: #F2E2DC;
    --background: #1a1a1a;
    --text: #808080;
	--btn-bg: #000000;
	--btn-border: #A64B4B;
	--btn-text: #A64B4B;
	--header-bg: #000000;
	--nav-bg: #000000;
	--border: #333333;
	--footer-bg: #000000;
	--footer-text: #808080;
	--container: #333333;
}

/* light mode */
:root.light {
    --primary: #A64B4B;
    --secondary: #D99C9C;
	--third: #e8cdc2;
	--contrast-dark: #000000;
	--contrast-light: #F2E2DC;
    --background: #1a1a1a;
    --text: #808080;
	--btn-bg: #000000;
	--btn-border: #A64B4B;
	--btn-text: #F2E2DC;
	--header-bg: #000000;
	--nav-bg: #000000;
	--border: #333333;
	--footer-bg: #000000;
	--footer-text: #808080;
	--container: #333333;
}

.gray333 {
	color: #333333;
}
.gray555 {
	color: #555555;
}

/* ----------------------------------------------------------------------------- *
 *                           Hero BG inkl. scrolldown                            *
 * ----------------------------------------------------------------------------- */

.hero {
	margin: 0 auto;
	height: 100%;
	width: 100%;
	background-image: url(../img/hero/logo_hero.jpg);
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
  	position: relative;
	overflow: hidden;
	display: block;
}

.hero-text {
  	text-align: center;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);	
}

.hero-text h3 {
  	font-family: "Roboto Condensed", sans-serif;
	font-size: 8.0em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.0em;
	margin-bottom: 2px;
}

.hero-text p {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.9em;
	letter-spacing: 0.2em;
	margin-top: 25px;
	text-align: center;
	text-transform:uppercase;
}

.scroll-down-container {
	margin: 0 auto;
	position: absolute;
	min-height: 46px;
	bottom: 0%;
  	left: 50%;
  	transform: translate(-50%, -0%);
	}


.bottom {
	height: 100%;
	text-align: center;
	position: relative;
	margin: 0 auto;
}

.scroll-down, .scroll-down i.fa,  .scroll-down i.far, .scroll-down i.fas, .scroll-down i.fab {
	font-size: 20px;
	padding-top: 13px;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	border: 1px solid transparent;
	background-color: transparent;
	color: #e8cdc2;
	z-index:1000;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%, -50%);
	position: absolute;
}

.scrolldown {
	position: absolute;
	z-index:1000;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 55px;
	width: 55px;
}

.button-down {
	position: relative;
	padding: 5px;
	margin: 30px auto;
	background: transparent;
	height: 50px;
	width: 50px;
	border-radius: 50%;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
	z-index:1000;
}

.button-down:hover {
  -webkit-transform: translate3d(0, 10px, 0);
          transform: translate3d(0, 10px, 0);
}
.button-down::after {
  content: "";
  position: absolute;
  left: 17px;
  z-index: 11;
  display: block;
  width: 25px;
  height: 25px;
  border-top: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
}
.button-down::after {
  top: 10px;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}

/* ----------------------------------------------------------------------------- *
 *                                 Buttons                                       *
 * ----------------------------------------------------------------------------- */

.btn {
	margin: 0;
	margin-top: 20px;
	margin-bottom: 30px;
	height: auto;
	text-align: center;
}

.btn-bar {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
}

.btn-group {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

button {
	margin: 0 auto;
	border-radius: 3px;
	outline: none;
  	padding: 5px 10px 5px 10px;
  	font-size: 14px;
  	font-family: "Open Sans", sans-serif;
  	cursor: pointer;
	min-width: 110px;
  	background-color: var(--btn-bg);
	color: var(--primary);
	border: 1px solid var(--primary);
}

button:hover {
	color: var(--secondary);
	border: 1px solid var(--secondary);
}

/* ----------------------------------------------------------------------------- *
 *                                  Parallax                                     *
 * ----------------------------------------------------------------------------- */

.parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: var(--nav);
	margin-top: 100px;
	padding-top: 120px; 
	padding-bottom: 120px;
}

.parallax h3 {
	color: var(--text);
	}

.parallax h2, h3, p {
	margin-left: 10px;
}
.moi {
	background-image: url(../img/moi/moi.jpg);
}

/* ---------------------------------------------------------------*/

.headline-large {
	padding: 80px 0 80px 0;
	background-color: var(--nav);
	color: var(--text);
	}



/* ----------------------------------------------------------------------------- *
 *                    Section Impressum & Datenschutz                            *
 * ----------------------------------------------------------------------------- */

.infos h3 {	
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	padding: 10px;
	color: var(--third);
	}

.infos h4 {
	font-size: 1.2em;
	text-align: left;
	padding: 10px;
	color: var(--third);
	}

.infos h5 {
	font-size: 1.0em;
	text-align: left;
	padding: 10px;
	color: var(--text);
	text-decoration: underline;
	}
		
.infos p {
	font-size: 1.0em;
	padding: 10px;
	}

.infos ul > li {
	font-size: 1.0em;
	}