@charset "UTF-8";
/* SASS Document */
/* rotis vorab */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rotis_regular';
  font-style: normal;
  font-weight: normal;
  src: url("fonts/RotisSemiSansPro55Regular/font.woff2") format("woff");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rotis_light';
  font-style: normal;
  font-weight: normal;
  src: url("fonts/RotisSemiSansPro45Light/font.woff2") format("woff");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rotis_bold';
  font-style: normal;
  font-weight: normal;
  src: url("fonts/RotisSemiSansPro65Bold/font.woff2") format("woff");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
.container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-gap: 5rem;
  gap: 5rem; }

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid-container {
  position: relative;
  max-width: 80%;
  margin: 0 auto;
  display: grid; }

@media (min-width: 740px) {
  .container.halves-two {
    grid-template-columns: repeat(2, 1fr);
    display: grid; }

  .container.thirds {
    grid-template-columns: repeat(2, 1fr); }

  .grid-container.logos-footer {
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    align-items: center; }
    .grid-container.logos-footer div:last-child {
      grid-column: span 3; } }
/* grids to 3 columns above mobile sizes */
@media (min-width: 1200px) {
  .grid-container {
    max-width: 90%;
    display: grid;
    grid-gap: 10rem;
    gap: 10rem; }

  .container {
    display: grid; }

  /* basic grids */
  .grid-container.sixth {
    grid-template-columns: repeat(6, 1fr); }

  .grid-container.fifths {
    grid-template-columns: repeat(5, 1fr); }

  .grid-container.quarters {
    grid-template-columns: 1fr 3fr; }

  .grid-container.thirds {
    grid-template-columns: repeat(3, 1fr); }

  .container.thirds {
    grid-template-columns: repeat(3, 1fr); }

  .grid-container.halves {
    grid-template-columns: repeat(2, 1fr); }

  .container.halves {
    grid-template-columns: repeat(2, 1fr); }

  .grid-container.halves-two {
    grid-template-columns: 1fr 180px; }
    .grid-container.halves-two div:last-child {
      text-align: right; }

  .grid-container.logos-footer {
    grid-template-columns: 180px 300px 240px 1fr;
    align-items: top;
    grid-gap: 5rem; }
    .grid-container.logos-footer div:last-child {
      grid-column: inherit; }

  .grid-container.full {
    grid-template-columns: 1fr; }

  .grid-container.one-third {
    grid-template-columns: 1fr 3fr; } }
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }

body {
  font-size: 1.8em;
  /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.5;
  font-weight: 300;
  font-family: "Rotis_light", Arial, sans-serif;
  color: #575756;
  margin: 0;
  letter-spacing: 0rem; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-weight: 300; }

h1 {
  font-family: "Rotis_bold", Arial, sans-serif;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  margin-bottom: 2rem; }

h2 {
  font-family: "Rotis_bold", Arial, sans-serif;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  margin-bottom: 2rem; }

h3 {
  font-family: "Rotis_bold", Arial, sans-serif;
  font-size: 2.8rem;
  line-height: 1.3;
  letter-spacing: 0.05rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 5px solid #ebe7e2; }

h4 {
  font-family: "Rotis_bold", Arial, sans-serif;
  font-size: 2.8rem;
  line-height: 1.3;
  letter-spacing: 0.05rem;
  margin-bottom: 1rem; }

h5 {
  font-family: "Rotis_bold", Arial, sans-serif;
  font-size: 1.8rem;
  line-height: 1.5;
  margin-bottom: 0rem; }

h6 {
  font-family: "Rotis_bold", Arial, sans-serif;
  font-size: 1.8rem;
  line-height: 1.5;
  margin-bottom: 0rem; }

p {
  margin-top: 0;
  margin-bottom: 3rem; }

.klein {
  font-size: 1.6rem; }

strong {
  font-family: "Rotis_bold", Arial, sans-serif;
  font-weight: normal; }

@media (min-width: 740px) {
  body {
    font-size: 2.0rem; }

  h1 {
    font-size: 3.2rem; }

  h2 {
    font-size: 3.2rem; }

  h3 {
    font-size: 3.7rem; }

  h4 {
    font-size: 3.7rem; }

  h5 {
    font-size: 2.0rem; }

  h6 {
    font-size: 2.0rem; } }
@media (min-width: 1000px) {
  body {
    font-size: 2.2rem; }

  h1 {
    font-size: 3.7rem;
    margin-bottom: 4rem; }

  h2 {
    font-size: 3.7rem;
    margin-bottom: 4rem; }

  h3 {
    font-size: 4.3rem;
    margin-bottom: 3rem; }

  h4 {
    font-size: 4.3rem;
    margin-bottom: 1rem; }

  h5 {
    font-size: 2.2rem; }

  h6 {
    font-size: 2.2rem; } }
em {
  font-style: normal;
  font-weight: 400;
  display: inline-block;
  width: 50px; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  text-decoration: none;
  color: #575756; }
  a:hover {
    color: #726365; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button {
  display: inline-block;
  color: #fff;
  font-family: "Rotis_bold", Arial, sans-serif;
  font-weight: 700;
  padding: 15px 30px;
  height: 22px;
  line-height: 22px;
  background-color: #7796ac;
  border-radius: 30px;
  pointer: cursor; }

.button:hover, button:hover {
  color: #7796ac; }

input[type="submit"], input[type="reset"], input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #adcd63;
  text-align: center;
  font-size: 11px;
  font-weight: normal;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #ebe7e2;
  cursor: pointer;
  box-sizing: border-box; }

.button:hover,
button:hover {
  color: #222;
  border-color: #777777;
  outline: 0; }

input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
  color: #222;
  border-color: #777777;
  outline: 0; }

.button:focus,
button:focus {
  color: #222;
  border-color: #777777;
  outline: 0; }

input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
  color: #222;
  border-color: #777777;
  outline: 0; }

.button.button-primary,
button.button-primary {
  color: #fff;
  background-color: #7796ac;
  border-color: #7796ac; }

input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
  color: #fff;
  background-color: #7796ac;
  border-color: #7796ac; }

.button.button-primary:hover,
button.button-primary:hover {
  color: #fff;
  background-color: #726365;
  border-color: #726365; }

input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover {
  color: #fff;
  background-color: #726365;
  border-color: #726365; }

.button.button-primary:focus,
button.button-primary:focus {
  color: #fff;
  background-color: #726365;
  border-color: #726365; }

input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
  color: #fff;
  background-color: #726365;
  border-color: #726365; }
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"] {
  height: 38px;
  padding: 6px 10px;
  background-color: #fff;
  border: 1px solid #fdfdfd;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
textarea,
select {
  height: 38px;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #fdfdfd;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }

/* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }

input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus {
  border: 1px solid #7796ac;
  outline: 0; }

textarea:focus,
select:focus {
  border: 1px solid #7796ac;
  outline: 0; }

label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }

fieldset {
  padding: 0;
  border-width: 0; }

input[type="checkbox"], input[type="radio"] {
  display: inline; }

label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: outside;
  list-style-type: "- "; }

ol {
  list-style: decimal inside;
  padding-left: 0;
  margin-top: 0; }

ul {
  padding-left: 0;
  margin-top: 0; }
  ul ul, ul ol {
    margin: 0rem 0 1.5rem 3rem; }
    ul ul li, ul ol li {
      list-style-type: circle; }

ol ol, ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }

li {
  margin-bottom: 1rem;
  margin-left: 1rem; }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #edeceb;
  border: 1px solid #dedcda;
  border-radius: 4px; }

pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #dedcda; }

th:first-child,
td:first-child {
  padding-left: 0; }

th:last-child,
td:last-child {
  padding-right: 0; }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }

pre,
blockquote,
dl,
figure,
table,
ul,
ol,
form {
  margin-bottom: 2.5rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  height: auto;
  box-sizing: border-box; }

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }

.u-pull-right {
  float: right; }

.u-pull-left {
  float: left; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #dedcda; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
/* Larger than phablet (also point when grid becomes active) */
/* Larger than tablet */
/* Larger than desktop */
/* Larger than Desktop HD */
/* LESS Document */
body {
  -webkit-font-smoothing: antialiased; }

html {
  scroll-behavior: smooth; }

.header {
  border-top: #A2B3C3 10px solid;
  border-bottom: #adcd63 4px solid;
  padding-top: 24px;
  box-sizing: border-box; }

.logo {
  width: 200px;
  justify-self: right; }

#nav-toggle {
  position: absolute;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  color: #ccc;
  min-height: 20px;
  min-width: 20px;
  z-index: 100; }

#nav-toggle b {
  display: none;
  font-weight: normal;
  margin-left: 35px; }

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 0px;
  height: 1px;
  width: 25px;
  position: absolute;
  display: inline;
  content: '';
  left: 0; }

#nav-toggle.active {
  position: fixed; }

#nav-toggle.active b {
  display: none; }

#nav-toggle span {
  background-color: #222;
  top: 15px; }

#nav-toggle span:before {
  top: -7px;
  background: #222; }

#nav-toggle span:after {
  bottom: -7px;
  background: #222; }

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 200ms ease-in-out; }

#nav-toggle.active span {
  background-color: transparent; }

#nav-toggle.active span:before {
  top: 0;
  background: #222;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transform: rotate(45deg); }

#nav-toggle.active span:after {
  top: 0;
  background: #222;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg); }

.overlay {
  align-items: left;
  height: auto;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  background-color: #f0f0f0;
  position: absolute;
  right: 0;
  top: 57px;
  z-index: 3;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  display: flex; }

.overlay.open {
  opacity: 1;
  overflow: scroll;
  visibility: visible; }

.navi {
  margin: 0 auto;
  width: 100%; }
  .navi ul {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
    text-align: left; }
    .navi ul li {
      width: 100%;
      list-style-type: none;
      margin-bottom: 1rem;
      border-bottom: 1px solid #fff;
      margin: 0; }
      .navi ul li a {
        color: #222;
        font-size: 1.6rem;
        font-family: "Rotis_bold", Arial, sans-serif;
        text-decoration: none;
        display: block;
        padding: 10px 25px;
        cursor: pointer; }
      .navi ul li a:hover, .navi ul li a.rex-current {
        color: #fff;
        background-color: #7796ac; }

.navi-einzel {
  position: absolute; }
  .navi-einzel ul li {
    list-style-type: none;
    margin: 0; }
    .navi-einzel ul li a {
      color: #222;
      font-size: 1.6rem;
      font-family: "Rotis_bold", Arial, sans-serif;
      text-decoration: none; }

@media (min-width: 740px) {
  .logo {
    width: 300px; }

  .menu-button {
    top: 90px; }

  .overlay {
    top: 78px; } }
@media (min-width: 1200px) {
  .header {
    border-top: #A2B3C3 20px solid;
    border-bottom: #adcd63 5px solid;
    padding-top: 40px;
    height: 150px; }

  .menu-button {
    display: none; }

  .navi {
    padding-top: 30px; }
    .navi ul li {
      width: inherit;
      border-bottom: none; }
      .navi ul li a {
        width: inherit;
        display: inline-block;
        padding: 0;
        margin-right: 40px;
        position: relative;
        font-size: 2.2rem; }
      .navi ul li a::after {
        content: "";
        width: 1px;
        height: 27px;
        background-color: #222;
        position: absolute;
        right: -20px;
        top: 5px; }
      .navi ul li a:hover, .navi ul li a.rex-current {
        color: #7796ac;
        background-color: transparent; }
    .navi ul li:last-child a::after {
      background-color: transparent; }

  #nav-toggle {
    display: none; }

  .overlay {
    opacity: 1;
    visibility: visible;
    background-color: transparent;
    width: inherit;
    right: inherit;
    top: inherit; }

  .navi-einzel ul li a {
    font-size: 2.2rem; } }
@media (min-width: 1200px) {
  .header {
    border-top: #A2B3C3 27px solid;
    border-bottom: #adcd63 7px solid;
    padding-top: 60px;
    height: 200px; }

  .logo {
    width: 400px; }

  .navi {
    padding-top: 40px; }
    .navi ul li a {
      font-size: 2.6rem; } }
.navi-einzel ul li a {
  font-size: 2.26rem; }

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
  box-sizing: border-box;
  border-bottom: #ebe7e2 10px solid;
  height: 50vh; }

/* Hide the images by default */
.mySlides {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  width: 100%;
  height: 100%; }
  .mySlides img {
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.mySlides.active {
  opacity: 1;
  z-index: 2; }

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 20px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 5; }

.prev::after, .next::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 15px;
  top: 12px;
  left: 7px;
  background-image: url("../images/pfeil.svg"); }

.prev::after {
  transform: scaleX(-1); }

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px; }

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.1); }

.slideshow-container a.text {
  position: absolute;
  color: #fff;
  bottom: 50px;
  right: 5%;
  z-index: 40;
  font-family: "Rotis_bold", Arial, sans-serif;
  font-size: 2.8rem; }

@media (min-width: 740px) {
  .prev, .next {
    margin-top: -30px;
    padding: 30px; } }
@media (min-width: 740px) and (min-width: 1200px) {
  .slideshow-container {
    height: 70vh; } }
@media (min-width: 740px) {
  .prev::after, .next::after {
    top: 23px;
    left: 17px; }

  .slideshow-container a.text {
    font-size: 3.8rem; } }
.content {
  position: relative; }

.to_top {
  width: 40px;
  height: 40px;
  position: sticky;
  background-color: #adcd63;
  display: flex;
  padding: 5px;
  top: 50%;
  left: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  margin-top: -50px;
  z-index: 200; }
  .to_top img {
    height: 13px !important;
    width: 21px !important;
    transform: rotate(-90deg); }

section, .abstand, .footer {
  padding-top: 4rem; }

.abstand-kl {
  padding-top: 5rem; }

.content h1, .content h2 {
  color: #575756; }

.content h3, .content h4, .content h5 {
  color: #7796ac; }

.content img {
  width: 100%;
  height: auto; }

details {
  margin-bottom: 0rem;
  box-sizing: border-box; }

summary {
  color: #222;
  list-style: none;
  padding-left: 30px;
  position: relative;
  cursor: pointer;
  font-family: "Rotis_bold", Arial, sans-serif;
  font-size: 1.8rem; }

summary::-webkit-details-marker {
  display: none; }

summary::before {
  position: absolute;
  left: 0px;
  top: 0px;
  content: "";
  width: 15px;
  height: 25px;
  background-color: transparent;
  display: block;
  background-image: url("../images/pfeil-gruen.svg");
  background-repeat: no-repeat; }

details[open] {
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -10px;
  padding: 10px;
  background-color: #ebf0f4; }

details[open] > summary {
  padding-bottom: 20px;
  margin-bottom: 20px; }

details[open] > summary::before {
  background-image: url("../images/cross.svg"); }

details[open] > summary span {
  display: none; }

.thirds details {
  margin-bottom: 4rem; }

#team img {
  margin-bottom: 2rem; }

#team details[open] {
  margin-left: -20px;
  margin-right: -20px;
  padding: 20px; }

h2.pfeil {
  padding-left: 40px;
  position: relative; }

h2.pfeil::before {
  position: absolute;
  left: 0px;
  top: 5px;
  content: "";
  width: 15px;
  height: 25px;
  background-color: transparent;
  display: block;
  background-image: url("../images/pfeil-gruen.svg");
  background-repeat: no-repeat;
  transform: rotate(-90deg); }

.leistung > div {
  position: relative; }

.leistung > div:hover .text-overlay {
  opacity: 1; }

.text-overlay {
  width: 100%;
  position: absolute;
  aspect-ratio: 1 / 1;
  background-color: rgba(119, 150, 172, 0.9);
  display: block;
  top: 0;
  justify-content: center;
  align-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  transition: 0.5s ease; }
  .text-overlay p {
    color: #fff; }

.footer p {
  font-size: 1.6rem;
  margin: 1rem 0 0.4rem 0; }
.footer .adresse {
  background-color: #ebe7e2;
  border-bottom: 5px solid #adcd63; }
  .footer .adresse span {
    display: none; }
.footer .info {
  background-color: #7796ac;
  padding: 50px 0; }
  .footer .info img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    margin-bottom: 2rem; }
  .footer .info p {
    color: #ebf0f4;
    word-break: keep-all; }
.footer img.daego {
  width: 150px;
  height: auto; }
.footer img.lak {
  width: 200px;
  height: auto; }
.footer img.aktio {
  width: 200px;
  height: auto; }

@media (min-width: 550px) {
  .footer .adresse span.first {
    display: inline !important; } }
@media (min-width: 740px) {
  section, .abstand, .footer {
    padding-top: 6rem; }

  .abstand-kl {
    padding-top: 3rem; }

  .to_top {
    width: 58px;
    height: 58px; }
    .to_top img {
      height: 17px !important;
      width: 28px !important; }

  .footer p {
    font-size: 1.8rem; }
  .footer img.lak {
    padding-top: 2rem; }
  .footer img.aktio {
    padding-top: 2rem; } }
@media (min-width: 1000px) {
  .footer .adresse span {
    display: inline; } }
@media (min-width: 1200px) {
  section, .abstand, .footer {
    padding-top: 8rem; }

  .abstand-kl {
    padding-top: 5rem; }

  .one-third > div:first-child {
    text-align: right; }

  details[open] {
    margin-left: -3%;
    margin-right: -8%;
    margin-top: -20px;
    padding: 20px 8% 20px 3%; }

  .thirds details {
    margin-bottom: 0rem; }

  h2.pfeil::before {
    top: 15px; }

  .footer img.daego {
    width: 100%; }
  .footer img.lak {
    width: 100%; }
  .footer img.aktio {
    width: 100%; } }
/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 100;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: transparent;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0);
  /* Black w/ opacity */ }

/* Modal Content */
.modal-content {
  background-color: rgba(255, 255, 255, 0.8);
  margin: auto;
  padding: 15% 5% 2%;
  width: 80%;
  position: relative;
  max-width: 600px;
  text-align: center; }

/* The Close Button */
.close {
  color: #adcd63;
  float: right;
  font-size: 38px;
  font-weight: 300;
  font-family: "Rotis_light", Arial, sans-serif;
  line-height: 10px;
  position: absolute;
  top: 20px;
  right: 20px; }

.close:hover,
.close:focus {
  color: #222;
  text-decoration: none;
  cursor: pointer; }

@media (min-width: 550px) {
  .modal-content {
    padding: 10% 5% 2%; } }
@media (min-width: 1000px) {
  .modal-content {
    padding: 5% 5% 2%; } }