/* Cross-page layout consistency for subpages.
 *
 * Loaded after site-design-system.css, faq.css and titles.css. Rules here win
 * over the Webflow export and the older fix layers, so they set the one line
 * every subpage follows:
 *   1. one gutter: header, content and footer share --mpw-gutter at every width
 *   2. one page top: the first section starts the same distance below the header
 *   3. one vertical rhythm: every following section uses --mpw-section-py
 */

/* -------------------------------------------------------------------------- */
/* 1. Gutters                                                                  */
/* -------------------------------------------------------------------------- */

/* Phones get a 20px edge (was 12px container + 10px Webflow section padding on
   content, and 16px + 12px on the header, so header and content never lined up). */
:root {
  --mpw-gutter: 1.25rem;
  /* Gap between the bottom of the header and the first eyebrow/breadcrumb. */
  --mpw-page-top-gap: clamp(2.5rem, 4.5vw, 4rem);
  /* Height of the absolutely positioned desktop header (124–131px). */
  --mpw-header-overlay-h: 8rem;
}

@media screen and (min-width: 768px) {
  :root {
    --mpw-gutter: clamp(1.25rem, 2vw, 1.35rem);
  }
}

@media screen and (min-width: 1280px) {
  :root {
    --mpw-gutter: clamp(1.35rem, 1.5vw, 1.5rem);
  }
}

/* Header bar: full width up to the content max, same inset as the content. */
.header-navbar > .container-45.w-container,
.header-navbar > .container.w-container {
  width: 100% !important;
  max-width: var(--mpw-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--mpw-gutter) !important;
  padding-right: var(--mpw-gutter) !important;
}

/* On phones the Webflow export gives the flex header a 16px column-gap; its
   clearfix ::before/::after count as flex items, so the bar was squeezed by
   32px and sat 16px further in than the content. */
.header-navbar.w-nav {
  column-gap: 0 !important;
}

/* Sections never add their own side padding; the container inside owns the
   gutter. (Webflow adds 10px on phones, some sections 20–30px everywhere.)
   Panels styled as cards (.ber-uns-section on partner-werden) keep theirs. */
section:not(.ber-uns-section):has(.w-container),
:not(.header-navbar):not(.ber-uns-section):not(.w-container):has(> .w-container:not(.w-container .w-container)) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Every top-level content container is the header width: max 1600px, the
   shared gutter. Covers containers wrapped in an anonymous <div> (the
   landing-page sections on lichtplanung/-berechnung/produktentwicklung had
   0px or 20px+20px insets) and the partner-werden hero, which sits in a
   body-level container instead of a section. */
.w-container:not(.w-container .w-container):not(.small-container):not(#logo-parent):not(.header-navbar > *):not(.mpw-footer *):not(.footer *) {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--mpw-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--mpw-gutter) !important;
  padding-right: var(--mpw-gutter) !important;
}

/* Lichtplanung price table: same width as everything else (was 1200px). */
.pricing-comparison {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pricing-comparison > .container-15 {
  box-sizing: border-box;
  width: 100% !important;
  max-width: var(--mpw-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--mpw-gutter) !important;
  padding-right: var(--mpw-gutter) !important;
}

/* Containers nested in a container must not add a second gutter. */
.w-container .container-left.w-container,
.w-container .container-faq.w-container,
.container .container-faq.w-container,
.w-container section > .w-container:not(#mpw-nested) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* -------------------------------------------------------------------------- */
/* 2. Page top: first section below the header                                 */
/* -------------------------------------------------------------------------- */

:is(body, .mpw-jobs, .mpw-brand) > :is(
  .mpw-section.about-section,
  .mpw-section.contact-section,
  .mpw-section.service-section,
  .mpw-section.search-section,
  .mpw-section.blog-section,
  .mpw-section.blog-single-section,
  .mpw-section.team-single-section,
  .mpw-section.breadcrumb-section,
  .section-jobs,
  .section-downloads,
  .section-b2b-2,
  .section-innovation,
  .section-imprint,
  .section-partner-werden,
  .section-lichtberechnung,
  .section-lichtplanung,
  .section-brands,
  .section-references,
  .section-6,
  .section-13,
  .section-14,
  .faq,
  .mpw-jobs-hero,
  .mpw-brand__hero
):first-of-type,
body > .container-55 > .section-partner-werden:first-child {
  padding-top: calc(var(--mpw-header-overlay-h) + var(--mpw-page-top-gap)) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

/* Below 992px the header is in the document flow, so only the gap is needed
   (was 128–156px of empty space on phones and tablets). */
@media screen and (max-width: 991px) {
  :is(body, .mpw-jobs, .mpw-brand) > :is(
    .mpw-section.about-section,
    .mpw-section.contact-section,
    .mpw-section.service-section,
    .mpw-section.search-section,
    .mpw-section.blog-section,
    .mpw-section.blog-single-section,
    .mpw-section.team-single-section,
    .mpw-section.breadcrumb-section,
    .section-jobs,
    .section-downloads,
    .section-b2b-2,
    .section-innovation,
    .section-imprint,
    .section-partner-werden,
    .section-lichtberechnung,
    .section-lichtplanung,
    .section-brands,
    .section-references,
    .section-6,
    .section-13,
    .section-14,
    .faq,
    .mpw-jobs-hero,
    .mpw-brand__hero
  ):first-of-type,
  body > .container-55 > .section-partner-werden:first-child {
    padding-top: var(--mpw-page-top-gap) !important;
  }
}

/* The same classes further down a page are ordinary sections, not heroes
   (FAQ on lichtplanung, the second block on press/partner, the brands block
   on the homepage got 192–220px). */
:is(body, .mpw-jobs, .mpw-brand) > :is(
  .mpw-section.about-section,
  .mpw-section.contact-section,
  .mpw-section.service-section,
  .mpw-section.search-section,
  .mpw-section.blog-section,
  .mpw-section.blog-single-section,
  .mpw-section.team-single-section,
  .mpw-section.breadcrumb-section,
  .section-jobs,
  .section-downloads,
  .section-b2b-2,
  .section-innovation,
  .section-imprint,
  .section-partner-werden,
  .section-lichtberechnung,
  .section-lichtplanung,
  .section-brands,
  .section-references,
  .section-6,
  .section-13,
  .section-14,
  .faq
):not(:first-of-type) {
  padding-top: var(--mpw-section-py) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

/* -------------------------------------------------------------------------- */
/* 3. Vertical rhythm                                                          */
/* -------------------------------------------------------------------------- */

/* Landing-page blocks used 90–120px top and bottom; bring them onto the scale. */
.section-private-gewerbliche-lichtplanung,
.section-software,
.section-weg-lichtplanung,
.section-dein-vorteil,
.professionelle-lichtplanung,
.praxisbeispiele,
.call-to-action-section-lichtplanung,
.mpw-brand__intro,
.mpw-brand__cta {
  padding-top: var(--mpw-section-py) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

.mpw-brand__gallery,
.mpw-brand__sections {
  padding-bottom: var(--mpw-section-py) !important;
}

.contact-form-section {
  padding-bottom: var(--mpw-section-py) !important;
}

/* Empty Webflow leftovers must not take height. */
section:empty,
.info-video-block-image:empty {
  display: none !important;
}

/* B2B/B2C/Service hero: the text column was pushed 10px (desktop) / 40px
   (phones) below the section start, so the eyebrow sat lower than on every
   other page. */
.section-b2b-2 .aboutus-grid > .aboutus-info-block:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Relume ("uui") blocks inside the landing pages: the inner 1280px container
   added a second, narrower inset (80px instead of the gutter at 1440). */
.w-container .uui-container-large {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Its photo is absolutely positioned and 768px wide; clip it to its column
   instead of overflowing the page (40px horizontal scroll at 1440). */
.uui-layout16_image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--mpw-radius, 12px);
}

/* -------------------------------------------------------------------------- */
/* 4. Page header pattern: breadcrumb → eyebrow → title                         */
/* -------------------------------------------------------------------------- */

/* Breadcrumbs (brand pages, job ads, regional pages) sit at the page top and
   keep the same 1.5rem to whatever follows. */
.mpw-brand__crumbs,
.mpw-jobs-breadcrumb,
.mpw-local__breadcrumb {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}

/* Brand hero: the text column was vertically centred against the logo card,
   so breadcrumb and eyebrow started ~45px lower than on every other page. */
.mpw-brand__hero-grid > .mpw-brand__hero-copy {
  align-self: start;
}

/* -------------------------------------------------------------------------- */
/* 5. Webflow blocks that sit outside a <section>                              */
/* -------------------------------------------------------------------------- */

/* Full-bleed founder/partner quote band: Webflow pushed it 60–140px down,
   on top of the previous section's bottom padding (partner page). The
   partner-werden page restyles it as a panel with its own margins. */
.ber-uns-section.breadcrumb-section-about {
  margin-top: 0 !important;
}

/* Body-level containers without a section (partner page "Vorteile für
   Kunden") had no vertical padding and stuck to the dark band above. */
body > .w-container:not(.container-55):not(.container-56):not(.ber-uns-section + *):not(:has(> section)) {
  padding-top: var(--mpw-section-py) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

/* …and a section wrapped in such a container is an ordinary section, not a
   second page hero (partner page: 192px top). */
body > .w-container:not(.container-55) > section.section-partner-werden:first-child {
  padding-top: var(--mpw-section-py) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

body:not(:has(> .container-55)) > .ber-uns-section + .w-container:not(:has(> section)) {
  padding-top: var(--mpw-section-py) !important;
  padding-bottom: var(--mpw-section-py) !important;
}

/* Empty CMS pagination still carried a 60px top margin under card lists. */
.w-pagination-wrapper:empty {
  display: none !important;
}

/* Wrapper sections that only hold other sections (b2b/b2c: brands + FAQ)
   added their padding on top of the children's: 32 + 80px above "Unsere
   Marken", 80 + 80px below. The child sections carry the rhythm alone. */
body > section:has(> section):not(:has(> :not(section))):not(:first-of-type):not(#mpw-wrap) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* 6. Body text                                                                */
/* -------------------------------------------------------------------------- */

/* Long text blocks: one size/leading and a readable measure. Several Webflow
   classes ran 16px/2.0 across the full 1400px content width (landing pages,
   blog posts, partner page). */
.lichtplanung-description,
.paragraph-copy,
.p-partner-grey,
.p-partner-1,
.paragraph-8,
.blog-single-rich-text p,
.blog-single-rich-text li {
  line-height: 1.7 !important;
}

.lichtplanung-description,
.paragraph-copy,
.p-partner-grey,
.paragraph-8,
.paragraph-7,
.paragraph-88,
.blog-single-descriprion,
.blog-single-rich-text {
  max-width: 70ch;
}

/* -------------------------------------------------------------------------- */
/* 7. Image grids: one gap, one radius                                         */
/* -------------------------------------------------------------------------- */

/* Brand grid (brands, b2b, b2c), photo galleries (charity, sponsoring, …),
   brand-page impressions and the team grid share a 24px gap (16px on phones)
   and 12px corners. Galleries had 4px corners, the brand grid 32px gaps,
   the brand-page gallery 16px. */
.service-list.page-service-list,
.mpw-gallery,
.mpw-brand__gallery-grid {
  gap: 1.5rem !important;
}

@media screen and (max-width: 479px) {
  .service-list.page-service-list,
  .mpw-gallery,
  .mpw-brand__gallery-grid {
    gap: 1rem !important;
  }
}

.mpw-gallery img,
.mpw-gallery figure,
.mpw-gallery a {
  border-radius: var(--mpw-radius, 12px) !important;
}

.mpw-gallery figure,
.mpw-gallery a {
  overflow: hidden;
}

/* Webflow fixes .section-title at height: 80px on phones, so any title of
   three lines or more ran into the text below (reference pages). */
@media screen and (max-width: 479px) {
  .section-title {
    height: auto !important;
  }
}