/* ------------------------------------------------------------------------- */
/*  1. MENU
    2. FONTS
    3. IMAGES
    4. TEASER IMAGE
    5. TEXTELEMENT
    6. BENTO SPACING
    7. MEDIA QUERIES
/* ------------------------------------------------------------------------- */

:root {
  --h1: 3rem;
  --margin-default: 2rem;
  --fs-ptag: 1.7rem;
  --fs-deco: 10rem;

  --cat-purple: #D952CB;
  --cat-blue: #2D97D7;
  --cat-green: #89DE26;
}

.cat-purple .hero-badge {
  border: 2px solid var(--cat-purple);
  color: var(--cat-purple);
}
#service-subpages.cat-purple  .btn.btn-primary.btn-sm {
  background: var(--cat-purple);
  border: 2px solid var(--cat-purple);
}
#service-subpages.cat-purple  .btn.btn-primary.btn-sm:hover {
  border: 2px solid var(--cat-purple);
}
.cat-blue .hero-badge {
  border: 2px solid var(--cat-blue);
  color: var(--cat-blue);
}
#service-subpages.cat-blue  .btn.btn-primary.btn-sm {
  background: var(--cat-blue);
  border: 2px solid var(--cat-blue);
}
#service-subpages.cat-blue  .btn.btn-primary.btn-sm:hover {
  border: 2px solid var(--cat-blue);
}
.cat-green .hero-badge {
  border: 2px solid var(--cat-green);
  color: var(--cat-green);
}
#service-subpages.cat-green  .btn.btn-primary.btn-sm {
  background: var(--cat-green);
  border: 2px solid var(--cat-green);
}
#service-subpages.cat-green  .btn.btn-primary.btn-sm:hover {
  border: 2px solid var(--cat-green);
}
#service-subpages.cat-purple .frame-type-header h2::after {
  background: var(--cat-purple);
}
#service-subpages.cat-blue .frame-type-header h2::after {
  background: var(--cat-blue);
}
#service-subpages.cat-green .frame-type-header h2::after {
  background: var(--cat-green);
}

#service-subpages.cat-green .textelement:before {
  content: '';
  filter: hue-rotate(56deg);
}
#service-subpages.cat-purple .textelement:before {
  content: '';
  filter: hue-rotate(260deg);
}
#service-subpages.cat-blue .textelement:before {
  content: '';
  filter: hue-rotate(160deg);
}
/* ------------------------------------------------------------------------- */
/* MENU
/* ------------------------------------------------------------------------- */
.subpage-menu #navigation .nav-logo-row img { transition: all .5s ease-in-out;}
.subpage-menu .osmo-ui .btn-primary {
    background: var(--main-color);
    color: var(--white);
}
.subpage-menu #navigation.shrink #contact-button { filter: invert(0);}
.subpage-menu #navigation.shrink .nav-logo-row img {  transition: all .5s ease-in-out;}


/* ------------------------------------------------------------------------- */
/* FONTS
/* ------------------------------------------------------------------------- */
h1 {
  font-size: var(--h1);
  margin-bottom: var(--margin-default);
}

.hero__subheadline.h2 {
  font-size: var(--fs-deco);
  width: min-content;
  text-align: left;
}

#subpage-boxen .frame-type-textmedia p {
  font-size: var(--fs-lead);
  font-weight: 200;
  text-align: right;
  line-height: 1;
}

#subpage-content .textelement__body .bodytext { font-style: italic; }

/* ------------------------------------------------------------------------- */
/* IMAGES
/* ------------------------------------------------------------------------- */
.image-embed-item { border-radius: 2rem;}

figure.image {
  position: relative;
  text-align: center;
}
figure figcaption.image-caption {
  font-style: italic;
  font-size: .8rem;
}

/* ------------------------------------------------------------------------- */
/* TEASER IMAGE
/* ------------------------------------------------------------------------- */
#service-subpages #teaser-image {
  height: 70vh;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  padding-top: 8rem;
}

#teaser-image .col-xs-12.col-sm-0.col-md-6.col-lg-6.col-xl-6 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#teaser-image .service_content h1 {
  font-size: var(--fs-h1);
  line-height: 1;
  margin-bottom: 20px;
}

#teaser-image .service_content h2 {
  font-size: var(--fs-lead);
}

#teaser-image .btn.btn-primary {
    border: 2px solid var(--main-color);
    background: var(--main-color);
    padding: .3rem 1rem;
    border-radius: .6rem;
}

#teaser-image .service_link { margin-top: 20px;}
#teaser-image .service_link .btn::after {
      content: ' ';
    background-image: url(/fileadmin/user_upload/Assets/arrow.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    width: 27px;
    display: inline-block;
    height: 13px;
    transition: all .5s ease-in-out;
}
#teaser-image .service_link:hover .btn::after { filter: invert(1); transition: all .5s ease-in-out;}


/* ------------------------------------------------------------------------- */
/* TEXTELEMENT - QUOTE
/* ------------------------------------------------------------------------- */
#subpage-content .textelement:before {
  content: '';
  background-image: url(/fileadmin/user_upload/Assets/quote.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
}

#subpage-content .textelement .textelement__body p {font-style: italic;}

/* ------------------------------------------------------------------------- */
/* BENTO SPACING
/* ------------------------------------------------------------------------- */
#subpage-boxen .e-elementColumns1 { margin-bottom: 3rem; }



/* ------------------------------------------------------------------------- */
/* MEDIA QUERIES - > 1400
/* ------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  #service-subpages #teaser-image .container, 
  #service-subpages #teaser-image .container-lg, 
  #service-subpages #teaser-image .container-md, 
  #service-subpages #teaser-image .container-sm, 
  #service-subpages #teaser-image .container-xl, 
  #service-subpages #teaser-image .container-xxl {
      max-width: 1000px;
  }
}
@media (min-width: 2200px) {
  #service-subpages #teaser-image .container, 
  #service-subpages #teaser-image .container-lg, 
  #service-subpages #teaser-image .container-md, 
  #service-subpages #teaser-image .container-sm, 
  #service-subpages #teaser-image .container-xl, 
  #service-subpages #teaser-image .container-xxl {
      max-width: 1200px;
  }
}

@media(min-width: 768px) and (max-width: 1200px) {
  /* #text-animation .container .row.e-elementColumns1:nth-child(even) {
    display: flex;
    flex-direction: column-reverse;
  } */
  #service-subpages #teaser-image {
    height: 85vh;
  }
  #subpage-content .textelement.text-center {
    width: 95%;
  }
  .bento__item .bento__image img { opacity: .3;}
}

/* ------------------------------------------------------------------------- */
/* MEDIA QUERIES - > 767
/* ------------------------------------------------------------------------- */
@media(min-width: 767px) {
   #teaser-image .image-embed-item {
    width: 100%;
    height: auto;
    margin-top: 20px;
    object-fit: contain;
    aspect-ratio: 4 / 3;
  }
  #teaser-image .service_content h1 {
    font-size: 2.8rem;
  }
}

/* ------------------------------------------------------------------------- */
/* MEDIA QUERIES - 593 - 767
/* ------------------------------------------------------------------------- */
@media(min-width: 593px) and (max-width: 767px) {
  .subpage-menu #navigation .nav-logo-row img {
    filter: invert(1) !important;
  }
  #text-animation .container .row.e-elementColumns1:nth-child(even) {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* ------------------------------------------------------------------------- */
/* MEDIA QUERIES - < 592
/* ------------------------------------------------------------------------- */
@media(max-width: 592px) {
   .subpage-menu #navigation .nav-logo-row img {
    filter: invert(0) !important;
  }
  #subpage-content .headline_bodytext p {
    width: calc(100vw / 1);
    max-width: calc(100vw / 1 - 30%);
  }
  #subpage-content .textelement.text-center{
    margin-top: 2.2em;
  }
  .textelement.text-center {
    width: 90% !important;
  }
  #text-animation .textelement.text-left{
    width: 100%;
  }
  #service-subpages #teaser-image {
    height: 100vh;
    align-items:baseline;
    justify-content: center;
  }
  #service-subpages #teaser-image .image-embed-item {
    width: 80%;
  }
  .subpage-menu #navigation .nav-logo-row img {
    filter: invert(0) !important;
  }
  .bento__item .bento__image img { opacity: .3;}

  /* Rotate columns */
  #text-animation .container .row.e-elementColumns1:nth-child(even) {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* ------------------------------------------------------------------------- */
/* MEDIA QUERIES - < 376
/* ------------------------------------------------------------------------- */
@media(max-width: 376px) {
  #teaser-image .service_content h1 { font-size: 1.9rem;}
  #teaser-image .image-embed-item {
    width: 90%;
    height: auto;
    margin-top: 20px;
  }
  #service-subpages #teaser-image {
    height: 100vh;
    align-items:baseline;
    justify-content: center;
  }
  #service-subpages #teaser-image .image-embed-item {
    width: 80%;
  }
  .subpage-menu #navigation .nav-logo-row img {
    filter: invert(0) !important;
  }
  .bento__item .bento__image img { opacity: .3;}
}