/* Responsive fixes for all viewport sizes */

html {
  overflow-x: clip;
}

html.w-mod-js .web-loader {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media screen and (min-width: 768px) {
  .home-hero-lcp {
    display: none !important;
  }
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

.snapwidget-widget,
.code-embed-2 iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
}

.center-footer-grid {
  align-items: start;
}

.center-footer-grid > * {
  min-width: 0;
}

.footer-contact-link,
.footer-pages-link,
.footer-form-block {
  min-width: 0;
}

/* Laptop / medium desktop: footer newsletter was fixed at 600px and caused horizontal scroll */
@media screen and (min-width: 992px) and (max-width: 1919px) {
  .inner-footer {
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
  }

  .center-footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(16px, 2vw, 30px);
  }

  .footer-contact-link .code-embed-3,
  .footer-contact-link center {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .container-5 {
    width: 100%;
    max-width: 100%;
  }
}

/* Hero headline scaling between tablet and large desktop */
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .banner-title.title-normal {
    font-size: clamp(44px, 7vw, 80px);
    line-height: 1.05;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .banner-title.title-normal {
    font-size: clamp(64px, 6.5vw, 92px);
    line-height: 1.05;
  }
}

/* Tablet: keep containers within viewport */
@media screen and (max-width: 991px) {
  .center-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
    row-gap: 24px;
  }

  .footer-form-block {
    grid-column: 1 / -1;
    padding-right: 20px;
  }

  .footer-contact-link {
    grid-column: 1 / -1;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .footer-pages-link {
    padding: 24px 16px;
  }

  .container-45,
  .w-container,
  .container,
  .container-2,
  .container-5 {
    max-width: 100%;
    box-sizing: border-box;
  }

  .aboutus-grid {
    grid-template-columns: 1fr;
  }

  .main-counter-block {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .counter-line {
    display: none;
  }

  .inner-counter-block {
    flex: 1 1 40%;
    min-width: 140px;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  .banner-title.title-normal {
    font-size: clamp(34px, 10vw, 52px);
    line-height: 1.1;
  }

  /* Homepage hero: keep headline and logo tiles inside the viewport */
  .section-startseite.banner-section {
    position: relative;
    height: auto;
    min-height: 100svh;
    padding-top: clamp(100px, 26vw, 150px);
    padding-bottom: 48px;
    overflow: hidden;
    background-image: none !important;
  }

  .home-hero-lcp {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    pointer-events: none;
  }

  .home-hero-lcp__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .section-startseite.banner-section > .w-layout-blockcontainer,
  .section-startseite.banner-section > .section-8,
  .section-startseite.banner-section > .container.w-container {
    position: relative;
    z-index: 1;
  }

  .section-startseite.banner-section .banner-title-block,
  .section-startseite.banner-section .banner-content-block,
  .section-startseite.banner-section .w-layout-grid,
  .section-startseite.banner-section > .container.w-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .section-startseite.banner-section .banner-title.title-normal {
    display: block !important;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: clamp(24px, 7vw, 36px);
    line-height: 1.12;
    max-width: 100%;
    overflow-wrap: break-word;
    height: auto !important;
  }

  .section-startseite.banner-section .banner-title-block {
    height: auto !important;
  }

  .section-startseite.banner-section .section-8 {
    margin-top: clamp(16px, 5vw, 32px);
    width: 100%;
    max-width: 100%;
    transform: scale(0.62);
    transform-origin: top center;
    margin-bottom: -52px;
  }

  .section-startseite.banner-section #logo-parent.container-2 {
    height: clamp(110px, 34vw, 170px);
    max-width: min(100%, 300px);
    margin-left: auto;
    margin-right: auto;
    background-image: url(../664dba3a08c0c6a72ed5038e/66a377dfc23a26699732326e_mpw-parent.png);
    background-size: contain !important;
    background-position: 50% 0 !important;
    background-repeat: no-repeat;
    overflow: hidden;
  }

  .section-startseite.banner-section .w-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    max-width: 300px;
    height: clamp(110px, 34vw, 170px) !important;
    max-height: clamp(110px, 34vw, 170px);
    margin-left: auto;
    margin-right: auto;
  }

  .section-startseite.banner-section .column,
  .section-startseite.banner-section .column-2,
  .section-startseite.banner-section .column-3 {
    position: relative;
    width: 33.333% !important;
    max-width: 33.333%;
    flex: 1 1 33.333%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    float: none;
    overflow: hidden;
  }

  .section-startseite.banner-section .column-2 .link-block-2 {
    position: absolute;
    inset: 0;
  }

  .text-block-3-anreisertext {
    font-size: clamp(18px, 5.2vw, 28px);
    line-height: 1.35;
  }

  .image-flexbox-2 .w-dyn-item,
  .service-list .service-item {
    width: 100%;
  }

  .mpw-reviews__inner {
    width: min(1200px, calc(100% - 2rem));
  }

  .footer-contact-link .code-embed-3 {
    width: 100%;
    max-width: 100%;
  }

  .center-footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-form-block,
  .footer-contact-link,
  .footer-pages-link {
    grid-column: auto;
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media screen and (max-width: 479px) {
  .section-startseite.banner-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .section-startseite.banner-section .banner-title.title-normal {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.2;
  }

  .section-startseite.banner-section .section-8 {
    transform: scale(0.55);
    margin-bottom: -64px;
  }

  .section-startseite.banner-section .link-block-2,
  .section-startseite.banner-section .link-block-3,
  .section-startseite.banner-section .link-block-4 {
    width: 100%;
    max-width: 100%;
    height: clamp(110px, 34vw, 170px);
  }

  .container-45 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand-logo-image {
    width: min(180px, 55vw);
  }

  .inner-counter-block {
    flex: 1 1 100%;
  }
}

/* Über uns: Team-Fotos von Graustufen zu Farbe beim Hover (wie Original-Webflow) */
.aboutus-team-section .team-image {
  transition: filter 0.45s ease;
}

.aboutus-team-section .main-team-block:hover .team-image {
  filter: grayscale(0%) !important;
}

.aboutus-team-section .team-social-link-block {
  transition: transform 0.45s ease;
}

.aboutus-team-section .main-team-block:hover .team-social-link-block {
  transform: translate3d(0, 0, 0) !important;
}

/* Webflow CMS: leere Team-Fotos (z. B. Michael Punzenberger) ausblenden */
.team-image[src=""],
.team-self-image[src=""] {
  display: none;
}

.team-image-link:has(.team-image[src=""]) {
  display: block;
  min-height: 0;
}

.team-single-image:has(.team-self-image[src=""]) {
  min-height: 0;
}

.footer-socialmedia-link,
.footer-socialmedia-link-2 {
  font-family: "Fa Brands 400", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Footer newsletter – match original Mailchimp embed */
.footer-contact-link .code-embed-3,
.footer-contact-link center {
  display: flex;
  justify-content: center;
  width: 100%;
}

.footer-contact-link #mc_embed_signup {
  width: 100% !important;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.footer-contact-link .code-embed-3,
.footer-contact-link center,
.footer-contact-link #mc_embed_shell {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.footer-contact-link .mpw-form-consent {
  margin: 0.75rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  text-align: left;
}

.mpw-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 1rem 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: inherit;
}

.mpw-form-consent--newsletter {
  color: #fff;
}

.mpw-form-consent input[type="checkbox"] {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.mpw-form-consent a {
  color: inherit;
  text-decoration: underline;
}

.mpw-form-required {
  color: #f1c95a;
}

#mce-success-response,
#mce-error-response {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

#mce-success-response {
  color: #d7ffd9;
}

#mce-error-response {
  color: #ffb4b4;
}

#mc_embed_signup .button,
#mc-embedded-subscribe.button {
  background-color: #111 !important;
  color: #fff !important;
  border: 0 none !important;
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
  margin-top: 0;
  padding: 0 22px;
  font-size: 15px;
  font-weight: normal;
  transition: background-color 0.23s ease-in-out;
}

#mc_embed_signup .button:hover,
#mc-embedded-subscribe.button:hover {
  background-color: #222 !important;
}

#mc_embed_signup input[type="email"],
#mc_embed_signup input[type="text"][name="EMAIL"],
#mc_embed_signup #mce-EMAIL {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  caret-color: #111 !important;
  background-color: #fff !important;
}

#mc_embed_signup #mce-EMAIL::placeholder,
#mc_embed_signup input[name="EMAIL"]::placeholder {
  color: #666 !important;
  -webkit-text-fill-color: #666 !important;
  opacity: 1;
}

#mc_embed_signup #mce-EMAIL:-webkit-autofill,
#mc_embed_signup input[name="EMAIL"]:-webkit-autofill {
  -webkit-text-fill-color: #111 !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
}

@media screen and (max-width: 768px) {
  .footer-contact-link #mc_embed_signup {
    width: 100% !important;
    max-width: 100%;
  }
}

/* Same header sizing sitewide */
.header-navbar.navbar-2 .navlink,
.header-navbar.navbar-2 .navlink-startseite {
  font-size: 14px;
}

/* Startseite: weiße Navigation auf dunklem Hero */
.header-navbar.header-navbar--home .navlink,
.header-navbar.header-navbar--home .navlink-startseite,
.header-navbar.header-navbar--home .text-block-25 {
  color: var(--whit);
}

.header-navbar.header-navbar--home .navlink-block.w--current .navlink,
.header-navbar.header-navbar--home .navlink-block.w--current .navlink-startseite,
.header-navbar.header-navbar--home .navlink-startseite.w--current {
  color: var(--yellow);
}

/* Unterseiten: schwarze Navigation wie im Original */
.header-navbar.header-navbar--inner .navlink,
.header-navbar.header-navbar--inner .text-block-25 {
  color: var(--black);
}

.header-navbar.header-navbar--inner .navlink-block.w--current .navlink,
.header-navbar.header-navbar--inner .navlink.w--current {
  color: var(--yellow);
}

/* Partner Locator: Trennlinie unter dem Header entfernen (volle Kartenfläche) */
body:has(.pages-partnersuche-section) .header-navbar {
  border-bottom: none;
}

/* Karriere (/jobs): Text neben Portrait und Stellenliste nicht abschneiden.
   Webflow setzt .aboutus-description auf width:1400px und .section-jobs auf overflow:hidden. */
.section-jobs {
  overflow: visible;
}

.section-jobs .about-grid-2 {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-items: start;
}

.section-jobs .about-image-block,
.section-jobs .about-info-block {
  min-width: 0;
  max-width: 100%;
}

.section-jobs .about-image {
  min-width: 0;
  width: 100%;
  height: auto;
  max-height: none;
}

.section-jobs .aboutus-description {
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: normal;
  font-weight: 400;
}

.section-jobs .jobs,
.section-jobs .section-10,
.section-jobs .collection-item-5,
.section-jobs .text-block-6 {
  overflow: visible;
  max-width: 100%;
}

.section-jobs .text-block-6 {
  overflow-wrap: anywhere;
}

/* Footer Zertifizierungs-Badges: keine Links (href="#" scrollte sonst nach oben) */
span.link-block-5 {
  cursor: default;
  text-decoration: none;
}

/*
 * Inner pages: Webflow clears the absolute header with 140–220px padding-top.
 * On phones/tablets the header is ~90–110px, so most of that becomes empty white space.
 * Homepage banner (.banner-section / .section-startseite) is excluded on purpose.
 */
@media screen and (max-width: 991px) {
  .section-partnersuche.about-section,
  .section-partnersuche.blog-section.page-blog-section,
  .section-partnersuche.blog-single-section,
  .section-partnersuche.contact-section,
  .section-partnersuche.search-section,
  .section-partnersuche.service-section.pages-service-section,
  .section-partnersuche.partnersuche-section.pages-partnersuche-section,
  .section-partnersuche.team-single-section,
  .section-partnersuche.breadcrumb-section,
  .section-partnersuche-copy.breadcrumb-section-copy,
  .section-references,
  .section-references.section-products,
  .section-jobs,
  .section-downloads,
  .section-13,
  .section-14,
  .section-6,
  .section-lichtberechnung,
  .section-lichtplanung,
  .section-innovation.about-section,
  .section-imprint,
  .section-privacy-policy,
  .section-b2b-2.b2b-2,
  .section-partner-werden,
  .section-partner-become,
  .section-partner-devenir,
  .faq {
    padding-top: clamp(100px, 14vw, 128px) !important;
  }

  .section-subtitle-block.margin-subtitle-block,
  .margin-subtitle-block,
  .section-subtitle-block-jobs.margin-subtitle-block-jobs,
  .margin-subtitle-block-jobs {
    padding-top: 0 !important;
    margin-bottom: 10px !important;
  }

  .main-section-title,
  .main-section-title.section-title-margin {
    margin-bottom: 14px !important;
  }

  .section-subtitle-jobs {
    padding-top: 12px !important;
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .section-partnersuche.about-section,
  .section-partnersuche.blog-section.page-blog-section,
  .section-partnersuche.blog-single-section,
  .section-partnersuche.contact-section,
  .section-partnersuche.search-section,
  .section-partnersuche.service-section.pages-service-section,
  .section-partnersuche.partnersuche-section.pages-partnersuche-section,
  .section-partnersuche.team-single-section,
  .section-partnersuche.breadcrumb-section,
  .section-partnersuche-copy.breadcrumb-section-copy,
  .section-references,
  .section-references.section-products,
  .section-jobs,
  .section-downloads,
  .section-13,
  .section-14,
  .section-6,
  .section-lichtberechnung,
  .section-lichtplanung,
  .section-innovation.about-section,
  .section-imprint,
  .section-privacy-policy,
  .section-b2b-2.b2b-2,
  .section-partner-werden,
  .section-partner-become,
  .section-partner-devenir,
  .faq {
    padding-top: clamp(96px, 26vw, 112px) !important;
    padding-bottom: 40px;
  }

  .section-jobs {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Downloads: search → Kataloge */
  .page-blog-section .main-section-title {
    margin-bottom: 10px !important;
  }

  .page-blog-section .section-subtitle-jobs {
    padding-top: 8px !important;
  }

  /* Jobs: intro → Offene Stellen */
  .section-jobs .about-grid-2 {
    margin-bottom: 18px !important;
  }

  .section-jobs .aboutus-description {
    margin-bottom: 12px !important;
  }

  .section-jobs .jobs .section-subtitle-jobs,
  .section-jobs .section-subtitle-jobs {
    padding-top: 8px !important;
  }

  /* Downloads (Kataloge / Videos / Anleitungen): 2-col grid, fill top→bottom.
     Webflow .w-row::before/::after use grid-area:1/1 and steal the first cell,
     which left an orphan slot on the first row — hide those clearfix nodes. */
  .collection-list-wrapper:has(.collection-item-7) .w-dyn-items,
  .collection-list-wrapper:has(.collection-item-9) .w-dyn-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 0.75rem;
    row-gap: 1.25rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .collection-list-wrapper:has(.collection-item-7) .w-dyn-items::before,
  .collection-list-wrapper:has(.collection-item-7) .w-dyn-items::after,
  .collection-list-wrapper:has(.collection-item-9) .w-dyn-items::before,
  .collection-list-wrapper:has(.collection-item-9) .w-dyn-items::after {
    content: none !important;
    display: none !important;
    grid-area: auto !important;
  }

  .collection-item-7.w-dyn-item,
  .collection-item-9.w-dyn-item {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    object-fit: unset !important;
  }

  .collection-item-7 .link-block-6,
  .collection-item-9 .link-block-6 {
    display: block;
    width: 100%;
  }

  .collection-item-7 .div-block-4 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: #f3f3f3;
    margin-top: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }

  /* Kataloge: portrait catalog covers */
  .collection-item-7.w-col-3 .div-block-4 {
    aspect-ratio: 2 / 3;
    background-position: center top !important;
  }

  /* Anleitungen: mostly landscape PDF/screenshot previews */
  .collection-item-7.w-col-2 .div-block-4 {
    aspect-ratio: 3 / 2;
    background-position: center center !important;
  }

  /* Videos use landscape posters (.div-block-19 ~2:1), not catalog covers */
  .collection-item-9 .div-block-19 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 1;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-color: #f3f3f3;
    margin-top: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
  }

  .collection-item-7 .container-20,
  .collection-item-9 .container-20,
  .collection-item-7 .container-8,
  .collection-item-9 .container-8 {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .collection-item-7 .download-sub-section-heading-bold,
  .collection-item-9 .download-sub-section-heading-bold {
    font-size: 12px;
    line-height: 1.3;
  }
}

/* Brand detail pages: Webflow caps gallery images at 30vh and clips overflow */
@media screen and (max-width: 991px) {
  .section-brands.service-single-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px;
    padding-right: 16px;
    overflow: visible;
  }

  .section-brands {
    overflow: visible;
  }

  .section-brands .service-single-grid,
  .section-brands .grid-2 {
    width: 100%;
    max-width: 100%;
  }

  .section-brands .grid-2 > img,
  .section-brands .services-content {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .section-21 {
    max-height: none !important;
    height: auto !important;
    overflow: visible;
  }

  .section-21 .w-layout-grid.grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
    max-height: none !important;
    height: auto !important;
    align-items: start;
  }

  /* Hide empty CMS placeholders that otherwise reserve broken grid rows */
  .section-21 img.w-dyn-bind-empty {
    display: none !important;
  }

  .section-21 .image-26,
  .section-21 .image-27:not(.w-dyn-bind-empty),
  .section-21 .image-28:not(.w-dyn-bind-empty) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 12rem;
    object-fit: contain;
    background-color: #f5f5f5;
  }

  /* Brands listing cards: fixed 990px image width overflows on phones */
  .section-brands .service-image.page-service-image,
  .section-brands .references-image.page-service-image,
  .section-partnersuche .service-image.page-service-image,
  .pages-service-section .service-image.page-service-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .section-brands .service-image-link.page-service-image-link,
  .section-partnersuche .service-image-link.page-service-image-link,
  .pages-service-section .service-image-link.page-service-image-link {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .section-brands .inner-service-block.page-service-block,
  .section-brands .main-service-block.pages-service-block,
  .section-partnersuche .inner-service-block.page-service-block,
  .section-partnersuche .main-service-block.pages-service-block,
  .pages-service-section .inner-service-block.page-service-block,
  .pages-service-section .main-service-block.pages-service-block {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  .section-brands .service-title.page-service-title,
  .section-partnersuche .service-title.page-service-title,
  .pages-service-section .service-title.page-service-title {
    position: static !important;
    inset: auto !important;
    width: 100%;
  }

  .section-brands .service-list,
  .section-brands .service-item,
  .section-brands .service-list-wrapper,
  .section-partnersuche .service-list,
  .section-partnersuche .service-item,
  .section-partnersuche .service-list-wrapper,
  .pages-service-section .service-list,
  .pages-service-section .service-item,
  .pages-service-section .service-list-wrapper {
    width: 100%;
    max-width: 100%;
  }
}