@charset "UTF-8";
html,
body {
  height: auto;
  min-height: 100%; }

.homepage .video-head-full {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(100dvh - 111px); }
  .homepage .video-head-full .videoheader video {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.video-head {
  aspect-ratio: 2 / 1; }

.videoheader-home {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
  height: 100%; }

.videoheader.videoheader-landingpage {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%; }
  .videoheader.videoheader-landingpage video {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.refresh .ce-textpic.ce-left.ce-intext {
  display: flex;
  align-items: center;
  gap: 2vw; }
  .refresh .ce-textpic.ce-left.ce-intext .ce-gallery img {
    display: block; }
  .refresh .ce-textpic.ce-left.ce-intext p {
    font-size: 2.7rem;
    line-height: 1.2;
    font-family: "Inter-Regular", sans-serif; }

.refresh section.rice article {
  background-color: transparent; }

.refresh h2 span {
  text-transform: uppercase;
  font-family: "Inter-Regular", sans-serif;
  display: block;
  padding-bottom: 20px;
  font-size: 1.8rem; }

.refresh .frame-type-news_newsselectedlist {
  padding-bottom: 0; }

.refresh .news-list-view.container::after {
  display: none; }

.refresh .video-head,
.refresh .video-head-full {
  position: relative;
  color: white;
  overflow: hidden; }
  .refresh .video-head h1,
  .refresh .video-head-full h1 {
    color: white;
    font-size: 7rem;
    margin: 0 0 3.5rem 0;
    padding-top: 12rem;
    line-height: 1.1; }
    .refresh .video-head h1 span,
    .refresh .video-head-full h1 span {
      color: #95e2d0;
      font-family: "Inter-Bold", sans-serif; }
  .refresh .video-head .container-h1,
  .refresh .video-head-full .container-h1 {
    padding-top: 0; }
  .refresh .video-head p.mehr,
  .refresh .video-head-full p.mehr {
    margin: 6rem 0 0 0;
    margin-right: 24px; }
  .refresh .video-head p.mehr + p.mehr,
  .refresh .video-head-full p.mehr + p.mehr {
    background-color: transparent;
    border: 1px solid white; }
    .refresh .video-head p.mehr + p.mehr:hover,
    .refresh .video-head-full p.mehr + p.mehr:hover {
      background-color: white; }
  .refresh .video-head p,
  .refresh .video-head-full p {
    font-size: 3rem;
    max-width: 40ch;
    hyphens: auto; }
    .refresh .video-head p a,
    .refresh .video-head-full p a {
      font-size: 2.4rem; }
  .refresh .video-head .frame-indent-right,
  .refresh .video-head-full .frame-indent-right {
    width: 75%;
    min-width: 450px; }
  .refresh .video-head .image img,
  .refresh .video-head-full .image img {
    z-index: -1;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }

.refresh h2 {
  font-size: 5rem;
  margin: 0 0 clamp(60px, 5vw, 90px) 0;
  font-family: "Inter-Light", sans-serif; }

.refresh h3 {
  font-size: 3rem;
  margin: 8px 0 24px 0; }

.refresh .awards .col-12 {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  padding: 3vw 0; }
  .refresh .awards .col-12 img {
    height: 100px;
    width: auto;
    margin-left: 5vw; }

.refresh section.white article {
  background-color: white; }

.refresh article {
  box-sizing: border-box; }
  .refresh article p {
    font-size: 2rem; }
  .refresh article p.protitle {
    font-size: 3rem;
    color: #222222;
    font-family: "Inter-Regular", sans-serif; }

.refresh .two-col .frame-type-text p {
  font-size: 2.7rem; }

.refresh .two-col .frame-type-text p.mehr {
  font-size: 2.4rem; }

.refresh .grid-two .col-12 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 2vw, 4rem); }
  .refresh .grid-two .col-12 h3 {
    margin: 2vw 0 1vw 0; }
  .refresh .grid-two .col-12 .frame-type-textpic {
    background-color: #fff;
    padding: clamp(1.5rem, 2vw, 4rem);
    font-size: 2.1rem; }
    .refresh .grid-two .col-12 .frame-type-textpic img {
      height: 100px;
      width: auto; }
  .refresh .grid-two .col-12 .frame-bg-grey.frame-type-textpic {
    background-color: #cccccc; }
  .refresh .grid-two .col-12 .frame-bg-ash-grey.frame-type-textpic {
    background-color: #bad5cf; }
  .refresh .grid-two .col-12 .frame-bg-light-grey.frame-type-textpic {
    background-color: #f2f2f2; }

.refresh .grid-two .frame-type-text p {
  font-size: 3.1rem; }

.refresh .grid-two .frame-type-text p.mehr {
  font-size: 2.4rem; }

.refresh .grid-three .col-12 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2vw; }
  .refresh .grid-three .col-12 h3 {
    margin: 2vw 0 1vw 0; }
  .refresh .grid-three .col-12 .frame-type-textpic {
    background-color: #fff;
    padding: 2vw;
    font-size: 2.1rem; }
    .refresh .grid-three .col-12 .frame-type-textpic img {
      height: 100px;
      width: auto; }

.refresh .grid-three .frame-type-text p {
  font-size: 3.1rem; }

.refresh .grid-three .frame-type-text p.mehr {
  font-size: 2.4rem; }

.refresh .logo-slider .splide__slide {
  align-content: center; }
  .refresh .logo-slider .splide__slide img {
    max-width: 250px; }

.refresh .black {
  color: white;
  padding: 12rem 0; }
  .refresh .black h2 {
    color: #ff4c6a; }
  .refresh .black h2 span {
    color: #fff; }

.refresh .black.teaser h2 {
  color: #fff; }

.refresh .abrbaiten {
  padding: 12rem 0; }
  .refresh .abrbaiten .news-list-view {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw; }
    .refresh .abrbaiten .news-list-view article {
      width: 100%;
      margin-right: 0;
      margin-top: 0; }

.refresh .ash-grey {
  background-color: #bad5cf;
  padding: 12rem 0;
  /* quoute  */ }
  .refresh .ash-grey .frame-type-image {
    position: absolute;
    margin-top: -150px; }
    .refresh .ash-grey .frame-type-image img {
      max-width: 120px; }
  .refresh .ash-grey .col-12 {
    margin: 0 auto; }
  .refresh .ash-grey .frame-type-text {
    text-align: left;
    margin: 0 auto;
    max-width: 90vw; }
    .refresh .ash-grey .frame-type-text blockquote {
      margin-left: 0;
      margin-right: 0;
      font-size: 4rem;
      line-height: 1.15;
      font-family: "Inter-Regular", sans-serif;
      hyphens: auto; }
      .refresh .ash-grey .frame-type-text blockquote p {
        margin-bottom: 1.5rem; }
    .refresh .ash-grey .frame-type-text blockquote + p {
      font-size: 2.3rem;
      line-height: 1.2; }

.refresh .erlebnis {
  padding: 24rem 0; }
  .refresh .erlebnis .container {
    background-color: #ff4c6a;
    color: white;
    padding: 6vw; }
    .refresh .erlebnis .container p + p {
      margin-top: 2rem; }
    .refresh .erlebnis .container p:first-child {
      color: #fff; }
    .refresh .erlebnis .container p {
      font-size: 6rem;
      line-height: 1.2;
      color: #222222;
      font-family: "Inter-Regular", sans-serif; }
    .refresh .erlebnis .container p.mehr + p, .refresh .erlebnis .container p.mehr {
      font-size: 3.6rem;
      border: none; }
    .refresh .erlebnis .container p.mehr a {
      color: white;
      background-color: #000000; }
  .refresh .erlebnis .frame-type-text + .frame-type-text {
    margin-top: 2vw; }

.refresh .protxt {
  padding: 2rem 0;
  min-height: inherit; }

.refresh .link-phone {
  color: black; }

.testimonials h4 {
  font-family: "Inter-Regular", sans-serif;
  color: #222;
  margin: 0;
  position: relative; }
  .testimonials h4:before {
    content: "";
    display: block;
    position: absolute;
    width: 90px;
    height: 64px;
    top: calc(-12rem - 32px);
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 64'%3E%3Cpath d='M0 54.13c14.1-5.07 20.02-12.4 18.89-24.53H8.74V0h25.94v25.37c0 22.84-9.87 33.83-31.29 38.63L.01 54.13Zm55.6 0c14.1-5.07 20.02-12.4 18.89-24.53H64.34V0H90v25.37C90 48.21 80.41 59.2 58.99 64l-3.38-9.87Z' style='fill:%23ff4c6a'/%3E%3C/svg%3E");
    background-repeat: no-repeat; }

.testimonials .col-12 {
  hyphens: auto; }

.citate-slider .splide__pagination, .logo-slider .splide__pagination {
  justify-content: center;
  position: static; }

@keyframes countup {
  from {
    --num: 0; }
  to {
    --num: var(--target); } }

@property --num {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0; }

.animated .count {
  /* Set up the counter and the animation */
  counter-reset: num var(--num);
  animation: countup var(--duration, 5s) ease-out forwards;
  /* respect reduced‑motion settings */ }
  @media (prefers-reduced-motion: reduce) {
    .animated .count {
      animation: none;
      --num: var(--target); } }

/* Each block (number + label) */
.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12rem 0; }

.counters {
  background-color: black;
  padding: 0;
  color: white;
  margin-bottom: 0; }
  .counters .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 2vw;
    text-align: center; }
  .counters .count {
    font-size: 8rem;
    color: #ff4c6a;
    font-family: "Inter-Regular", sans-serif; }

/* Show the counter value + the trailing "+" sign */
.count::after {
  content: counter(num) "+";
  font-size: 8rem;
  line-height: 1; }

.no-after::after {
  content: counter(num); }

/* The label underneath the number */
.label {
  margin-top: 1.5rem;
  font-size: 3rem;
  color: white;
  font-family: "Inter-Regular", sans-serif; }

/* Styling für den Container */
.accordion {
  display: grid;
  gap: 10px;
  font-family: "Inter-Regular", sans-serif; }

.acc-grid-two .accordion {
  grid-template-columns: 1fr 1fr; }

/* Einzelne graue Boxen */
.accordion details {
  background-color: #bad5cf;
  border-radius: 0px;
  overflow: hidden;
  transition: background-color 0.3s ease; }

/* Versteckt den Standard-Pfeil des Browsers */
.accordion summary::-webkit-details-marker {
  display: none; }

.accordion summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(20px, 3vw, 30px) clamp(30px, 4vw, 60px) clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px);
  cursor: pointer;
  outline: none;
  user-select: none;
  position: relative; }
  .accordion summary:after {
    content: "";
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    right: clamp(20px, 3vw, 30px);
    top: clamp(25px, 3.5vw, 35px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21.34 11.67'%3E%3Cpath d='m20.34 1-9.67 9.67L1 1' style='fill:none;stroke:%23000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    transition: transform 0.3s ease; }

.accordion details[open] summary:after {
  transform: rotate(180deg); }

/* Text-Anordnung (Titel oben, Subtitle unten) */
.accordion .summary-content {
  display: flex;
  flex-direction: column; }

.accordion .title {
  font-size: 2.7rem;
  line-height: 1.2; }

.accordion.process .title {
  font-family: "Inter-Bold", sans-serif; }

/* Wenn das Element GEÖFFNET ist: */
.accordion details:hover,
.accordion details[open] {
  background-color: #cccccc;
  /* Leicht dunkleres Grau im offenen Zustand */ }

/* Der Inhalt, der aufklappt */
.accordion .accordion-content {
  background-color: #f2f2f2;
  /* Heller Hintergrund für den Text */
  padding: clamp(20px, 3vw, 30px) clamp(30px, 4vw, 60px) clamp(20px, 3vw, 30px) clamp(20px, 3vw, 30px);
  font-size: 2.1rem; }

/* ========================================= */
/* DAS NEUE SPALTEN-LAYOUT (RESPONSIVE)      */
/* ========================================= */
.two-column-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: stretch;
  /* WICHTIG: Erzwingt die gleiche Höhe beider Boxen */
  gap: 2vw;
  /* Abstand zwischen der linken und rechten Box */ }
  .two-column-wrapper ul {
    list-style-type: square;
    padding-left: 27px; }
  .two-column-wrapper ul.checkmark-list {
    padding-left: 0; }
  .two-column-wrapper p, .two-column-wrapper ul, .two-column-wrapper h4 {
    font-size: 2.7rem;
    color: #222222; }
  .two-column-wrapper h3 {
    font-size: 3.2rem;
    color: #222222;
    margin: 0;
    display: flex;
    align-items: end; }
  .two-column-wrapper h4 {
    margin: 0 0 20px 0; }
  .two-column-wrapper li + li {
    margin-top: 10px; }

/* Teilt den Platz gleichmäßig auf (50% / 50%) */
.methods-container,
.pixellab-box {
  flex: 1;
  padding: 4vw 2vw;
  /* Gleiches Padding für beide, damit es harmonisch wirkt */ }

/* ========================================= */
/* STYLING LINKE BOX: Andere Methoden        */
/* ========================================= */
.methods-container {
  background-color: #ffffff; }

.method-item + .method-item {
  margin-top: 2vw; }

.method-item {
  display: flex;
  align-items: flex-start; }

.method-content {
  flex-grow: 1;
  padding-left: 60px; }
  .method-content h4 {
    position: relative; }
    .method-content h4:before {
      content: "";
      position: absolute;
      display: block;
      width: 40px;
      height: 40px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 40C9 40 0 31 0 20S9 0 20 0s20 9 20 20-9 20-20 20m0-38C10.1 2 2 10.1 2 20s8.1 18 18 18 18-8.1 18-18S29.9 2 20 2m6.8 24.7c.4-.4.4-1 0-1.4L14.9 13.4c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l11.9 11.9c.2.2.5.3.7.3s.5 0 .7-.3m-11.9 0 11.9-11.9c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13.5 25.3c-.4.4-.4 1 0 1.4s.5.3.7.3.5 0 .7-.3' style='fill:%23514051'/%3E%3C/svg%3E");
      left: -60px;
      top: -4px; }

.methods-container,
.pixellab-box {
  display: flex;
  flex-flow: column;
  gap: 2vw; }

.logo-container,
.methods-heading {
  height: clamp(100px, 4vw, 150px); }

.logo-container {
  display: flex;
  align-items: end; }
  .logo-container img {
    width: auto; }

/* ========================================= */
/* STYLING RECHTE BOX: Checkliste            */
/* ========================================= */
.pixellab-box {
  background-color: #bad5cf; }

.pixellab-logo {
  max-height: 70px;
  display: inline-block; }

.checkmark-list li {
  list-style: none;
  padding-left: 60px;
  position: relative;
  font-family: "Inter-Bold", sans-serif; }
  .checkmark-list li:before {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M40 20c0 11.05-8.95 20-20 20S0 31.04 0 20 8.96 0 20 0s20 8.95 20 20'/%3E%3Cpath d='m17.91 25.9-5.52-5.5 1.42-1.42 4.1 4.1 8.28-8.29 1.42 1.42z' style='fill:%23f2f2f2'/%3E%3C/svg%3E");
    left: 0;
    top: 0; }

.refresh .two-col .fallstudien {
  display: flex;
  background: #f2f2f2;
  padding: 2vw;
  gap: 2vw; }
  .refresh .two-col .fallstudien p.mehr,
  .refresh .two-col .fallstudien p {
    font-size: 2.1rem; }
  .refresh .two-col .fallstudien .fallstudien-rechts,
  .refresh .two-col .fallstudien .fallstudien-links {
    flex: 1; }
  .refresh .two-col .fallstudien header h4 {
    text-transform: uppercase;
    color: #222222;
    font-family: "Inter-Regular", sans-serif;
    margin: 0; }

/* ========================================= */
/* MOBIL-ANSICHT: Untereinander auf Handys   */
/* ========================================= */
@media (max-width: 768px) {
  .two-column-wrapper {
    flex-direction: column;
    /* Stapelt die Boxen auf kleinen Displays */
    align-items: initial;
    gap: 20px; } }

@media only screen and (max-width: 1620px) {
  .counters .count,
  .refresh .ruby h1 {
    font-size: 7rem; }
  .refresh .erlebnis .container p,
  .refresh h2,
  .refresh .testimonials .frame-type-text blockquote {
    font-size: 5rem; }
  .refresh .erlebnis .container p.mehr + p,
  .refresh .erlebnis .container p.mehr,
  .refresh .testimonials .frame-type-text blockquote + p {
    font-size: 3rem; }
  .accordion .title,
  .two-column-wrapper p,
  .two-column-wrapper ul,
  .two-column-wrapper h4,
  .counters .label,
  .refresh h3,
  .refresh .ruby p {
    font-size: 2.4rem; }
  .refresh .two-col .frame-type-text p,
  .refresh .two-col .frame-type-text p.mehr,
  .refresh .ruby p a {
    font-size: 2.1rem; }
  .refresh .two-col .fallstudien header h4 {
    font-size: 1.6rem; }
  .refresh .video-head h1,
  .refresh .video-head-full h1 {
    margin: 0 0 3rem 0;
    padding-top: 10rem; }
  .refresh .transparent,
  .refresh .white,
  .refresh .black,
  .refresh .abrbaiten,
  .refresh .rice,
  .refresh .testimonials,
  .counter {
    padding: 6rem 0; }
  .refresh .transparent + .transparent {
    padding: 0 0 6rem 0; }
  .testimonials h4:before {
    top: calc(-6rem - 32px); }
  .refresh .erlebnis {
    padding: 12rem 0; }
  .refresh .erlebnis .container {
    padding: 3vw; }
  .refresh .logo-slider .splide__slide img {
    max-width: 200px; }
  .refresh .col-list .col-12 {
    grid-template-columns: 1fr 1fr;
    gap: 3vw; }
  .refresh .abrbaiten .news-list-view {
    gap: 3vw; }
  .pixellab-logo {
    max-height: 60px; } }

@media only screen and (max-width: 1420px) {
  .counters .count,
  .refresh .video-head h1,
  .refresh .video-head-full h1 {
    font-size: 6rem; }
  .refresh .erlebnis .container p,
  .refresh h2,
  .refresh .testimonials .frame-type-text blockquote {
    font-size: 4.2rem; }
  .refresh article p.protitle,
  .refresh .erlebnis .container p.mehr + p,
  .refresh .erlebnis .container p.mehr,
  .refresh .testimonials .frame-type-text blockquote + p {
    font-size: 2.7rem; }
  .refresh .ce-textpic.ce-left.ce-intext p {
    font-size: 2.4rem; }
  .accordion .title,
  .two-column-wrapper p,
  .two-column-wrapper ul,
  .two-column-wrapper h4,
  .counters .label,
  .refresh h3,
  .refresh .ruby p {
    font-size: 2.1rem; }
  .refresh .two-col .frame-type-text p,
  .refresh .two-col .frame-type-text p.mehr,
  .refresh .col-list .col-12 .frame-type-textpic,
  .refresh article p,
  .refresh .ruby p a {
    font-size: 1.8rem; }
  .pixellab-logo {
    max-height: 50px; }
  .checkmark-list li:before {
    top: -4px; }
  .method-content h4:before {
    top: -8px; }
  .refresh .col-list .col-12 {
    gap: 2vw; } }

@media only screen and (max-width: 1200px) {
  .counters .count,
  .refresh .ruby h1 {
    font-size: 5.2rem; }
  .refresh .erlebnis .container p,
  .refresh h2,
  .refresh .testimonials .frame-type-text blockquote {
    font-size: 3.6rem; }
  .accordion .title,
  .refresh .ce-textpic.ce-left.ce-intext p,
  .refresh article p.protitle,
  .refresh .erlebnis .container p.mehr + p,
  .refresh .erlebnis .container p.mehr,
  .refresh .testimonials .frame-type-text blockquote + p {
    font-size: 2.1rem; }
  .two-column-wrapper p,
  .two-column-wrapper ul,
  .two-column-wrapper h4,
  .accordion .accordion-content,
  .refresh .two-col .frame-type-text p,
  .refresh .two-col .frame-type-text p.mehr,
  .counters .label,
  .refresh h3,
  .refresh .ruby p {
    font-size: 1.8rem; }
  .refresh h2 span,
  .refresh article p,
  .refresh .ruby p a {
    font-size: 1.6rem; }
  .refresh .awards .col-12 img {
    height: 70px; }
  .new-footer .container img {
    height: 45px; }
  .refresh .video-head h1,
  .refresh .video-head-full h1 {
    margin: 0 0 2rem 0;
    padding-top: 6rem; }
  .refresh .video-head p.mehr,
  .refresh .video-head-full p.mehr {
    margin: 3rem 24px 0 0; }
  .accordion summary:after {
    width: 12px;
    height: 12px;
    background-size: cover; }
  .refresh .grid-three .col-12 .frame-type-textpic img {
    height: 70px; } }

@media only screen and (max-width: 1080px) {
  .video-head {
    aspect-ratio: 1080 / 720;
    background: #000;
    position: relative;
    z-index: -2; }
  .refresh .video-head {
    overflow: visible;
    padding-top: 66.666%;
    max-width: 100%; }
  .refresh .video-head p,
  .refresh .video-head-full p {
    max-width: none; }
  .videoheader.videoheader-landingpage video {
    width: 100%;
    height: auto; }
  .method-content h4:before {
    left: -50px; }
  .method-content h4:before,
  .checkmark-list li:before {
    width: 35px;
    height: 35px; }
  .method-content,
  .checkmark-list li {
    padding-left: 50px; }
  .two-column-wrapper h4 {
    margin: 0 0 10px 0; } }

@media only screen and (max-width: 1023px) {
  .counters .count,
  .refresh .ruby h1 {
    font-size: 4.8rem; }
  .refresh .erlebnis .container p,
  .refresh h2,
  .refresh .testimonials .frame-type-text blockquote {
    font-size: 4.2rem; }
  .refresh article p.protitle,
  .refresh .erlebnis .container p.mehr + p,
  .refresh .erlebnis .container p.mehr,
  .refresh h3,
  .refresh .testimonials .frame-type-text blockquote + p {
    font-size: 2.1rem; }
  .accordion .title,
  .refresh .two-col .frame-type-text p,
  .refresh .two-col .frame-type-text p.mehr,
  .counters .label,
  .refresh .ruby p {
    font-size: 1.8rem; }
  .refresh article p,
  .refresh .ruby p a {
    font-size: 1.6rem; }
  .counters .container {
    grid-template-columns: 1fr 1fr; }
  .refresh .abrbaiten .news-list-view,
  .refresh .col-list .col-12 {
    grid-template-columns: 1fr; }
  .refresh .ruby p.mehr {
    margin: 3rem 20px 0 0; }
  .refresh .protxt {
    padding: 1rem 0 2rem 0; }
  .acc-grid-two .accordion {
    grid-template-columns: inherit; }
  .two-column-wrapper {
    flex-flow: column; }
  .method-content h4:before {
    left: -40px; }
  .method-content h4:before,
  .checkmark-list li:before {
    width: 24px;
    height: 24px; }
  .method-content,
  .checkmark-list li {
    padding-left: 40px; }
  .checkmark-list li:before {
    top: 1px; }
  .method-content h4:before {
    top: -2px; }
  .refresh .two-col .fallstudien {
    flex-flow: column;
    padding: 4vw;
    gap: 0; }
    .refresh .two-col .fallstudien .fallstudien-rechts {
      margin-top: 4vw; }
  .logo-container, .methods-heading {
    height: auto; }
  .methods-container, .pixellab-box {
    padding: 4vw; } }

@media only screen and (max-width: 840px) {
  .counters .count,
  .refresh .ruby h1 {
    font-size: 4.2rem; }
  .refresh .erlebnis .container {
    padding: 5vw; }
  .refresh .ruby .frame-indent-right {
    width: 100%;
    min-width: auto; }
  .refresh .erlebnis {
    padding: 6rem 0; }
  .refresh .transparent + .transparent {
    padding: 0 0 4rem 0; } }

@media only screen and (max-width: 640px) {
  .refresh .erlebnis .container p,
  .refresh h2,
  .refresh .testimonials .frame-type-text blockquote {
    font-size: 3.6rem; } }

@media only screen and (max-width: 540px) {
  .counters .count, .refresh .ruby h1 {
    font-size: 3.2rem; }
  .refresh .erlebnis .container p,
  .refresh h2,
  .refresh .testimonials .frame-type-text blockquote {
    font-size: 2.7rem; }
  .counters .container {
    grid-template-columns: inherit; }
  .accordion .title, .refresh .ce-textpic.ce-left.ce-intext p, .refresh article p.protitle, .refresh .erlebnis .container p.mehr + p, .refresh .erlebnis .container p.mehr, .refresh .testimonials .frame-type-text blockquote + p {
    font-size: 1.8rem; } }

.ruby h1 {
  counter-increment: menu;
  --delay: 0.1s;
  animation: 1s var(--delay) both fly-up; }

.ruby .frame-type-text {
  counter-increment: menu;
  --delay: 0.4s;
  animation: 1s var(--delay) both fly-up; }

.animated .col-12 > .frame-type-textpic,
.col-list.animated .container > article,
.abrbaiten.animated .container > article {
  --delay: calc(sibling-index() / sibling-count() * 1s);
  animation: 1s var(--delay) both fly-up; }

@starting-style {
  .animated .col-12 > .frame-type-textpic,
  .col-list.animated .container > article,
  .abrbaiten.animated .container > article {
    opacity: 0; } }

.animated.teaser .col-12 > .frame-type-textpic {
  --delay: 0.25s; }

@keyframes fly-up {
  from {
    opacity: 0;
    transform: translateY(100px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

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