@charset "UTF-8";
/* SASS Document */
/* font 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: 'TTNorms_Regular';
  font-style: normal;
  font-weight: normal;
  src: url("fonts/TT_Norms_Pro_Regular.woff2") format("woff2");
  /* 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: 'TTNorms_Light';
  font-style: normal;
  font-weight: normal;
  src: url("fonts/TT_Norms_Pro_Light.woff2") format("woff2");
  /* 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: 'TTNorms_Bold';
  font-style: normal;
  font-weight: normal;
  src: url("fonts/TT_Norms_Pro_Bold.woff2") format("woff2");
  /* 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: 'Fontawesome';
  font-style: normal;
  font-weight: normal;
  src: url("fonts/fa-brands-400.woff2") format("woff2");
  /* 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); } }
/* grids to 3 columns above mobile sizes */
@media (min-width: 740px) {
  .grid-container {
    max-width: 90%;
    display: grid;
    grid-gap: 5rem;
    gap: 5rem; }

  .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(2, 1fr); }

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

  .grid-container.halves {
    grid-template-columns: repeat(2, 1fr); }
    .grid-container.halves div:first-child {
      padding-right: 10rem;
      text-align: right; }
    .grid-container.halves div:last-child {
      margin-left: -5rem; }

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

  .grid-container.seven-five {
    grid-template-columns: repeat(12, 1fr);
    /* 12 gleich breite Spalten */
    grid-auto-flow: row dense; }

  /* 1. Zeile: 7/5 */
  .grid-container.seven-five > *:nth-child(4n + 1) {
    grid-column: 1 / span 7;
    /* Bild 1: 7 Teile */ }

  .grid-container.seven-five > *:nth-child(4n + 2) {
    grid-column: 8 / span 5;
    /* Bild 2: 5 Teile */ }

  /* 2. Zeile: 5/7 */
  .grid-container.seven-five > *:nth-child(4n + 3) {
    grid-column: 1 / span 5;
    /* Bild 3: 5 Teile (linke Spalte) */ }

  .grid-container.seven-five > *:nth-child(4n + 4) {
    grid-column: 6 / span 7;
    /* Bild 4: 7 Teile (rechte Spalte) */ }

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

  .grid-container.full_offset {
    grid-template-columns: 2fr 8fr 2fr; }
    .grid-container.full_offset div:first-child {
      grid-column: 2; }

  .grid-container.one-third {
    grid-template-columns: 1fr 3fr; } }
@media (min-width: 1000px) {
  .grid-container.thirds {
    grid-template-columns: repeat(3, 1fr); }

  .grid-container.eight-four {
    grid-template-columns: 8fr 4fr; } }
/* 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: "TTNorms_Regular", Arial, sans-serif;
  color: #222;
  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: "TTNorms_Light", Arial, sans-serif;
  font-size: 3.0rem;
  line-height: 1.1;
  letter-spacing: 0.05rem;
  margin-bottom: 2rem; }

h2 {
  font-family: "TTNorms_Light", Arial, sans-serif;
  font-size: 3.0rem;
  line-height: 1.2;
  letter-spacing: 0.05rem;
  margin-bottom: 2rem; }

h3 {
  font-family: "TTNorms_Bold", Arial, sans-serif;
  font-size: 2.4rem;
  line-height: 1.3;
  letter-spacing: 0.05rem; }

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

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

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

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

.klein {
  font-size: 1.6rem; }

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

@media (min-width: 350px) {
  h1 {
    font-size: 3.5rem; }

  h2 {
    font-size: 3.5rem; }

  h3 {
    font-size: 2.4rem; }

  h4 {
    font-size: 2.5rem; }

  h5 {
    font-size: 2.0rem; }

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

  h2 {
    font-size: 4rem; }

  h3 {
    font-size: 2.4rem; }

  h4 {
    font-size: 3.0rem; }

  h5 {
    font-size: 2.0rem; }

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

  h2 {
    font-size: 4.6rem; }

  h3 {
    font-size: 2.4rem; }

  h4 {
    font-size: 3.0rem; }

  h5 {
    font-size: 2.2rem; }

  h6 {
    font-size: 2.2rem; }

  p {
    margin-bottom: 3rem; } }
@media (min-width: 1200px) {
  h1 {
    font-size: 5.3rem; }

  h2 {
    font-size: 5.3rem; }

  h3 {
    font-size: 2.4rem; }

  h4 {
    font-size: 3.0rem; }

  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: #222; }
  a:hover {
    color: #726365; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button {
  display: inline-block;
  font-family: "TTNorms_Bold", Arial, sans-serif;
  font-weight: regular;
  padding: 15px 30px;
  height: 22px;
  line-height: 22px;
  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; }

*:focus:not(:focus-visible) {
  outline: none; }

*:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 2px; }

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 {
  padding-top: 50px;
  box-sizing: border-box; }

/* Elternelement für den Verlauf */
.gradient-wrapper {
  position: relative;
  overflow: hidden; }

/* Der eigentliche animierte Verlauf */
.gradient-wrapper::before,
.overlay::before {
  content: "";
  position: absolute;
  inset: -500%;
  /* größer machen, damit beim Drehen keine Lücken entstehen */
  background-image: linear-gradient(90deg, #f9eded, #f9f5ed, #f5f9ed, #edf9ed, #edf9f5, #edf5f9, #ededf9, #f5edf9, #f9edf5, #f9eded);
  background-size: 200% 100%;
  /* WICHTIG: gleiche Animation wie der Button */
  animation: zonegradient 20s linear infinite;
  transform: rotate(-30deg);
  transform-origin: center;
  z-index: -1; }

/* Button */
.button-zone {
  padding: 0 40px;
  line-height: 45px;
  font-size: 18px;
  border-radius: 40px;
  font-family: Helvetica, Arial, "sans-serif";
  font-weight: 300;
  margin: 4rem 0;
  display: inline-block;
  /* Anfangsfarbe ist egal, wird von der Animation überschrieben */
  border: 1px solid #00f79e;
  /* gleiche Animation wie Hintergrund */
  animation: zonegradient 20s linear infinite; }

hr {
  width: 100px;
  border: 3px solid #00f79e;
  margin-left: 0;
  animation: zonegradient 20s linear infinite; }

/* EINE Keyframes-Animation für beides */
@keyframes zonegradient {
  0% {
    background-position: 0% 50%;
    border-color: #00f79e; }
  10% {
    background-position: 20% 50%;
    border-color: #66ffff; }
  20% {
    background-position: 40% 50%;
    border-color: #00b1f7; }
  30% {
    background-position: 60% 50%;
    border-color: #0000f7; }
  40% {
    background-position: 80% 50%;
    border-color: #9c00f7; }
  50% {
    background-position: 100% 50%;
    border-color: #f700b1; }
  60% {
    background-position: 120% 50%;
    border-color: #f70000; }
  70% {
    background-position: 140% 50%;
    border-color: #f49000; }
  80% {
    background-position: 160% 50%;
    border-color: #e5d903; }
  90% {
    background-position: 180% 50%;
    border-color: #90e005; }
  100% {
    background-position: 200% 50%;
    border-color: #00f79e; } }
@keyframes zonecolor {
  0% {
    color: #00f79e; }
  10% {
    color: #66ffff; }
  20% {
    color: #00b1f7; }
  30% {
    color: #0000f7; }
  40% {
    color: #9c00f7; }
  50% {
    color: #f700b1; }
  60% {
    color: #f70000; }
  70% {
    color: #f49000; }
  80% {
    color: #e5d903; }
  90% {
    color: #90e005; }
  100% {
    color: #00f79e; } }
.logo {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  padding-bottom: 4rem; }
  .logo img {
    width: 56px;
    height: 57px; }

.menu-button {
  position: absolute;
  right: 55px; }

#nav-toggle {
  position: absolute;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  color: #222;
  min-height: 25px;
  min-width: 25px;
  z-index: 100;
  background-color: transparent;
  border: none;
  border-radius: 0; }

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

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  height: 3px;
  width: 25px;
  position: absolute;
  content: '';
  right: 0; }

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

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

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

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

#nav-toggle span:after {
  bottom: -4px;
  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: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  right: 0;
  top: 0px;
  z-index: 3;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  display: flex;
  overflow: hidden; }

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

.navi {
  margin: 0 auto;
  width: 100%;
  display: grid; }
  .navi ul {
    justify-content: center;
    text-align: center; }
    .navi ul li {
      width: 100%;
      list-style-type: none;
      margin-bottom: 2rem;
      margin: 0; }
      .navi ul li a {
        color: #222;
        font-size: 3rem;
        font-family: "TTNorms_Bold", Arial, sans-serif;
        text-decoration: none;
        cursor: pointer; }
      .navi ul li a:hover, .navi ul li a.rex-current {
        font-family: "TTNorms_Regular", Arial, sans-serif; }

.hero {
  align-content: space-around;
  min-height: 80vh; }

.buero {
  padding: 2rem 0 4rem 0; }

@media (min-width: 350px) {
  .header {
    min-height: 100vh; }

  .regular {
    min-height: 10vh; }

  .logo {
    padding-bottom: 6rem; } }
@media (min-width: 740px) {
  .navi ul li a {
    font-size: 4rem; }

  hr {
    border: 5px solid #00f79e; } }
@media (min-width: 1000px) {
  .hero div:last-child {
    max-width: 500px; }

  .buero {
    padding: 4rem 0 8rem 0; } }
@media (min-width: 1200px) {
  .hero div:last-child {
    max-width: 600px; }

  .navi ul li a {
    font-size: 5.3rem; } }
.content {
  position: relative;
  margin-bottom: 6rem; }
  .content img {
    width: 100%;
    height: auto; }
  .content .grid-container {
    margin-top: 6rem; }
  .content .nomargin {
    margin-top: 0; }
  .content .smallmargin {
    margin-top: 3rem; }

.center {
  text-align: center; }

.bereiche {
  display: flex;
  text-align: center;
  list-style-type: none;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5rem auto;
  gap: 2rem; }
  .bereiche li {
    background-color: #edf5f9;
    border-radius: 40px;
    padding: 10px 40px;
    font-size: 1.6rem;
    font-family: "TTNorms_Bold", Arial, sans-serif;
    animation: zonebackground 20s linear infinite;
    margin: 0; }
@keyframes zonebackground {
  0% {
    background-color: #f5f9ed; }
  10% {
    background-color: #edf9ed; }
  20% {
    background-color: #edf9f5; }
  30% {
    background-color: #edf5f9; }
  40% {
    background-color: #ededf9; }
  50% {
    background-color: #ededf9; }
  60% {
    background-color: #f5edf9; }
  70% {
    background-color: #f9edf5; }
  80% {
    background-color: #f9eded; }
  90% {
    background-color: #f9f5ed; }
  100% {
    background-color: #f5f9ed; } }
.subnavi {
  display: flex;
  text-align: center;
  list-style-type: none;
  flex-wrap: wrap;
  justify-content: left;
  margin: 0rem auto;
  gap: 0.5rem;
  max-width: 1100px; }
  .subnavi li {
    background-color: #edf5f9;
    border-radius: 20px;
    padding: 0px 10px;
    font-size: 1.6rem;
    font-family: "TTNorms_Regular", Arial, sans-serif;
    margin: 0;
    animation: zonebackground 20s linear infinite; }
  .subnavi a {
    cursor: pointer; }
  .subnavi a.active {
    font-family: "TTNorms_Bold", Arial, sans-serif; }

.news img {
  margin-bottom: 2rem;
  aspect-ratio: 3 / 2;
  object-fit: cover; }
.news p {
  margin-bottom: 0; }
.news h3 {
  margin-bottm: 2rem; }
.news hr {
  border-width: 1px;
  margin-top: 1rem;
  margin-bottom: 2rem; }
.news div {
  margin-bottom: 6rem; }

.projekt {
  display: none;
  margin-bottom: 2rem; }

.show {
  display: block; }

.projekt a:hover img {
  transform: scale(110%); }

.projekt div {
  overflow: hidden;
  margin-bottom: 2rem; }
  .projekt div img {
    vertical-align: bottom;
    transition: transform 0.2s; }

.halves_regular {
  align-items: center; }

.team {
  padding-bottom: 10rem; }
  .team div {
    padding-bottom: 3rem; }
  .team img {
    width: 100%;
    height: auto;
    margin-bottom: 2rem; }
  .team hr {
    border-width: 1px;
    margin-top: 1rem;
    margin-bottom: 2rem; }

.aktuelles hr {
  border-width: 1px;
  margin-top: 1rem;
  margin-bottom: 2rem; }

.aktuelles .row {
  margin-bottom: 6rem; }

.aktuelles .row:last-child {
  margin-bottom: 0rem; }

.aktuelles .row div p:first-child {
  margin-bottom: 0; }

@media (min-width: 550px) {
  .bereiche li {
    font-size: 1.8rem; }

  .subnavi {
    justify-content: center;
    gap: 1rem; }
    .subnavi li {
      padding: 5px 20px; } }
@media (min-width: 550px) and (min-width: 740px) {
  .bereiche li {
    font-size: 2.0rem; }

  .projekte {
    grid-template-columns: repeat(12, 1fr); }

  .halves div:first-child hr {
    margin-left: calc(100% - 110px); }

  .projekt {
    margin-bottom: 0rem; } }
@media (min-width: 1000px) {
  .content {
    margin-bottom: 12rem; }
    .content .grid-container {
      margin-top: 12rem; }
    .content .nomargin {
      margin-top: 0; }
    .content .smallmargin {
      margin-top: 6rem; }

  .team {
    padding-bottom: 12rem; }
    .team div {
      padding-bottom: 6rem; }

  .aktuelles {
    display: flex;
    flex-direction: column; }
    .aktuelles .row {
      margin-bottom: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 5rem;
      align-items: center; }
    .aktuelles .row:nth-child(even) div:first-child {
      text-align: left;
      padding-left: 10rem; }
    .aktuelles .row:nth-child(even) div:last-child {
      margin-right: -5rem;
      order: -1; }
    .aktuelles .row:nth-child(odd) div:first-child {
      text-align: right;
      padding-right: 10rem; }
      .aktuelles .row:nth-child(odd) div:first-child hr {
        margin-left: calc(100% - 102px); }
    .aktuelles .row:nth-child(odd) div:last-child {
      margin-left: -5rem; } }
@media (min-width: 1200px) {
  .bereiche {
    width: 80%; }
    .bereiche li {
      font-size: 2.4rem; } }
.stage {
  position: relative;
  width: 100%; }

.stage img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  margin-bottom: 4rem; }

.stage img.aktiv {
  opacity: 1;
  position: relative; }

@media (min-width: 740px) {
  .stage img {
    margin-bottom: 0rem; } }
.footer {
  padding: 6rem 0; }
  .footer img {
    width: 56px;
    width: 57px ; }
  .footer p {
    margin-bottom: 0;
    font-size: 1.6rem; }
  .footer hr {
    border-width: 1px;
    margin-top: 2rem;
    margin-bottom: 2rem; }
  .footer div {
    margin-bottom: 2rem; }
  .footer div:nth-child(2) {
    margin-bottom: 0rem; }

i {
  font-family: "Fontawesome";
  position: relative;
  font-style: normal;
  width: 20px;
  height: 15px;
  display: inline-block;
  font-size: 1.5rem; }

i::before {
  content: "";
  position: absolute;
  top: -1px;
  animation: zonecolor 20s linear infinite; }

i.fa-instagram::before {
  content: "\e055"; }

i.fa-linkedin::before {
  content: "\f0e1"; }

@media (min-width: 740px) {
  .footer {
    padding: 10rem 0; }
    .footer div {
      margin-bottom: 0rem; }

  .adresse {
    grid-template-columns: 100px 1fr;
    gap: 2rem; }
    .adresse > div:nth-child(3), .adresse > div:nth-child(4) {
      grid-column: 2; }

  .kontakt {
    display: grid;
    grid-template-columns: 160px 70px 60px 100px;
    gap: 3rem; }

  .social {
    grid-column: span 2; } }
@media (min-width: 1000px) {
  .footer {
    padding: 10rem 0; }

  .kontakt {
    grid-template-columns: 160px 70px 60px 100px 220px; }

  .social {
    grid-column: span 1; } }