* {padding: 0; margin: 0; 
	font: 0.99em "Fira Sans", sans-serif;
	box-sizing: border-box; 
	font-weight: inherit;
	font-style: inherit;
	text-decoration: inherit;
} 

:root {
	--my-fg-color: #222;
	--my-bg-color: #bbb;
}
body {background-color: #eee; 
	color:var(--my-fg-color);
/*	scroll-snap-type: y mandatory;  */
/*	scroll-padding-top: 70px;   */
	margin: 0;
	height: 100%;}

/*
html {scroll-snap-type: y mandatory;
	scroll-padding-top: 70px;}
*/

#container {/*background: url(/bilder/whitepixel.png) 260px 0px repeat-y;*/
	max-width: 960px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: var(--my-bg-color); 
	border-radius: 25px;
	padding: 0;
}
* html #container {w\idth: 1060px;}

.no_underline {text-decoration: none}

/*************************************************/

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /*background-color: var(--my-bg-color); */
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  height: 50px;
  padding: 30px 20px;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 40px 20px 0px 20px;
  padding: 20px 0;
  text-decoration: none; 
  font-weight: 500;
}

.submenu {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  /*margin: 70px 20px 20px 20px;*/
  padding: 0px 0;
  font-weight: 400;

}


.menu > li {
  margin: 0 1rem;
  overflow: hidden;
}

.submenu > li {
  margin: 3px 1rem;
  overflow: hidden;
  text-decoration: none
}


.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: var(--my-fg-color);
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0;
  transform: rotate(-405deg);
}

@media (max-width: 960px) {
  .menu-button-container {
    display: flex;
  }
  .menu {
    position: absolute;
    color: var(--my-fg-color);
    top: 0;
    margin-top: 50px;
    right: 0;
    flex-direction: column;
    /*width: 100%; */
/*    justify-content: center;
    align-items: center;*/
    /*background: #eee;*/
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0 75px 0 30px;
    border: 0;
    transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #menu-toggle:checked ~ .menu li {
    /*border: 1px solid #b00;*/
    height: 2.5em;
    padding-top: 0.5em;
    transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li {
    display: flex;
    justify-content: start;
    margin: 0;
    padding: 0.5em 0 0.5em 0;
    /*width: 100%;*/
    color: var(--my-fg-color);
    background-color: #eee;
    font-weight: 700;
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
  .submenu > li:not(:last-child) {
    border-bottom: 0px solid #444;
  }


}

/* Sub nav */
.subnav-content {
    background-color:  var(--white);
    width: 100%;
    z-index: 1;
    padding: 20px 0 ;
    display: none;
  }
.subnav-content a {
    color: var(--black);
    text-decoration: none;
    padding: 0;
    margin: 10px 0;
    text-align: center;
}
.subnav:hover .subnav-content {
    display: block;
}
....
@media (min-width: 768px) {
   ....
    /* Sub nav */
    .subnav-content {
        padding: 20px 0 ;
        display: none;
        background-color:  var(--black);
    }
    .subnav-content a {
        color: white;
    }
    .subnav-content li {
    display: block;
    width: 100%;
    background-color: var(--black);
  }
  .subnavbtn:focus+.subnav-content {
    display: block;
  }
  .subnav:hover .subnav-content {
    display: block;
  }
  .subnav:focus-within .subnav-content {
    display: block;
  }
  .subnav-content a:focus {
    background-color: var(--white);
    color: var(--black);
  }
}


/*************************************************/

#linkleiste { /*background: url(/bilder/logo_website_200px.png) top no-repeat; */
	padding: 20px 20px 50px 20px; margin: 0 0 0 0; font-weight: 700;} 
#linkleiste h2 {font-size: 1.6em; letter-spacing: 1px; color:var(--my-fg-color); border: none; margin: 0 0 3px 0; padding-top: 0; font-weight: 800; text-transform: uppercase;}
.noborder {border:0; }

#lc {float: left;}
#rc {float: right;	
	text-align: center; 
	font-weight: 700;
	background-color: #900;	
}
#linkleiste ul {display: inline-block;padding-top: 7px}
#linkleiste ul li {
	display: block;
        position: relative;
        float: left;
        text-align: center;
	text-decoration:none; 
	letter-spacing: 0;
	font-size: 1.0em;
	font-weight: 800;
}
#linkleiste a {color: var(--my-fg-color); text-decoration:none;}
#linkleiste a:hover {color: var(--my-fg-color); text-decoration:none;}
#linkleiste a:visited {text-decoration:none; color: var(--my-fg-color);}

.space {padding: 0 0.3px;}
* html #nav {he\ight: 35px;}

/*
#tr1 {background-color:var(--my-bg-color);
	text-align: center;
	padding-top: 50px;
	padding-bottom:10px;
}
#tr2 {background-color:#444;
	text-align: center;
	padding-top: 50px;
	padding-bottom:10px;
}
*/

.caption_color {color:#b63;
	padding: 20px 0 0 0;
	/* width: 600px; */
	text-align: left !important;
}

.caption_onum {
	/*color: #579;*/
	font-variant-numeric: tabular-nums;
}


#haupt {width: 100%;
	padding: 20px 0 50px 0; 
	line-height: 1.8em;
	/*background-color: #888;*/
	 margin: 0 0 0 0;
	scroll-snap-type: y mandatory;
	scroll-padding-top: 70px;
	overflow-x: scroll;
	-webkit-overflow-scrolling: touch; 
}
/*#haupt a {color: var(--my-fg-color); text-decoration:none;}
#haupt p {padding: 0 20px 0 20px;}
#haupt a:hover {color: var(--my-fg-color); text-decoration:none;}
#haupt a:visited {text-decoration:none; color: var(--my-fg-color);}
#haupt p {margin-bottom: 1em;} */
h1 {font-size: 1.3em; 
	letter-spacing: 5px; 
	color:var(--my-fg-color); 
	border-bottom: 1px solid #000; 
	margin: 30px 0 20px 0; 
	padding: 0 20px 0 20px;
	font-weight:600;
}
h2 {font-size: 1.2em; letter-spacing: 3px; color:var(--my-fg-color); border: none; margin: 0 0 10px 0; padding: 1px 20px 0 20px;}
img {border: 1px solid #000;
	margin: 0;
}
em {font-style: italic;}
b, strong {font-weight: 600;}
/*#haupt ul, li {list-style-position: outside; margin-left: 20px;}*/

.logo {
	font: 0.99em "Fira Sans Condensed", sans-serif;
	font-size: 2.09em; 
	color:var(--my-fg-color); 
	border: none; 
	font-weight:900;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
        line-height: 0.8em;	
}
.logo2 {
	font: 0.99em "Fira Sans Condensed", sans-serif;
	font-size: 0.6em; 
	letter-spacing: 4px; 
	color:var(--my-fg-color); 
	border: none; 
	font-weight:400;
	text-transform: uppercase;
	text-decoration: none; 
	line-height: 0.8em;
}
.small_line_height {line-height: 0;
	margin: 0 0 -20px 0; 
}


.snp_parent {
	scroll-snap-type: y mandatory;
}

.snp_child {
	scroll-snap-align: start;
	flex-shrink: 0;
	overflow: visible;
	text-align: center;
	padding: 45px 10px 55px 10px;
	margin: 0;
}

.snp_child_div {
	display: grid; 
	place-items: center;
}

.aboutme {
	scroll-snap-align: start;
	flex-shrink: 0;
	overflow: visible;
	text-align: left;
	padding: 45px 10px 55px 10px;
	margin: 10px;
}

.aboutTextColor {color:#aaa;} 

.impressum {padding: 0 20px;}

section:nth-of-type(even) {
	background-color:#555;
}
section:nth-of-type(odd) {
	background-color:var(--my-bg-color);
}
section:nth-of-type(1) {
	background-color: transparent;
}


/*section {
  height: 100vh;
  border-top: 2px solid white;
  scroll-snap-align: start;
}*/

.nodec {text-decoration:none; color:#fff;}
.disclaimer {font: normal 1.0em "Fira sans", monospace;}
.rechts {padding-top: 20px;text-align: right;}
.clear {clear:both;}
.u_kurz a, a:active, a:visited {text-decoration:none; color: var(--my-fg-color);}
.center {text-align: center; margin-left: -25px;}
.left {text-align: left}

#fuss {clear: both; font-style: normal; font-size: 0.75em; text-decoration:none; text-transform: uppercase; text-align: center; font-weight: 300;
	letter-spacing:5px; color: var(--my-fg-color); border-top: 0 solid var(--my-fg-color); margin: 0 0 0 0; padding: 0 0 20px 0;}
#fuss a { /*font: normal 1em "Trebuchet MS", sans-serif;*/ text-decoration:none; color: var(--my-fg-color);}
#fuss a:hover { /*font: normal 1em "Trebuchet MS", sans-serif;*/ text-decoration: underline; color: #444;}