@charset "UTF-8";
/* SASS Document */
.container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  display: grid; }

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

@media (min-width: 750px) {
  .grid-container {
    max-width: 85%;
    display: grid;
    grid-gap: 3rem;
    gap: 3rem; }

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

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

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

  .container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-gap: 3rem;
    gap: 3rem; } }
/* grids to 3 columns above mobile sizes */
@media (min-width: 1000px) {
  .grid-container {
    max-width: 90%;
    display: grid;
    grid-gap: 4rem;
    gap: 4rem; }

  /* 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: repeat(4, 1fr); }

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

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

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

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

  .grid-container.full_two {
    grid-template-columns: 1fr 9fr 2fr; }

  .grid-container.halves_offset {
    grid-template-columns: 1fr 5fr 5fr 1fr; }
    .grid-container.halves_offset div:first-child {
      grid-column-start: 2; }

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

  .grid-container.full_offset_two {
    grid-template-columns: 2fr 8fr 2fr; }
    .grid-container.full_offset_two div:first-child {
      grid-column-start: 2; } }
/* 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.4em;
  /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.5;
  font-weight: 300;
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000; }

h1 {
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: 700; }

h2 {
  font-size: 2.0rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1.5rem; }

h3 {
  font-size: 2.0rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1.5rem;
  margin-bottom: 5rem;
  position: relative; }

h3::after {
  content: "";
  width: 120px;
  height: 4px;
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  background-color: #ffcc00; }

h4 {
  font-size: 2rem;
  line-height: 1.5;
  margin-bottom: 5rem;
  font-weight: 300;
  position: relative; }

h4::after {
  content: "";
  width: 120px;
  height: 4px;
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  background-color: #ffcc00; }

h5 {
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: .2rem;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.5rem; }

h6 {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0; }

.start h4::after {
  background-color: #fff; }

.referenz_detail h3::after {
  background-color: #fff; }

/* Larger than phablet */
@media (min-width: 750px) {
  body {
    font-size: 1.5em; }

  h1 {
    font-size: 3.6rem; }

  h2 {
    font-size: 2.4rem; }

  h3 {
    font-size: 2.4rem; }

  h4 {
    font-size: 2rem; }

  h5 {
    font-size: 1.5rem; }

  h6 {
    font-size: 1.5rem; } }
@media (min-width: 1200px) {
  body {
    font-size: 1.6em; }

  h1 {
    font-size: 5rem; }

  h2 {
    font-size: 2.8rem; }

  h3 {
    font-size: 2.8rem; }

  h4 {
    font-size: 2.4rem; }

  h5 {
    font-size: 1.6rem; }

  h6 {
    font-size: 1.5rem; } }
p {
  margin-top: 0; }

.small {
  font-size: 1.5rem; }

strong {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; }

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

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: inline-block;
  height: 50px;
  padding: 0 20px;
  color: #ffcc00;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 50px;
  text-decoration: none;
  white-space: nowrap;
  background-color: #000;
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 25px; }

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

.button:hover,
button:hover {
  color: #000;
  background-color: #ffcc00; }

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

.button:focus,
button:focus {
  color: #555;
  border-color: #aaaaaa;
  outline: 0; }

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

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

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

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

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

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

input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
  color: #fff;
  background-color: #888;
  border-color: #888; }
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 #d1d1d1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }

@media (min-width: 750px) {
  .button,
  button {
    font-size: 15px; } }
@media (min-width: 1200px) {
  .button,
  button {
    font-size: 16px; } }
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
textarea,
select {
  height: 38px;
  padding: 6px 10px;
  /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #d1d1d1;
  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 #ffcc00;
  outline: 0; }

textarea:focus,
select:focus {
  border: 1px solid #ffcc00;
  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: disc outside; }

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

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

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

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

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: whitesmoke;
  border: 1px solid #e5e5e5;
  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 #e5e5e5; }

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

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

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

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

pre,
blockquote,
dl,
figure,
table,
p,
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 #e5e5e5; }

/* 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 */
html {
  scroll-behavior: smooth;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4; }

/* poppins-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url("fonts/poppins-v22-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* poppins-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url("fonts/poppins-v22-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* poppins-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url("fonts/poppins-v22-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
/* poppins-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url("fonts/poppins-v22-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ }
.header {
  position: relative;
  height: 140px; }
  .header .top {
    width: 100%;
    height: 4px;
    background-color: #000;
    position: absolute; }
  .header .logo {
    width: 163px;
    height: 86px; }

.menu-button {
  position: absolute;
  z-index: 4;
  top: 25px;
  right: 25px;
  margin-right: 30px; }

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

#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: 2px;
  width: 30px;
  position: absolute;
  display: inline;
  content: '';
  left: 0; }

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

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

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

#nav-toggle span:before {
  top: -8px;
  background: #000; }

#nav-toggle span:after {
  bottom: -8px;
  background: #000; }

#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;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transform: rotate(45deg); }

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

.overlay {
  align-items: top;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  background: #ffcc00;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  display: flex;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  box-sizing: border-box; }

.overlay.open {
  opacity: 1;
  overflow-y: scroll;
  visibility: visible;
  overflow-x: hidden; }

.lot {
  position: absolute;
  opacity: 0.2;
  width: 350px;
  height: 350px;
  z-index: -1;
  right: -100px;
  top: 100px; }

.navi {
  max-width: 85%;
  margin: 20px auto;
  width: 100%; }
  .navi ul {
    display: flex;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
    text-align: left; }
    .navi ul li {
      width: 100%;
      list-style-type: none;
      margin-bottom: 1rem;
      font-weight: 300;
      margin-left: 0; }
      .navi ul li a {
        color: #333;
        font-size: 2.1rem;
        font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
        text-decoration: none; }
      .navi ul li a.rex-current {
        font-weight: 700; }
      .navi ul li a:hover {
        font-weight: 700; }
      .navi ul li ul {
        display: block; }
        .navi ul li ul li {
          margin-bottom: 0.5rem; }
          .navi ul li ul li a {
            font-size: 1.6rem; }
    .navi ul li:before {
      content: ""; }

.verlauf {
  background: linear-gradient(#e5e5e5 0%, #fff 100%); }

.gelb {
  background-color: #ffcc00;
  position: absolute;
  height: 550px;
  width: 100%;
  z-index: -1;
  overflow: hidden; }

.kurz {
  height: 400px; }

.lot-hell {
  position: absolute;
  opacity: 1;
  width: 300px;
  height: 300px;
  right: -100px;
  top: 100px; }

@media (min-height: 500px) {
  .overlay {
    align-items: center; } }
@media (min-width: 550px) {
  .menu-button {
    top: 33px;
    right: 33px; }

  .kurz {
    height: 500px; } }
@media (min-width: 750px) {
  .header {
    height: 140px; }
    .header .logo {
      width: 163px;
      height: 86px;
      z-index: 10;
      position: absolute;
      left: 50%;
      margin-left: -82px; }
    .header .fixed {
      position: fixed; }

  .lot, .lot-hell {
    width: 450px;
    height: 450px;
    right: -50px;
    top: 150px; }

  .navi {
    width: 50%;
    margin-left: calc(50% - 82px);
    margin-top: 86px; }
    .navi ul li a {
      font-size: 2.8rem; } }
@media (min-width: 1200px) {
  .lot, .lot-hell {
    width: 500px;
    height: 500px;
    right: 150px;
    top: 150px; }

  .gelb {
    height: 700px; }

  .kurz {
    height: 500px; } }
.startbilder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2.5rem 0 0rem;
  gap: 2rem; }
  .startbilder div {
    aspect-ratio: 3 / 2; }
  .startbilder div:first-child, .startbilder div:last-child {
    grid-column: span 2; }
  .startbilder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom; }

@media (min-width: 750px) {
  .startbilder {
    grid-template-columns: 4% 6fr 4fr 4%;
    grid-template-rows: 5fr 2fr 2fr 4fr;
    padding: 5rem 0 0rem;
    gap: 3rem; }
    .startbilder div {
      aspect-ratio: inherit; }
    .startbilder div:first-child {
      grid-column: 1 / 3;
      grid-row: 1 / 3; }
    .startbilder div:nth-child(2) {
      grid-column: 3/5; }
    .startbilder div:nth-child(3) {
      grid-column: 2 / 3;
      grid-row: 3 / 5; }
    .startbilder div:last-child {
      grid-column: 3 / 4;
      grid-row: 2 / 4; } }
@media (min-width: 1000px) {
  .startbilder {
    grid-template-columns: 1fr 6fr 4fr 1fr;
    gap: 4rem; }
    .startbilder div:nth-child(3) {
      margin-left: 10%; }
    .startbilder div:last-child {
      margin-right: 10%; } }
.content img {
  width: 100%;
  height: auto;
  display: block; }

.weiss, .grau, .dunkelgrau, .mittelgrau, .schwarz {
  padding: 5rem 0 2.5rem; }

.grau {
  background-color: #f0f0f0; }

.mittelgrau {
  background-color: #ccc; }

.ohne_abstand {
  padding: 0; }

@media (min-width: 1000px) {
  .weiss, .grau, .dunkelgrau, .mittelgrau, .schwarz {
    padding: 10rem 0 7.5rem; }

  .ohne_abstand {
    padding: 0; } }
.image-container {
  aspect-ratio: 3 / 2;
  margin-bottom: 2rem; }
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.referenzen {
  margin: 3rem 0 6rem; }

.referenz {
  margin-bottom: 3rem; }
  .referenz div {
    aspect-ratio: 1 / 1;
    position: relative;
    margin-bottom: 2rem; }
  .referenz div:hover .layer {
    background-color: rgba(0, 0, 0, 0.5);
    background-image: url("../images/pfeil.svg");
    background-size: 43px 43px;
    background-repeat: no-repeat;
    background-position: center center; }
  .referenz .layer {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 2;
    -webkit-transition: background-color 0.5s;
    transition: background-color 0.5s; }
  .referenz img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: bottom; }
  .referenz p {
    position: relative; }
  .referenz a:hover {
    font-weight: 700;
    color: #333; }
  .referenz p::after {
    content: "";
    position: absolute;
    width: 0rem;
    height: 0.3rem;
    display: block;
    bottom: -2rem;
    left: 0;
    background-color: #ffcc00;
    transition: width 0.1s; }
  .referenz a:hover p::after {
    width: 10rem; }

.referenz_detail {
  margin-top: 2rem;
  padding-bottom: 4rem; }
  .referenz_detail img {
    width: 100%;
    heigth: auto;
    display: block;
    margin-bottom: 3rem; }

.gelb-hg {
  background-color: #ffcc00;
  position: relative;
  overflow: hidden; }
  .gelb-hg img.lot {
    z-index: 0; }

.overlay img.lot {
  z-index: -1;
  top: 146px; }

.gallerie {
  padding: 5rem 0;
  display: grid;
  grid-gap: 3rem; }
  .gallerie img {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .gallerie .grid-container {
    grid-gap: 3rem; }

.text {
  text-align: center;
  padding: 4rem 0;
  z-index: 2; }
  .text h1 {
    font-weight: 500;
    font-size: 3rem; }
  .text h4 {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 0.5rem; }
  .text h4::after {
    display: none; }
  .text a:hover {
    color: #000; }
  .text em {
    position: relative;
    display: inline-block;
    font-style: normal; }
  .text em::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.3rem;
    display: block;
    bottom: 0rem;
    left: 0;
    background-color: #fff;
    z-index: -1; }

.schwarz {
  background-color: #000;
  color: #fff; }
  .schwarz h5 {
    color: #ffcc00; }
  .schwarz h3 {
    color: #fff; }
  .schwarz h3::after {
    background-color: #ffcc00; }
  .schwarz .button, .schwarz button {
    color: #000;
    background-color: #ffcc00; }
  .schwarz .button:hover,
  .schwarz button:hover {
    color: #000;
    background-color: #fff; }

.container.halves div.infotext {
  padding: 4rem 7.5%;
  align-content: center; }
.container.halves img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.drei_bilder {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 1fr 1fr; }
  .drei_bilder .bild_breit {
    grid-column: span 2; }

.bilder {
  padding: 5rem 0;
  grid-gap: 2rem; }
  .bilder div {
    aspect-ratio: 3 / 2; }
    .bilder div img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

.halves img {
  padding-bottom: 3rem; }

@media (min-width: 750px) {
  .referenz_detail {
    margin-top: 3rem;
    padding-bottom: 5rem; }

  .referenz {
    margin-bottom: 0; }

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

  .gallerie .span {
    grid-column: span 2; }

  .gallerie {
    padding: 8rem 0; }

  .text {
    padding: 6rem 0; }
    .text h1 {
      font-size: 4rem; }
    .text h4 {
      font-size: 1.8rem;
      margin-bottom: 1rem; }
    .text a {
      position: relative;
      display: inline-block; }
    .text a::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 0.4rem;
      display: block;
      opacity: 0;
      bottom: 0rem;
      left: 0;
      background-color: #fff;
      transition: opacity 0.5s;
      z-index: -1; }
    .text a:hover {
      color: #000; }
    .text a:hover::before {
      opacity: 1; }
    .text .drei_bilder {
      grid-gap: 3rem; } }
@media (min-width: 1000px) {
  .referenz_detail {
    grid-template-columns: 2fr 1fr;
    padding-bottom: 0rem; }
    .referenz_detail div:first-child {
      margin-left: -9%; }
    .referenz_detail img {
      margin-bottom: 0rem; }

  .referenzen {
    margin: 5rem 0 10rem; }

  .gallerie {
    padding: 10rem 0; }

  .text {
    padding: 8rem 0; }
    .text h1 {
      font-size: 6rem; }
    .text h4 {
      font-size: 2rem;
      margin-bottom: 2rem; }
    .text a::before {
      height: 0.4rem; }
    .text em::before {
      height: 0.4rem; }

  .container.halves div.infotext {
    padding: 8rem 10%; }

  .halves img {
    padding-bottom: 0rem; } }
.footer {
  background-color: #ffcc00;
  padding: 5rem 0 2.5rem;
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid #000; }
  .footer h5 {
    font-weight: 700;
    letter-spacing: .3rem; }
  .footer p {
    font-size: 1.4rem; }
  .footer li {
    margin: 0;
    line-height: 1.3;
    list-style-type: none; }
  .footer li:before {
    display: none; }
  .footer a {
    color: #333;
    font-size: 1.4rem; }
  .footer a:hover {
    color: #000; }

.logo-footer {
  width: 137px;
  height: 79px;
  margin-bottom: 2.5rem; }

.linie {
  border-bottom: 1px solid #fff;
  padding-bottom: 1rem;
  margin-bottom: 2rem; }

.lot-footer {
  position: absolute;
  opacity: 0.2;
  width: 310px;
  height: 310px;
  right: -100px;
  top: 20px; }

@media (min-width: 750px) {
  .kontakt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }

  .kontakt-logo {
    flex-basis: 100%;
    display: flex;
    gap: 3rem; } }
@media (min-width: 1200px) {
  .footer {
    padding-bottom: 6rem;
    padding-top: 6rem; }

  .linie {
    margin-bottom: 3rem;
    margin-top: 4rem; }

  .kontakt {
    flex-wrap: nowrap; }

  .kontakt-logo {
    flex-basis: inherit;
    gap: 4rem; } }

/*# sourceMappingURL=style.css.map */