/* Corporate design Metall Pichler & Faller (2026).
   Loaded after the Webflow stylesheet; only overrides.
   Palette: black, white, orange RGB 199/81/23. Typeface: Lexend. */

:root {
  --mpf-black: #0e0f11;
  --mpf-white: #ffffff;
  --mpf-orange: #c75117;
  --mpf-orange-dark: #a5420f;
  --mpf-graphite: #2a2b2f;
  --mpf-rule: #d9d9d9;

  --neutral--800: var(--mpf-black);
  --neutral--700: var(--mpf-graphite);
  --neutral--600: #55575c;
  --neutral--500: #696b70;
  --neutral--400: #b4b5b9;
  --neutral--300: #e2e2e2;
  --neutral--200: #f4f4f2;
  --neutral--100: var(--mpf-white);
  --accent--primary-1: var(--mpf-orange);
  --secondary--color-1: var(--mpf-orange);
  --secondary--color-2: var(--mpf-graphite);
  --general--shadow-01: rgba(0, 0, 0, 0.04);
  --general--shadow-02: rgba(0, 0, 0, 0.06);
  --general--shadow-03: rgba(0, 0, 0, 0.08);
  --general--shadow-04: rgba(0, 0, 0, 0.1);
  --general--shadow-05: rgba(0, 0, 0, 0.12);
  --general--shadow-06: rgba(0, 0, 0, 0.18);
  --button-shadow--color-01: transparent;
  --button-shadow--color-2: transparent;
  --button-shadow--color-03: transparent;
}

::selection {
  background: var(--mpf-orange);
  color: var(--mpf-white);
}

:focus-visible {
  outline: 2px solid var(--mpf-orange);
  outline-offset: 2px;
}

/* Typography ------------------------------------------------------------- */

body {
  font-family: Lexend, sans-serif;
  font-weight: 300;
  letter-spacing: 0.005em;
}

strong, b, .text-weight-semibold {
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.heading-h1-size, .heading-h2-size, .heading-h3-size {
  font-family: Lexend, sans-serif;
  font-weight: 300;
  letter-spacing: -0.015em;
  hyphens: manual;
}

h3, h4, .display-4, .heading-h3-size {
  font-weight: 400;
}

.display-2 { line-height: 1.12em; }
.display-3 { line-height: 1.18em; }

/* Lexend runs wider than Onest; one step smaller per breakpoint. */
@media screen and (min-width: 1280px) {
  .display-1 { font-size: 80px; }
  .display-2 { font-size: 64px; }
  .display-3 { font-size: 50px; }
  .heading-h1-size, h1 { font-size: 48px; }
}
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .display-1 { font-size: 68px; }
  .display-2 { font-size: clamp(48px, 5vw, 60px); }
  .display-3 { font-size: 44px; }
  .heading-h1-size, h1 { font-size: 42px; }
}
@media screen and (max-width: 991px) {
  .display-1 { font-size: 60px; }
  .display-2 { font-size: 46px; }
  .display-3 { font-size: 38px; }
  .heading-h1-size, h1 { font-size: 36px; }
}
@media screen and (max-width: 479px) {
  .display-1 { font-size: 48px; }
  .display-2 { font-size: 34px; }
  .display-3 { font-size: 30px; }
  .heading-h1-size, h1 { font-size: 30px; }
}

/* CD labels: small caps with wide tracking on a solid block, as in the CD
   document ("SCHRIFTART:", "PRIMÄRFARBEN"). */
:is(.text-300, .text-401).text-uppercase,
.badge-primary,
.badge-primary.blog-post-v1-category,
.member-label {
  display: inline-block;
  padding: 4px 9px 3px;
  background-color: var(--mpf-black);
  color: var(--mpf-white);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border-radius: 0;
}

:is(.bg-neutral-800, .bg-secondary-2, .footer-wrapper, .section.hero.contact, .section.hero.pricing, .section.hero.product-page, .cta-v1, .cta-v2, .template-pages-hero, .card.post-author, .card.product-add-cart, .card.step-03, .stats-v1-wrapper) :is(.text-300, .text-401).text-uppercase,
:is(.text-300, .text-401).text-uppercase:is(.color-neutral-200, .color-neutral-300, .color-neutral-400) {
  background-color: var(--mpf-orange);
  color: var(--mpf-white);
}

a {
  transition: color 0.25s;
}

.text-link,
.link,
.w-richtext a {
  color: var(--mpf-black);
  text-decoration: underline;
  text-decoration-color: var(--mpf-orange);
  text-underline-offset: 3px;
}

.text-link:hover,
.link:hover,
.w-richtext a:hover {
  color: var(--mpf-orange);
}

/* Buttons ---------------------------------------------------------------- */

.btn-primary,
.btn-secondary,
.btn-secondary-2,
.w-button {
  border-radius: 0;
  font-family: Lexend, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: none;
}

.btn-primary {
  border: 1px solid var(--mpf-black);
  background-color: var(--mpf-black);
  color: var(--mpf-white);
}

.btn-primary:hover {
  border-color: var(--mpf-orange);
  background-color: var(--mpf-orange);
  color: var(--mpf-white);
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  border: 1px solid var(--mpf-black);
  background-color: transparent;
  color: var(--mpf-black);
}

.btn-secondary:hover {
  border-color: var(--mpf-black);
  background-color: var(--mpf-black);
  color: var(--mpf-white);
  transform: none;
  box-shadow: none;
}

:is(.bg-neutral-800, .bg-secondary-2, .footer-wrapper, .section.hero.contact, .section.hero.pricing, .section.hero.product-page, .cta-v1, .cta-v2, .template-pages-hero, .card.post-author, .card.product-add-cart, .card.step-03, .stats-v1-wrapper) .btn-primary,
.btn-primary.white {
  border-color: var(--mpf-white);
  background-color: var(--mpf-white);
  color: var(--mpf-black);
}

:is(.bg-neutral-800, .bg-secondary-2, .footer-wrapper, .section.hero.contact, .section.hero.pricing, .section.hero.product-page, .cta-v1, .cta-v2, .template-pages-hero, .card.post-author, .card.product-add-cart, .card.step-03, .stats-v1-wrapper) .btn-primary:hover,
.btn-primary.white:hover {
  border-color: var(--mpf-orange);
  background-color: var(--mpf-orange);
  color: var(--mpf-white);
}

:is(.bg-neutral-800, .bg-secondary-2, .footer-wrapper, .section.hero.contact, .section.hero.pricing, .section.hero.product-page, .cta-v1, .cta-v2, .template-pages-hero, .card.post-author, .card.product-add-cart, .card.step-03, .stats-v1-wrapper) .btn-secondary,
.btn-secondary.white,
.btn-secondary-2.white {
  border-color: var(--mpf-white);
  color: var(--mpf-white);
}

:is(.bg-neutral-800, .bg-secondary-2, .footer-wrapper, .section.hero.contact, .section.hero.pricing, .section.hero.product-page, .cta-v1, .cta-v2, .template-pages-hero, .card.post-author, .card.product-add-cart, .card.step-03, .stats-v1-wrapper) .btn-secondary:hover,
.btn-secondary.white:hover,
.btn-secondary-2.white:hover {
  background-color: var(--mpf-white);
  color: var(--mpf-black);
}

.btn-secondary-2.white {
  border: 1px solid var(--mpf-white);
  background-color: transparent;
}

.btn-primary.small {
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.14em;
}

/* Header ----------------------------------------------------------------- */

.header-wrapper {
  border-bottom: 1px solid var(--mpf-rule);
  background-color: var(--mpf-white);
}

.header-wrapper.bg-neutral-800 {
  border-bottom-color: var(--mpf-graphite);
  background-color: var(--mpf-black);
}

.header-logo-link {
  flex: none;
  width: 180px;
  max-width: 180px;
}

.header-nav-link {
  font-size: 16px;
  white-space: nowrap;
}

/* Lexend and the tracked button run wider than the template expected. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .header-logo-link {
    width: 150px;
  }
  .header-nav-list-item {
    padding-left: 20px;
  }
  .header-nav-link {
    font-size: 15px;
  }
  .header-right-side .language-switch.wf-language-switcher {
    margin: 0 16px 0 20px;
  }
  .btn-primary.small.header-btn-hidde-on-mb {
    margin-left: 12px;
    padding: 16px 18px;
    letter-spacing: 0.1em;
  }
  .hero-v1-content {
    padding-right: 40px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1119px) {
  .header-logo-link {
    width: 132px;
  }
  .header-nav-list-item {
    padding-left: 14px;
  }
  .header-nav-link {
    font-size: 14px;
  }
  .header-right-side .language-switch.wf-language-switcher {
    margin: 0 10px 0 14px;
  }
  .btn-primary.small.header-btn-hidde-on-mb {
    padding: 14px 14px;
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}

@media screen and (max-width: 767px) {
  .header-logo-link {
    width: 150px;
  }
}

@media screen and (max-width: 479px) {
  .header-logo-link {
    width: 136px;
  }
}

.mpf-logo {
  display: block;
  width: 100%;
  color: var(--mpf-black);
  line-height: 0;
}

.mpf-logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.header-wrapper.bg-neutral-800 .mpf-logo,
.footer-wrapper .mpf-logo,
.bg-neutral-800 .mpf-logo {
  color: var(--mpf-white);
}

.header-nav-link,
.nav-link {
  font-weight: 400;
  letter-spacing: 0.02em;
}

.header-nav-link:hover,
.header-nav-link.w--current,
.nav-link:hover,
.nav-link.w--current,
.header-nav-link.white:hover,
.nav-link.light:hover {
  color: var(--mpf-orange);
}

.header-right-side .wf-language-switcher summary,
.header-right-side .wf-language-switcher a {
  font-family: Lexend, sans-serif;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.header-right-side .wf-language-switcher summary:hover,
.header-right-side .wf-language-switcher details[open] summary,
.header-right-side .wf-language-switcher-list a:hover,
.header-right-side .wf-language-switcher-list a:focus-visible {
  color: var(--mpf-orange);
}

.hamburger-menu-wrapper {
  border-radius: 0;
  background-color: var(--mpf-black);
}

.header-wrapper.bg-neutral-800 .hamburger-menu-wrapper {
  background-color: var(--mpf-white);
}

.header-wrapper.bg-neutral-800 .hamburger-menu-bar {
  background-color: var(--mpf-black);
}

/* Surfaces and cards ----------------------------------------------------- */

.card,
.card-service-content,
.blog-post-v1,
.image-wrapper,
.contact-form-block,
.card-plan-wrapper,
.video-card,
.input,
.w-input,
.w-select,
.social-icon-square,
.link-card {
  border-radius: 0;
}

.card {
  border-color: var(--mpf-rule);
  box-shadow: none;
}

.bg-accent-1 {
  background-color: var(--mpf-orange);
}

/* White on orange (4.55:1, AA): text and icons on every orange surface. */
:is(.bg-accent-1, .bg-secondary-1, .card.step-02, .card.values.ouline:is(._02, ._04, ._06), .member-label.dark, .top-bar-wrapper),
:is(.bg-accent-1, .bg-secondary-1, .card.step-02, .card.values.ouline:is(._02, ._04, ._06), .member-label.dark, .top-bar-wrapper) :not(.btn-primary):not(.btn-secondary),
.btn-circle-primary,
.btn-circle-primary .line-square-icon,
.btn-circle-primary .line-rounded-icon,
.btn-circle-secondary:hover,
.btn-circle-secondary:hover .line-square-icon,
.btn-circle-secondary:hover .line-rounded-icon,
.social-icon-square,
.social-icon-square .social-icon-font {
  color: var(--mpf-white);
}

.bg-secondary-2 {
  background-color: var(--mpf-graphite);
}

.input,
.w-input,
.w-select {
  border-color: var(--mpf-rule);
  font-family: Lexend, sans-serif;
  font-weight: 300;
}

.input:focus,
.w-input:focus,
.w-select:focus {
  border-color: var(--mpf-black);
  box-shadow: none;
}

.line-rounded-icon,
.line-square-icon,
.filled-icon {
  color: var(--mpf-orange);
}

/* Footer ----------------------------------------------------------------- */

.footer-logo-wrapper {
  max-width: 240px;
}

.footer-bottom {
  border-top: 1px solid var(--mpf-graphite);
}

/* Category badges carry a colour from the CMS (inline style). */
.badge-primary.blog-post-v1-category {
  background-color: var(--mpf-black) !important;
  color: var(--mpf-white) !important;
}

/* Orange text on black is 4.2:1, below AA for body-size text. On dark
   surfaces the active and hovered state is white with an orange underline. */
.header-wrapper.bg-neutral-800 :is(.header-nav-link, .nav-link):is(:hover, .w--current),
:is(.bg-neutral-800, .bg-secondary-2, .footer-wrapper, .section.hero.contact, .section.hero.pricing, .section.hero.product-page, .cta-v1, .cta-v2, .template-pages-hero, .card.post-author, .card.product-add-cart, .card.step-03, .stats-v1-wrapper) :is(.footer-link, .nav-link, .header-nav-link, a.text-link):is(:hover, .w--current),
.footer-wrapper a:is(:hover, .w--current) {
  color: var(--mpf-white);
  text-decoration: underline;
  text-decoration-color: var(--mpf-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.header-wrapper.bg-neutral-800 .header-right-side .wf-language-switcher summary:hover,
.header-wrapper.bg-neutral-800 .header-right-side .wf-language-switcher details[open] summary {
  color: var(--mpf-white);
  text-decoration: underline;
  text-decoration-color: var(--mpf-orange);
  text-underline-offset: 6px;
}

/* Template orange that was hard-coded instead of using the variable. */
.member-label.dark {
  background-color: var(--mpf-orange);
}

/* Orange stays for large type on dark surfaces (3:1 is enough there);
   body-size accent text on dark surfaces is white. */
:is(.bg-neutral-800, .bg-secondary-2, .footer-wrapper, .section.hero.contact, .section.hero.pricing, .section.hero.product-page, .cta-v1, .cta-v2, .template-pages-hero, .card.post-author, .card.product-add-cart, .card.step-03, .stats-v1-wrapper) :is(.color-accent-1, .color-secondary-1, .video-caption, .produkt.text):not(.heading-h1-size):not(.display-1):not(.display-2):not(.display-3) {
  color: var(--mpf-white);
}

:is(.bg-neutral-800, .bg-secondary-2, .footer-wrapper, .section.hero.contact, .section.hero.pricing, .section.hero.product-page, .cta-v1, .cta-v2, .template-pages-hero, .card.post-author, .card.product-add-cart, .card.step-03, .stats-v1-wrapper) :is(.input, .text-area, .w-input, .w-select) {
  color: var(--mpf-white);
}

:is(.bg-neutral-800, .bg-secondary-2, .footer-wrapper, .section.hero.contact, .section.hero.pricing, .section.hero.product-page, .cta-v1, .cta-v2, .template-pages-hero, .card.post-author, .card.product-add-cart, .card.step-03, .stats-v1-wrapper) :is(.input, .text-area, .w-input)::placeholder {
  color: var(--neutral--400);
}

/* Sticky header ---------------------------------------------------------- */

html {
  scroll-padding-top: 110px;
}

.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}

.header-logo-link {
  transition: width 0.25s ease, max-width 0.25s ease;
}

.mpf-logo-compact {
  display: none;
}

.mpf-scrolled .header-wrapper {
  padding-top: 14px;
  padding-bottom: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}

.mpf-scrolled .header-wrapper.bg-neutral-800 {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.mpf-scrolled .header-logo-link {
  width: 136px;
  max-width: 136px;
}

.mpf-scrolled .mpf-logo-main {
  display: none;
}

.mpf-scrolled .mpf-logo-compact {
  display: block;
  animation: mpf-fade-in 0.25s ease;
}

@keyframes mpf-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media screen and (max-width: 767px) {
  html {
    scroll-padding-top: 90px;
  }
  .mpf-scrolled .header-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .mpf-scrolled .header-logo-link {
    width: 120px;
    max-width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-wrapper,
  .header-logo-link {
    transition: none;
  }
  .mpf-scrolled .mpf-logo-compact {
    animation: none;
  }
}

/* Phones ------------------------------------------------------------------ */

/* Quick contact bar: call or open the inquiry form from anywhere. */
.mpf-quickbar {
  display: none;
}

@media screen and (max-width: 767px) {
  /* The template spaces sections for desktop (up to 140px on a phone). */
  .section:not(.hero):not(.pd-0px):not(.cta-v1) {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  .section.section[class*="pd-bottom-0"] {
    padding-bottom: 0;
  }
  .section.section.pd-bottom-190px-copy {
    padding-bottom: 24px;
  }
  .section.section.pd-top-60px {
    padding-top: 48px;
  }
  .section-10.pd-180px {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .stats-v1-wrapper {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* Cards: less inner padding on a 390px screen. */
  .card.service-item,
  .card:is(.step-01, .step-02, .step-03),
  .card.values,
  .card.contact-links {
    padding: 40px 24px;
  }

  /* Scroll-reveal animations leave blank screens while swiping; content
     below the hero is shown immediately on phones. */
  .page-wrapper > :not(.header-wrapper) [data-w-id][style*="opacity"] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Labels and buttons one step larger on small screens. */
  :is(.text-300, .text-401).text-uppercase,
  .badge-primary.blog-post-v1-category {
    font-size: 12px;
  }
  .btn-primary,
  .btn-secondary,
  .btn-secondary-2,
  .w-button {
    font-size: 14px;
  }

  /* Touch targets of at least 40 to 44px. */
  .footer-wrapper a:not(.btn-primary):not(.social-icon-square) {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .footer-wrapper .nav-menu-list-item,
  .footer-wrapper li {
    margin-bottom: 0;
  }
  .card.contact-links a,
  .text-link,
  .w-richtext a {
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .social-icon-square {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .header-right-side .wf-language-switcher summary,
  .header-right-side .wf-language-switcher a {
    height: 44px;
  }

  .mpf-quickbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--mpf-black);
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }
  .mpf-scrolled .mpf-quickbar {
    transform: none;
  }
  .mpf-quickbar a {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--mpf-white);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
  }
  .mpf-quickbar svg {
    width: 20px;
    height: 20px;
  }
  .mpf-quickbar-inquiry {
    background-color: var(--mpf-orange);
  }
  body.mpf-has-quickbar .footer-wrapper {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpf-quickbar {
    transition: none;
  }
  .page-wrapper > :not(.header-wrapper) [data-w-id][style*="opacity"] {
    opacity: 1 !important;
    transform: none !important;
  }
}