/* Signpost Styles */

.signpost-row {
  position: relative !important;
  height: var(--signpost-row-height) !important;
  min-height: unset !important;
  max-height: unset !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Signpost Schild */
.signpost {
  --pd-basis: 1em;
  /* --arrow-width: calc(3 * var(--pd-basis)); */

  --arrow-width: 3rem;

  width: 100% !important;
  padding: 1em 3.4em 0.8em 2em;

  display: flex;
  flex-direction: column;
  line-height: 1 !important;
  /* padding: calc(0.4 * var(--pd-basis)) calc(6 * var(--pd-basis))
    calc(0.1 * var(--pd-basis)) calc(1.75 * var(--pd-basis)); */

  color: white;
  /* width: 300px;*/

  /* The Signpost Magic */
  /* Points: Top-Left, Top-Shoulder, Tip, Bottom-Shoulder, Bottom-Left */
  clip-path: polygon(
    0% 0%,
    calc(100% - var(--arrow-width)) 0%,
    100% 50%,
    calc(100% - var(--arrow-width)) 100%,
    0% 100%
  );

  & h3 {
    font-size: var(--text-size-4xl) !important;
    line-height: 1 !important;
    color: var(--kita-white) !important;
  }
}

/* Für Single Pages */

/* Den Haupttitel (H1) in der Title Area ansprechen */
.title_holder h1 {
  --arrow-width: 3rem;
  width: fit-content !important;
  padding: 1rem 4rem 0.8rem 2rem !important;
  display: flex;
  flex-direction: column;
  line-height: 1 !important;
  color: white !important;
  clip-path: polygon(
    0% 0%,
    calc(100% - var(--arrow-width)) 0%,
    100% 50%,
    calc(100% - var(--arrow-width)) 100%,
    0% 100%
  );
}
/* EINRICHTUNG */
.page-id-1529 .title_holder h1 {
  background-color: var(--kita-blue) !important;
}
/* PÄDAGOGIK */
.page-id-1636 .title_holder h1 {
  background-color: var(--kita-yellow) !important;
}

/* TRANSITION */
.page-id-1675 .title_holder h1 {
  background-color: var(--kita-red) !important;
}

/* TEAM */
.page-id-1680 .title_holder h1 {
  background-color: var(--kita-green) !important;
}

/* KONTAKT */
.page-id-157 .title_holder h1 {
  background-color: var(--kita-orange) !important;
}

.signpost-row:hover {
  cursor: pointer;
}

@media only screen and (max-width: 1000px) {
  .signpost {
    width: 100% !important;
    padding: 1em 3.4em 0.8em 2em;
    --arrow-width: 2rem;
  }
}