@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');



:root {
  --drreinigung-schwarz: rgb(51, 46, 43);
  --drreinigung-blau-1: #EBF8FF; /* #E5F6FF | #E6F9FF */
  --drreinigung-blau-2: rgba(204, 233, 251, 0.85); /* #97DEFF | #CCE9FB */;
  --drreinigung-blau-3: #009EE3; /* #30A9FF | #009EE3 */
  --drreinigung-blau-4:rgb(32, 126, 169);
  --drreinigung-creme: rgb(188, 153, 121);
  --drreinigung-blur: 7px;
  --nav-height: 102px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  :root {
    --nav-height: 176px;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}







body {
  font-family: "Ubuntu", sans-serif;
  color: var(--bs-body-color); /* #505050 */
  font-weight: 400;
  font-style: normal;
}


/* --- TYPOGRAPHY --- */

.heading-3xl,
.heading-2xl,
.heading-xl,
.heading-m,
.heading-xs,
.heading-3xl p,
.heading-2xl p,
.heading-xl p,
.heading-m p,
.heading-xs p,
.heading-3xl *,
.heading-2xl *,
.heading-xl *,
.heading-m *,
.heading-xs *,
h2,
.card .card-title,
.card h5 {
  font-family: "Ubuntu", sans-serif;
  color: var(--drreinigung-blau-3);
  font-weight: 700;
  margin-bottom: 2rem;
}
h1,
.heading-3xl,
.heading-3xl p,
.heading-3xl * {
  margin-bottom: 40px;
  font-family: "Ubuntu", sans-serif;
}
.heading-3xl p {
  margin-bottom: 0px;
}
h2 {
  background-color: var(--drreinigung-blau-3);
  color: #fff !important;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  font-weight: 700 !important;
  font-family: "Ubuntu", sans-serif;
  padding: 2rem;
  display: inline-flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  text-align: center;
}
h1,
.heading-3xl,
.heading-3xl p,
.heading-3xl *,
h2 {
  font-size: 20px !important;
}
a,
a:link,
a:visited,
a:hover,
a:active {
  color: var(--drreinigung-blau-3);
  font-weight: 500;
}
h5,
.heading-2xl,
.heading-2xl p,
.heading-2xl * {
  margin-bottom: 20px;
  font-size: 24px;
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  color: var(--drreinigung-blau-3);
  line-height: 1.3;
}
.spitzmarke,
.paragraph-l,
.paragraph-l p,
.paragraph-l * {
  margin-bottom: 36px;
  font-size: 16px;
  margin-bottom: 2rem;
  text-transform: inherit;
  letter-spacing: 0rem;
  font-weight: 400;
  /*
  color: var(--drreinigung-blau-4);
  font-weight: 600;
  */
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  h1,
  .heading-3xl,
  .heading-3xl p,
  .heading-3xl *,
  h2 {
    font-size: 28px !important;
  }
  h2 {
    width: 15rem;
    height: 15rem;
  }
  .spitzmarke,
  .paragraph-l,
  .paragraph-l p,
  .paragraph-l * {
    font-size: 20px;
  }
  h5,
  .heading-2xl,
  .heading-2xl p,
  .heading-2xl * {
    font-size: 30px;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}





/* --- CONTAINER --- */


.container {
  max-width: 1500px;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}

@media (min-width: 3840px) {
  .container {
    max-width: 2400px;
  }
  .collage .bubble-mittel > div, .collage .bubble-mittel.light > div {
    padding: 25%;
  }
}







/* --- LISTS --- */

main ul,
main ul.check {
  list-style-type: none;
  padding-left: 30px;
}
main ul li,
main ul.check li {
  position: relative;
}
main ul li::before,
main ul.check li::before {
  content: '●';
  left: -30px;
  position: absolute;
  background-image: inherit;
  color: var(--drreinigung-blau-3);
}





/* --- BUTTONS --- */

.btn-primary {
  background-color: var(--drreinigung-blau-3);
  border-color: var(--drreinigung-blau-3);
  font-weight: 700;
  padding-left: 36px;
  padding-right: 36px;
}
.btn-primary:hover {
  background-color: var(--drreinigung-blau-3);
  border-color: var(--drreinigung-blau-3);
}
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active, .btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--drreinigung-blau-3);
  border-color: var(--drreinigung-blau-3);
}
.btn-check:active + .btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-primary.active:focus, .btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: none;
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
  background-color: var(--drreinigung-blau-3);
  border-color: var(--drreinigung-blau-3);
  box-shadow: none;
}

.actionbuttons .btn {
  border: none;
  background-color: var(--drreinigung-blau-3);
}
footer .icon path {
  fill: #fff;
}





/* --- NAVBAR --- */


.navbar-light .navbar-toggler {
  color: transparent;
  border-color: transparent;
}


.nav-link {
  font-size: 18px;
  font-weight: 600;
}
.nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
  color: var(--drreinigung-blau-3) !important;
}

.navbar-brand {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-right: 3rem;
}
.navbar-brand img {
  height: 70px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
  .navbar-collapse .navbar-nav {
    margin-top: 0rem;
  }
  .navbar .container {
    max-width: 100%;
    padding-left: 9rem;
    padding-right: 9rem;
  }
  .navbar-brand {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .navbar-brand img {
    height: 120px;
  }
  .navbar-collapse .navbar-nav {
    margin-top: 1rem;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}



/* --- SIDEBAR --- */


.sidebar-some ul {
  background-color: var(--drreinigung-blau-3);
}


@media (min-width: 1400px) {
  .sidebar {
    padding-bottom: 18vh;
  }
}






/* --- CARD --- */


.card {
  background-color: var(--drreinigung-blau-1);
  color: var(--bs-body-color);
  box-shadow: none !important;
  border-radius: 2rem;
}
.card.featured {
  background-color: var(--drreinigung-blau-3);
  color: #fff;
}
.card.formular {
  position: relative;
  background-color: transparent;
}
.card.formular::before {
  position: absolute;
  z-index: 1;
}
.card.formular .card-body {
  z-index: 5;
}
.card.formular::before {
  content: ' ';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--drreinigung-blau-2);
  backdrop-filter: blur(var(--drreinigung-blur));
}
.sprechblase {
  margin-top: 1.5rem;
  position: relative;
}
.sprechblase::before {
  content: ' ';
  background-color: var(--drreinigung-blau-1);
  left: 3rem;
  bottom: 0rem;
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  transform: skewY(-45deg);
}
.sprechblase.featured::before {
  background-color: var(--drreinigung-blau-3);
}
.card.formular .alert-warning {
  color: var(--bs-body-color);
  background-color: var(--drreinigung-blau-1);
  border-color: var(--drreinigung-blau-1);
}





/* --- FORMULAR --- */

.form-control,
.form-select{
  border: 1px solid #fff;
  border-radius: 0.25rem;
  box-shadow: none;
}
.form-control:focus,
.form-select:focus {
  border: 1px solid var(--drreinigung-blau-3);
}
.form-check {
  margin-bottom: 0.5rem;
}
.form-check-input:checked {
  background-color: var(--drreinigung-blau-3);
  border-color: var(--drreinigung-blau-3);
}





/* --- DIENSTLEISTUNGEN --- */

.core_frontend_dienstleistungen_uebersicht_01 .titel-lead {
  max-width: 100%;
  text-align: center;
}
.core_frontend_dienstleistungen_uebersicht_01 .card {
  background-color: transparent;
  border-radius: 2rem;
  margin-bottom: 1.5rem;
}
.core_frontend_dienstleistungen_uebersicht_01 .card img {
  overflow: hidden;
}
.core_frontend_dienstleistungen_uebersicht_01 .card .card-body{
  padding: 3rem;
  overflow: hidden;
  position: relative;
}
.core_frontend_dienstleistungen_uebersicht_01 .card .card-body > * {
  position: relative;
}
.core_frontend_dienstleistungen_uebersicht_01 .card .card-body::before {
  content: ' ';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: var(--drreinigung-blau-2);
  backdrop-filter: blur(var(--drreinigung-blur));
}
.core_frontend_dienstleistungen_uebersicht_01 .container .card .row .col-text {
  margin-top: 0px;
}
.core_frontend_dienstleistungen_uebersicht_01 .container .card .row .col {
  padding: 0px !important;
}
.core_frontend_dienstleistungen_uebersicht_01 .card .heading {
  margin-bottom: 36px;
}




/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .core_frontend_dienstleistungen_uebersicht_01 .card {
    margin-bottom: 5rem;
    border-radius: 0rem;
  }
  .core_frontend_dienstleistungen_uebersicht_01 .card img,
  .core_frontend_dienstleistungen_uebersicht_01 .card .card-body {
    border-radius: 2rem;
  }
  .core_frontend_dienstleistungen_uebersicht_01 .card .card-body {
    margin-top: 6rem;
    margin-bottom: 1rem;
    border-radius: 2rem;
  }
  .core_frontend_dienstleistungen_uebersicht_01 .container .col:nth-child(even) .card .row .col:nth-of-type(1) {
    order: 2;
    transform: translateX(-3rem);
  }
  .core_frontend_dienstleistungen_uebersicht_01 .container .col:nth-child(even) .card .row .col:nth-of-type(2) {
    order: 1;
    transform: translateX(3rem);
    z-index: 2;
  }
  .core_frontend_dienstleistungen_uebersicht_01 .container .col:nth-child(odd) .card .row .col:nth-of-type(1) {
    transform: translateX(3rem);
  }
  .core_frontend_dienstleistungen_uebersicht_01 .container .col:nth-child(odd) .card .row .col:nth-of-type(2) {
    transform: translateX(-3rem);
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .core_frontend_dienstleistungen_uebersicht_01 .card .card-body {
    padding: 6rem;
  }
}







/* --- COLLAGE --- */

.collage {
  /*
  margin-left: -4.5rem;
  margin-right: -4.5rem;
  */
}
.collage .bubble-group {
  position: relative;
  z-index: 2;
  margin-top: -1.5rem;
}
.collage .bubble-klein {
  z-index: 2;
  margin-right: 2.25rem;
  border-radius: 50%;
  overflow:hidden;
  min-width: 9rem;
  max-width: 14rem;
  width: 40%;
  background-color:var(--drreinigung-blau-3);
}
.collage .bubble-klein > div {
  padding: 2rem;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.collage .bubble-mittel {
  transform: translateY(-9rem);
  z-index: 1;
  margin-right: 2.25rem;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background-color: transparent;
  margin-top: 4rem;
  margin-left: 5.5rem;
}
.collage .bubble-mittel::before {
  content: ' ';
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background-color: var(--drreinigung-blau-2);
  backdrop-filter: blur(var(--drreinigung-blur));
}
.collage .bubble-mittel.light::before {
  background-color: var(--drreinigung-blau-1);
}
.collage .bubble-mittel > div {
  padding: 3rem;
  display: flex;
  align-items: center;
  text-align: center;
}
.collage .bubble-mittel.light > div {
  padding: 2rem;
}
.collage .bubble-klein.card .card-body .card-title {
  color: #fff;
}
.collage .bubble-media {
  border-radius: 50%;
  overflow: hidden;
  margin-top: -14rem;
  transform: translateX(-3.5rem);
}
.collage .formular {
  z-index: 3;
  margin-top: -12rem;
}
.collage .bubble-deko {
  position: relative;
}
.collage .bubble-deko::before {
  content: ' ';
  position: absolute;
  border-radius: 50%;
  z-index: 4;
  aspect-ratio: 1 / 1;
}
.collage .bubble-1::before,
.collage .bubble-3::before,
.collage .bubble-4::before,
.collage .bubble-5::before,
.collage .bubble-7::before {
  animation: animation-1 2s ease infinite;
  /* animation-direction: alternate; */
  z-index: 4;
}
.collage .bubble-2::before,
.collage .bubble-6::before {
  animation: animation-2 4s ease infinite;
  /* animation-direction: alternate; */
  z-index: 4;
}
.collage .bubble-deko.bubble-1::before {
  background-color:var(--drreinigung-blau-2);
  left: -16.2%;
  margin-top: 13.5%;
  width: 2.7%;
  animation-delay: 0s;
}
.collage .bubble-deko.bubble-2::before {
  background-color:var(--drreinigung-blau-2);
  left: -10.8%;
  margin-top: 27%;
  width: 5.4%;
  animation-delay: -3s;
}
.collage .bubble-deko.bubble-3::before {
  background-color:var(--drreinigung-blau-3);
  left: -13.5%;
  margin-top: 43.2%;
  width: 2.7%;
  animation-delay: -0.5s;
}
.collage .bubble-deko.bubble-4::before {
  background-color: var(--drreinigung-blau-4);
  left: -21.6%;
  margin-top: 27%;
  width: 1.35%;
  animation-delay: -1s;
}
.collage .bubble-deko.bubble-5::before {
  background-color:var(--drreinigung-blau-4);
  left: 51.3%;
  margin-top: 0%;
  width: 2.7%;
  animation-delay: -2s;
}
.collage .bubble-deko.bubble-6::before {
  background-color:var(--drreinigung-blau-3);
  left: 69%;
  margin-top: 2.7%;
  width: 6.75%;
  animation-delay: -4s;
}
.collage .bubble-deko.bubble-7::before {
  background-color:var(--drreinigung-blau-4);
  left: 88%;
  margin-top: 18.9%;
  width: 1.35%;
  animation-delay: -2.5s;
}

@keyframes animation-1 {
  from {
    transform: scale(0.5);
    opacity: 1;
  }
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}
@keyframes animation-2 {
  from {
    transform: scale(0.25);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}


@media (min-width: 480px) {
  .collage .bubble-mittel {
    margin-top: 2rem;
  }
  .collage .bubble-mittel > div,
  .collage .bubble-mittel.light > div {
    padding: 6rem;
  }
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .collage .bubble-group {
    margin-top: 0rem;
  }
  .collage .bubble-mittel {
    margin-top: 0rem;
    margin-left: 17.5rem;
  }
  .collage .bubble-mittel > div,
  .collage .bubble-mittel.light > div {
    padding: 2rem;
  }
  .collage .bubble-media {
    margin-top: -21rem;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .collage .bubble-mittel {
    margin-top: 0rem;
    margin-left: 22.5rem;
  }
  .collage .bubble-media {
    margin-top: -23rem;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .collage .bubble-group {
    transform: translateX(16.2%) translateY(24.3%);
  }
  .collage .bubble-mittel {
    margin-top: 10%;
    margin-left: 0rem;
  }
  .collage .bubble-mittel > div,
  .collage .bubble-mittel.light > div {
    padding: 6rem;
  }
  .collage .bubble-media {
    transform: translateX(-9rem);
    margin-top: inherit;
  }
  .collage .formular {
    /* margin-right: 2.25rem; */
    margin-top: 0rem;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .collage .bubble-mittel > div,
  .collage .bubble-mittel.light > div {
    padding: 8rem;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}
@media (min-width: 3840px) {
  .collage .bubble-mittel > div,
  .collage .bubble-mittel.light > div {
    padding: 15rem;
  }
}







/* --- MODULE --- */


.custom_drreinigung_frontend_einstieg .collage .bubble-klein {
  /* margin-left: -1.5rem; */
}
.custom_drreinigung_frontend_einstieg .container {
  margin-bottom: -10rem;
}

.core_frontend_inhalt_text_04 .container {
  padding-left: 3rem;
  padding-right: 3rem;
}

.custom_drreinigung_frontend_home {
  overflow: hidden;
}
.custom_drreinigung_frontend_home .col {
  margin-top: 0;
}
.custom_drreinigung_frontend_home {
  min-height: calc(100vh - var(--nav-height));
}

.core_frontend_inhalt_text_04 {
  background-color: var(--drreinigung-blau-1);
}

.core_frontend_referenzen_uebersicht_01 {
  margin-top: 3rem;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .custom_drreinigung_frontend_einstieg .collage .bubble-klein {
    margin-left: 2rem;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .custom_drreinigung_frontend_einstieg .collage .bubble-klein {
    margin-left: 0rem;
  }
  .custom_drreinigung_frontend_einstieg .container {
    margin-bottom: -13rem;
  }
  .core_frontend_inhalt_text_04 .container {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .core_frontend_inhalt_text_04 .row {
    --bs-gutter-x: 7rem;
  }
  .core_frontend_referenzen_uebersicht_01 {
    margin-top: 0rem;
  }
  .custom_drreinigung_frontend_einstieg .collage {
    /*
    margin-left: calc((100% - 20%) / 2);
    */
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
}

@media (min-width: 3840px) {
  .custom_drreinigung_frontend_home {
    margin-top: 7.5%;
  }
  footer {
    margin-top: 6rem;
  }
}





/* --- NACH UNTEN --- */


.nach-unten {
  background-color: transparent;
  color: var(--drreinigung-blau-3);
  border: none;
  text-align: center;
  text-decoration: none;
  font-size: 42px;
  display: none;
}
.bounce-3 {
  animation-name: bounce-3;
  animation-timing-function: ease;
}
.box {
     animation-duration: 2s;
     animation-iteration-count: infinite;
     transform-origin: bottom;
 }
.bounce-3 {
     animation-name: bounce-3;
     animation-timing-function: ease;
 }
 @keyframes bounce-3 {
     0%   { transform: translateY(0); }
     30%  { transform: translateY(-20px); }
     50%  { transform: translateY(0); }
     100% { transform: translateY(0); }
 }


 /* Small devices (landscape phones, 576px and up) */
 @media (min-width: 576px) {
 }
 /* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
   .nach-unten {
     display: block;
   }
 }
 /* Large devices (desktops, 992px and up) */
 @media (min-width: 992px) {
 }
 /* X-Large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
 }
 /* XX-Large devices (larger desktops, 1400px and up) */
 @media (min-width: 1400px) {
 }