/*
 * MPW site design system — typography, spacing, and yellow arrow unification.
 * Loaded after Webflow base + responsive-fixes.css.
 */

:root {
  --mpw-yellow: #f1c95a;
  --mpw-black: #1a1a1a;
  --mpw-muted-border: rgba(0, 0, 0, 0.12);

  /* Spacing scale (aligned with --mpw-gutter in responsive-fixes.css) */
  --mpw-space-2xs: 0.375rem;
  --mpw-space-xs: 0.5rem;
  --mpw-space-sm: 0.75rem;
  --mpw-space-md: 1rem;
  --mpw-space-lg: 1.5rem;
  --mpw-space-xl: 2rem;
  --mpw-space-2xl: 2.5rem;
  --mpw-space-3xl: 3rem;

  --mpw-section-py: clamp(3rem, 6vw, 5rem);
  /* Clear absolute header (wraps to ~140px on tablet) plus breathing room */
  --mpw-header-clearance: calc(clamp(8.75rem, 14vw, 11rem) + var(--mpw-space-md));
  --mpw-inner-section-pt: var(--mpw-header-clearance);
  --mpw-eyebrow-size: clamp(0.95rem, 1.6vw, 1.25rem);
  --mpw-eyebrow-mb: var(--mpw-space-sm);
  --mpw-title-mb: var(--mpw-space-lg);
  --mpw-block-gap: var(--mpw-space-xl);

  /* Yellow arrow tokens */
  --mpw-arrow-color: var(--mpw-yellow);
  --mpw-arrow-size: 1.25rem;
  --mpw-arrow-size-lg: clamp(1.5rem, 2.5vw, 1.875rem);
  --mpw-arrow-rotate: -45deg;
}

/* -------------------------------------------------------------------------- */
/* Unified yellow arrows                                                       */
/* -------------------------------------------------------------------------- */

.link-block-icon,
.primary-button-icon,
.primary-button-icon-2,
.primary-button-icon-b2c,
.b2b-primary-button-icon,
.b2b-primary-button-icon-copy,
.b2c-primary-button-icon,
.b2c-primary-button-icon-copy,
.banner-arrow,
.banner-arrow-2,
.button-icon.button-pagination-icon,
.mpw-scroll-arrow {
  color: var(--mpw-arrow-color) !important;
  -webkit-text-stroke-color: transparent !important;
  font-family: "Fa Solid 900", sans-serif !important;
  font-size: var(--mpw-arrow-size) !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1 !important;
  transform: rotate(var(--mpw-arrow-rotate)) !important;
  transform-origin: center center;
  flex: 0 0 auto;
  transition: transform 0.2s ease, color 0.2s ease;
}

.banner-arrow,
.banner-arrow-2,
.mpw-scroll-arrow {
  font-size: var(--mpw-arrow-size-lg) !important;
}

.button-icon.button-pagination-icon.picon {
  transform: rotate(-135deg) !important;
}

.header-navbar .button-flat-navbar .button-icon-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.header-navbar .button-flat-navbar .button-icon-block::after {
  content: "\f061";
  color: var(--mpw-yellow);
  font-family: "Fa Solid 900", sans-serif;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-45deg);
}

.header-navbar .button-flat-navbar .button-icon-block .button-icon {
  display: none !important;
}

.section-startseite.banner-section .image-8 {
  display: none !important;
}

.section-startseite.banner-section .mpw-scroll-arrow {
  display: block;
  z-index: 1000;
  width: var(--mpw-arrow-size-lg);
  height: var(--mpw-arrow-size-lg);
  margin: var(--mpw-space-sm) auto 0;
  text-align: center;
}

/* Individual CTA links: text + arrow aligned in one row */
.link-block-with-icon,
.aboutus-flex-block > a,
.b2b-block,
.primary-button-block {
  display: inline-flex !important;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--mpw-space-xs);
  white-space: nowrap;
}

.link-block-text,
.link-block-text-white {
  margin-right: 0 !important;
}

/* CTA rows: full-width containers (Webflow layout) */
.link-button-block,
.link-button-block-3-copy,
.link-button-block-4,
.link-button-block-copy,
.link-button-block-copy-copy {
  display: flex !important;
  flex-flow: row wrap;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--mpw-space-lg);
  padding-left: var(--mpw-gutter, 1rem);
  padding-right: var(--mpw-gutter, 1rem);
}

.link-button-block-2,
.link-button-block-3,
.link-button-block-left,
.link-button-block-about {
  display: flex !important;
  flex-flow: row wrap;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: clamp(1rem, 3vw, 2rem);
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--mpw-space-lg);
  padding-left: var(--mpw-gutter, 1rem);
  padding-right: var(--mpw-gutter, 1rem);
}

/* B2B/B2C hero: two-line title (bold + italic) */
.b2b-info-title,
.b2c-info-title {
  width: 100% !important;
  height: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: clamp(1.75rem, 4.2vw, 3.75rem) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

.section-italic-title,
.section-italic-title-jobs {
  width: 100% !important;
  height: auto !important;
  margin-top: 0.15em !important;
  margin-bottom: var(--mpw-space-lg) !important;
  margin-left: 0 !important;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem) !important;
  line-height: 1.2 !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

.section-b2b-2 .section-title-block:empty,
.section-b2c .section-title-block:empty {
  display: none !important;
}

.section-b2b-2 .aboutus-info-block h1 + h1,
.section-b2c .aboutus-info-block h1 + h1 {
  margin-top: 0 !important;
}

/* Service hub (/service): page title sits above the grid, not inside aboutus-info */
.section-b2b-2.b2b-2 .aboutus-info {
  top: 0 !important;
  position: static !important;
}

.section-b2b-2.b2b-2 .aboutus-description {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.section-b2b-2.b2b-2 .main-section-title {
  margin-bottom: 0 !important;
}

.section-b2b-2.b2b-2 .main-section-title + .aboutus-grid {
  margin-top: var(--mpw-space-2xl) !important;
}

.section-b2b-2.b2b-2 .aboutus-info .b2b-info-title {
  margin-bottom: var(--mpw-title-mb) !important;
}

.link-block-with-icon:hover .link-block-icon,
.aboutus-flex-block > a:hover .primary-button-icon,
.aboutus-flex-block > a:hover .b2b-primary-button-icon,
.aboutus-flex-block > a:hover .b2c-primary-button-icon,
.b2b-block:hover .b2b-primary-button-icon,
.link-button-block-3-copy:hover .b2b-primary-button-icon,
.link-button-block-3-copy:hover .link-block-icon,
.primary-button:hover .primary-button-icon {
  transform: rotate(calc(var(--mpw-arrow-rotate) - 8deg)) translateX(2px) !important;
}

/* -------------------------------------------------------------------------- */
/* Page header typography (eyebrow + H1)                                       */
/* -------------------------------------------------------------------------- */

.section-subt,
.section-subt.page-subtitle,
.section-subt.star-subtitle,
.section-subtitle-about,
.section-subtitle-about.page-subtitle,
.section-subtitle-b2b,
.section-subtitle-b2b.page-subtitle,
.section-subtitle-b2c,
.section-subtitle-b2c.page-subtitle,
.section-subtitle-jobs,
.section-subtitle-b2b-copyasd,
.section-subtitle-b2b-copyasd.page-subtitle,
[class*="section-subtitle-b2b"],
[class*="section-subtitle-b2c"] {
  color: var(--mpw-yellow) !important;
  -webkit-text-stroke-color: transparent !important;
  font-size: var(--mpw-eyebrow-size) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
}

.section-subtitle-block,
.section-subtitle-block.margin-subtitle-block,
.section-subtitle-block-jobs,
.section-subtitle-block-jobs.margin-subtitle-block-jobs,
.margin-subtitle-block,
.margin-subtitle-block-jobs {
  margin-top: 0 !important;
  margin-bottom: var(--mpw-eyebrow-mb) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: var(--mpw-space-xs) !important;
  border-bottom: 1px solid var(--mpw-muted-border) !important;
}

.section-subtitle-block.mission-subtitle-block:not(:has(.section-subt, .section-subtitle-b2b, .section-subtitle-b2c, .section-subtitle-about, .section-subtitle-jobs)) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.main-section-title,
.main-section-title.section-title-margin {
  margin-top: 0 !important;
  margin-bottom: var(--mpw-title-mb) !important;
}

.section-title,
h1.section-title,
.section-title-2,
h1.section-title-2,
.section-title-blog,
h1.section-title-blog {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  font-size: clamp(1.75rem, 4.2vw, 3.75rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
  text-align: left !important;
}

.section-title strong,
.section-title b,
.section-title .bold-text-29,
.section-title .bold-text-30,
.section-title .bold-text-31,
.section-title .bold-text-32,
.section-title .bold-text-33 {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 700 !important;
}

.section-title.mission-title {
  font-size: clamp(2rem, 4.8vw, 4.375rem) !important;
  line-height: 1.1 !important;
}

.section-title.award-title {
  font-size: clamp(1.5rem, 3.5vw, 3rem) !important;
  line-height: 1.15 !important;
}

.italic-section-title,
.italic-section-title-copy,
.italic-section-title-copy-copy,
.innovation-title em,
em.italic-section-title,
.section-title em,
.section-title .italic-section-title {
  font-size: inherit !important;
  line-height: inherit !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

.breadcrumb-title,
.breadcrumb-title-copy,
.breadcrumb-title-copy-copy {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  font-size: clamp(1.75rem, 4.2vw, 3.75rem) !important;
  line-height: 1.12 !important;
  text-align: left !important;
  text-transform: none !important;
}

.breadcrumb-title-partner {
  width: 100% !important;
  max-width: 42rem;
  margin-top: 0 !important;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(1.25rem, 2.8vw, 2.2rem) !important;
  line-height: 1.45 !important;
  font-style: italic;
  text-align: center !important;
  text-transform: none !important;
}

/* Subsection headings */
.heading-7,
.aboutus-block-title,
.b2b-block-title,
.download-sub-section-heading-bold {
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Innovation page: paired service headings */
.innovation-title,
.innovation-italic-title {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  font-size: clamp(1.75rem, 4.2vw, 3.75rem) !important;
  line-height: 1.12 !important;
  text-align: left !important;
  text-transform: none !important;
}

.innovation-title {
  margin-bottom: var(--mpw-space-xs) !important;
  font-weight: 700 !important;
}

.innovation-italic-title {
  margin-bottom: var(--mpw-space-lg) !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  font-weight: 400 !important;
  font-style: italic !important;
  letter-spacing: -0.01em;
}

.b2b-block-title,
.aboutus-block-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------------------------- */
/* Body copy & content blocks                                                  */
/* -------------------------------------------------------------------------- */

.aboutus-description,
.paragraph-7,
.paragraph-88,
.paragraph-faq,
.jobs-description,
.services-content p,
.section-16 p {
  max-width: 72ch;
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  line-height: 1.65 !important;
  color: rgba(0, 0, 0, 0.82);
}

.link-block-text,
.link-button,
.primary-button,
.button-text {
  font-size: clamp(0.9rem, 1.4vw, 1.125rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------- */
/* Section spacing & layout rhythm                                             */
/* -------------------------------------------------------------------------- */

/* Hero sections: clearance below fixed header */
.mpw-section.about-section,
.mpw-section.contact-section,
.mpw-section.service-section.pages-service-section,
.mpw-section.search-section,
.mpw-section.blog-section.page-blog-section,
.mpw-section.blog-single-section,
.mpw-section.team-single-section,
.section-jobs,
.section-downloads,
.section-b2b-2.b2b-2,
.section-innovation.about-section,
.section-imprint,
.section-privacy-policy,
.section-partner-werden,
.section-lichtberechnung,
.section-lichtplanung,
.section-brands.service-single-section,
.mpw-section.breadcrumb-section,
.section-references.section-products,
.section-6,
.section-13,
.section-14,
.faq {
  padding-top: var(--mpw-inner-section-pt) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

/* Partner Locator: full-bleed map flush under floating header */
.mpw-section.partner-locator-section.pages-partner-locator-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  overflow: hidden;
}

.mpw-section.partner-locator-section.pages-partner-locator-section > .container-partner-locator.w-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh;
  max-height: none !important;
}

.mpw-section.partner-locator-section.pages-partner-locator-section .code-embed,
.mpw-section.partner-locator-section.pages-partner-locator-section .code-embed iframe {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Continuation / inner homepage sections */
.mpw-section.strategy-section,
.mpw-section.counter-section,
.mpw-section.client-section,
.mpw-section.team-section,
.mpw-section.timeline-section,
.mpw-section.image-section,
.mpw-section-alt,
.mpw-section-copy,
.section-inspiration.image-section,
.section-review,
.section-social-media,
.section-17,
.ber-uns-section,
.section-innovation:not(.about-section),
.section-innovation-background,
.section-b2b.b2b,
.section-b2c.b2c,
.section-b2b-marken,
.section-b2c-marken,
.section-b2c-faq,
.section-6,
.section-5,
.section-8 {
  padding-top: var(--mpw-section-py) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

.section-b2b.b2b + .section-b2b.b2b,
.section-b2c.b2c + .section-b2c.b2c {
  padding-top: var(--mpw-space-xl) !important;
}

.section-b2c-faq {
  padding-top: var(--mpw-section-py) !important;
  padding-bottom: 0 !important;
}

.section-b2c-faq + .faq,
.section-b2b-marken + .faq {
  padding-top: var(--mpw-space-lg) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

.section-b2b .faq,
.section-b2c .faq {
  padding-top: var(--mpw-space-lg) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

.faq .collection-list-wrapper-2 {
  margin-top: var(--mpw-space-md);
}

.aboutus-grid,
.service-list.page-service-list,
.center-footer-grid {
  gap: var(--mpw-block-gap);
}

.service-list.page-service-list {
  row-gap: var(--mpw-space-xl);
}

.aboutus-flex-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mpw-space-md);
  margin-top: var(--mpw-space-lg);
}

.b2b-block {
  gap: var(--mpw-space-sm);
  padding: var(--mpw-space-xs) 0;
}

/* FAQ accordion spacing */
.faq .collection-item-2 {
  padding-top: var(--mpw-space-md);
  padding-bottom: var(--mpw-space-md);
  border-bottom: 1px solid var(--mpw-muted-border);
}

.faq .collection-item-2:last-child {
  border-bottom: none;
}

.faq .heading-7 {
  margin-top: 0;
  margin-bottom: var(--mpw-space-sm);
}

.faq .paragraph-7 {
  margin-top: 0;
  margin-bottom: 0;
}

/* Homepage image-section labels */
.image-text,
.image-text-copy {
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: var(--mpw-black) !important;
}

.image-flexbox,
.image-flexbox-2,
.image-flexbox-3,
.image-flexbox-4 {
  gap: var(--mpw-block-gap);
  margin-bottom: var(--mpw-space-lg);
}

/* Service / brand cards */
.service-title.page-service-title,
.service-title {
  font-size: clamp(0.95rem, 1.5vw, 1.125rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.service-list.page-service-list .service-item {
  margin-bottom: 0;
}

/* Downloads catalog dividers */
.section-subtitle-jobs {
  color: var(--mpw-yellow) !important;
  font-size: var(--mpw-eyebrow-size) !important;
  font-weight: 600 !important;
  padding-top: var(--mpw-space-lg) !important;
  margin-top: var(--mpw-space-md) !important;
  margin-bottom: var(--mpw-space-sm) !important;
}

.download-sub-section-heading-bold,
.download-sub-section-heading-right {
  font-size: clamp(0.8rem, 1.2vw, 0.95rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* Contact cards */
.contact-card-title,
.contact-card-text {
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  line-height: 1.5;
}

/* Footer section labels */
.footer-link {
  font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-list-link {
  font-size: clamp(0.85rem, 1.2vw, 0.9375rem);
  line-height: 1.5;
}

/* Counter / stats blocks */
.counter-number,
.counter-title {
  line-height: 1.2;
}

/* Timeline (about-us) */
.timeline-title,
.timeline-text {
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  line-height: 1.5;
}

/* Team section */
.team-name,
.team-job {
  line-height: 1.35;
}

.team-name {
  font-weight: 600;
}

.team-image-link:not(a),
.team-name-link:not(a) {
  cursor: default;
  text-decoration: none;
}

/* Legal / imprint body */
.privacy-policy-text,
.imprint-text,
.paragraph,
.paragraph-2 {
  max-width: 72ch;
  font-size: clamp(0.95rem, 1.5vw, 1.0625rem);
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.82);
}

/* Press / blog listing */
.blog-title,
.press-title {
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive refinements                                                      */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  :root {
    --mpw-title-mb: var(--mpw-space-md);
    --mpw-block-gap: var(--mpw-space-lg);
  }

  .mpw-section.about-section,
  .mpw-section.contact-section,
  .mpw-section.service-section.pages-service-section,
  .mpw-section.search-section,
  .mpw-section.blog-section.page-blog-section,
  .mpw-section.blog-single-section,
  .mpw-section.team-single-section,
  .section-jobs,
  .section-downloads,
  .section-b2b-2.b2b-2,
  .section-innovation.about-section,
  .section-imprint,
  .section-privacy-policy,
  .section-partner-werden,
  .section-lichtberechnung,
  .section-lichtplanung,
  .section-brands.service-single-section,
  .section-13,
  .section-14,
  .section-6,
  .faq,
  .section-references.section-products {
    padding-top: var(--mpw-inner-section-pt) !important;
    padding-bottom: var(--mpw-space-2xl) !important;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --mpw-eyebrow-mb: var(--mpw-space-xs);
    --mpw-title-mb: var(--mpw-space-sm);
    --mpw-header-clearance: calc(clamp(7rem, 26vw, 8.75rem) + var(--mpw-space-md));
    --mpw-inner-section-pt: var(--mpw-header-clearance);
  }

  .mpw-section.about-section,
  .mpw-section.contact-section,
  .mpw-section.service-section.pages-service-section,
  .mpw-section.search-section,
  .mpw-section.blog-section.page-blog-section,
  .mpw-section.blog-single-section,
  .mpw-section.team-single-section,
  .section-jobs,
  .section-downloads,
  .section-b2b-2.b2b-2,
  .section-innovation.about-section,
  .section-imprint,
  .section-privacy-policy,
  .section-partner-werden,
  .section-lichtberechnung,
  .section-lichtplanung,
  .section-brands.service-single-section,
  .section-13,
  .section-14,
  .section-6,
  .faq,
  .section-references.section-products {
    padding-top: var(--mpw-inner-section-pt) !important;
  }

  .link-block-with-icon,
  .b2b-block {
    gap: var(--mpw-space-2xs);
  }

  .banner-arrow-2,
  .banner-arrow,
  .mpw-scroll-arrow {
    font-size: 1.375rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .link-block-icon,
  .primary-button-icon,
  .b2b-primary-button-icon,
  .b2c-primary-button-icon,
  .banner-arrow-2 {
    transition: none;
  }
}