/* System Neun — Typografie (Zalando Sans) */

@font-face {
  font-family: ZalandoSans;
  src: url('../fonts/ZalandoSans-VariableFont_wdth.ttf') format('truetype');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: ZalandoSans;
  src: url('../fonts/ZalandoSans-Italic-VariableFont_wdth.ttf') format('truetype');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-primary: ZalandoSans;
  --font-scale: 95.06%;
  --width-wide: 123;
  --width-normal: 100;
  --width-extended: 112;
  --width-button: 125;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-strong: 600;
  --weight-button: 600;
  --weight-body: 400;
}

html {
  font-size: var(--font-scale);
}

body {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-bold);
  font-stretch: calc(var(--width-normal) * 1%);
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-bold);
}

/* Wide headlines */
:is(
  h1,
  h2,
  h5,
  h6,
  .heading-style-h1,
  .heading-style-h2,
  .heading-style-h5,
  .heading-style-h6,
  .hero_heading,
  .heading,
  .h2,
  .page-heading,
  .fs-styleguide_heading-header,
  .fs-styleguide_heading-medium,
  .text-rich-text h1,
  .text-rich-text h2,
  .text-rich-text h5,
  .text-rich-text h6,
  .w-richtext h1,
  .w-richtext h2,
  .w-richtext h5,
  .w-richtext h6
) {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-bold);
  font-stretch: calc(var(--width-wide) * 1%);
  font-variation-settings: "wdth" var(--width-wide), "wght" var(--weight-bold);
}

/* Bold headlines (normal width) */
:is(
  h3,
  .heading-style-h3,
  .text-subhead,
  .text-rich-text h3,
  .w-richtext h3
) {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-bold);
  font-stretch: calc(var(--width-normal) * 1%);
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-bold);
}

:is(h4, .heading-style-h4, .text-rich-text h4, .w-richtext h4) {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-bold);
  font-stretch: calc(var(--width-extended) * 1%);
  font-variation-settings: "wdth" var(--width-extended), "wght" var(--weight-bold);
}

/* Fließtext */
:is(
  p:not(.button-text),
  li,
  blockquote,
  .text-rich-text p,
  .text-rich-text li,
  .text-rich-text blockquote,
  .w-richtext p,
  .w-richtext li,
  .w-richtext blockquote
) {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-body);
  font-stretch: calc(var(--width-extended) * 1%);
  font-variation-settings: "wdth" var(--width-extended), "wght" var(--weight-body);
}

:is(
  p:not(.button-text),
  li,
  blockquote,
  .text-subhead,
  .text-rich-text,
  .w-richtext
) :is(strong, b) {
  font-weight: var(--weight-strong);
  font-variation-settings: "wdth" var(--width-extended), "wght" var(--weight-strong);
}

:is(h3, .text-subhead) :is(strong, b) {
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-strong);
}

/* Rechtstexte: nur h3-Abschnittstitel groß, Listen/Fließtext regular */
.w-richtext h3 {
  font-size: 2rem;
  line-height: 150%;
}

.w-richtext li,
.w-richtext li :is(strong, b) {
  font-weight: var(--weight-body);
  font-variation-settings: "wdth" var(--width-extended), "wght" var(--weight-body);
}

:is(p, li, blockquote, .text-rich-text, .w-richtext, .text) sup {
  font-family: var(--font-primary), Arial, sans-serif;
  font-size: 0.65em;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  top: -0.48em;
  font-stretch: calc(var(--width-normal) * 1%);
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-body);
}

:is(p, li, blockquote, .text-rich-text, .w-richtext, .text) :is(strong, b) sup {
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-strong);
}

.nav-menu-link {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-semibold);
  font-stretch: calc(var(--width-normal) * 1%);
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-semibold);
}

.footer .contact {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-bold);
  font-stretch: calc(var(--width-normal) * 1%);
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-bold);
}

._1800-123-4567 {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-body);
  font-stretch: calc(var(--width-normal) * 1%);
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-body);
}

.text {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-body);
  font-stretch: calc(var(--width-normal) * 1%);
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-body);
}

.text :is(strong, b) {
  font-weight: var(--weight-strong);
  font-variation-settings: "wdth" var(--width-normal), "wght" var(--weight-strong);
}

/* h1 — 3% kleiner */
h1 {
  font-size: calc(5rem * 0.97);
}

h2 {
  font-size: 12.5rem;
}

.h2 {
  font-size: calc(4.8vw * 0.98);
}

.h2._1 {
  font-size: calc(11.5vw * 0.98);
}

.h2._2 {
  font-size: calc(9.6vw * 0.98);
}

.h2._3 {
  font-size: calc(6.7vw * 0.98);
}

.h2._4 {
  font-size: calc(9.6vw * 0.98);
}

.h2._5 {
  font-size: calc(4.8vw * 0.98);
}

.h2._6,
.h2.heading-style-h6 {
  font-size: calc(12.3vw * 0.98);
}

.heading-style-h2 {
  font-size: 2.875rem;
}

:is(h3, .text-subhead) {
  margin-top: 0.625rem;
}

#w-node-_5ff893b3-a5d6-a6fa-b4ad-d22131eb808a-8ded6900 {
  font-size: 1.85rem;
  line-height: 145%;
}

:is(ul, .text-rich-text ul, .w-richtext ul) li::marker {
  font-size: 1.4em;
}

:is(.button-primary, .button-secondary) {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-button);
  font-stretch: calc(var(--width-button) * 1%);
  font-variation-settings: "wdth" var(--width-button), "wght" var(--weight-button);
}

:is(.button-primary, .button-secondary) p.button-text,
p.button-text,
.button-text {
  font-family: var(--font-primary), Arial, sans-serif;
  font-weight: var(--weight-button);
  font-stretch: calc(var(--width-button) * 1%);
  font-variation-settings: "wdth" var(--width-button), "wght" var(--weight-button);
}

@media screen and (max-width: 991px) {
  h1 {
    font-size: calc(4rem * 0.97);
  }
}

@media screen and (max-width: 767px) {
  .heading-style-h2 {
    font-size: 1.925rem;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: calc(2.9rem * 0.97);
  }

  .h2 {
    font-size: calc(9.6vw * 0.98);
  }
}