@font-face { font-family: 'Open Sans';
             src: url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Open Sans';
             src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Open Sans';
             src: url('fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype'); font-weight: bold; font-display: swap; }

body {
	background:#000;
	margin: 0;
	font-size: 16px;
	font-family: 'Open Sans',sans-serif;
}

div { box-sizing: border-box; }

a { color: white; }
a:hover { color: #b60c3b; }

h1 { font-size: 1.3rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.0rem; }

@media(min-width:400px){
	h1 { font-size: 2rem; }
	h2 { font-size: 1.5rem; }
	h3 { font-size: 1.2rem; }
}

.nowrap { white-space: nowrap; }

#header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	min-height: 8rem;
}

.header-logo {
	height: 5rem;
	margin: .5rem 2rem;
}

.header-title {
	color: white;
	font-weight: medium;
	font-size: 2.5vw;
	padding: 0 100px 4px 2rem;
}

@media(min-width: 700px) {
	#header-title {
		flex-wrap: nowrap;
		min-height: 6rem;
		padding-left: 0;
	}
}

@media(min-width: 700px) {
	#header {
		flex-wrap: nowrap;
		min-height: 6rem;
	}
}


#section1,
#kontakt,
#impressum,
#datenschutz {
	width: 100%;
}

#section1 {
	height: 100vh;
}

#kontakt,
#impressum,
#datenschutz { 
	background: #eee; 
}

.content-wrapper {
	padding: 2rem;
	color: #000;
	border-top: 1px solid #ccc;
	word-wrap: break-word;
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.flex-item {
	padding-right: 2rem;
}

.content-wrapper a { color: black; }
.content-wrapper a:hover { color: #b60c3b; }

dl.contact-address dd { margin-left: 0; }

dl.dl-inline { padding: 0.5em; border: 1px solid #ccc; background-color: #ddd; border-radius: 5px; }
dl.dl-inline dt,
dl.dl-horizontal dt { overflow: visible; font-weight: bold; min-width: 290px; padding-right: 10px; }
@media(min-width:400px){
	dl.dl-inline dt,
	dl.dl-horizontal dt { clear: both; float: left; }
}
dl.dl-inline dd { overflow: visible; margin: 0; }
	dl.dl-inline.wide dt { min-width: 140px; }
dl.dl-inline.narrow dt { min-width: 100px; }
@media(min-width: 700px) {
	dl.dl-inline.wide dt { min-width: 350px; }
	dl.dl-inline.narrow dt { min-width: 220px; }
}
dl.dl-inline dd.ddwrap { white-space: normal; }
dl.contact-address dt { min-width: 70px; width: 70px; text-align: left; font-weight: normal; }

dl.no-border { border: 0; }
dt.nowrap { white-space: nowrap; }
dd.newline { margin: 0; }


#logo-div,
#address-div { 
	margin: auto;
	width: 100vw;
	text-align: center;
}
#logo-div { height: 50vh; }
#address-div { position: absolute; z-index:200; height: 40vh; }
#logo { width: 80vw; height: auto; max-height: 42vh; margin-top: 10vh; opacity: 0; }
#address { margin-top: 0.5rem; color: white; font-size: 1.2rem;  text-shadow: 4px 4px 4px #000000; opacity: 0; }

/* menu */

#menubutton { 
	position: fixed;
	top: 1.8rem;
	right: 1rem;
	background: #444;
	padding: .5rem;
	border-radius: 4px; 
	cursor: pointer;
	z-index: 1000;
}
#menubutton:hover,
#menubutton:active {
	background: #777;
}

.line { 
	display: block;
	width: 30px;
	max-width: 55px;
	height: 3px;
	margin: 3px;
	background: #fff; 
	border-radius: 2px;
}

.emaillabel::after {content: "ds-kies";}
.mpart1::after {content:"\40ub-weiss.com"}

@media(min-width: 700px) {
	.menubutton-home {
		top: .5rem !important;
		padding: 1rem !important;
	}
	.menubutton-home .line {
		width: 5.5vw;
		height: 4px;
		margin: .5rem;
	}
}

@media print {
	#menubutton { display: none; }
}

#menu { 
	position: fixed;
	top: 0;
	left: -100vw;
	z-index: 10000;
	width: 100vw;
	min-height: 23em;
	padding: 0 1rem 2rem 1rem;
	border-bottom: 1px solid #000;
	background-color: rgba(255,255,255,0.9);
	transition: left .5s;
}

#menu a { color: #000; }

#menu ul
{
	margin: 5rem auto 0 auto;
	padding: 0;
	list-style: none;
}

#menu ul li { 
	margin: 0;
	padding: 0 0.95rem;
	text-align: center;
	white-space: nowrap;
}

#menu ul li a
{
	display: block;
	color: #000;
	margin: 0;
	padding: 0.5rem 0 0.5rem 0.5rem;
	text-decoration: none;
	font-size: 2.5rem;
	border-bottom: 4px solid transparent;
}

#menu>ul>li:first-child { margin-left: 0; }

#menu ul li:first-child a { padding-bottom: .4rem; }

#menu ul li a:hover, 
#menu ul li a.current { color: #000; text-decoration: underline; }

#menu #x-close-wrapper { text-align: right; margin-top: 1em; }
#menu a.button-close
{
	position: absolute;
	top: .5rem;
	right: 1rem;
	text-align: center;
	text-decoration: none;
	font-family: mono-space;
	padding: .875rem 1.5rem;
	width: 5.5vw;
	max-width: 55px;
	background-color: #fff;
	font-size: 2.5rem;
	border-radius: 4px;
}
#menu a.button-close:hover { 
	color: #fff;
	background: #444;
	text-decoration: none; 
}
		
/* Ende menu */

/* footer */

.footer {
	background: #eee;
	padding: 2rem;
}

.footer-links a { color: #000; }
.footer-links a:hover { color: #b60c3b; }

/* Steine oben */

#stones {
	position: absolute;
	top: 0;
	width: 100vw;
	height: 100vh;
	text-align: center;
	opacity: 0;
}

#stein-1365 {
  position: absolute;
  left: 37.2vw;
  bottom: 2.9vw;
  width: 11.4vw;
  height: auto;
  z-index: 10;
}

#stein-1370 {
  position: absolute;
  left: 54.4vw;
  bottom: 4.8vw;
  width: 16.3vw;
  height: auto;
  z-index: 20;
}

#stein-1377 {
  position: absolute;
  left: 24vw;
  bottom: 2.1vw;
  width: 12.5vw;
  height: auto;
  z-index: 30;
}

#stein-1379 {
  position: absolute;
  left: 3.1vw;
  bottom: .6vw;
  width: 15.1vw;
  height: auto;
  z-index: 40;
}

#stein-1381 {
  position: absolute;
  left: 31.9vw;
  bottom: 2.1vw;
  width: 13.7vw;
  height: auto;
  z-index: 50;
}

#stein-1374 {
  position: absolute;
  left: 88.6vw;
  bottom: .4vw;
  width: 8.5vw;
  height: auto;
  z-index: 60;
}

#stein-1385 {
  position: absolute;
  left: 20.6vw;
  bottom: 2.4vw;
  width: 7.4vw;
  height: auto;
  z-index: 70;
}

#stein-1384 {
  position: absolute;
  left: 73.7vw;
  bottom: .5vw;
  width: 14.2vw;
  height: auto;
  z-index: 80;
}

#stein-1367 {
  position: absolute;
  left: 81.1vw;
  bottom: .4vw;
  width: 9.9vw;
  height: auto;
  z-index: 90;
}

#stein-1386 {
  position: absolute;
  left: 66.1vw;
  bottom: 1.1vw;
  width: 11.6vw;
  height: auto;
  z-index: 100;
}

#stein-1388 {
  position: absolute;
  left: 45.6vw;
  bottom: 1.6vw;
  width: 14.2vw;
  height: auto;
  z-index: 110;
}

#stein-1389 {
  position: absolute;
  left: 54.6vw;
  bottom: -0.5vw;
  width: 16.1vw;
  height: auto;
  z-index: 120;
}

#stein-1392 {
  position: absolute;
  left: 40.5vw;
  bottom: .3vw;
  width: 10.5vw;
  height: auto;
  z-index: 130;
}

#stein-1395 {
  position: absolute;
  left: 27.2vw;
  bottom: .3vw;
  width: 11.7vw;
  height: auto;
  z-index: 140;
}

#stein-1396 {
  position: absolute;
  left: 15.5vw;
  bottom: .8vw;
  width: 9.3vw;
  height: auto;
  z-index: 150;
}

#stein-1396-2 {
  position: absolute;
  left: 75.5vw;
  bottom: -0.8vw;
  width: 9.7vw;
  height: auto;
  z-index: 160;
}

#laststone {
  position: absolute;
  left: 11vw;
  bottom: -1vw;
  width: 9vw;
  height: auto;
  z-index: 170;
}