/**
 * @file
 * Visual styles for nodes.
 */

.node--unpublished {
  background-color: #fff4f4;
}
.node {
  background-color: #fcf7f3;
  p, ul, li {
    a {
      --tw-text-opacity: 1;
      color: rgba(var(--primary, 0, 0, 0), var(--tw-text-opacity));
    }
    a:not(.no-underline) {
      text-decoration: underline;
      i {
        text-decoration: none;
        &::before {
          text-decoration: none;
        }
      }
    }
  }
}

.node .bg-primary a {
  --tw-text-opacity: 1;
  color: rgba(255,255,255,var(--tw-text-opacity));
}

.fp-section:nth-of-type(2n) .fp-separator,
.fp-separator-view {
  fill: #fcf7f3;
}
.age-page-scroll-container .fp-separator-view {
  fill: #faf0e8;
}
/** Sidebar Leistung */
.fp-sticky-sidebar {
  position: sticky;
  top: 0;
  background-size: cover;

  @media (min-width: 1280px) {
    --tw-bg-opacity: 1;
    background-color: rgba(255,255,255,var(--tw-bg-opacity));
    --tw-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    box-shadow: var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);
  }
}
.freeContentPage {
  .paragraph:first-of-type {
    .bp-headline {
      margin-top: 0;
    }
  }
  .paragraph--type--media-reference {
    &:first-of-type {
      max-width: 56.25rem;
      margin-left: auto;
      margin-right: auto;
    }
  }
  &.nospacing {
    margin-top: 0;
    padding-top: 0;
  }
}
.fp-sidebar {
  position: relative;
  overflow: visible;
  height: unset;
  margin-bottom: 2rem;
  @media (min-width: 640px) {
    position: sticky;
    top: 0;
    overflow: auto;
    height: 100vh;
    margin-bottom: -3.5rem;
    .bp-headline__first {
      padding-bottom: 1rem;
      font-size: 1rem;
      line-height: 1.25rem;
    }
  }
  @media (min-width: 1280px) {
    margin-bottom: -4.5rem;
  }
  @media (max-width: 639px) {
    height: auto !important;
  }
}
.bp-search-pane {
  @media (min-width: 640px) {
    border-radius: .375rem;
  }
}
.news-card {
  max-width: 100%;
}
footer {
  top: -1px;
  position: relative;
}
.bp-preview-card__image {
  height: 11rem;
  padding: 2rem;
  background-color: #f7fafa;
  @media (min-width: 640px) {
    height: 14rem;
  }
  @media (min-width: 1280px) {
    height: 12.5rem;;
  }
  img {
    max-height: 100%;
    margin: 0 auto;
    width: 100%;
  }
}
a.inline-btn {
  &.btn-primary {
    background-color: rgba(var(--primary,0,0,0),var(--tw-bg-opacity));
    color: white;
    display: inline-block;
    text-decoration: none;
    &:hover {
      color: rgba(var(--primary,0,0,0),var(--tw-bg-opacity));
      background-color: white;
      border-color: rgba(var(--primary,0,0,0),var(--tw-bg-opacity));
    }
  }
  &.btn-secondary {
    display: inline-block;
    text-decoration: none;
    &:hover {
      background-color: rgba(var(--primary, 0, 0, 0), var(--tw-bg-opacity));
      color: white;
    }
  }
}

a.reference_link {
  text-decoration: none !important;
}
.reference {
  .reference_image {
    flex-basis: calc(43% - .5rem);
    .image_container {
      aspect-ratio: 116/100;
    }
  }
  .reference_text {
    hyphens: auto;
    flex-basis: calc(57% - .5rem);
    flex-grow: 1;
    justify-content: space-between;
    h3 {
      font-size: 28px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }
    .text-formatted {
      flex-grow: 1;
      hyphens: auto;
    }
    .reference_link {
      color: #fff;
      text-decoration: none;
      text-transform: none;
      display: inline-block;
      width: 100%;
      text-align: center;
    }
  }
  .reference_header {
    height: 63px;
    background: url(../../images/misc/reference_header.svg) top right no-repeat;
    color: #30737F;
    &.leistung {
      background: url(../../images/misc/reference_header_lila.svg) top right no-repeat;
    }
  }
  .reference_text_leistungen {
    h3 {
      color: #891249;
    }
  }
  .reference_link_leistungen {
    color: #891249;
    text-transform: uppercase;
  }
}
.references {
  border-bottom: 5px solid #005662;
  .bg_wrapper {
    z-index: 1;
    position: relative;
    aspect-ratio: 1/1.1;
    @media all and (min-width: 1280px) {
      aspect-ratio: 1/.9;
    }
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: .1;
      z-index: -1;
      background: url(../../images/misc/familienportal_kleeblatt_bg.png);
      background-position: bottom -20px right -20px;
      background-repeat: no-repeat;
    }
  }
}

/** Anpassung max-width freecontentpage wenn keine Sidebar */

.citizen{
  &.without-sidebar {
    .max-w-freeContentPage {
      max-width: 1302px;
    }
  }
}


/** special for interview */
.interview {
  &.full {
    .field--name-field-inhaltsbereich-interview {
      > .field__item {
        margin-bottom: 4rem;
        .paragraph--type--interview {
          .field__item:last-of-type {
            .question {
              line-height: 28px;
            }
            .answer {
              margin-bottom: 0;
              p:last-of-type {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
    .interview_labeling {
      position: absolute;
      left: 0;
      bottom: 20%;
      background-color: #6a1571;
      color: white;
      font-size: 56px;
      font-style: normal;
      font-weight: 700;
      line-height: 56px;
      text-transform: uppercase;
      svg {
        margin-top: .5rem;
      }
    }
    .interview_intro {
      margin-bottom: 4rem;

      h2.interview-title {
        color: #005662;
        font-size: 32px;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 1.5rem;
      }
    }
  }
  &.teaser {
    .interview_labeling {
      position: absolute;
      left: 0;
      bottom: 15%;
      background-color: #6a1571;
      color: white;
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 22px;
      text-transform: uppercase;
      padding: 5px 1rem 3px!important;
      gap: 8px!important;
      svg {
        margin-top: 0;
        height: 20px;
        width: 20px;
      }
    }
  }
}