/* 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;
  }
}

/* Rich text lists: orange markers as the CD accent. */
.w-richtext ul li::marker,
.w-richtext ol li::marker {
  color: var(--mpf-orange);
}

/* Process steps (home): the template staircase rose from 01 at the bottom
   left to 03 at the top right, so the eye met 03 first. The steps now start
   below the intro text and descend in reading order: 01 top left, 03 lowest. */
@media screen and (min-width: 992px) {
  .w-layout-grid.steps-grid.steps-grid {
    margin-top: 72px;
    align-items: start;
  }
  /* Webflow pins the cards to the row end with ID selectors. */
  .steps-grid > .card:is(.step-01, .step-02, .step-03) {
    align-self: start !important;
    margin-bottom: 0;
  }
  .steps-grid > .card.step-02 {
    margin-top: 110px;
  }
  .steps-grid > .card.step-03 {
    margin-top: 220px;
  }
}