/* Überschriften */
h1 { font-size: var(--font-size-h1); line-height: var(--line-height-headline); }
h2 { font-size: var(--font-size-h2); line-height: var(--line-height-headline); }
h3 { font-size: var(--font-size-h3); line-height: var(--line-height-headline); }
h4 { font-size: var(--font-size-h4); line-height: var(--line-height-headline); }
h5 { font-size: var(--font-size-h5); line-height: var(--line-height-headline); }
h6 { font-size: var(--font-size-h6); line-height: var(--line-height-headline); }

h1, h2, h3, h4, h5, h6 {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  hyphens: auto;
}

h2 {
  margin: 0 0 1.25rem;
}

.headline {
  display: block;
}

/* Überschrift mit Trennlinie (links) */
.head-line {
  display: block;
}

.head-line :is(h1, h2, h3, h4, h5, h6) {
  position: relative;
  display: inline-block;
}

.head-line :is(h1, h2, h3, h4, h5, h6)::after {
  content: '';
  display: block;
  height: 3px;
  width: 40%;
  background: var(--color-primary);
  border-radius: 3px;
  position: absolute;
  bottom: -1.7rem;
  left: 0;
}

.head-line.orange :is(h1, h2, h3, h4, h5, h6)::after {
  background: var(--color-orange);
}

.head-line.blue :is(h1, h2, h3, h4, h5, h6)::after  {
  background: var(--color-blue);
}

.head-line.green :is(h1, h2, h3, h4, h5, h6)::after  {
  background: var(--color-green);
}

/* Überschrift mit Trennlinie (mittig) */
.head-line.center :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
}

.head-line.center :is(h1, h2, h3, h4, h5, h6)::after {
  left: 50%;
  transform: translateX(-50%);
}

.head-line.orange.center :is(h1, h2, h3, h4, h5, h6)::after {
  left: 50%;
  transform: translateX(-50%);
}

.head-line.blue.center :is(h1, h2, h3, h4, h5, h6)::after {
  left: 50%;
  transform: translateX(-50%);
}

.head-line.green.center :is(h1, h2, h3, h4, h5, h6)::after {
  left: 50%;
  transform: translateX(-50%);
}

.center {
  text-align: center;
}

.paragraph.headline.center {
  text-align: center;
  width: 100%;
}

.paragraph.headline.style-h1.center,
.paragraph.headline.style-h2.center,
.paragraph.headline.style-h3.center,
.paragraph.headline.style-h4.center,
.paragraph.headline.style-h5.center,
.paragraph.headline.style-h6.center {
  text-align: center;
  width: 100%;
}

/* Headline in background colored columns */
.columns-view.bg-primary .headline {
  color: var(--color-white);
}