:root { --content-width: 96rem; }

*,
*:after,
*:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size:  20px;
  line-height: 1.5rem;
  color: rgba(10, 10, 10, .85);
  background: #F3F3F3;
  scroll-behavior: smooth;
}

html, 
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

li { list-style: none; }
a { color: currentColor; text-decoration: none; }
strong, b { font-weight: 500; }
img { max-width: 100%; margin: 0; }


.page { /*fullpage div - 100vh auch für mobile 
  What if height: 100vh is bigger than your screen?
  https://medium.com/developer-rants/what-if-height-100vh-is-bigger-than-your-screen-7f39c62ac170*/
  /* width: 100vw; */ 
  /* height: 100%; */ /*brings footer to vh*/
  min-height: 100%;
  box-sizing: border-box;
  /* overflow-x: hidden; */
  padding: 0;
  margin: 0 1rem;
}

.page > * {
  max-width: var(--content-width);
  margin: 0 auto;
}

main { min-height: calc(100vh - 2.5rem); } 

header.header { 
  position: sticky;
  top: 0;  padding-top: 2rem;
  background-color: rgba(243, 243, 243, .98); /* home! */
}  

aside { 
  padding: 0 1rem;
  overflow: visible;  
}
.about aside {  
  height: 100vh;
  display: flex;
  flex-direction: column; 
  justify-content: space-between; 
}

content { }

nav a { 
  position: relative;
  text-transform: uppercase;
  font-size: .9rem; 
  letter-spacing: .03em;
  padding: 0 .5rem 1rem; 
  font-weight: 300;
}

.menu {  
  display: flex; 
  flex-direction: row;
  justify-content: space-between;
}
.menu a:active { color: #F7B500; }
.menu a[aria-current] { color: #F7B500; /* border-bottom: 1px solid #F7B500; */ }

address { padding-bottom: 1rem }
address, address .text a { font-style: normal; font-weight: 300; }
address p:first-child { font-weight: 400; }


/* BREAK POINTS 45 50 */


/* narrow */
@media screen and (max-width: 45rem) { 
  header.header { padding-top: 1rem; }
  nav { margin: 0; } 
  aside { padding: 0; } 
} /* end narrow */

/* inbetween */
@media screen and (min-width: 45rem) {
  nav { margin: 0; }
} /* end inbetween */

/* wide */
@media screen and (min-width: 50rem) {
  .header .logo { margin-bottom: 0; }
  nav { margin: 0 .5rem; }
} /* end wide */



h1, h2, h3, h4, h5, h6 { font-size: 1rem; font-weight: 400; margin-bottom: 1.5rem;}

.text { font-size: .8rem;}
.text p,
.text ul,
.text ol,
/* .text figure, */
blockquote p { font-size: .8rem; margin-bottom: 1.5em; }

.text h1 { color: #F7B500; }
  
.text h2 { 
  margin: 1.5rem 0;
  font-weight: 500;
}

.text > *:first-child { margin-top: 0; }

.text a {
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  z-index: 1;
  display: inline-block;
  border-bottom: 1px solid #000;
}

.text img {
  width: 100%;
  padding-top: .5em; /* nur für about? */
}

.footer { 
  padding-bottom: 2.5vh;
  text-align: center;
  margin: 1rem auto;
}

.footer a { font-size: .8rem; }