/* Linktextbox
   ========================================================================== */

.linktextbox {
  & .uploads__title {
    color: rgb(var(--c-neutral-lightest));
    font-size: 120%;
    font-weight: var(--f-weight-sb);
    text-transform: uppercase;
  }

  & .uploads__description {
    color: rgb(var(--c-neutral-lightest));
  }

  & .uploads__arrowpath {
    stroke: rgb(var(--c-neutral-lightest));
  }
}

/* Beats the generic .uploads__item rules from template.css — including their container inversion */
.linktextbox .uploads__item,
.content .frame-bg-grey .linktextbox .uploads__item,
.content > .frame:nth-child(2n) .linktextbox .uploads__item {
  background: rgb(var(--c-secondary));
}

@media (hover: hover) {
  .linktextbox .uploads__item:hover,
  .content .frame-bg-grey .linktextbox .uploads__item:hover,
  .content > .frame:nth-child(2n) .linktextbox .uploads__item:hover {
    background: rgb(var(--c-secondary));
    color: rgb(var(--c-neutral-dark));
  }

  .linktextbox .uploads__item:hover .uploads__title,
  .linktextbox .uploads__item:hover .uploads__description {
    color: rgb(var(--c-neutral-lightest));
  }

  .linktextbox .uploads__item:hover .uploads__arrowpath {
    stroke: rgb(var(--c-neutral-lightest));
  }
}

/* Partnerslider
   ========================================================================== */

.slider.-partner {
  & .slider__iteminner {
    height: 250px;
    border: none;
    background: transparent;
  }

  & .slider__iteminner img {
    max-height: 300px;
    max-width: 100%;
  }
}

/* Serviceslider
   ========================================================================== */

.slider {
  & .slider__iteminner > a {
    position: relative;
    display: block;
  }

  & a[rel="noreferrer"]::after,
  & a[rel="noopener noreferrer"]::after {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    margin: 0;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: rgb(var(--c-secondary));
    border: 1px solid rgb(var(--c-secondary));
    border-radius: 10px;
    background: rgb(var(--c-neutral-lightest));
  }
}

.slider.-service {
  & .service__item {
    padding: 0;
    background: transparent;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
  }

  & .service__icon {
    width: 45px;
    height: 45px;
    margin: 0 auto;
    border-radius: 25px;
    background: rgb(var(--c-neutral-lighter));
  }

  & .service__icon img {
    width: auto;
    max-width: 30px;
    max-height: 30px;
  }

  & .service__icon .font__fas,
  & .service__icon .font__fal,
  & .service__icon .font__fab,
  & .service__icon .font__far {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: var(--f-size-l-1);
  }

  & .service__text {
    margin-top: 15px;
    color: rgb(var(--c-neutral-dark));
    hyphens: manual;
  }

  /* .-likeh3 and a carry hyphens: auto from gkmb_base — live breaks on word boundaries only */
  & .service__text .headline {
    hyphens: manual;
  }
}

.content .frame-bg-grey .service__icon,
.content > .frame:nth-child(2n) .service__icon {
  background: rgb(var(--c-neutral-lightest));
}

@media (hover: hover) {
  .slider.-service .service__item:hover .service__icon {
    background: rgb(var(--c-neutral-darker));
  }

  .slider.-service .service__item:hover .service__icon span {
    color: rgb(var(--c-neutral-lightest));
  }
}

/* Serviceslider — "servicesnew" variant */

.slider.-service.frame-servicesnew {
  /* Widens the generic .slider__iteminner gutter (0 5px) to the live 0 20px — no width here,
     a width would cancel the margin out and let the item texts touch on narrow screens */
  & .service__item {
    height: 100%;
    margin: 0 20px;
    padding-top: 10px;
    justify-content: flex-start;
    flex-flow: column nowrap;
  }

  & .service__icon {
    width: 40px;
    height: 40px;
    background: none;
  }

  & .service__icon .font__fas,
  & .service__icon .font__fal,
  & .service__icon .font__fab,
  & .service__icon .font__far {
    width: 40px;
    height: 40px;
    font-size: 40px;
    line-height: 40px;
    color: rgb(var(--c-primary));
  }

  & .service__text .headline {
    font-size: var(--f-size-l-2);
    text-transform: none;
  }
}

.content .frame-bg-grey .slider.-service.frame-servicesnew .service__icon,
.content > .frame:nth-child(2n).slider.-service.frame-servicesnew .service__icon {
  background: none;
}

@media (hover: hover) {
  .slider.-service.frame-servicesnew .service__item:hover .service__icon {
    background: none;
  }

  .slider.-service.frame-servicesnew .service__item:hover .service__icon span {
    color: rgb(var(--c-primary));
    transform: scale(1.15);
    transition: all 0.3s ease;
  }
}

/* Shortcut
   ========================================================================== */

.content {
  position: relative;
}

div.shortcut {
  position: absolute;
  display: flex;
  justify-content: center;
  top: 5px;
  right: 0;
  left: 0;
  width: 100%;

  & .tooltip {
    margin-bottom: 0;
    margin-right: 5px;
    border-radius: 30px;
    background: rgb(var(--c-secondary));
  }

  & .tooltip:after {
    right: 47px;
    background: rgba(var(--c-neutral-darkest), 0.8);
  }

  & .tooltip:before {
    right: 37px;
    background: none;
    border-left-color: rgba(var(--c-neutral-darkest), 0.8);
  }

  & a[rel="noreferrer"]::after {
    position: absolute;
    right: -2px;
    top: -2px;
    width: 16px;
    height: 16px;
    margin: 0;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    color: rgb(var(--c-secondary));
    border: 1px solid rgb(var(--c-secondary));
    border-radius: 10px;
    background: rgb(var(--c-neutral-lightest));
  }
}

@media (hover: hover) {
  .shortcut .tooltip:hover {
    background: rgba(var(--c-neutral-darkest), 0.8);
  }
}

/* Scrollimage
   ========================================================================== */

.scrollimage {
  & .imagefullwidth {
    max-height: 640px;
    filter: none;
  }

  & .scrollimage__background {
    background: none;
  }

  & .scrollimage__bodytext .headline {
    text-align: left;
  }

  & .scrollimage__bodytext a,
  & .scrollimage__bodytext h1,
  & .scrollimage__bodytext h2,
  & .scrollimage__bodytext h3,
  & .scrollimage__bodytext h4 {
    margin-bottom: 1rem;
    font-size: 1.55rem;
    text-transform: none;
  }

  & .scrollimage__bodytext p {
    font-size: var(--f-size-s-2);
  }
}

/* Media Queries
   ========================================================================== */

@media (min-width: 641px) {
  .scrollimage .scrollimage__bodytext a,
  .scrollimage .scrollimage__bodytext h1,
  .scrollimage .scrollimage__bodytext h2,
  .scrollimage .scrollimage__bodytext h3,
  .scrollimage .scrollimage__bodytext h4 {
    font-size: 2.1rem;
  }

  .scrollimage .scrollimage__bodytext p {
    font-size: var(--f-size-l-1);
  }
}

@media (min-width: 1561px) {
  .scrollimage .scrollimage__bodytext a,
  .scrollimage .scrollimage__bodytext h1,
  .scrollimage .scrollimage__bodytext h2,
  .scrollimage .scrollimage__bodytext h3,
  .scrollimage .scrollimage__bodytext h4 {
    font-size: 2.67rem;
  }
}

@media (min-width: 801px) {
  div.shortcut {
    top: 100px;
    right: 10px;
    left: auto;
    width: 45px;
    flex-direction: column;

    & .tooltip {
      margin-right: 0;
      margin-bottom: 8px;
    }
  }

  .slider.-service.frame-servicesnew .service__text .headline {
    font-size: var(--f-size-l-3);
  }
}

@media (min-width: 1320px) {
  .slider.-service.frame-servicesnew .service__icon,
  .slider.-service.frame-servicesnew .service__icon .font__fas,
  .slider.-service.frame-servicesnew .service__icon .font__fal,
  .slider.-service.frame-servicesnew .service__icon .font__fab,
  .slider.-service.frame-servicesnew .service__icon .font__far {
    width: 60px;
    height: 60px;
    font-size: 60px;
    line-height: 60px;
  }
}

@media (min-width: 1561px) {
  div.shortcut {
    right: 45px;
  }

  .scrollimage .scrollimage__bodytext p {
    font-size: var(--f-size-l-3);
  }
}