/* madebykev — Typografie-Klassen. Übernommen aus dem Theme. */
.eyebrow {
  margin: 0 0 28px;
  font: var(--fw-bold) var(--mono-label-size)/var(--mono-label-line) var(--font-mono);
  letter-spacing: var(--mono-label-tracking);
  text-transform: uppercase;
}
.eyebrow::before { content: "// "; color: var(--yellow); }
.eyebrow.square::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 10px; background: var(--yellow); vertical-align: -1px; }
.eyebrow.dark-mark::before { color: var(--black); }

.display { margin: 0; font-size: var(--display); font-weight: var(--fw-black); line-height: var(--display-line); letter-spacing: var(--display-tracking); }
.display-hero { margin: 0; font-size: var(--display-hero); font-weight: var(--fw-black); line-height: var(--display-hero-line); letter-spacing: var(--display-hero-tracking); }
.display-page { margin: 0; font-size: var(--display-page); font-weight: var(--fw-black); line-height: var(--display-page-line); letter-spacing: var(--display-page-tracking); }

.yellow { color: var(--yellow); }
.marker {
  background: linear-gradient(transparent 62%, var(--yellow) 62%);
  padding-inline: 2px 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.outline { color: var(--yellow); -webkit-text-stroke: 2px var(--black); }
.arrow { font-family: var(--font-sans); font-weight: var(--fw-regular); }

.mono-label { font: var(--fw-bold) var(--mono-meta-size) var(--font-mono); letter-spacing: var(--mono-meta-tracking); text-transform: uppercase; }

@media (max-width: 560px) {
  .eyebrow { margin-bottom: 20px; font-size: 10px; }
  .display { font-size: 50px; }
}