/*GENERAL*/

:root {
  --color-one: rgba(0, 0, 0, 1);
  --color-two: rgba(237, 237, 246, 1);
  --color-three: rgb(255, 255, 255);

  --font-size-one: 1rem;
  --font-size-two: 1.2rem;
  --font-size-three: 1.8rem;

  --margin-one: 20px;
  --margin-two: 40px;
  --margin-three: 60px;
}

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

*::-webkit-scrollbar {
  width: 0 !important;
}

html,
body {
  font-weight: 400;
  font-family: "Work Sans", sans-serif;
  max-width: 100vw;
  height: 100%;
  color: var(--color-one);
  background: var(--color-three);
  position: relative;
  hyphens: none;
  font-size: var(--font-size-two);
  line-height: 1.6rem;
  -webkit-appearance: none;
  scroll-behavior: smooth;
  word-break: keep-all;
}

h1 {
  text-transform: normal;
  font-family: "Work Sans", sans-serif;
  color: var(--color-one);
  font-size: var(--font-size-three);
  font-weight: 400;
  margin: 0 0 var(--margin-one) 0;
}

h2 {
  text-transform: normal;
  font-family: "Work Sans", sans-serif;
  color: var(--color-one);
  font-size: var(--font-size-three);
  font-weight: 400;
  margin: 0 0 var(--margin-two) 0;
  line-height: 2rem;
}

h3 {
  text-transform: normal;
  font-family: "Work Sans", sans-serif;
  color: var(--color-two);
  font-size: var(--font-size-three);
  font-weight: 400;
  margin: 0 0 var(--margin-one) 0;
}

strong {
  font-weight: 500;
}

a {
  text-decoration: none;
  color: black;
  font-weight: bold;
}

a:hover {
  color: black;
}

#slogan {
  margin: 0px;
  padding: 0px;
}

.zitat {
  font-size: var(--font-size-three);
  line-height: 2.4rem;
}

.zitat div {
  font-weight: 300;
}

a[href^="mailto:"] {
  border: none;
}

a[href^="tel:"] {
  border: none;
}

p {
  margin: 0 0 var(--margin-two) 0;
}

li p {
  margin: 0;
}
ul {
  margin: 0 0 0 var(--margin-one);
}

::selection {
  background: black;
  color: white;
  /* WebKit/Blink Browsers */
}

::-moz-selection {
  background: rgb(255, 255, 255);
  /* Gecko Browsers */
}

.debug {
  outline: 2px solid red;
}

img {
  display: block;
  width: 100%;
  margin: 0 0 0 0;
  filter: drop-shadow(4px 4px 4px rgba(1, 1, 1, 0.1));
}

.left {
  flex-direction: row-reverse;
}

blockquote {
  font-size: 0.9rem !important;
  font-family: "Work Sans", sans-serif !important;
}

.social-media-links img {
  width: 100px;
}

.social-media-links {
  padding: 0 0 var(--margin-two) 0;
  margin: -80px 0 0 0;
  min-width: 50%;
  display: block;
  background: var(--color-two);
}
/*/ // ///////////////////////////////////////*/

/* W R A P P E R */

div#wrapper {
  position: relative;
  padding: 0px;
  margin: 0 0 0px 0;
  background: none;
  max-width: 100vw;
}

/* C O N T E N T; */

/*MAIN*/

main {
  margin: var(--margin-three) 0 0 0;
  max-width: 100vw;
  height: auto;
  position: relative;
}

.inner {
  max-width: 100vw;
}

section#intro {
  margin: var(--margin-two) 0 0 0;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  background: none;
  font-size: var(--font-size-one);
  color: var(--color-one);
}
button:hover {
  cursor: pointer;
}

div.read-more {
  display: none;
  padding: var(--margin-three) 0 var(--margin-three) 0;
}

article div.text {
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
  padding: var(--margin-two) 0 0 0;
}
article.active div div.text {
  border-bottom: none !important;
}

article.active div div .read-more-button {
  display: none;
}

article:not(.active) div div .read-more-button {
  display: block;
}

div.active .read-more-button {
  display: none;
}

div:not(.active) .read-more-button {
  display: block;
}

article {
  margin: 0 0 var(--margin-three) 0;
  padding: 0px;
}

.mobile {
  display: none;
}

div.logo h1 {
  font-family: "Hepta Slab";
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 2.4rem;
  margin: 0px 0px 0px 0px !important;
}

div.logo h2 {
  font-family: "Hepta Slab";
  font-weight: 200;
  font-size: 2.2rem;
  line-height: 2.4rem;
  margin: 0px;
}

div.logo {
  margin: var(--margin-three) 0 var(--margin-three) 0;
}

div.logo p {
  margin: 0px;
}

.intro-text {
  background: var(--color-two);
  padding: var(--margin-two) var(--margin-one) var(--margin-two)
    var(--margin-one);
  margin: var(--margin-three) 0 var(--margin-three) 0;
}

#kontakt {
  background: var(--color-two);
  padding: var(--margin-two) var(--margin-one) var(--margin-two)
    var(--margin-one);
  margin: var(--margin-three) 0 var(--margin-three) 0;
  border: none;
}

#kontakt div {
  border: none;
}

#footer {
  font-size: 0.8rem;
  margin-top: -20px;
  padding: 0 var(--margin-one) var(--margin-one) var(--margin-one);
}

#footer a {
  font-size: 0.8rem;
  font-weight: bold;
}

#impressum {
  position: fixed;
  left: -200000px;
  padding: 20px;
  background: rgba(189, 147, 147, 0.4);
}

#impressum:target {
  position: relative;
  left: 0px;
}
/* N A V; */

header {
  position: fixed;
  top: 0;
  z-index: 5000;
  min-width: 100vw;
}

nav {
  z-index: 6000;
  position: fixed;

  top: 0;
  left: 0px;
}

nav div.inner {
  padding: 5px 40px 5px 40px;
  background: none;
  position: fixed;
  z-index: 70000;
}

nav div#mainmenu-content {
  display: none;
  min-width: 100vw;
  min-height: 100vh;
  background: var(--color-three);
  position: absolute;
  z-index: 6350;
  margin: 0px 0 0 0;
  padding: 0px 0 0 0;
  top: 0px;
  left: 0px;

  justify-content: center; /* center items vertically, in this case */
  align-items: center; /* center items horizontally, in this case */
}

nav div#mainmenu-content ul {
  padding: 0px;
  margin: 80px 0 0px 0;
  text-indent: 0px;
  position: absolute;
  right: 100px;
}

nav div#mainmenu-content ul li {
  margin: 0 0 20px 0;
  list-style: none;
}

nav div#mainmenu-content ul li a {
  border: none;
  font-weight: 400;
}

nav div#burger {
  padding: 5px 0 5px 0;
  width: 60px;
  cursor: pointer;
  position: fixed;
  right: 20px;
  top: 20px;
}

nav div#close {
  padding: 0px 0 0px 0;
  width: 20px;
  height: 10px;
  cursor: pointer;
  position: absolute;
  right: 35px;
  top: 0px;
  display: none;
}

nav div#close div:nth-child(1) {
  transform: rotate(-45deg);
  width: 30px;
  margin: 0px 0 0 0px;
  position: absolute;
  top: 18px;
  left: -10px;
}

nav div#close div:nth-child(2) {
  transform: rotate(45deg);
  width: 30px;
  margin: 0px 0 0 0px;
  position: absolute;
  top: 18px;
  left: -10px;
}

nav div#close div {
  height: 2px;
  width: 100%;
  background: var(--color-one);
  margin: 0 0 6px 0;
}

nav div#burger div {
  height: 7px;
  width: 100%;
  background: var(--color-one);
  margin: 0 0 6px 0;
}

nav input {
  display: none;
}

nav input#nav-bool:checked ~ label > div#mainmenu-content {
  display: block;
}

nav input#nav-bool:checked ~ label > div div#close {
  display: block;
}

nav input#nav-bool:checked ~ label > div div#burger {
  display: none;
}

/*
  
   ___   ___   ___  
  / _ \ / _ \ / _ \ 
 | (_) | | | | | | |
  \__, | | | | | | |
    / /| |_| | |_| |
   /_/  \___/ \___/ 
                    
                    



*/

@media (max-width: 1300px) {
  nav div#mainmenu-content h2 {
    line-height: 1.5rem;
  }

  .mobile {
    display: block;
    padding: var(--margin-one);
  }
  .desktop {
    display: none;
  }

  article div.text {
    padding: var(--margin-two);
  }

  nav div#mainmenu-content {
    min-height: 100vh;
  }

  nav div#burger {
    width: 40px;
  }

  nav div#burger div {
    height: 5px;
  }

  #slogan,
  #logo {
    padding: var(--margin-two) var(--margin-one) var(--margin-two)
      var(--margin-one);
  }

  #slogan {
    margin: 40px 0 0 0;
  }

  #logo p {
    font-size: 1.8rem !important;
  }

  nav div#mainmenu-content ul {
    margin: 80px 0 0px 130px;
    position: relative;
  }

  nav div#mainmenu-content ul li a {
    font-size: 1.3rem;
  }

  article div.text {
    border-top: 0px solid silver;
    border-bottom: 0px solid silver;
    padding: var(--margin-one) var(--margin-one) var(--margin-one)
      var(--margin-one);
  }

  div.read-more {
    padding: var(--margin-one) var(--margin-one) var(--margin-one)
      var(--margin-one);
  }

  .intro-text {
    margin: 0;
  }

  main {
    margin: -40px 0 0 0;
    width: 100%;
    height: auto;
    position: relative;
  }

  #kontakt {
    padding: 0;
    margin: 0;
  }

  #impressum {
    font-size: 0.8rem;
    margin-top: 20px;
    padding: 0 var(--margin-one) var(--margin-one) var(--margin-one);
  }

  div.logo h1 {
    font-size: 1.8rem;
    line-height: 2rem;
  }

  div.logo h2 {
    font-size: 1.8rem;
    line-height: 2rem;
  }

  div.logo {
    margin: var(--margin-three) 0 var(--margin-three) 0;
  }

  .social-media-links {
    padding: 0 0 var(--margin-two) 0;
    margin: 0px 0 0 0;
    min-width: 50%;
    display: block;
    background: var(--color-two);
  }
}