@import url("tablet.css");
/* Shared Figma roles. Component styles own their typography; do not reset
   every descendant or turn every h3 into a display headline. */
body {
  font-family: var(--body);
  font-weight: 400;
}

.button,
.page-unternehmen .btn {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'wdth' 200, 'wght' 400;
  font-size: 14px;
  letter-spacing: 1.4px;
  padding-inline: 16px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.button > span,
.page-unternehmen .btn > span {
  font: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  min-width: 0;
}

.main-nav > a:not(.button),
.footer-nav a,
.social-links,
.legal-links,
.menu-meta {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'wdth' 200, 'wght' 400;
}

/* Social links use the same horizontal arrow as the website buttons. */
.social-links .social-arrow,
.menu-social .social-arrow,
.person-social .social-arrow {
  width: 20px;
  height: 12.728px;
  flex: none;
  align-self: center;
}

.social-links .social-arrow,
.menu-social .social-arrow {
  filter: brightness(0) invert(1);
}

/* Contact body roles: Inter Regular, Medium and Bold. */
.hero-kontakt .hero-copy,
.conversation-copy {
  font-family: var(--body);
  font-weight: 500;
  color: #4d474d;
}

.hero-kontakt strong {
  font: 500 18px/26px var(--display);
  font-variation-settings: 'wdth' 200, 'wght' 500;
  font-variant: normal;
  text-transform: none;
}

.contact-options .simple-card h3,
.client-support .simple-card h3,
.conversation-questions h3 {
  font: 700 20px/26px var(--body);
}

.contact-portrait strong {
  font: 700 16px/22px var(--body);
}

.conversation-questions li {
  font: 500 17px/24px var(--body);
}

.client-support > .container > div > p {
  font: 500 16px/24px var(--body);
  color: #4d474d;
}

.client-support > .container > div > p > strong {
  font: 700 18px/26px var(--body);
  color: var(--ink);
}

/* Keep real uppercase navigation clear of the logo on small laptops. */
@media (min-width:900px) and (max-width:1023px) {
  .header-inner { width: calc(100% - 48px); }
  .footer-inner { padding-inline: 24px; }
  .brand { width: 216px; }
  .main-nav { margin-left: 20px; gap: 12px; }
  .main-nav > a:not(.button) { letter-spacing: .8px; }
}

@media (max-width:899px) {
  .conversation-copy {
    font-size: 16px;
    line-height: 24px;
  }

  .main-nav .nav-contact {
    border-color: transparent;
  }

  /* Match the measured mobile CTA without reducing the label font. */
  .conversation-action .button {
    width: 248px;
    padding-inline: 12px;
  }
}

@media (max-width:374px) {
  .legal-links,
  .menu-legal {
    gap: 20px;
    flex-wrap: wrap;
  }
}