/* Foundation */
html {
  font-size: 62.5%; }

body {
  font-size: 1.4rem;
  font-family: "Open Sans";
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position-y: -19rem;}

/* Base */
.wrapper {
  padding: 2rem; }

nav {
  font-size: 1.4rem;
}

footer {
  display: block;
  font-weight: 500;}

section {
  text-align: justify;
}

section.is-project {
  display: block;
  margin: 1.5rem 0;
  }
section.is-card {
  padding: 2rem;
  margin: 1.5rem 0;
  line-height: 180%; }
.header {
  display: block;
  padding: 3rem 2rem;}
.media {
  display: block;
  padding: 0rem; }
.leftside {
  display: block;
  padding: 1rem; }
.content {
  display: block;
  padding: 1rem 2rem;
  line-height: 180%;}
.content-story {
  display: block;
  padding: 1rem 2rem;
  line-height: 180%;}

@media screen and (min-width: 600px) {
  .wrapper {
    max-width: 100rem;
    margin: 0 auto; }
  footer {
    display: flex; }
  section.is-card {
    padding: 0rem 4rem 4rem 13rem;
    margin: 0 0 3rem 10rem;
    line-height: 180%;
    position: relative;
    min-height: 32rem;
    font-size: 1.6rem;
  }
  section.is-project {
    display: grid;
    grid-template-columns: 10rem 13rem 1fr;
    grid-template-rows: 8rem 13rem 0.8fr;
    grid-template-areas: "leftside media title" "leftside media content" "leftside media content";
    margin-bottom: 3rem;
    }
  .header {
    grid-area: title;
    padding: 1rem 1rem 1rem 0;
    align-items: center;
    display: grid; }
  .media {
    grid-area: media; }
  .leftside {
    grid-area: leftside;
    padding: 8rem 0; }
  .content-story {
    grid-area: content;
    font-size: 1.6rem;
    padding: 0 4rem 8rem 0;
    line-height: 180%; }
  .content {
    grid-area: content;
    font-size: 1.6rem;
    padding: 0 4rem 8rem 0;
    line-height: 180%; } }

ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }

h1 {
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.1rem;
  line-height: 130%; }
h2 {
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 100%; }
h3 {
  text-align: left;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 80%; }

p {
  padding: 0 0 1.4rem 0;
  margin: 0; }

/* Style */
.is-home {
  background-image: url("../media/bg-home.jpg"); }

.is-green {
  background-color: #f1f1f1;
  background-image: url("../media/bg-green.jpg"); }

.is-blue {
  background-color: #f1f1f1;
  background-image: url("../media/bg-blue.jpg"); }

.is-red {
  background-color: #f1f1f1;
  background-image: url("../media/bg-red.jpg"); }

.is-brown {
  background-color: #f1f1f1;
  background-image: url("../media/bg-brown.jpg"); }

.is-violet {
  background-color: #f1f1f1;
  background-image: url("../media/bg-violet.jpg"); }

.is-orange {
  background-color: #f1f1f1;
  background-image: url("../media/bg-orange.jpg"); }

.is-yellow {
  background-color: #f1f1f1;
  background-image: url("../media/bg-yellow.jpg"); }

img.is-full-width {
  width: 100%;
}

div.has-text {
  padding: 2rem 0;
}

div.has-story {
  display: block;
  width: 100%;
}

div.has-gallery {
    display: block;
  width: 100%;
}

section.is-text-intro {
  line-height: 150%;
  padding: 1.5rem;
  margin: 2rem 0 0 0; }

section.is-sub-intro {
  line-height: 150%;
  background: rgba(255, 255, 255, 0.6);
  padding: 1.5rem;
  margin: 2rem 0 0 0; }

a {
  color: #8B7E5B;
  text-decoration: none;}

a.is-special-link {
  display: block;
  text-align: right;
  background: #3a3a3a;
  padding: 1rem;
  margin: 0 -1.5rem -1.5rem -1.5rem; }

footer a {
  color: #65511d;
  text-decoration: none;
  font-weight: 600;
}

h1.is-claim {
  margin-top: 3rem;
  color: #3a3a3a; }

section.is-card h1 {
  margin: 1rem 0rem;
}

.is-service h1 {
  text-align: left;
  margin: 1.5rem 0;
  padding: 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.1rem;
  line-height: 130%;
}

.is-service h2 {
  font-size: 1.6rem;
  margin: 1rem 0 1rem 0;
  font-weight: 700;

}


h1.is-intro {
  margin: 0 0 2rem 0;
  padding: 0;
  font-size: 3.2rem; }


.is-subheadline {
  font-size: 2rem;
  font-weight: 700; }

img.is-large-logotype {
  width: 10rem; }

img.is-small-logotype {
  width: 5rem; }

ul.is-menu li {
  padding: 0.5rem 0;
  font-weight: 600; }

ul.is-menu li:first-of-type {
  padding: 0 0 0.5rem 0; }

ul.is-menu-footer {
  margin: 1rem 0; }

ul.is-menu-footer li {
  padding: 0.5rem 0; }

ul.is-menu-footer li:first-of-type {
  padding: 0 0 0.5rem 0; }

.caption {
  text-align: center;
background: #444;
margin: -1rem 0 2rem;
padding: 1rem;
font-style: italic;
color: #fff;
}

@media screen and (min-width: 600px) {
  footer {
    margin: 6rem 0 4rem 0; }
  section.is-text-intro {
    line-height: 180%;
    padding: 3rem;
    margin: 3rem 0 15rem 0;
    font-weight: 600;
    font-size: 1.9rem; }
  h1.is-claim {
    margin-top: 15rem;
    color: #887132;
    font-size: 6rem;
    line-height: 90%; }
  .is-subheadline {
    font-size: 5rem;
    color: #000;
    font-weight: 700; }
  section.is-card h1 {
    margin: 0;
    padding: 3rem 0; 
  }
  ul.is-menu {
    display: flex;
    align-items: baseline; }
  ul.is-menu li {
    padding: 0 2rem; }
  ul.is-menu li:first-of-type {
    padding: 0 2rem 0 0; }
  ul.is-menu-footer {
    margin: 1rem 0; }
  ul.is-menu-footer li {
    padding: 0.5rem 0; }
  ul.is-menu-footer li:first-of-type {
    padding: 0 0 0.5rem 0; } }

/* States */
.has-white-transparent {
  background: rgba(255, 255, 255, 0.6); }

.has-brown-transparent {
  background: rgba(158, 148, 121, 0.15); }



.has-intro-image {
  height: 15rem;
  background-size: cover;
  margin: -1rem; }

.has-card-image {
  height: 32rem;
  background-size: cover;
  margin: -2rem -2rem 0 -2rem; }

.has-standard-text p, .has-standard-text ul {
  font-size: 1.6rem;
  line-height: 150%;
  font-weight: 500;
}

.is-golden {
  color: #b79c52;
}

.has-standard-text ul li {
  padding-left: 1rem;
}

.has-standard-text ul {
  list-style-type: disc;
  padding: 0.5rem 2rem;
}

.is-current {
  color: black;
}

  .is-sidecard {
    height: 20rem;
    width: 20rem;
    box-shadow: 1.5rem 1.5rem 0 rgba(0, 0, 0, 0.2);
    margin:1rem auto;
    }

@media screen and (min-width: 600px) {
  .has-intro-image {
    margin: 0;
    width: 20rem;
    height: 20rem;
    background-size: cover;
    left: -1rem;
    box-shadow: 1.5rem 1.5rem 0 rgba(0, 0, 0, 0.2); }
  .has-card-image {
    height: 20rem;
    width: 20rem;
    background-size: cover;
    box-shadow: 1.5rem 1.5rem 0 rgba(0, 0, 0, 0.2);
    margin:0;
    position: absolute;
    left: -10rem;
    top: 10rem;}
  .is-sidecard {
    height: 20rem;
    width: 20rem;
    box-shadow: 1.5rem 1.5rem 0 rgba(0, 0, 0, 0.2);
    margin:0;
    position: absolute;
    left: -10rem;
    top: 10rem;}
  .has-soft-shadow {
    box-shadow: 0 0 1rem rgba(0,0,0,0.3);
  }
  .push-right-small {
    margin-left: 10rem !important; }
  .has-small-margin {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important; } 
.has-width-50 {
  width: 50%; }

.has-align-right {
  text-align: right; }
}


/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background: none;
  color: #8B7E5B;
  cursor: pointer;
  padding: 0;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible:after {
    content: " einblenden";
}
.collapsible.active:after {
  content: " ausblenden";
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
}

/* Style the collapsible content. Note: hidden by default */
.expansion {
  padding: 1rem 0;
  display: none;
  overflow: hidden;
}