@charset "UTF-8";
/* SASS Document */
@font-face {
  font-family: "Akko W04 Bold";
  src: url("fonts/1449664/f9200505-e371-4b04-bc9a-99cde83b8d67.woff2") format("woff2"), url("Fonts/1449664/e148a89d-cf96-4d36-aca4-ab6d05f7fdfe.woff") format("woff"); }
@font-face {
  font-family: "Akko W04 Regular";
  src: url("fonts/6362603/96d8e1f5-b2f9-4c3c-8052-8154f898a116.woff2") format("woff2"), url("Fonts/6362603/4c3cbdb3-d2d8-46ad-b8f4-3b7ac3dcfc4a.woff") format("woff"); }
.container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  padding: 10% 0 0; }

@media (min-width: 750px) {
  .container {
    padding: 8% 0 0;
    max-width: 100%; } }
@media (min-width: 1000px) {
  .container {
    padding: 4% 0 0; } }
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.grid-container {
  display: grid;
  padding: 0 0 8%;
  grid-gap: 2rem;
  gap: 2rem;
  margin: 0rem 2rem; }

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

  /* basic grids */
  .grid-container.sixth {
    grid-template-columns: repeat(6, 1fr); }
    .grid-container.sixth div:first-child {
      grid-column: 1 / 4; }
    .grid-container.sixth div:nth-child(2) {
      grid-column: 4 / 7; }

  .grid-container.sixth_left {
    grid-template-columns: repeat(6, 1fr); }
    .grid-container.sixth_left div:first-child {
      grid-column: 1 / 4; }
    .grid-container.sixth_left div:nth-child(2) {
      grid-column: 4 / 7; }

  .grid-container.sixth_dot {
    grid-template-columns: repeat(6, 1fr);
    justify-items: end; }
    .grid-container.sixth_dot div:first-child {
      grid-column: 1 / 2; }
    .grid-container.sixth_dot div:nth-child(2) {
      grid-column: 2 / 6; }

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

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

  .grid-container.full {
    grid-template-columns: 1fr; } }
@media (min-width: 1000px) {
  .grid-container {
    grid-gap: 4rem;
    gap: 4rem;
    margin: 0rem 4rem; }

  .grid-container.sixth {
    grid-template-columns: repeat(6, 1fr); }
    .grid-container.sixth div:first-child {
      grid-column: 1 / 4; }
    .grid-container.sixth div:nth-child(2) {
      grid-column: 4 / 7; }

  .grid-container.sixth_left {
    grid-template-columns: repeat(6, 1fr); }
    .grid-container.sixth_left div:first-child {
      grid-column: 1 / 4; }
    .grid-container.sixth_left div:nth-child(2) {
      grid-column: 4 / 7; }

  .grid-container.sixth_dot {
    grid-template-columns: repeat(6, 1fr);
    justify-items: end; }
    .grid-container.sixth_dot div:first-child {
      grid-column: 1 / 3; }
    .grid-container.sixth_dot div:nth-child(2) {
      grid-column: 3 / 6; }

  .grid-container.thirds {
    grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) {
  .grid-container {
    grid-gap: 6rem;
    gap: 6rem;
    margin: 0rem 6rem; }

  .grid-container.sixth {
    grid-template-columns: repeat(6, 1fr); }
    .grid-container.sixth div:first-child {
      grid-column: 1 / 3; }
    .grid-container.sixth div:nth-child(2) {
      grid-column: 4 / 7; }

  .grid-container.sixth_left {
    grid-template-columns: repeat(6, 1fr); }
    .grid-container.sixth_left div:first-child {
      grid-column: 1 / 4; }
    .grid-container.sixth_left div:nth-child(2) {
      grid-column: 4 / 6; } }
/* 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.6em;
  /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.4;
  font-weight: normal;
  font-family: "Akko W04 Regular", Helvetica, Arial, sans-serif;
  color: #666;
  margin: 0;
  letter-spacing: 0.02rem; }

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

h1 {
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: .05rem;
  color: #e53517;
  font-family: "Akko W04 Bold", Helvetica, Arial, sans-serif;
  text-transform: uppercase; }

h2 {
  font-size: 2.8rem;
  line-height: 1.25;
  letter-spacing: .05rem;
  text-transform: uppercase;
  color: #e53517;
  font-family: "Akko W04 Bold", Helvetica, Arial, sans-serif; }

h3 {
  font-size: 2.1rem;
  line-height: 1.3;
  letter-spacing: .1rem;
  position: relative;
  display: inline-block;
  max-width: max-content; }

h4 {
  font-size: 2.1rem;
  line-height: 1.4;
  letter-spacing: .05rem;
  text-transform: uppercase;
  font-family: "Akko W04 Bold", Helvetica, Arial, sans-serif;
  color: #e53517; }

h5 {
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  font-family: "Akko W04 Bold", Helvetica, Arial, sans-serif;
  color: #000; }

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

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

.small {
  font-size: 1.4rem; }

strong {
  font-family: "Akko W04 Bold", Helvetica, Arial, sans-serif;
  font-weight: normal; }

@media (min-width: 550px) {
  body {
    font-size: 1.8em; }

  h1 {
    font-size: 3.0rem; }

  h2 {
    font-size: 3.0rem; }

  h3 {
    font-size: 2.1rem; }

  h4 {
    font-size: 1.8rem; }

  h5 {
    font-size: 1.6rem; }

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

  h2 {
    font-size: 3.2rem; }

  h3 {
    font-size: 2.4rem; }

  h4 {
    font-size: 1.8rem; }

  h5 {
    font-size: 1.6rem; }

  h6 {
    font-size: 1.5rem; }

  .small {
    font-size: 1.5rem; } }
@media (min-width: 1200px) {
  h1 {
    font-size: 3.2rem; }

  h2 {
    font-size: 3.2rem; }

  h3 {
    font-size: 2.4rem; }

  h4 {
    font-size: 1.8rem; }

  h5 {
    font-size: 1.6rem; }

  h6 {
    font-size: 1.5rem; } }
em {
  color: #e53517;
  font-style: normal; }

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

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button {
  font-family: "Akko W04 Regular", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  display: flex;
  font-size: 14px;
  font-weight: normal;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  margin: 0;
  border: #e53517 1px solid;
  width: 100px;
  height: 100px;
  line-height: 1.5;
  border-radius: 50%;
  text-align: center;
  align-items: center;
  letter-spacing: 0.5rem;
  padding: 12px; }

input[type="submit"], input[type="reset"], input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #444444;
  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 #e5e5e5;
  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; }

@media (min-width: 550px) {
  .button,
  button {
    font-size: 16px;
    width: 120px;
    height: 120px;
    padding: 15px; } }
@media (min-width: 750px) {
  .button,
  button {
    font-size: 18px;
    width: 150px;
    height: 150px;
    padding: 20px; } }
.button.button-primary,
button.button-primary {
  color: #fff;
  background-color: #e53517;
  border-color: #e53517; }

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

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

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

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

input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
  color: #fff;
  background-color: #e53517;
  border-color: #e53517; }
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 #fbfbfb;
  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 #fbfbfb;
  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 #e53517;
  outline: 0; }

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

/* 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; }

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: 5rem;
  margin-bottom: 5.5rem;
  border-width: 0;
  border-top: 1px solid transparent;
  height: 2px;
  background-image: url(../images/dot.svg);
  background-repeat: repeat-x; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after,
.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; }

body {
  -webkit-font-smoothing: antialiased; }

.header .grid-container {
  grid-gap: 0rem;
  gap: 0rem;
  margin: 0rem 2rem;
  padding: 4% 0 0; }

#logo {
  grid-row: 2 / 3;
  margin-top: -43px; }

.logo {
  line-height: 0.72;
  letter-spacing: -0.05rem;
  grid-row: 1 / 2; }
  .logo span {
    font-family: "Akko W04 Regular", Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.8;
    display: block;
    letter-spacing: 0.1rem; }
  .logo a {
    text-decoration: none;
    color: #e53517; }
  .logo a:hover {
    color: #e53517; }

.navi {
  grid-row: 1 / 2; }
  .navi ul {
    text-align: right;
    margin: 5px -10px 0 0; }
    .navi ul li {
      list-style-type: none;
      display: inline-block;
      margin: -2px;
      font-size: 1.6rem; }
      .navi ul li a {
        border: transparent 1px solid;
        color: #e53517;
        display: flex;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        padding: 5px; }
      .navi ul li a.rex-current, .navi ul li a.rex-active, .navi ul li a:hover {
        border: #e53517 1px solid; }
    .navi ul li:first-child a {
      width: 58px;
      height: 58px; }

.start .grid-container {
  padding-top: 0;
  display: grid; }
.start .thirds {
  grid-template-rows: 0.33334fr 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(2, 1fr); }
.start img {
  width: 100%;
  height: auto;
  position: absolute; }

.start {
  flex-basis: 100%;
  margin-bottom: 0%; }
  .start div div {
    position: relative;
    padding-bottom: 50%; }
    .start div div img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%; }
    .start div div a.bild_link {
      position: absolute;
      width: calc(100% - 80px);
      height: calc(100% - 20px);
      padding-right: 80px;
      padding-bottom: 20px;
      z-index: 2;
      color: #fff;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      opacity: 0;
      -webkit-transition: opacity 0.5s;
      transition: opacity 0.5s;
      text-align: right; }
    .start div div a.bild_link::after {
      content: "→";
      position: absolute;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      padding: 5px;
      border: #fff 1px solid;
      line-height: 35px;
      text-align: center;
      font-size: 2.4rem;
      margin-bottom: -2px;
      margin-right: -55px; }
  .start div div:nth-child(1) {
    grid-row: 1 / 3;
    grid-column: 1 / 3; }
  .start div div:nth-child(2) {
    display: none; }
  .start div div:nth-child(3) {
    grid-row: 3 / 5;
    grid-column: 1 / 2; }
  .start div div:nth-child(4) {
    grid-row: 3 / 4;
    grid-column: 2 / 3; }
  .start div div:nth-child(5) {
    grid-row: 4 / 5;
    grid-column: 2 / 3; }
  .start div div:nth-child(6) {
    grid-row: 5 / 6;
    grid-column: 1 / 2; }
  .start div .start_link {
    grid-row: 5 / 8;
    grid-column: 2 / 3;
    justify-self: center;
    align-self: center;
    padding-bottom: 0; }
    .start div .start_link p {
      margin-bottom: 0; }
    .start div .start_link a {
      margin-bottom: 0; }

@media (min-width: 400px) {
  .start div .start_link {
    grid-row: 5 / 6;
    grid-column: 2 / 3;
    justify-self: center;
    align-self: center;
    padding-bottom: 0; } }
@media (min-width: 550px) {
  #logo {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    margin-top: 0px; }

  .navi ul {
    margin: -15px -10px 0 0; } }
@media (min-width: 750px) {
  .header .grid-container {
    grid-gap: 3rem;
    gap: 3rem;
    margin: 0rem 3rem; } }
@media (min-width: 1000px) {
  .header .grid-container {
    grid-gap: 4rem;
    gap: 4rem;
    margin: 0rem 4rem; }

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

  .navi {
    grid-column: 3 / 4; }
    .navi ul li {
      font-size: 1.8rem; }
      .navi ul li a {
        padding: 10px; }

  .start div div:nth-child(1) {
    grid-row: 1 / 3;
    grid-column: 2 / 4; }
  .start div div:nth-child(2) {
    grid-row: 2 / 4;
    display: inherit; }
  .start div div:nth-child(3) {
    grid-row: 3 / 5;
    grid-column: 2 / 3; }
  .start div div:nth-child(4) {
    grid-row: 3 / 4;
    grid-column: 3 / 4; }
  .start div div:nth-child(5) {
    grid-row: 4 / 5;
    grid-column: 3 / 4; }
  .start div div:nth-child(6) {
    grid-row: 5 / 6;
    grid-column: 2 / 3; }
  .start div .start_link {
    grid-row: 5 / 6;
    grid-column: 3 / 4;
    justify-self: center;
    align-self: center;
    padding-bottom: 0; }

  #logo {
    grid-column: 2 / 3; } }
@media (min-width: 1200px) {
  .header .grid-container {
    grid-gap: 6rem;
    gap: 6rem;
    margin: 0rem 6rem; }

  .start a.bild_link:hover {
    opacity: 1; } }
.content {
  margin-top: 10%; }
  .content img {
    width: 100%;
    height: auto; }

@media (min-width: 750px) {
  .content {
    margin-top: 8%; } }
@media (min-width: 1000px) {
  .content_projekt {
    margin-top: 8%; } }
.grau {
  background-color: #f0f0f0;
  margin-top: 0; }

.rot {
  background-color: #e53517;
  margin-top: 0; }
  .rot h2, .rot h3, .rot h4, .rot p, .rot ul {
    color: #fff; }
  .rot li.item h3 {
    margin-bottom: 2.5rem; }
  .rot a {
    color: #fff;
    text-decoration: underline; }
  .rot a:hover {
    color: #e5e5e5;
    text-decoration: none; }

:root {
  --gutter: 2rem; }

.app {
  padding: 10% 0 0.5rem 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start; }
  .app h2 {
    margin-bottom: 0; }

.app > * {
  grid-column: 2 / -2; }

.app > .full {
  grid-column: 1 / -1; }

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: 0px repeat(var(--total), calc(90% - var(--gutter))) 0px;
  grid-template-rows: minmax(150px, 1fr);
  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: var(--gutter);
  margin-bottom: calc(-.25 * var(--gutter)); }

.hs:before,
.hs:after {
  content: ''; }

.app {
  width: 100vw;
  overflow-y: scroll; }

.hs > li,
.item {
  list-style: none;
  scroll-snap-align: center;
  padding: 0;
  margin-left: calc(var(--gutter) / 2); }
  .hs > li div,
  .item div {
    position: relative;
    padding-bottom: 66.667%;
    z-index: 2;
    margin-bottom: calc(var(--gutter) / 2); }
    .hs > li div img,
    .item div img {
      width: 100%;
      height: 100%;
      position: absolute;
      object-fit: cover; }
  .hs > li h2, .hs > li h3, .hs > li h4, .hs > li p,
  .item h2,
  .item h3,
  .item h4,
  .item p {
    margin-bottom: 0.5rem; }

@media (min-width: 550px) {
  .hs {
    grid-template-columns: 0px repeat(var(--total), calc(70% - var(--gutter) * 2)) 0px; } }
@media (min-width: 750px) {
  :root {
    --gutter: 3rem; }

  .app {
    padding: 6% 0 1.5rem 0; }

  .hs {
    grid-template-columns: 0px repeat(var(--total), calc(70% - var(--gutter) * 2)) 0px; } }
@media (min-width: 1000px) {
  :root {
    --gutter: 4rem; }

  .hs {
    grid-template-columns: 0px repeat(var(--total), calc(45% - var(--gutter) * 2)) 0px; } }
@media (min-width: 1200px) {
  :root {
    --gutter: 6rem; }

  .hs {
    grid-template-columns: 0px repeat(var(--total), calc(34% - var(--gutter) * 2)) 0px; } }
.dot {
  background: #e53517;
  width: 35px;
  height: 35px;
  border-radius: 50%; }

.center {
  justify-items: center; }

.nogap {
  padding: 0; }

.projekte div div, .buero div div {
  position: relative;
  padding-bottom: 66.7%; }
  .projekte div div img, .buero div div img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .projekte div div p, .buero div div p {
    position: absolute;
    bottom: -2.5rem;
    font-size: 1.4rem;
    margin-bottom: 0; }
  .projekte div div a, .buero div div a {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2; }
.projekte div div.portrait, .buero div div.portrait {
  grid-row: span 2; }
.projekte div div:nth-last-child(2), .projekte div div:nth-last-child(3), .projekte div div:last-child, .buero div div:nth-last-child(2), .buero div div:nth-last-child(3), .buero div div:last-child {
  grid-row: span 1; }

.projekte div div:first-child, .buero div div:first-child {
  padding-bottom: 0;
  margin-bottom: 0; }

.projekte div, .buero div {
  margin-bottom: 2rem; }

.projekt {
  display: none; }

.show {
  display: block; }

.subnavi {
  display: grid;
  justify-items: flex-start;
  align-items: center; }
  .subnavi ul {
    position: relative;
    text-align: left;
    margin-bottom: 0;
    min-height: 28px; }
    .subnavi ul li {
      font-size: 1.6rem;
      list-style-type: none;
      margin-bottom: 0;
      display: inline-block;
      margin-right: 1rem;
      margin-left: 0;
      line-height: 1.5; }
      .subnavi ul li a {
        position: relative;
        color: #e53517;
        line-height: 28px;
        cursor: pointer; }
      .subnavi ul li a:hover, .subnavi ul li a.active {
        font-family: "Akko W04 Bold", Helvetica, Arial, sans-serif;
        text-transform: uppercase; }

@media (min-width: 750px) {
  .projekte div div:first-child, .buero div div:first-child {
    grid-column: span 2; }

  .projekte div, .buero div {
    margin-bottom: 0; }

  .projekte .thirds, .buero .thirds {
    grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .projekte div div p {
    bottom: -3rem; }

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

  .subnavi {
    justify-items: flex-end;
    padding-bottom: 66.7% !important; }
    .subnavi ul {
      position: absolute;
      text-align: right;
      right: 0;
      margin-bottom: 0; }
      .subnavi ul li {
        display: block;
        margin-right: 0;
        font-size: 1.8rem; }

  .projekte div div:first-child, .buero div div:first-child {
    grid-column: span 1;
    padding-bottom: inherit; }

  .buero div div.portrait {
    grid-row: span 2; } }
@media (min-width: 1200px) {
  .projekte div div p {
    bottom: -4rem; } }
.projekt_header {
  padding: 6% 0; }
  .projekt_header div.thirds {
    grid-template-columns: 1fr; }
    .projekt_header div.thirds div {
      position: relative; }
      .projekt_header div.thirds div img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .projekt_header div.thirds div p {
        color: #e53517;
        margin-bottom: 0; }
      .projekt_header div.thirds div h3 {
        margin-bottom: 0rem; }
      .projekt_header div.thirds div h1 {
        margin-bottom: 1rem; }
    .projekt_header div.thirds div:last-child {
      grid-column: span 2;
      padding-bottom: 66.7%; }

.portrait {
  grid-row: span 2; }

.text_bild .text {
  grid-row: 3 / 4;
  padding: 0;
  grid-column: span 2; }
.text_bild .text:first-child {
  grid-row: 1; }
.text_bild div {
  position: relative;
  padding-bottom: 66.7%; }
  .text_bild div img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.img-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  grid-gap: 2rem;
  grid-column: span 2;
  padding-bottom: 0 !important; }

.zwei div.bild {
  grid-column: span 2; }

.mittig {
  justify-content: center;
  display: flex;
  padding-top: 4rem; }

@media (min-width: 750px) {
  .img-container {
    gap: 3rem;
    grid-gap: 3rem; } }
@media (min-width: 1000px) {
  .img-container {
    gap: 4rem;
    grid-gap: 4rem; }

  .projekt_header div.thirds {
    grid-template-columns: repeat(3, 1fr); }
    .projekt_header div.thirds div:first-child {
      max-width: 340px;
      text-align: right;
      justify-self: end;
      align-self: end; }

  .text_bild .text {
    grid-column: inherit;
    grid-row: span 2; }

  .text_bild.zwei .text:first-child {
    grid-row: span 1; } }
@media (min-width: 1200px) {
  .img-container {
    gap: 6rem;
    grid-gap: 6rem; } }
.leistungen {
  padding: 8% 0 0 0; }
  .leistungen hr {
    padding: 0;
    margin: 0; }
  .leistungen h2 {
    margin: 0; }
  .leistungen div:last-child hr {
    display: none; }

.kontakt div {
  display: grid;
  justify-items: center; }
  .kontakt div p {
    text-align: center; }
  .kontakt div h4 {
    margin-bottom: 0; }

.rund {
  border-radius: 50%;
  max-width: 240px;
  margin-bottom: 3rem; }

@media (min-width: 750px) {
  .leistungen {
    grid-template-columns: repeat(3, 1fr); }
    .leistungen div:nth-child(4n+5) {
      grid-column: 2 / 4; }
    .leistungen div:nth-child(4n+4) {
      grid-column: 2 / 4; }
    .leistungen div:nth-child(4n+3) {
      grid-column: 2 / 4; }

  .l_head {
    grid-column: 2 / 4; }

  .rechtsb {
    text-align: right;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-break: break-word; }

  .thirds.leistungen {
    grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) {
  .leistungen div:nth-child(4n+4) {
    grid-column: auto; }
  .leistungen div:nth-child(4n+3) {
    grid-column: auto; } }
.thirds.text div {
  grid-column: 2 / 4; }

.footer {
  background: #f0f0f0;
  padding-bottom: 10%;
  padding-top: 10%; }
  .footer h4, .footer h2, .footer p, .footer ul {
    margin-bottom: 0;
    color: #e53517; }
  .footer p {
    font-size: 1.6rem; }
  .footer li {
    font-size: 1.6rem;
    color: #666;
    margin: 0;
    padding: 0;
    list-style: none; }
  .footer a {
    color: #e53517; }
  .footer a:hover {
    color: #e53517; }

@media (min-width: 750px) {
  .footer {
    padding-bottom: 8%;
    padding-top: 8%; }

  .footer .grid-container.quarters {
    grid-template-columns: repeat(3, 1fr); }
    .footer .grid-container.quarters div:first-child {
      grid-column: 1 / 4; }

  .footer .grid-container.quarters.row_two {
    grid-template-columns: repeat(2, 1fr); }
    .footer .grid-container.quarters.row_two div:first-child {
      grid-column: 1 / 2; } }
@media (min-width: 1000px) {
  .footer .grid-container.quarters {
    grid-template-columns: repeat(4, 1fr); }
    .footer .grid-container.quarters div:first-child {
      grid-column: 1 / 2; } }
@media (min-width: 1200px) {
  .footer .grid-container.quarters.row_two {
    grid-template-columns: repeat(3, 1fr); }
    .footer .grid-container.quarters.row_two div:first-child {
      grid-column: 1 / 2; } }
@media (min-width: 1300px) {
  .footer .grid-container.quarters.row_two {
    grid-template-columns: repeat(4, 1fr); }
    .footer .grid-container.quarters.row_two div:first-child {
      grid-column: 1 / 2; } }
.footer .grid-container {
  padding-bottom: 0; }

.footer ul li {
  display: inline-block;
  margin-right: 5px; }

.footer ul li:before {
  content: "/";
  color: #e53517;
  margin-right: 7px; }

.footer ul li:first-child:before {
  content: "";
  color: #e53517;
  margin-right: 0px; }

@media (min-width: 750px) {
  .footer .grid-container.halves div:last-child {
    text-align: right; }

  .footer ul {
    margin-top: 45px; } }

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