@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
:root {
  font-size: 12px;
}

@media only screen and (min-width: 750px) {
  :root {
    font-size: 16px;
  }
}
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: white;
}

/* Always reserve the scrollbar so the centred nav container (and the logo)
   keeps the same horizontal position on short pages (e.g. Kontakt) as on
   long, scrolling pages. Fixes the logo "jumping" to the right. (#1) */
html {
  overflow-y: scroll;
}

body {
  padding-top: 100px;
}

.main-nav {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100px;
  background: #ededed;
}

.main-nav .main-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.main-nav ul {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

.main-nav ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
}

.main-nav-list {
  margin-left: auto;
  list-style: none;
  padding: 0;
}

.main-container {
  margin: 0 auto;
  min-width: 300px;
  max-width: 95%;
  width: 100%;
}

@media only screen and (min-width: 750px) {
  .main-container {
    min-width: 750px;
    max-width: 90vw;
  }
}
@media only screen and (min-width: 1200px) {
  .main-container {
    min-width: 1200px;
    max-width: 1600px;
    width: 95vw;
  }
}
.main-cover {
  display: flex;
  align-items: center;
  margin-left: calc(50% - 50vw);
  width: 100vw;
  height: 70vh;
  background-size: cover;
}

.oxxid-work-detail--image {
  margin-left: calc(50% - 50vw);
  width: 100vw;
  height: calc(90vh - 100px);
  background-position: center;
  background-size: cover;
}

.oxxid-work-detail-content {
  display: grid;
  grid-auto-flow: dense;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
}

@media only screen and (max-width: 749px) {
  .oxxid-work-detail-content {
    /* grid-gap: 5px; */
    grid-template-columns: 100%;
  }
  .oxxid-work-detail-content--left,
  .oxxid-work-detail-content--right {
    grid-column: 1 !important;
  }
}
/* @media only screen and (min-width: 750px) {
    .oxxid-work-detail-content {
        display: grid;
    }
} */
.oxxid-work-detail-content img {
  width: 100%;
  height: 100%;
}

.oxxid-work-detail-content--left {
  grid-column: 1;
}

.oxxid-work-detail-content--right {
  grid-column: 2;
}

.oxxid-work-detail-content .oxxid-product {
  margin-top: -150px;
  padding: 15px;
  padding-bottom: 30px;
  background: #ededed;
}

@media only screen and (max-width: 749px) {
  .oxxid-work-detail-content .oxxid-product {
    margin-bottom: 5px;
  }
}
.oxxid-work-detail-content .oxxid-product--description {
  margin-top: 50px;
}

.oxxid-clients,
.oxxid-2x2-content-grid,
.oxxid-1x3-content-grid,
.oxxid-priorities {
  /* margin-bottom: 80px; */
}

.oxxid-2x2-content-grid--spaced,
.oxxid-1x3-content-grid--spaced {
  margin-bottom: 5rem;
}

.main-container .oxxid-2x2-content-grid:first-of-type,
.main-container .oxxid-1x3-content-grid:first-of-type {
  margin-top: 50px;
}

.oxxid-2x2-content-grid .oxxid-dual-grid .description--left,
.oxxid-2x2-content-grid .oxxid-dual-grid .description--right,
.oxxid-1x3-content-grid .oxxid-dual-grid .description--left,
.oxxid-1x3-content-grid .oxxid-dual-grid .description--right {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

.oxxid-clients .oxxid-dual-grid,
.oxxid-2x2-content-grid .oxxid-dual-grid,
.oxxid-priorities .oxxid-dual-grid {
  display: initial;
  grid-template-columns: 1fr 1fr;
}

.oxxid-1x3-content-grid .oxxid-dual-grid {
  display: initial;
  grid-template-columns: 1fr 3fr;
}

@media only screen and (min-width: 750px) {
  .oxxid-clients .oxxid-dual-grid,
  .oxxid-2x2-content-grid .oxxid-dual-grid,
  .oxxid-1x3-content-grid .oxxid-dual-grid,
  .oxxid-priorities .oxxid-dual-grid {
    display: grid;
  }
}
.oxxid-clients .oxxid-dual-grid h1,
.oxxid-2x2-content-grid .oxxid-dual-grid h1,
.oxxid-1x3-content-grid .oxxid-dual-grid h1,
.oxxid-priorities .oxxid-dual-grid h1 {
  word-spacing: 100vw;
}

.oxxid-clients .oxxid-dual-grid .description--right,
.oxxid-2x2-content-grid .oxxid-dual-grid .description--right,
.oxxid-1x3-content-grid .oxxid-dual-grid .description--right,
.oxxid-priorities .oxxid-dual-grid .description--right {
  margin-left: 60px;
}

@media only screen and (max-width: 749px) {
  .oxxid-clients .oxxid-dual-grid .description--right,
  .oxxid-2x2-content-grid .oxxid-dual-grid .description--right,
  .oxxid-1x3-content-grid .oxxid-dual-grid .description--right,
  .oxxid-priorities .oxxid-dual-grid .description--right {
    margin-left: 0px;
  }
  .oxxid-dual-grid .content {
    margin-top: 10px;
  }
  .oxxid-2x2-content-grid .oxxid-dual-grid .description--right,
  .oxxid-2x2-content-grid .oxxid-dual-grid .description--left {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
.oxxid-clients .oxxid-dual-grid .description--left,
.oxxid-2x2-content-grid .oxxid-dual-grid .description--left,
.oxxid-1x3-content-grid .oxxid-dual-grid .description--left,
.oxxid-priorities .oxxid-dual-grid .description--left {
  margin-right: 60px;
}

.oxxid-clients .oxxid-dual-grid .description img,
.oxxid-2x2-content-grid .oxxid-dual-grid .description img,
.oxxid-1x3-content-grid .oxxid-dual-grid .description img,
.oxxid-priorities .oxxid-dual-grid .description img {
  margin-bottom: 50px;
}

.oxxid-clients .oxxid-dual-grid .image img,
.oxxid-2x2-content-grid .oxxid-dual-grid .image img,
.oxxid-1x3-content-grid .oxxid-dual-grid .image img,
.oxxid-priorities .oxxid-dual-grid .image img {
  width: 100%;
  height: auto;
}

.oxxid-clients .priority-grid,
.oxxid-2x2-content-grid .priority-grid,
.oxxid-priorities .priority-grid {
  display: flex;
  overflow: scroll;
  align-items: baseline;
  justify-content: space-between;
}

.oxxid-clients .priority-grid figcaption,
.oxxid-2x2-content-grid .priority-grid figcaption,
.oxxid-priorities .priority-grid figcaption {
  text-align: center;
}

/* Desktop styling - only apply on screens 750px and larger */
@media only screen and (min-width: 750px) {
  /* Desktop: Sticky sidebar – kein ScrollMagic mehr */
  .oxxid-scroll-animation .oxxid-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start; /* nötig damit sticky funktioniert */
  }
  .oxxid-scroll-animation .oxxid-dual-grid .content {
    position: sticky;
    top: 250px; /* Abstand von oben: nav + Lottie-Höhe */
    height: auto;
  }
  .oxxid-scroll-animation .description {
    height: 30vh;
    margin-left: 60px;
  }
  .oxxid-scroll-animation .description:last-child {
    /* A bit of extra height = "runway" so the pinned Lottie stays put for a
       moment AFTER the last segment finishes (~100px hold, matching the gap
       between the other stops) — otherwise it unpins right as the animation
       completes and the final frame is never seen. The "Serie" text stays
       visible next to the finished animation during the hold. */
    height: 340px;
    padding-bottom: 40px;
  }
  .oxxid-scroll-animation .description--first {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 749px) {
  /* Mobile scroll animation: Dist/scripts.js pins #lottie in its own column
     while the step texts scroll past it. Keep that two-lane layout (so the
     pinned animation never overlaps the text) but give the animation a much
     wider lane and larger size — the old ~20% column made it tiny. (#10) */
  .oxxid-scroll-animation .oxxid-dual-grid {
    display: flex !important;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
  }
  .oxxid-scroll-animation .oxxid-dual-grid .content {
    flex: 0 0 40%;
    height: auto !important;
  }
  .oxxid-scroll-animation #lottie {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .oxxid-scroll-animation #lottie svg {
    max-height: 180px;
    max-width: 38vw;
  }
  .oxxid-scroll-animation .descriptions-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 10px;
    min-height: 0;
  }
  .oxxid-scroll-animation .description {
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0;
  }
  .oxxid-scroll-animation .description--first {
    margin-top: 0 !important;
  }
}
.oxxid-scroll-animation .images {
  position: relative;
}

.oxxid-scroll-animation .images img {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.oxxid-scroll-animation .images img.active {
  opacity: 1;
}

.oxxid-expertise-switch img {
  width: 100%;
  height: auto;
}

.oxxid-expertise-switch .oxxid-dual-grid {
  margin-top: 10px;
}

/* Alternating layout for expertise sections */
.oxxid-expertise-switch:nth-child(odd) .oxxid-dual-grid {
  grid-template-columns: 2fr 1fr;
}

.oxxid-expertise-switch:nth-child(even) .oxxid-dual-grid {
  grid-template-columns: 1fr 2fr;
}

footer {
  margin-top: 100px;
  min-height: 100px;
  width: 100%;
  background: #ededed;
}

footer .main-container {
  display: flex;
  align-items: center;
  flex-flow: initial;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 100%;
}

@media only screen and (max-width: 749px) {
  footer .main-container {
    flex-flow: column;
  }
  footer .main-container div {
    padding-top: 10px;
    padding-bottom: 10px;
    min-width: 100%;
  }
}
.full-width {
  position: relative;
  right: 50%;
  left: 50%;
  margin-right: -50vw;
  margin-left: -50vw;
  width: 100vw;
}

.background-colour--grey {
  background-color: #ededed;
}

#oxxid-accordion {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#oxxid-accordion input {
  display: none;
}

#oxxid-accordion label {
  z-index: 20;
  display: inline-block;
  padding: 10px 40px;
  font-weight: bold;
  text-align: center;
  background-color: #fff;
  cursor: pointer;
}

#oxxid-accordion label img {
  margin-top: 20px;
}

#oxxid-accordion label:hover {
  background: #ccc;
}

#oxxid-accordion input:checked + label {
  margin-bottom: 0;
  background: #ededed;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

#oxxid-accordion section {
  flex-basis: 100%;
}

#oxxid-accordion section article {
  z-index: 10;
  overflow: hidden;
  height: 0;
  background: #ededed;
}

#oxxid-accordion section article p {
  padding: 1em;
}

#oxxid-accordion input[id=option-0]:checked ~ section article[id=oxxid-accordion--option-0] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-1]:checked ~ section article[id=oxxid-accordion--option-1] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-2]:checked ~ section article[id=oxxid-accordion--option-2] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-3]:checked ~ section article[id=oxxid-accordion--option-3] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-4]:checked ~ section article[id=oxxid-accordion--option-4] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-5]:checked ~ section article[id=oxxid-accordion--option-5] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-6]:checked ~ section article[id=oxxid-accordion--option-6] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-7]:checked ~ section article[id=oxxid-accordion--option-7] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-8]:checked ~ section article[id=oxxid-accordion--option-8] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-9]:checked ~ section article[id=oxxid-accordion--option-9] {
  margin-bottom: 0.125em;
  height: auto;
}

#oxxid-accordion input[id=option-10]:checked ~ section article[id=oxxid-accordion--option-10] {
  margin-bottom: 0.125em;
  height: auto;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  min-height: 1px;
  height: 100%;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  display: block;
  padding: 0;
  width: 20px;
  height: 20px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  background: transparent;
  outline: none;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-size: 20px;
  font-family: "slick";
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

[dir=rtl] .slick-prev {
  right: -25px;
  left: auto;
}

.slick-prev:before {
  content: "←";
}

[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}

[dir=rtl] .slick-next {
  right: auto;
  left: -25px;
}

.slick-next:before {
  content: "→";
}

[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  list-style: none;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  margin: 0 5px;
  padding: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.slick-dots li button {
  display: block;
  padding: 5px;
  width: 20px;
  height: 20px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: transparent;
  outline: none;
  border: 0;
  cursor: pointer;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  font-size: 6px;
  font-family: "slick";
  line-height: 20px;
  color: black;
  text-align: center;
  content: "•";
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

* {
  font-family: "Roboto", sans-serif;
}

h1 {
  font-weight: 400;
  font-size: 4.625rem;
  color: #5f6062;
}

h2 {
  font-weight: 400;
  font-size: 3.75rem;
  color: #5f6062;
}

h3 {
  font-weight: 400;
  font-size: 2.75rem;
  color: #5f6062;
}

.main-cover h1,
.main-cover h2,
.main-cover h3 {
  font-weight: 700;
  color: #db001b;
}

.main-cover h1 {
  font-size: 12vh;
}

.main-cover h2 {
  font-size: 9vh;
}

.main-cover h3 {
  font-size: 7vh;
}

@media only screen and (max-width: 749px) {
  /* Cap the headline by display WIDTH as well as height, so the (no-wrap)
     headline rotator subtitle scales down instead of overflowing the page
     on narrow / zoomed-out mobile viewports. (#9) */
  .main-cover h1 {
    font-size: min(8vh, 12vw);
  }
  .main-cover h2 {
    font-size: min(6vh, 9vw);
  }
  .main-cover h3 {
    font-size: min(5vh, 7vw);
  }
}
p {
  font-weight: 300;
  font-size: 1.2rem;
  color: #5f6062;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  font-weight: 300;
  font-size: 1.2rem;
  color: #5f6062;
  text-decoration: underline;
}

.oxxid-chapter-title {
  position: relative;
  font-weight: 500;
  font-size: 1.2rem;
  color: #db001b;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.oxxid-chapter-title:after {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  border-width: 0 0 3px;
  border-style: solid;
  border-color: #db001b;
  content: "";
}

.oxxid-keywords {
  font-weight: 700;
  font-size: 1.2rem;
  color: #5f6062;
}

.oxxid-info {
  font-weight: 300;
  font-size: 1.25rem;
  color: #db001b;
  line-height: initial;
}

.social-icons {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  justify-content: end;
  gap: 20px;
}

.social-icons a {
  display: inline-block;
}

.social-icons a svg,
.social-icons a img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

footer .main-container .oxxid-info {
  font-size: 1rem;
}

footer .main-container .oxxid-info a,
footer .main-container .oxxid-info a:hover,
footer .main-container .oxxid-info a:link,
footer .main-container .oxxid-info a:visited,
footer .main-container .oxxid-info a:active {
  font-weight: 300;
  color: #db001b;
  font-size: 1rem;
  line-height: initial;
}

.oxxid-submenu-item {
  padding-left: 2rem;
  font-weight: 300;
  font-size: 1.2rem;
  color: #db001b;
}

.oxxid-submenu-item.active {
  font-weight: 700;
}

.oxxid-submenu-item.active a,
.oxxid-submenu-item.active a:link,
.oxxid-submenu-item.active a:visited,
.oxxid-submenu-item.active a:hover,
.oxxid-submenu-item.active a:active {
  font-weight: 700;
}

.oxxid-submenu-item a,
.oxxid-submenu-item a:link,
.oxxid-submenu-item a:visited,
.oxxid-submenu-item a:hover,
.oxxid-submenu-item a:active {
  font-weight: 300;
  font-size: 1.2rem;
  color: #db001b;
  text-decoration: none;
}

.oxxid-language-switcher a,
.oxxid-language-switcher a:link,
.oxxid-language-switcher a:visited,
.oxxid-language-switcher a:hover,
.oxxid-language-switcher a:active {
  font-weight: 300;
  font-size: 1.2rem;
  color: #db001b;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-left: 2rem;
}

.oxxid-product--title {
  font-weight: 700;
  font-size: 1.7rem;
  font-family: "Source Sans Pro", sans-serif;
  color: black;
}

.oxxid-product--subtitle,
.oxxid-product--year {
  font-weight: 400;
  font-size: 1.2rem;
  color: black;
}

.oxxid-product--client,
.oxxid-product--client a,
.oxxid-product--client a:hover,
.oxxid-product--client a:link,
.oxxid-product--client a:visited,
.oxxid-product--client a:active {
  font-weight: 400;
  font-size: 1.2rem;
  color: black;
  text-decoration: underline;
}

.oxxid-product p,
.oxxid-product .oxxid-keywords {
  color: black;
  margin-top: 1rem;
  display: block;
}

.oxxid-product-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}

.oxxid-product-wrapper-text {
  flex: 0 1 auto;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

/* Do not let the award column shrink: when it does, Safari/iOS compute the
   image width from the squeezed flex item while the height stays capped,
   which distorts the logo. (#6, #7) */
.oxxid-product-wrapper-awards {
  flex: 0 0 auto;
  flex-shrink: 0;
}

.oxxid-product-wrapper-awards img {
  max-height: 80px;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* On phones the award must not overshoot the title/subtitle text block:
   cap it smaller so it lines up with the text. (#8) */
@media only screen and (max-width: 749px) {
  .oxxid-product-wrapper-awards img {
    max-height: 50px;
  }
}
.filter-button-group button {
  position: relative;
  margin-right: 15px;
  font-weight: 300;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  background: transparent;
  cursor: pointer;
}

.filter-button-group button:after {
  content: none;
}

.filter-button-group button.active {
  font-weight: 500;
}

.filter-button-group button.active:after {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  border-width: 0 0 3px;
  border-style: solid;
  border-color: #db001b;
  content: "";
}

* {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0 none;
}

.oxxid-grid-gallery {
  display: grid;
  padding-top: 0px;
  grid-auto-flow: dense;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.oxxid-grid-gallery--alternative-projects {
  grid-row-gap: 100px !important;
}

@media only screen and (max-width: 749px) {
  .oxxid-grid-gallery {
    grid-gap: 5px;
  }
}
@media only screen and (min-width: 750px) {
  .oxxid-grid-gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media only screen and (min-width: 1200px) {
  .oxxid-grid-gallery {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.oxxid-grid-gallery figure {
  overflow: hidden;
}

.oxxid-grid-gallery figure a {
  width: 100%;
  height: 100%;
}

.oxxid-grid-gallery figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.oxxid-grid-gallery figure figcaption img {
  height: 100%;
  width: auto;
  display: inline-block;
  object-fit: unset;
}

.oxxid-grid-gallery figure figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 100;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 15px 30px;
  max-height: 100%;
  width: 100%;
  text-align: left;
  background: white;
  color: black;
  opacity: 0;
  transition: all 0.5s;
  transform: translate3d(-100%, -50%, 0);
}

.oxxid-grid-gallery figure figcaption .title {
  color: black;
  font-weight: 700;
}

.oxxid-grid-gallery figure figcaption .subtitle {
  color: black;
  font-weight: 500;
}

.oxxid-grid-gallery figure figcaption .awards img {
  max-height: 50px;
}

.oxxid-grid-gallery figure figcaption .description a {
  text-decoration: none;
}

.oxxid-grid-gallery figure.oxxid-grid--item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background-size: cover;
}

.oxxid-grid-gallery figure.oxxid-grid--item img {
  transition: all 0.5s;
  transform: translate3d(0, 0, 0);
}

.oxxid-grid-gallery figure.oxxid-grid--item figcaption {
  top: 100%;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.oxxid-grid-gallery figure.oxxid-grid--item:hover img {
  opacity: 0.8;
}

.oxxid-grid-gallery figure.oxxid-grid--item:hover figcaption img {
  opacity: 1;
}

.oxxid-grid-gallery figure.oxxid-grid--item:hover figcaption {
  /* box-shadow: 0 -2px 28px rgba(0, 0, 0, 0.3); */
  transition: all 0.5s;
  transform: translate3d(0, -100%, 0);
}

.oxxid-grid-gallery figure.oxxid-grid--1x2 {
  grid-row-start: span 2;
}

.oxxid-grid-gallery figure.oxxid-grid--2x1 {
  grid-column-start: span 2;
}

.oxxid-grid-gallery figure.oxxid-grid--2x2 {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

.oxxid-grid-gallery figure.oxxid-grid--3x2 {
  grid-column-start: span 2;
  grid-row-start: span 2;
}

@media only screen and (min-width: 750px) {
  .oxxid-grid-gallery figure.oxxid-grid--3x2 {
    grid-column-start: span 3;
    grid-row-start: span 2;
  }
}
.filter-button-group {
  display: flex;
  align-items: center;
  margin-left: calc(50% - 50vw);
  width: 100vw;
  height: 60px;
  background: white;
}

@media only screen and (max-width: 749px) {
  .filter-button-group {
    display: none;
  }
}
.filter-button-group.sticky {
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 100;
}

.similar-projects .oxxid-grid-gallery figure {
  overflow: initial;
}

.similar-projects .oxxid-grid-gallery figure.oxxid-grid--item figcaption {
  position: relative;
  top: initial;
  right: initial;
  bottom: initial;
  left: initial;
  overflow: initial;
  padding: 0;
  padding-top: 15px;
  opacity: 1;
  transform: none;
}

.similar-projects .oxxid-grid-gallery figure.oxxid-grid--item:hover img {
  opacity: 1;
}

.similar-projects .oxxid-grid-gallery figure.oxxid-grid--item:hover figcaption {
  box-shadow: none;
  transform: none;
}

.similar-projects figcaption p {
  width: 100%;
}

.similar-projects .heading {
  background: #ededed;
  margin-left: calc(50% - 50vw);
  width: 100vw;
  height: 4.5rem;
  margin-top: 140px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.similar-projects h1 {
  color: #db001b;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
}

.similar-projects figure figcaption .subtitle {
  text-decoration: none !important;
}

.oxxid-clients .client-list {
  /* display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-height: 0;  
  min-width: 0;    */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* padding: 20px; */
}

.oxxid-clients .client-list a {
  /* width: 100%;
  max-height: 150px;
  min-height: calc(55vw / 6);
  background-image: var(--client-bg-image);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat; */
  flex: 0 0 calc((100% - 50px) / 6);
  aspect-ratio: 1209/605;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--client-bg-image);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media only screen and (max-width: 749px) {
  .oxxid-clients .client-list a {
    flex: 0 0 calc((100% - 30px) / 4);
  }
}
.oxxid-clients .client-list a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.oxxid-clients .client-list a.disabled {
  pointer-events: none;
  pointer: none;
}

#subnav {
  display: none;
}

.oxxid-work-detail--nav {
  /* width:inherit; */
  /* position: fixed; */
  /* z-index: 2; */
  background-color: white;
  height: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.oxxid-work-detail--nav a,
.oxxid-work-detail--nav a:link,
.oxxid-work-detail--nav a:visited,
.oxxid-work-detail--nav a:hover,
.oxxid-work-detail--nav a:active {
  text-decoration: none;
  display: inline-block;
  margin-top: 7px;
}

.oxxid-work-detail--nav svg {
  height: 20px;
  width: auto;
}

.oxxid-work-detail--nav .next {
  margin-left: 73px;
}

#lottie svg {
  max-height: 300px;
}

/* ============================================================
   MOBILE MENU — Hamburger Button + Dropdown
   ============================================================ */
/* Hamburger button — hidden on desktop */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: #db001b;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

/* Animate hamburger → X when menu is open */
.mobile-menu-toggle[aria-expanded=true] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-menu-toggle[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media only screen and (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
  /* Hide desktop nav links on mobile */
  .main-nav > .main-container > .main-nav-list {
    display: none !important;
  }
}
/* Dropdown — full width below the fixed nav */
.mobile-menu-dropdown {
  display: none;
  position: fixed;
  top: 4.5rem;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.92);
  z-index: 1500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.mobile-menu-dropdown.is-open {
  display: block;
}

/* Each item row */
.mobile-menu-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu-dropdown ul li {
  display: block !important;
  border-bottom: 1px solid #e0e0e0;
}

.mobile-menu-dropdown ul li a,
.mobile-menu-dropdown ul li a:link,
.mobile-menu-dropdown ul li a:visited,
.mobile-menu-dropdown ul li a:hover,
.mobile-menu-dropdown ul li a:active {
  display: block;
  padding: 2rem 5%;
  font-size: 1.25rem;
  font-weight: 300;
  color: #db001b;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.mobile-menu-dropdown ul li.active a {
  font-weight: 700;
}

/* ==============================================================
   CUSTOM STYLES (merged from TYPO3 custom_styles, has priority)
   ============================================================== */
body {
  padding-top: 4.5rem;
}

p, a, a:active, a:hover, a:link, a:visited, .oxxid-keywords {
  font-size: 1.2rem;
  line-height: 140%;
}

.red-medium-headline {
  font-weight: 500;
  font-size: 1.8rem;
  color: #db001b;
  text-decoration: none;
}

footer .main-container {
  padding-top: 3rem;
  padding-bottom: 5rem;
}

footer .main-container .oxxid-info {
  font-size: 1rem;
}

.main-nav {
  height: 4.5rem;
}

.oxxid-submenu-item a,
.oxxid-submenu-item a:active,
.oxxid-submenu-item a:hover,
.oxxid-submenu-item a:link,
.oxxid-submenu-item a:visited {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 1.2rem;
}

.oxxid-submenu-item {
  padding-left: 4rem;
}

.oxxid-grid-gallery figure figcaption .title {
  font-weight: 500;
}

.oxxid-grid-gallery figure figcaption .subtitle {
  font-weight: 300;
}

.oxxid-work-detail-content img.detailcontent-image-1 {
  object-fit: cover;
}

.oxxid-product {
  padding: 1.5rem;
}

.oxxid-product--description p {
  padding-right: 10%;
}

.oxxid-grid-gallery figure a {
  text-decoration: none;
}

.oxxid-grid-gallery figure figcaption .subtitle {
  text-decoration: underline;
}

.main-cover {
  margin-bottom: 10px;
}

@media (max-width: 500px) {
  .oxxid-work-detail--image {
    height: 30vh;
  }
  .oxxid-work-detail-content .oxxid-product {
    margin-top: -30px;
  }
  .oxxid-submenu-item {
    padding-left: 1.2rem;
  }
}
.oxxid-dual-grid p strong {
  display: block;
  margin-bottom: 1rem;
}

.oxxid-dual-grid {
  margin-top: 1rem;
}

.oxxid-chapter-title {
  font-size: 1.2rem;
  line-height: 50px;
}

.oxxid-dual-grid .content h1 {
  font-size: 3rem;
  letter-spacing: 1.5px;
}

.slick-slide img {
  padding-right: 5px;
}

.nav-logo a {
  line-height: unset;
  margin-bottom: -4px;
  display: block;
}

.nav-logo svg {
  height: 72px;
}

@media (max-width: 768px) {
  .nav-logo svg {
    height: 54px;
    width: auto;
  }
  .main-nav .main-container {
    margin-left: 0px;
  }
  .oxxid-dual-grid {
    display: flex !important;
    flex-direction: column;
  }
  .oxxid-dual-grid img {
    order: 2;
  }
  .oxxid-dual-grid .description {
    order: 1;
  }
}
/* Language switcher — same style as nav items */
.oxxid-language-switcher a,
.oxxid-language-switcher a:link,
.oxxid-language-switcher a:visited,
.oxxid-language-switcher a:hover,
.oxxid-language-switcher a:active {
  font-size: 1.2rem;
  font-weight: 300;
  color: #db001b;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* RTE address in the footer DCE outputs <p> blocks — keep them in the footer
   look (red, footer size, no default paragraph margins) instead of the global
   gray <p> style. */
footer .main-container .oxxid-info p {
  margin: 0;
  color: inherit;
  font-size: 1rem;
  line-height: initial;
}

/* Sticky footer: on pages that aren't tall enough (e.g. Kontakt), keep the
   footer pinned to the bottom of the viewport instead of floating up right
   after the content. The fixed nav is out of flow, so only the content
   container and the footer are flex items here. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > .main-container {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}