body {
	margin: 0px;
	font-family: helvetica neue;
	font-size: 15px;
	font-weight: lighter;
	line-height: 29px;
	color: #2a2a2a;
	letter-spacing: 1.5px;
	text-align: justify;
}

h1 {
	text-transform: uppercase;
	line-height: 40px;
	letter-spacing: 2px;
	text-align: center;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #1e1434;
	white-space: nowrap;
	overflow: visible;
	font-size: 65px;
}

h1:hover {
	-webkit-text-stroke: 1px #d1bb94;
}

h2 {
	text-transform: uppercase;
	font-size: 20px;
	line-height: 35px;
	letter-spacing: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: -160px 0 150px 0;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 0.7px #efeeee;}

h2:hover {
	-webkit-text-fill-color: #efeeee;
	-webkit-text-stroke: 0.7px #efeeee;	
	font-style: italic;
}

h3 {
	text-transform: uppercase;
	font-size: 155px;
	line-height: 35px;
	letter-spacing: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-text-fill-color: #1e1434;
	-webkit-text-stroke: 1px #1e1434;
	margin-bottom: -70px;
}

h3:hover {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #A2834D;
}

h4 {
	text-transform: uppercase;
	font-size: 155px;
	line-height: 35px;
	letter-spacing: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-text-fill-color: #A2834D;
	-webkit-text-stroke: 1px #A2834D;
	margin-bottom: 100px;
}

h4:hover {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #1e1434;
}

h5 {
	text-transform: uppercase;
	font-size: 32px;
	line-height: 3px;
	letter-spacing: 2px;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 1px #A2834D;
	margin-top: 100px;
	margin-right: 40px;
}

h6 {
	text-transform: uppercase;
	font-size: 25px;
	letter-spacing: 2px;
	text-align: left;
}

#space {
	padding-top: 1px;
} 

hr {
	border-width: 2px;
	width: 100px;
	color: #d1bb94;
	border: solid;
	margin-bottom: 55px;
	margin-top: 70px;
}

#raute01 {
	position: fixed;
	top: 200px;
	right: 0px;	
}

#raute02 {
	position: fixed;
	top: 500px;
	left: 0px;	
}

.raute03 {
	width: 150px;
	padding: 60px 0px;
}

#logo {
	position: fixed;
	top: 15px;
	left: 45px;
	height: 90px;
	z-index: 10;
}

#stripe {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 10px;
	width: 100%;
	background: #A2834D;
	z-index: 9;
}

#navi {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100px;
	width: 100%;
	background: transparent;
	display: inline-block;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-top: 25px;
}

#navi a {
	text-decoration: none;	
}

#navi b {
	color: #efeeee;
	letter-spacing: 4px;
	font-size: 12px;
	padding: 0px 35px;
}

#navi b:hover {
	color: #d1bb94;
}

#navi_bg {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 70px;
	width: 100%;	
	background: #A2834D;	
}

#content {
	position: absolute;
	top: 60px;
	left: 0px;
	margin: auto;
	width: 100%;
	height: auto;
}

.text {
    margin-left: auto;
    margin-right: auto;
	padding: 120px 370px 50px 370px;
	max-width: 1000px;	
	text-align: justify;
}

.text b {
	color: #c48488;
}

#content02 {
	position: absolute;
	top: 60px;
	left: 0px;
	margin: auto;
	width: 100%;
	height: auto;
}

#content02 img {
	width: 100%;
}

#handwerk {
	margin-top: -200px;
	padding-top: 20px;
	padding-bottom: 60px;
}

#news {
    margin-left: auto;
    margin-right: auto;
	min-width: 450px;
	max-width: 600px;
	padding-right: 280px;
}

.text_news {
	padding: 120px 620px 50px 620px;	
}

.text_news b {
	color: #c48488;
}

#menue {
	position: relative;
	top: 50px;
	left: auto;
	width: 80%;
	height: auto;
	margin: 0 auto;
}

#menue table {
	width: 100%;
	margin-bottom: 100px;
}

#menue td {
	width: 33%;
	vertical-align: top;
	text-align: center;
}

.menue {
	font-family: helvetica neue;
	font-size: 14px;
	font-weight: lighter;
	text-align: center;
	line-height: 20px;
	letter-spacing: 2px;
	word-spacing: -2px;
	color: #2a2a2a;
	padding: 10px 60px;
}

#menue a {
		text-decoration: none;
}

.menue2 {
	padding-top: 100px;
}

.menue3 {
	padding-top: 200px;
}

#header01 {
	margin-top: 100px;
}

#header {
	margin-bottom: -95px;
}

#header img, #header01 img {
	width: 100%;

}

#header img:hover, #header01 img:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
}

#hand {
	position: relative;
	padding-top: 0px;
	margin-left: -800px;
	margin-bottom: -150px;
	z-index: 10;
}

#werk {
	position: relative;
	margin-left: 650px;
	margin-bottom: 100px;
	margin-top: -150px;
	z-index: 10;
}

	#werk2 {
	display:none;
}

#footer {
	position: absolute;
	top: auto;
	left: 0px;
	margin: auto;
	margin-top: 80px;
	width: 100%;
	height: auto;
	background: #1d1a38;
}

#footer b {
	font-size: 14px;
} 

#footer table {
	font-family: helvetica neue;
	font-size: 16px;
	font-weight: lighter;
	line-height: 28px;
	color: #efeeee;
	width: 80%;
	margin: 50px 0 140px 100px;
}

#footer td {
	width: 33%;
	vertical-align: top;
	padding-left: 50px;
}

#footer table a {
	font-family: helvetica neue;
	font-size: 16px;
	font-weight: lighter;
	line-height: 20px;
	color: #efeeee;
	text-decoration: none;
}

#footer02 {
	position: absolute;
	top: auto;
	left: 0px;
	margin: auto;
	width: 100%;
	height: auto;
}

#footer02 img {
	width: 100%;
}

#footer02 img:hover {
	width: 100%;
    opacity: 0.6;
    filter: alpha(opacity=60);
}

#impressum {
	position: fixed;
	bottom: 5px;
	left: 15px;
	text-align: center;
}

#impressum a {
	color: #fff;
	font-size: 13px;
	text-decoration: none;	
}

.button {
	background: #1e1434;
	padding: 15px;
	color: #efeeee;
	text-decoration: none;
	line-height: 150px;
}

.button:hover {
	background: #A2834D;
}

.button2 {
	background: #A2834D;
	padding: 25px;
	color: #efeeee;
	text-decoration: none;
	line-height: 150px;
}

.button2:hover {
	background: #d1bb94;
}

/* Dropdown Button */
.dropbtn {
	color: #efeeee;
	font-size: 14px;
	font-weight: lighter;
	letter-spacing: 2px;
	text-decoration: none;
	padding-left: 30px;
	padding-right: 30px;
}

.dropbtn:hover {
	color: #d1bb94;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	vertical-align: top;
	display: inline-block;
	margin: auto 10x;
	}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  position: absolute;
  padding-top: 30px;
  min-width: 30px;
	font-size: 13px;
	display: none;
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: #1e1434;
	padding: 0 45px 0 45px;
	text-decoration: none;
	text-align: left;
	font-weight: bold;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {	
	color: #d1bb94;
	font-style: italic;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

.dropdown:active {border: 0px;}

/* Slideshow container */
#slideshow-container {
	position: relative;
	top: 80px;
	text-align: center;
	margin: 0;
	z-index: 0;
	padding: 0;
	padding-bottom: 100px;
}

img.slide {
	height: 600px;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
	position: absolute;
	top: -150px;
	left: 37%;
  cursor: pointer;
  user-select: none;
  z-index: 5;
 }

/* Position the "next button" to the right */
.next {
  padding-left: 210px;
}

.prev img, .next img {
	width: 70px;
  padding: 50px;
  margin-bottom: -80px;
    z-index: 5;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  color: #27c9e0;
  z-index: 4;
}


/* ============================= */
/*   RESPONSIVE DESIGN           */
/* ============================= */

/* Allgemein */
body {
    font-size: 18px;
    line-height: 1.7;
    text-align: left;
    word-break: break-word;
}

/* Bilder & Container passen sich an */
img {
    max-width: 100%;
    height: auto;
}

/* Navigation mobil */
@media (max-width: 900px) {
    #navi {
        display: none; /* Original-Navi verstecken */
    }

    /* Mobile Menü-Button */
    #mobile-nav-toggle {
        display: block;
        position: fixed;
        top: 15px;
        right: 20px;
        background: #A2834D;
        color: #fff;
        font-size: 24px;
        border: none;
        padding: 8px 14px;
        border-radius: 8px;
        z-index: 999;
    }

    /* Mobile Menü */
    #mobile-nav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 70%;
        height: 100vh;
        background: #1e1434;
        color: white;
        padding-top: 80px;
        text-align: center;
        z-index: 998;
        flex-direction: column;
        gap: 20px;
    }

    #mobile-nav a {
        color: #efeeee;
        font-size: 18px;
        text-decoration: none;
        display: block;
        padding: 6px 0;
    }

    #mobile-nav a:hover {
        color: #d1bb94;
    }
}

/* Texte & Abstände */
@media (max-width: 900px) {
    .text, .text_news {
        padding: 40px 20px;
    }

    h1 {
        font-size: 58px;
        line-height: 50px;
        margin-bottom: -45px;
        margin-top: 90px;
    }

    h2 {
        font-size: 26px;
        margin: 20px 0;
	-webkit-text-stroke: 0.7px #1e1434;
    }

    h3, h4 {
        font-size: 80px;
        line-height: 1;
        margin: 40px 0;
    }
    
    hr {
    	margin-bottom: 30px;
    }

    #menue table {
        display: block;
    }

    #menue td {
        display: block;
        width: 100%;
        margin-bottom: 50px;
    }


    #header01 img {
	width: 100%;
  height: 60%;
  object-fit: cover;        /* füllt den Bereich, schneidet überstehendes ab */
  object-position: 54% center;
    }
    
        #footer table, #footer td {
        display: block;
        width: 100%;
        padding: 0;
    }
    
    #footer table {
	margin-left: 0px;
    }
    
    #footer td {
    	margin-left: 20px;
    }

    #footer {
        text-align: center;
        padding-bottom: 50px;
    }
    
    #footer02 {
    z-index: 100;	
    }
    
    #footer02 img {
	width: 100%;
  height: 60%;
  object-fit: cover;        /* füllt den Bereich, schneidet überstehendes ab */
  object-position: 40% center;
    }
    
    .menue {
    	margin-bottom: -120px;	
    }
    
    #hand {
	position: relative;
	padding-top: 150px;
	margin-left: 0px;
	margin-bottom: -50px;
	z-index: 10;
}

	#werk {
	display:none;
}

	#werk2 {
	display: inline;
	position: relative;
	margin-bottom: -200px;
	z-index: 10;
}

	.handwerk_header {
	margin-top: 100px;	
	}
	
	#raute01 {
	z-index: 0;
	}

	#raute02 {
	z-index: 99;
	margin-left: -2px;
	}

img.slide {
	width: 100%;
	height: auto;
	z-index: 1;
	margin-bottom: -180px;
}

.prev, .next {
	position: absolute;
	top: -150px;
	left: 0;
  cursor: pointer;
  user-select: none;
  z-index: 5;
 }
    
.text {
	text-align:left;
}

.button2 {
  margin: 0 !important;
  margin-bottom: -40px !important;
  display: inline-block;
  width: auto !important;
    }
   

}

/* Smartphones kleiner als 500px */
@media (max-width: 500px) {
    h1 {
        font-size: 30px;
    }
    h3, h4 {
        font-size: 60px;
    }
    .button, .button2 {
        padding: 22px 30px;
        width: 70%;
        font-size: 24px;
        border: none;
        border-radius: 8px;
        margin: 30px;

}
    }