/* LUMIN — LED-Werbung, Diepoldsau.
   Shared with zellweger-blech.com and al-immo.ch: same Webflow-derived layout
   system, own palette. LUMIN sells a screen that glows in the dark, so the
   brand colour is the night the screen stands in and the accent is the light
   coming off it.

   --lumin-night is what --zellweger-sapphire is over there: the page ground and
   the fill of every bordered surface (navbar pills, notice, footer). --lumin-glow
   is the accent, and it is deliberately never used as text on white — #FFB020 on
   white is 1.9:1 and unreadable. It carries a surface instead, with
   --lumin-deep sitting on top of it (11.4:1). Text that used to be sapphire on
   white is --lumin-night (16.9:1). */
:root {
  --white: white;
  --lumin-night: #0f1216;
  --main-border: 1px;
  --lumin-glow: #ffb020;
  --lumin-glow-strong: #ffc247;
  --lumin-glow-soft: #ffe7bf;
  --lumin-deep: #05070a;
  --lumin-silver: #a6a6a6;
  --spark-library-background--interactive: #f0ecfd;
  --lumin-dim-gray: #666;
  --spark-library-foreground-interactive-hover: #1e116e;
  --spark-library-foreground-interactive: #5532fa;
  --spark-library-black: black;
  --spark-library-white: white;
  --spark-library-light-steel-purple: #a695fb;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-layout {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  grid-auto-columns: 1fr;
  justify-content: center;
  padding: 20px;
}

.w-layout-cell {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.w-form-formrecaptcha {
  margin-bottom: 8px;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: #fff;
  font-family: Archivo, sans-serif;
  font-size: 1em;
  line-height: 1.25em;
}

h1 {
  color: var(--white);
  letter-spacing: -.05em;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 5em;
  font-weight: 700;
  line-height: .9em;
}

h2 {
  color: var(--white);
  letter-spacing: -.035em;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 3em;
  font-weight: 700;
  line-height: 1em;
}

p {
  color: #fff;
  letter-spacing: -.2px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 18px;
}

a {
  color: #fff;
  font-style: normal;
  text-decoration: underline;
}

a:visited {
  color: #fff;
}

.body {
  background-color: var(--lumin-night);
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.navbar {
  background-color: #0000;
  justify-content: center;
  align-items: flex-end;
  padding-top: 12px;
  line-height: 18px;
  display: flex;
}

.cta {
  border: 1px solid var(--white);
  background-color: var(--white);
  color: var(--lumin-night);
  letter-spacing: -.05em;
  cursor: pointer;
  border-radius: 12px;
  padding: 12px;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: color 90ms cubic-bezier(.645, .045, .355, 1), background-color 90ms cubic-bezier(.785, .135, .15, .86), border-color 90ms cubic-bezier(.785, .135, .15, .86);
}

.cta:hover {
  border: 1px solid var(--white);
  color: var(--white);
  background-color: #0000;
}

.section {
  min-height: 0;
  /* body:not(.homepage) is a flex column with a fixed height:100%, so any section
     left at the default flex-shrink:1 gets compressed once the page is taller
     than the viewport. .content-section and .footer-section already opt out;
     without this the call-to-action sections were squeezed to a fraction of
     their height and disappeared behind the footer. Inert on the homepage,
     whose body is not a flex container. */
  flex-shrink: 0;
}

.section.hero {
  height: 88vh;
  margin-bottom: 150px;
  overflow: hidden;
}

.section.content-section {
  flex: 1;
}

.container {
  color: #fff;
  justify-content: center;
  align-items: center;
  width: 95%;
  max-width: 95%;
  height: 100%;
  padding: 24px 48px;
  position: relative;
}

.container.logos {
  grid-row-gap: 16px;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
}

.container.footer-container {
  padding-top: 0;
  padding-bottom: 0;
}

.container.content-section {
  flex: 1;
  display: block;
}

.hero-wrapper {
  grid-row-gap: 28px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  display: flex;
}

.notice-message {
  letter-spacing: -.02em;
  font-weight: 400;
}

.notice {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-style: solid;
  border-width: var(--main-border);
  background-color: var(--lumin-night);
  color: var(--white);
  border-color: #fff;
  border-radius: 12px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  font-weight: 700;
  display: flex;
  position: static;
}

.notice-title {
  grid-column-gap: 6px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  display: flex;
}

.notice-blip {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 8px;
  height: 8px;
  display: flex;
}

.paragraph {
  color: #fff;
  letter-spacing: -.02em;
  width: auto;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.5em;
}

.paragraph.centered {
  text-align: center;
}

.cta-button-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border: 1px solid var(--white);
  color: var(--lumin-night);
  cursor: pointer;
  background-color: #fff;
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px;
  font-weight: 700;
  transition: background-color 90ms cubic-bezier(.86, 0, .07, 1), color 90ms cubic-bezier(.86, 0, .07, 1), border-color 90ms cubic-bezier(.86, 0, .07, 1);
  display: flex;
}

.cta-button-2:hover {
  border: 1px solid var(--white);
  background-color: var(--lumin-night);
  color: var(--white);
}

.background-hero {
  z-index: -999;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.outlined-zw-wrapper {
  grid-column-gap: 14px;
  width: 75%;
  position: absolute;
  bottom: 80px;
  transform: rotate(-7deg);
}

.outlined-zw-animation {
  grid-column-gap: 28px;
  flex-direction: row;
  justify-content: center;
  display: flex;
  /* Three 1440px wordmarks inside a rotated wrapper: repainting that strip on
     every scroll frame is what js/hero.js moves, so give it its own layer and
     the frames become a composite instead. */
  will-change: transform;
}

.cta-gradient {
  filter: blur(100px);
  border-radius: 9999px;
  height: 720px;
  position: absolute;
  inset: 0% 0% auto;
}

.btf {
  margin-top: 150px;
  margin-bottom: 80px;
}

.frame-38 {
  grid-column-gap: 39px;
  grid-row-gap: 39px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.logos-title {
  color: #fff;
  text-align: center;
  letter-spacing: -.02em;
  width: 35ch;
  font-family: Archivo, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 34px;
}

.frame-20 {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1161px;
  display: flex;
}

.vectors-wrapper-3 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 150px;
}

.frame-39 {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.frame-21 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-style: solid;
  border-width: var(--main-border);
  background-color: var(--lumin-night);
  border-color: #fff;
  border-radius: 12px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 12px 16px;
  display: flex;
}

.text-5 {
  color: #fff;
  text-align: center;
  letter-spacing: -.02em;
  font-family: Archivo, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
}

.h2 {
  color: #fff;
  letter-spacing: -.035em;
  width: auto;
  font-size: 3em;
  font-weight: 700;
  line-height: 1em;
}

.h2.center {
  text-align: center;
  width: 16ch;
}

.h2.rhenish {
  width: 16ch;
}

.paragraph-2 {
  color: #fff;
  letter-spacing: -.02em;
  font-family: Archivo, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

.cta-button-3 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  background-color: #fff;
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px;
  display: flex;
}

.get-a-custom-quote {
  color: var(--lumin-night);
  text-align: center;
  letter-spacing: -.02em;
  font-family: Archivo, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
}

.trulaser-1 {
  object-fit: contain;
  position: relative;
  left: auto;
}

.quick-stack {
  grid-column-gap: 24px;
  grid-row-gap: 14px;
  align-self: auto;
  padding: 0;
}

.frame {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  width: 32px;
  height: 32px;
  display: flex;
  position: relative;
}

.vectors-wrapper-5 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.vectors-wrapper-6 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 20px;
  display: flex;
  position: absolute;
  top: 6px;
  left: 8px;
}

.footer-title, .paragraph-3 {
  font-weight: 400;
}

.cell.cell-center {
  justify-content: flex-start;
  align-items: flex-start;
}

.grid {
  grid-column-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
}

.centered {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.centering-wrapper {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.centering-wrapper.home {
  justify-content: center;
}

.cad {
  grid-row-gap: 24px;
  flex-direction: column;
  align-items: center;
  width: 930px;
  display: flex;
}

.cad-squares {
  background-color: var(--lumin-night);
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 300px;
  padding: 18px;
  display: flex;
}

.vectors-wrapper-7 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.frame-27 {
  clear: none;
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-flow: column;
  flex: 1;
  order: 1;
  justify-content: flex-start;
  align-self: auto;
  align-items: flex-start;
  padding-top: 20px;
  display: flex;
}

.text-6 {
  color: #fff;
  letter-spacing: -.02em;
  font-family: Archivo, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.tools {
  color: #fff;
  letter-spacing: -.02em;
  font-family: Archivo, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.vectors-wrapper-8 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.frame-43 {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-7 {
  color: #fff;
  letter-spacing: -.02em;
  font-family: Archivo, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.vectors-wrapper-9 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  object-fit: cover;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

.frame-45 {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.text-8 {
  color: #fff;
  letter-spacing: -.02em;
  font-family: Archivo, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.grid-2 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  margin-top: 40px;
}

.edged-wrapper {
  justify-content: flex-end;
  padding-left: 80px;
  display: flex;
}

.edged-wrapper.padding {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-right: 80px;
}

.machinery-grid {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto;
  padding: 0;
}

.cell-3 {
  justify-content: center;
}

.rhenish-valley {
  object-fit: cover;
  border-radius: 12px;
}

.footer {
  background-color: var(--lumin-night);
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  align-items: stretch;
  width: 100%;
  height: 500px;
  padding: 48px;
  display: flex;
  position: relative;
}

.footer.nav {
  border-radius: 16px 16px 0 0;
  height: 100%;
  padding: 24px;
}

.cta-background {
  position: relative;
}

.cta-wrapper {
  padding-bottom: 78px;
  position: relative;
  overflow: visible;
}

.cta-title {
  color: #fff;
  text-align: center;
  letter-spacing: -.05em;
  width: 15ch;
  font-size: 4em;
  font-weight: 700;
  line-height: 1em;
}

.cta-section {
  z-index: 9999;
  grid-row-gap: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.fn-logos-image {
  color: #fff;
  object-fit: contain;
  object-position: 50% 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  max-width: 150px;
  height: 42px;
  display: flex;
}

.fn-logos-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.fn-label {
  font-weight: 700;
}

.fn-container-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 1310px;
  padding-left: 15px;
  padding-right: 15px;
  display: grid;
}

.fn-section {
  color: #ecf0ef;
  background-color: #1d1f1e;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  font-family: Open Sans, sans-serif;
  display: flex;
}

.fn-section.overflow-none {
  overflow: hidden;
}

.fn-button {
  border: 3px solid var(--white);
  background-color: var(--lumin-night);
  border-radius: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  font-weight: 700;
  transition: opacity .25s ease-in-out;
  display: flex;
}

.fn-button:hover {
  background-color: var(--lumin-glow-soft);
  opacity: .9;
  color: var(--lumin-night);
}

.fn-button-secondery-navbar {
  color: #fff;
  background-color: #0000;
  border: 1px solid #fff;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  font-family: Open Sans, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
  transition: background-color .25s;
  display: flex;
}

.fn-button-secondery-navbar:hover {
  background-color: #3e4545;
}

.fn-button-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-auto-columns: 1fr;
  display: grid;
}

.fn-link-arrow {
  object-fit: contain;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 18px;
  margin-left: 10px;
  display: flex;
}

.fn-link-with-arrow {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: var(--lumin-night);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  font-family: Open Sans, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4em;
  display: flex;
}

.fn-blog-info-wrapper-second {
  grid-column-gap: 8px;
  color: #939b9b;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.fn-heading-5 {
  margin-top: 0;
  margin-bottom: 24px;
  font-family: Open Sans, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3em;
}

.spacer-s {
  width: 24px;
  height: 24px;
}

.fn-category-pill {
  color: #ecf0ef;
  background-color: #3e4545;
  border-radius: 34px;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  line-height: 1em;
  display: flex;
}

.fn-features-card-about {
  color: #ecf0ef;
  background-color: #1d1f1e;
  border: 1px solid #0f1213;
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: -12px;
  padding: 24px;
  text-decoration: none;
  transition: border-color .25s;
  display: flex;
}

.fn-features-card-about:hover {
  border-color: #df0;
}

.fn-standard-white-link {
  color: #ecf0ef;
  font-size: 18px;
  line-height: 1.4em;
  transition: color .25s;
  display: block;
}

.fn-standard-white-link:hover, .fn-standard-white-link.w--current {
  color: #df0;
}

.fn-navbar-label-line-about {
  background-color: #3e4545;
  width: 100%;
  height: 1px;
}

.fn-navbar-about-us-link-wrap {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: #cdd3d2;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 24px;
  display: flex;
}

.fn-links-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-direction: column;
  display: flex;
}

.fullscreen-services {
  z-index: 9999999;
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  background-color: #fff;
  border-radius: 0;
  grid-template-rows: .25fr .5fr .25fr 2.5fr;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr .25fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 12px 0;
  position: fixed;
  inset: 0%;
}

.fn-navbar-link-list-advence {
  text-align: left;
  background-color: #0000;
  flex-direction: column;
  align-items: center;
  width: 80%;
  max-width: 80%;
  padding-top: 10px;
  padding-bottom: 0;
  display: none;
  inset: 100% auto auto 0%;
}

.fn-navbar-link-list-advence.w--open {
  background-color: #0000;
  padding-top: 10px;
  padding-bottom: 0;
}

.fn-navbar-link-list-advence.first-look {
  color: var(--lumin-deep);
  background-color: #0000;
  border-radius: 8px;
  padding-top: 10px;
  padding-bottom: 0;
  display: flex;
}

.fn-dropdown-link-icon {
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 8px;
  margin-left: 8px;
  display: flex;
}

.fn-navbar-link-second {
  color: var(--lumin-deep);
  letter-spacing: -.5px;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  padding: 16px 20px;
  font-weight: 700;
  transition: color .25s;
  display: flex;
}

.fn-navbar-link-second:hover {
  color: var(--lumin-night);
}

.fn-navbar-link-second.w--current {
  color: #df0;
}

.fn-navbar-link-second-2 {
  color: #ecf0ef;
  padding-top: 32px;
  padding-bottom: 32px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3em;
  text-decoration: underline;
}

.fn-dropdown-link-advence {
  margin-left: 0;
  margin-right: 0;
  position: static;
}

.fn-paragraph-no-margin-navbar {
  color: var(--lumin-silver);
  letter-spacing: -.5px;
  margin-bottom: 0;
  font-size: .875em;
  font-weight: 700;
  line-height: 1.125em;
}

.fn-product-icon {
  color: #df0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.fn-product-icon-2 {
  object-fit: contain;
  width: 19px;
  height: 19px;
  margin-bottom: 0;
}

.navbar-product-card-intro {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: #ecf0ef;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.4em;
  text-decoration: underline;
  display: flex;
}

.navbar-product-card {
  grid-row-gap: 8px;
  border: 1px solid var(--spark-library-background--interactive);
  color: var(--lumin-dim-gray);
  border-radius: 18px;
  flex-direction: column;
  padding: 12px;
  text-decoration: none;
  transition: background-color .2s cubic-bezier(.455, .03, .515, .955);
  display: flex;
}

.navbar-product-card:hover {
  border: 1px solid var(--lumin-silver);
  background-color: var(--lumin-glow-soft);
  color: var(--lumin-night);
}

.fn-paragraph {
  color: var(--lumin-dim-gray);
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.6em;
}

.fn-heading-4 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3em;
}

.navbar-product-card-featured-card {
  border: 1px solid var(--spark-library-background--interactive);
  background-color: var(--white);
  color: var(--lumin-night);
  border-radius: 16px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  text-decoration: none;
  display: flex;
}

.fn-navbar-label-line {
  background-color: var(--lumin-glow-soft);
  flex: 1;
  height: 1px;
}

.fn-navbar-label {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--lumin-night);
  letter-spacing: -.35px;
  align-items: center;
  font-weight: 700;
  line-height: 1.125em;
  display: flex;
}

.fn-paragraph-navbar {
  color: var(--lumin-silver);
}

.fn-paragraph-navbar-2 {
  color: var(--lumin-deep);
  margin-bottom: 32px;
  font-family: Open Sans, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
}

.fn-features-icon {
  color: var(--lumin-deep);
  object-fit: contain;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 19px;
  height: 19px;
  margin-bottom: 24px;
  display: flex;
}

.fn-navbar-card-solution {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 256px;
  padding: 0;
  text-decoration: none;
  display: flex;
}

.fn-navbar-links-wrapper-advence {
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.fn-navbar-menu-wrapper-second {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex: 1;
  justify-content: flex-end;
  display: flex;
}

.fn-navbar-menu-advence {
  flex: 1;
  justify-content: space-between;
  display: flex;
  position: static;
}

.fn-contain-logo {
  color: #df0;
  object-fit: contain;
  object-position: 0% 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.fn-brand-box {
  object-fit: contain;
  object-position: 0% 50%;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 200px;
  padding: 12px 24px;
  transition: opacity .25s;
  display: flex;
}

.fn-brand-box:hover {
  opacity: .7;
}

.fn-brand-box.w--current {
  flex-direction: column;
}

.fn-navbar-container-advence {
  background-color: #fff;
  border-radius: 32px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 1310px;
  padding-left: 32px;
  padding-right: 0;
  display: flex;
  position: relative;
}

.fn-navbar-advence {
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
}

.navbar-image {
  border: 1px solid #a6a6a6;
  border-radius: 8px;
  width: 100%;
}

.navbar-link-h1 {
  letter-spacing: -.1px;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.125em;
}

.copy-block {
  grid-row-gap: 2px;
  flex-direction: column;
  display: flex;
}

.navbar-link {
  color: var(--lumin-deep);
  margin-left: 0;
  margin-right: 0;
  padding: 20px;
  font-weight: 700;
  position: static;
}

.footer-grid {
  z-index: 10;
  grid-template: "."
                 "." 25px
                 / 1fr 2.75fr 1.25fr 1.25fr .75fr .75fr;
  position: relative;
}

.footer-details {
  text-align: left;
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.services {
  grid-row-gap: 12px;
  flex-direction: column;
  display: flex;
}

.socials {
  grid-column-gap: 12px;
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}

.image {
  width: 240px;
}

.footer-links {
  border-left: 1px solid var(--lumin-night);
  color: var(--white);
  padding-left: 4px;
  padding-right: 4px;
  display: flex;
}

.footer-links.engulf {
  grid-column-gap: 16px;
  flex-direction: row;
  justify-content: flex-start;
  align-self: center;
  align-items: center;
  display: flex;
}

.footer-links.dark {
  border-left-color: var(--white);
  color: var(--lumin-deep);
}

.link-wrappers {
  grid-row-gap: 6px;
  color: #fff;
  flex-direction: column;
  display: flex;
}

.footer-legals {
  grid-column-gap: 30px;
  flex-direction: row;
  align-self: center;
  display: flex;
}

.footer-links-text {
  display: flex;
}

.image-2 {
  position: absolute;
  inset: 0% 0% auto auto;
}

.footer-right {
  grid-column-gap: 16px;
  display: flex;
}

.processing-item {
  border: 1px solid var(--spark-library-background--interactive);
  color: var(--lumin-dim-gray);
  border-radius: 16px;
  grid-template-rows: auto;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 12px;
}

.processing-wrapper {
  grid-row-gap: 12px;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}

.div-block {
  grid-column-gap: 12px;
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.processing-heading {
  color: var(--lumin-dim-gray);
  margin-bottom: 0;
  font-size: 1.25em;
  font-weight: 700;
}

.fullscreen-menu {
  height: 100vh;
  display: none;
}

.paragraph-4 {
  color: var(--lumin-silver);
  margin-bottom: 0;
}

.div-block-2 {
  border: 1px solid var(--lumin-night);
  border-radius: 16px;
}

.text-block-2 {
  letter-spacing: -.2px;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  position: static;
}

.fn-button-dark {
  border: 1px solid var(--lumin-night);
  background-color: var(--lumin-night);
  color: #fff;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.6em;
  transition: color .25s, background-color .25s;
}

.fn-button-dark:hover {
  border: 1px solid var(--lumin-night);
  color: var(--lumin-night);
  background-color: #fff;
}

.fn-button-dark.w--current {
  background-color: #1d1f1e;
}

.fn-button-dark.w--current:hover {
  background-color: #0000;
}

.fn-button-secondery-dark {
  border: 1px solid var(--white);
  background-color: var(--lumin-night);
  color: var(--white);
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 24px;
  transition: color .25s, background-color .25s;
  display: flex;
}

.fn-button-secondery-dark:hover {
  border-color: var(--lumin-night);
  background-color: var(--white);
  color: var(--lumin-night);
}

.fn-button-wrapper-2 {
  grid-column-gap: 8px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: auto auto;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.fn-navbar-link-box {
  border: 1px solid var(--white);
  color: #1d1f1e;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3em;
  text-decoration: none;
  transition: background-color .2s cubic-bezier(.645, .045, .355, 1), color .2s cubic-bezier(.645, .045, .355, 1), border-color .2s cubic-bezier(.645, .045, .355, 1);
}

.fn-navbar-link-box:hover {
  opacity: .7;
}

.fn-navbar-link-box.w--current {
  border: 1px solid var(--lumin-night);
  background-color: var(--lumin-night);
  color: #fff;
  border-radius: 8px;
}

.fn-navbar-link-box.w--current:hover {
  border: 1px solid var(--lumin-night);
  background-color: var(--white);
  opacity: 1;
  color: var(--lumin-night);
}

.fn-navbar-link-box.cta {
  border: 1px solid var(--lumin-night);
  background-color: var(--lumin-night);
  color: var(--white);
  border-radius: 8px;
  font-weight: 700;
}

.fn-navbar-link-box.cta:hover {
  background-color: var(--white);
  color: var(--lumin-night);
  opacity: 1;
}

.fn-navbar-link-box.fn-button-light:hover {
  color: #fff !important;
}

.fn-navbar-link-box.fn-button-light:visited {
  color: var(--lumin-night);
}

.fn-navbar-link-box.fn-button-light.w--current {
  background-color: var(--lumin-night);
  color: var(--white);
}

.fn-navbar-link-box.fn-button-light.w--current:hover {
  background-color: var(--white);
  color: var(--lumin-night) !important;
}

.fn-navbar-links-wrapper {
  grid-column-gap: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
  display: flex;
}

.fn-navbar-menu-wrapper {
  flex: 1;
  justify-content: space-between;
  display: flex;
}

.fn-navbar-menu-box {
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.fn-contain-logo-2 {
  color: #df0;
  object-fit: contain;
  object-position: 0% 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.fn-contain-logo-2.dark-logo {
  color: #1d1f1e;
}

.fn-brand-box-2 {
  object-fit: contain;
  object-position: 0% 50%;
  margin-right: 0;
  padding: 12px 24px;
  transition: opacity .25s;
}

.fn-brand-box-2:hover {
  opacity: .7;
}

.fn-brand-box-2.side-margin.w--current {
  flex: 0 auto;
  align-self: stretch;
  align-items: center;
  display: flex;
}

.fn-navbar-container-box {
  grid-column-gap: 12px;
  background-color: #fff;
  border-radius: 16px;
  flex: 1;
  justify-content: space-between;
  align-self: stretch;
  align-items: stretch;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
}

.fn-navbar-box {
  background-color: #0000;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
}

.fn-button-light {
  border: 1px solid var(--lumin-night);
  background-color: var(--white);
  color: var(--lumin-night);
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.6em;
  transition: color .25s, background-color .25s;
}

.fn-button-light:hover {
  border: 1px solid var(--lumin-night);
  background-color: var(--lumin-night);
  color: var(--white);
}

.fn-button-light.w--current {
  background-color: #1d1f1e;
}

.fn-button-light.w--current:hover {
  background-color: #0000;
}

.content {
  grid-row-gap: 24px;
  flex-direction: column;
  align-items: flex-start;
  /* Flex items default to min-width:auto, so a wide child such as a spec table
     would stretch this past its container and scroll the whole page sideways.
     Inert wherever the content already fits. */
  min-width: 0;
  display: flex;
}

.heading-wrapper {
  grid-row-gap: 16px;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.line {
  background-color: var(--white);
  width: 50px;
  height: 1px;
}

.processing-grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;
  margin-top: 40px;
}

.navbar-logo {
  width: 100%;
  color: var(--lumin-night);
}

.collection-list-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}

.section-2 {
  background-color: green;
}

.section-3 {
  background-color: red;
}

.section-4 {
  background-color: #000;
}

.section-5 {
  background-color: #fff;
}

.div-block-3 {
  overflow: hidden;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.cta-button-4 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--lumin-night);
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 12px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px;
  font-weight: 700;
  transition: background-color 90ms cubic-bezier(.86, 0, .07, 1), color 90ms cubic-bezier(.86, 0, .07, 1), border-color 90ms cubic-bezier(.86, 0, .07, 1);
  display: flex;
}

/* :visited comes before :hover deliberately. Both selectors have the same
   specificity, so whichever is written last wins — with :visited last, hovering an
   already-visited button kept the blue text on the blue hover background (1.2:1). */
.cta-button-4:visited {
  color: var(--lumin-night);
}

.cta-button-4:hover {
  color: #fff;
  background-color: var(--lumin-night);
  border: 1px solid #fff;
}

.cta-button-5 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--lumin-night);
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 12px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 12px;
  font-weight: 700;
  transition: background-color 90ms cubic-bezier(.86, 0, .07, 1), color 90ms cubic-bezier(.86, 0, .07, 1), border-color 90ms cubic-bezier(.86, 0, .07, 1);
  display: flex;
}

/* :visited before :hover, for the reason given on .cta-button-4 above. */
.cta-button-5:visited {
  color: var(--lumin-night);
}

.cta-button-5:hover {
  color: #fff;
  background-color: var(--lumin-night);
  border: 1px solid #fff;
}

.cta-button-5.more {
  flex: 0 auto;
  order: 0;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: auto;
  position: absolute;
  bottom: 0;
}

.text-block-3 {
  font-style: normal;
  text-decoration: none;
}

.text-field {
  width: auto;
  min-width: auto;
}

.text-field-2 {
  text-align: left;
  object-fit: fill;
  width: 100%;
  min-height: 150px;
  position: static;
  overflow: clip;
}

.form {
  width: 100%;
  min-width: 100%;
  position: static;
}

.form-block {
  overflow: visible;
}

.form-block-2 {
  width: 100%;
}

.rich-text-block, .rich-text-block-2, .rich-text-block-3, .rich-text-block-4 {
  flex: 1;
}

.columns {
  margin-top: -10px;
  margin-left: 0;
  margin-right: 0;
}

._w-dyn-items {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-content: stretch;
  place-items: stretch stretch;
  display: grid;
  position: static;
}

.collection-list-wrapper._w-dyn-list {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: none;
  max-height: none;
  display: block;
}

._w-dyn-item {
  -webkit-hyphens: auto;
  hyphens: auto;
}

.frame-27 {
  width: 100%;
  position: relative;
}

.cad-squares {
  justify-content: flex-start;
  align-items: flex-start;
}

.paragraph-5 {
  line-height: 1.5em;
}

.text-block-4 {
  color: var(--lumin-night);
}

.text-block-5 {
  color: #000;
}

.cell-4, .cell-5, .cell-6 {
  justify-content: flex-start;
  align-items: flex-start;
}

@media screen and (min-width: 1280px) {
  .machinery-grid {
    width: auto;
  }

  .services {
    flex-direction: column;
    justify-content: flex-start;
  }

  .footer-links {
    flex-direction: row;
    display: flex;
  }

  .content, .collection-list-wrapper._w-dyn-list {
    width: 100%;
  }

  .heading-2 {
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media screen and (min-width: 1440px) {
  .paragraph {
    width: 100%;
  }

  .fn-navbar-link-box.w--current {
    background-color: var(--white);
    color: var(--lumin-night);
  }

  .fn-navbar-box {
    color: var(--lumin-night);
  }

  .content {
    flex: 1;
  }

  .heading-wrapper {
    flex: 0 auto;
    width: 100%;
  }

  .collection-list-wrapper._w-dyn-list {
    width: 100%;
  }

  .heading-2 {
    -webkit-hyphens: auto;
    hyphens: auto;
    word-break: break-word;
  }

  .heading-3 {
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media screen and (min-width: 1920px) {
  .paragraph {
    width: auto;
  }

  .footer {
    background-color: var(--lumin-night);
  }

  .cta-background {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .cta-wrapper {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
    inset: 0%;
  }

  .cta-section {
    z-index: 9999;
  }

  .content {
    flex: 1;
  }

  .heading-wrapper {
    flex: 0 auto;
    width: 100%;
  }

  .collection-list-wrapper {
    align-self: auto;
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .container {
    padding-left: 0;
    padding-right: 0;
  }

  .paragraph {
    width: 100%;
  }

  .background-hero {
    overflow-x: hidden;
  }

  .outlined-zw-wrapper {
    width: 100%;
    overflow: hidden;
  }

  .h2, .h2.center, .h2.rhenish {
    font-size: 3em;
  }

  .trulaser-1 {
    height: 100%;
    position: relative;
    left: 0;
  }

  .cell.cell-center {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .edged-wrapper.padding {
    padding-left: 24px;
    padding-right: 24px;
  }

  .machinery-grid {
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    margin-bottom: 32px;
  }

  .rhenish-valley {
    object-fit: cover;
    border-radius: 8px;
    height: 100%;
  }

  .footer {
    height: auto;
  }

  .fn-logos-image {
    max-width: 100px;
  }

  .fn-container-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  .fn-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .fn-nav-line-3 {
    background-color: var(--lumin-deep);
    border-radius: 4px;
    width: 16px;
    height: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .fn-nav-line-3.green-line {
    background-color: #df0;
  }

  .fn-nav-line-2 {
    background-color: var(--lumin-deep);
    border-radius: 4px;
    width: 16px;
    height: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .fn-nav-line-2.green-line {
    background-color: #df0;
  }

  .fn-nav-line-1 {
    background-color: var(--lumin-deep);
    border-radius: 4px;
    width: 16px;
    height: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .fn-nav-line-1.green-line {
    background-color: #df0;
  }

  .nav-menu-button-wrap {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .fn-menu-button-second {
    margin-right: -15px;
    padding-right: 18px;
  }

  .fn-menu-button-second.w--open {
    background-color: #0000;
  }

  .fn-button-secondery-navbar {
    color: #ecf0ef;
    border-color: #ecf0ef;
  }

  .fn-button-secondery-navbar:hover {
    background-color: #0000;
  }

  .fn-standard-white-link {
    transition: none;
  }

  .fn-standard-white-link:hover {
    color: #ecf0ef;
  }

  .fullscreen-services {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .fn-navbar-link-list-advence.w--open {
    width: 100%;
    padding-top: 0;
    padding-bottom: 40px;
    position: relative;
  }

  .fn-navbar-link-second {
    color: #ecf0ef;
    border-top: 1px solid #3e4545;
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .fn-navbar-link-second:hover, .fn-navbar-link-second.w--current, .fn-navbar-link-second.w--current:hover {
    color: #ecf0ef;
  }

  .fn-navbar-link-second-2 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 24px 0;
  }

  .fn-dropdown-link-advence {
    width: 100%;
  }

  .fn-dropdown-link-advence.last-dropdown-link {
    border-bottom: 1px solid #3e4545;
  }

  .fn-paragraph-no-margin-navbar {
    display: none;
  }

  .navbar-product-card-intro {
    margin-bottom: 0;
  }

  .navbar-product-card {
    transition: none;
  }

  .navbar-product-card:hover {
    background-color: #1d1f1e;
  }

  .fn-heading-4 {
    font-size: 28px;
  }

  .fn-paragraph-navbar {
    display: none;
  }

  .fn-navbar-links-wrapper-advence {
    flex-direction: column;
    align-items: flex-start;
  }

  .fn-navbar-menu-wrapper-second {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    background-color: #0f1213;
    border-radius: 16px;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 0 24px;
    display: flex;
  }

  .fn-navbar-menu-advence {
    background-color: #0f1213;
    height: 482px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    overflow: auto;
  }

  .fn-brand-box {
    z-index: 2;
    transition: none;
  }

  .fn-brand-box:hover {
    opacity: 1;
  }

  .fn-navbar-container-advence {
    flex-direction: row;
    justify-content: space-between;
  }

  .navbar-link {
    width: 100%;
  }

  .navbar-link.last-dropdown-link {
    border-bottom: 1px solid #3e4545;
  }

  .footer-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-template-rows: 1fr .25fr;
    grid-template-columns: 2.75fr 1.25fr 1.25fr;
    align-content: space-between;
    place-items: stretch end;
  }

  .footer-details {
    flex-direction: row;
    align-items: flex-start;
  }

  .say-hello {
    display: none;
  }

  .footer-legals {
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    align-self: stretch;
  }

  .fn-nav-line-4 {
    background-color: var(--lumin-deep);
    border-radius: 4px;
    width: 16px;
    height: 2px;
    margin-top: 0;
    margin-bottom: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .fn-nav-line-5 {
    background-color: var(--lumin-deep);
    border-radius: 4px;
    width: 16px;
    height: 2px;
    margin-bottom: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .fn-nav-line-6 {
    background-color: var(--lumin-deep);
    border-radius: 4px;
    width: 16px;
    height: 2px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .nav-menu-button-wrap-2 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
  }

  .fn-menu-button {
    margin-right: -18px;
    padding-right: 18px;
  }

  .fn-menu-button.w--open {
    z-index: 2;
    background-color: #0000;
  }

  .fn-button-secondery-dark {
    transition: none;
  }

  .fn-button-secondery-dark:hover {
    color: #1d1f1e;
    background-color: #0000;
  }

  .fn-button-wrapper-2 {
    grid-row-gap: 24px;
    display: flex;
  }

  .fn-navbar-link-box {
    border-radius: 8px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 16px;
    transition: none;
  }

  .fn-navbar-link-box:hover {
    opacity: 1;
  }

  .fn-navbar-link-box.w--current {
    border-radius: 8px;
  }

  .fn-navbar-link-box.navbar-link-box-last {
    margin-bottom: 12px;
  }

  .fn-navbar-link-box.fn-button-light {
    margin-top: 10px;
  }

  .fn-navbar-links-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .fn-navbar-menu-wrapper {
    background-color: var(--white);
    border-radius: 16px;
    flex-direction: column;
    justify-content: flex-start;
    padding: 12px 24px 24px;
    display: flex;
    position: relative;
  }

  .fn-navbar-menu-box {
    background-color: #0000;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .fn-brand-box-2 {
    z-index: 2;
    transition: none;
  }

  .fn-brand-box-2:hover {
    opacity: 1;
  }

  .fn-navbar-container-box {
    padding-left: 15px;
    padding-right: 15px;
  }

  .content {
    /* Was 1100%, which only ever rendered as 100% because .content is a flex item
       and flex-shrink pulled it back to the container width. */
    width: 100%;
  }

  ._w-dyn-items {
    grid-template-columns: 1fr 1fr;
  }

  .collection-list-wrapper._w-dyn-list {
    width: 100%;
    display: block;
    overflow: visible;
  }

  .cell-4, .cell-5, .cell-6 {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .heading-2 {
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media screen and (max-width: 767px) {
  .container {
    width: 80%;
  }

  .notice {
    flex-direction: column;
    align-items: flex-start;
  }

  .trulaser-1 {
    height: auto;
  }

  .cell.cell-center {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .cad {
    padding-bottom: 32px;
  }

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

  .machinery-grid {
    grid-row-gap: 32px;
    grid-template-rows: 1fr auto;
  }

  .rhenish-valley {
    width: auto;
  }

  .cta-title {
    width: auto;
    font-size: 3em;
  }

  .fn-logos-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .fn-container-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .fn-section {
    padding-top: 32px;
    padding-bottom: 32px;
    overflow: visible;
  }

  .fn-button {
    width: 100%;
  }

  .fn-heading-5 {
    font-size: 18px;
  }

  .fn-navbar-about-us-link-wrap {
    margin-bottom: 0;
  }

  .fn-navbar-link-second {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .fn-navbar-link-second-2 {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .fn-paragraph {
    margin-bottom: 24px;
  }

  .fn-heading-4 {
    font-size: 24px;
  }

  .fn-navbar-menu-wrapper-second {
    padding: 0 0 18px;
  }

  .fn-brand-box {
    margin-right: 0;
    padding-left: 0;
  }

  .footer-grid {
    grid-column-gap: 12px;
    grid-row-gap: 27px;
    grid-template-rows: 1fr .25fr;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-content: start;
    justify-items: start;
    width: 100%;
    display: grid;
  }

  .socials {
    flex-direction: column;
  }

  .footer-legals {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex-direction: column;
  }

  .fn-button-dark {
    width: 100%;
  }

  .fn-button-wrapper-2 {
    grid-row-gap: 8px;
  }

  .fn-navbar-link-box {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .fn-navbar-menu-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding: 18px;
  }

  .fn-brand-box-2 {
    margin-right: 0;
    padding-left: 0;
  }

  .fn-button-light {
    width: 100%;
  }

  .heading {
    font-size: 3em;
  }

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

  .cta-button-4, .cta-button-5 {
    margin-bottom: 5px;
  }

  ._w-dyn-items {
    grid-template-columns: 1fr;
  }

  .cell-4, .cell-5, .cell-6 {
    justify-content: flex-start;
    align-items: flex-start;
  }
}

@media screen and (max-width: 479px) {
  .body {
    overflow: visible;
  }

  .section.footer-section {
    width: 100%;
  }

  .container.logos {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .h2 {
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  .h2.center, .h2.rhenish {
    width: auto;
  }

  .cell.cell-center {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .grid {
    border: 1px #000;
  }

  .cad {
    width: auto;
  }

  .cad-squares {
    margin-bottom: 10px;
  }

  .machinery-grid {
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
  }

  .footer {
    padding: 24px;
  }

  .fn-logos-wrapper {
    flex-flow: column;
    justify-content: space-around;
    align-items: flex-start;
  }

  .fn-label {
    text-align: left;
    flex: 0 auto;
  }

  .fn-button, .fn-button-wrapper {
    width: 100%;
  }

  .fn-links-wrapper {
    margin-bottom: 12px;
  }

  .footer-grid {
    grid-row-gap: 21px;
    grid-template-rows: 1fr .25fr auto;
    grid-template-columns: 1fr;
  }

  .socials {
    grid-column-gap: 0px;
    grid-row-gap: 8px;
    flex-direction: column;
  }

  .footer-right {
    flex-direction: row;
  }

  .fn-button-wrapper-2 {
    width: 100%;
  }

  .heading {
    font-size: 2.5em;
  }

  .column {
    padding-left: 20px;
    padding-right: 0;
  }

  .cell-4, .cell-5, .cell-6 {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .heading-3 {
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* Grid placement.

   The layout system came out of Webflow, which places grid children by
   generated id (#w-node-…). Nothing on this site is a Webflow export, so the
   same placements hang off the classes the markup already carries. Rules that
   Webflow emitted for children of flex containers, where grid-area does
   nothing, are gone entirely. */

/* The hero notice sits in a four-column list and takes half of it. */
.notice {
  grid-area: span 1 / span 2 / span 1 / span 2;
}

/* Feature rows under a heading: two columns, one below 480px. */
.quick-stack {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
}

/* The image, figure or map beside a text column stays vertically centred on it. */
.machinery-grid > img,
.machinery-grid > figure,
.machinery-grid > .map-block {
  align-self: center;
}


@media screen and (max-width: 991px) {
  /* Text column and image stack, so the text no longer spans its own track. */
  .machinery-grid > .frame-39 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

}


@media screen and (max-width: 479px) {
  .quick-stack {
    grid-template-columns: 1fr;
  }

}

/* The outlined wordmark drifting behind the hero. core.css caps every image at
   max-width:100%, which would shrink these three copies to the width of their
   wrapper instead of letting them overflow it. */
.logo-stroke img {
  width: 1440px;
  max-width: none;
  height: auto;
  display: block;
}

/* Headings that carry the .h2 display style sit in flex containers that space
   their children with row-gap, so the browser's default heading margins would
   add unwanted space. Keeps <h1 class="h2"> visually identical to the
   <div class="h2"> it replaced. */
h1.h2, h2.h2 {
  margin-top: 0;
  margin-bottom: 0;
}

/* Cross-links between the service pages. Wraps on narrow viewports, unlike
   .socials, which is the closest existing row of pill links. */
.service-links-wrapper {
  grid-row-gap: 16px;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.service-links {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: row wrap;
  justify-content: flex-start;
  display: flex;
}

/* FAQ list. Not reusing .cad-squares because those cards carry a 300px
   min-height, which is far too tall for a question and answer pair. */
.faq-list {
  grid-column-gap: 32px;
  grid-row-gap: 24px;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  display: grid;
}

.faq-list h3 {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .faq-list {
    grid-template-columns: 1fr;
  }
}

/* Capability tables on the materials page. Scrolls inside its own container on
   narrow viewports so the page body never scrolls sideways. */
.spec-table-wrap {
  /* .content is a flex column with align-items: flex-start, so this would size to
     the table's min-width and push the page sideways. align-self stretches it to the
     container and min-width: 0 defeats the automatic minimum size of a flex item, so
     the overflow scrolls inside the wrapper instead of on <body>. */
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.spec-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  color: var(--white);
}

.spec-table th,
.spec-table td {
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding: 12px 16px 12px 0;
  text-align: left;
  vertical-align: top;
}

.spec-table th {
  font-weight: 700;
  white-space: nowrap;
}

.spec-table tr:last-child td {
  border-bottom: 0;
}

/* CTA band buttons. .cta-button-5 is a block-level flex container, so in the centred
   CTA bands at the foot of the service pages it stretched across the whole band.
   inline-flex sizes it to its label; the band's text-align: center then centres it.
   The wider horizontal padding keeps it a comfortable click target once it shrinks. */
.cta-button-inline {
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 12px 28px;
  display: inline-flex;
}

/* Navbar behaviour that used to come from Webflow's runtime (js/main.js plus
   jQuery). The collapse itself is already CSS — core.css hides .w-nav-menu and
   shows .w-nav-button under 991px — so only the hamburger's open state and the
   markup change from <div> to <button> need styling here. js/nav.js toggles
   .w--open and the data-nav-menu-open attribute that core.css keys off. */

.fn-menu-button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
}

.fn-menu-button:focus-visible {
  outline: 2px solid var(--lumin-night);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hamburger to cross. The geometry matches the interaction it replaces: the
   middle line fades, the outer two meet in the centre and cross at ±45°.
   outExpo is the easing Webflow used, and 500ms/200ms its durations. */
.fn-menu-button .fn-nav-line-4,
.fn-menu-button .fn-nav-line-5,
.fn-menu-button .fn-nav-line-6 {
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .2s linear;
}

.fn-menu-button.w--open .fn-nav-line-5 {
  opacity: 0;
}

.fn-menu-button.w--open .fn-nav-line-6 {
  transform: translateY(6px) rotate(45deg);
}

.fn-menu-button.w--open .fn-nav-line-4 {
  transform: translateY(-6px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .fn-menu-button .fn-nav-line-4,
  .fn-menu-button .fn-nav-line-5,
  .fn-menu-button .fn-nav-line-6 {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   LUMIN additions

   Everything above this line is the layout system shared with
   zellweger-blech.com and al-immo.ch, recoloured. Below are the parts that only
   LUMIN needs: the amber call-to-action, the glow behind the hero and the CTA
   band, and the four components a media-owner site needs that a metalworking
   site does not — a package/price grid, a numbered booking flow, a scale
   drawing of the screen, and photo slots that hold their aspect ratio before
   the photographs arrive.
   --------------------------------------------------------------------------- */

/* The primary call to action is the lit surface: amber ground, night text.
   The white button the layout system ships is kept as .cta-button-4 for
   secondary actions, so the two never compete. */
.cta-button-5,
.cta-button-5:visited {
  background-color: var(--lumin-glow);
  border-color: var(--lumin-glow);
  color: var(--lumin-deep);
}

.cta-button-5:hover {
  background-color: var(--lumin-glow-strong);
  border-color: var(--lumin-glow-strong);
  color: var(--lumin-deep);
}

.cta-button-2,
.cta-button-2:visited {
  background-color: var(--lumin-glow);
  border-color: var(--lumin-glow);
  color: var(--lumin-deep);
}

.cta-button-2:hover {
  background-color: var(--lumin-glow-strong);
  border-color: var(--lumin-glow-strong);
  color: var(--lumin-deep);
}

/* Section labels ("Standort", "Preise", …). Amber on night is 9.9:1; the same
   amber on the white navbar would be 1.9:1, which is why the accent never
   leaves the dark ground. */
.frame-21 {
  border-color: var(--lumin-glow);
}

.frame-21 .text-5 {
  color: var(--lumin-glow);
}

.notice {
  border-color: var(--lumin-glow);
}

/* Light spilling off the screen. .cta-gradient ships from Webflow as a blurred
   shape with no fill, which draws nothing; here it is the glow under the
   closing call to action. */
.cta-gradient {
  background-image: radial-gradient(circle at 50% 30%, rgba(255, 176, 32, .28), rgba(255, 176, 32, 0) 62%);
}

/* The same glow behind the hero, sitting under the outlined wordmark. */
.section.hero:before {
  content: "";
  z-index: -1000;
  pointer-events: none;
  background-image: radial-gradient(60% 55% at 62% 42%, rgba(255, 176, 32, .22), rgba(255, 176, 32, 0) 70%);
  position: absolute;
  inset: 0;
}

.section.hero {
  position: relative;
}

/* Package grid. Four cards on desktop, two on tablet, one on phone. The
   featured card is raised with the accent rather than with size, so the row
   keeps a single baseline. */
.price-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  align-self: stretch;
  width: 100%;
  display: grid;
}

.price-card {
  border: 1px solid rgba(255, 255, 255, .35);
  background-color: rgba(255, 255, 255, .04);
  border-radius: 12px;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  display: flex;
}

.price-card.featured {
  border-color: var(--lumin-glow);
  background-color: rgba(255, 176, 32, .08);
}

.price-card-tag {
  color: var(--lumin-glow);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: Archivo, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.price-card-name {
  color: var(--white);
  letter-spacing: -.03em;
  font-family: Archivo, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05em;
}

.price-card-price {
  color: var(--lumin-glow);
  letter-spacing: -.02em;
  font-family: Archivo, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.price-card-price small {
  color: var(--lumin-silver);
  font-family: Open Sans, sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.price-card-body {
  color: var(--white);
  flex: 1;
  font-size: 15px;
  line-height: 1.5em;
}

.price-card ul {
  color: var(--white);
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6em;
}

@media screen and (max-width: 991px) {
  .price-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 600px) {
  .price-grid {
    grid-template-columns: 1fr;
  }
}

/* Numbered booking flow. An ordered list rather than a grid of cards, because
   the order is the point. */
.steps {
  counter-reset: step;
  grid-row-gap: 20px;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.steps li {
  counter-increment: step;
  padding-left: 56px;
  position: relative;
}

.steps li:before {
  content: counter(step);
  color: var(--lumin-deep);
  background-color: var(--lumin-glow);
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-family: Archivo, sans-serif;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.steps h3 {
  color: var(--white);
  margin: 0 0 4px;
  font-family: Archivo, sans-serif;
  font-size: 20px;
  line-height: 1.2em;
}

.steps p {
  color: var(--white);
  margin: 0;
  line-height: 1.55em;
}

/* Scale drawing of the board: 2560 × 1920 mm, so 4:3. Until the photographs
   arrive this is the only thing on the site that shows what is being bought,
   and it stays useful afterwards on the technical page, where the point is the
   grid of 384 × 288 pixels rather than the view from the road. */
.screen-figure {
  align-self: stretch;
  width: 100%;
  margin: 0;
}

.screen-frame {
  background-color: var(--lumin-deep);
  border: 6px solid rgba(255, 255, 255, .5);
  border-radius: 6px;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding: 0;
  position: relative;
  box-shadow: 0 0 80px rgba(255, 176, 32, .35);
}

.screen-frame:before {
  content: "";
  padding-top: 75%;
  display: block;
}

.screen-inner {
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(255, 176, 32, .5), rgba(255, 176, 32, .08) 70%);
  background-size: 12px 12px, 12px 12px, auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  display: flex;
  position: absolute;
  inset: 0;
}

.screen-inner span {
  color: var(--white);
  text-align: center;
  letter-spacing: .04em;
  font-family: Archivo, sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.screen-figure figcaption {
  color: var(--lumin-silver);
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
}

/* Photo slots. They hold their aspect ratio whether or not an image is in
   them, so dropping the photographs in later does not move the layout. */
.photo {
  background-color: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  height: auto;
  display: block;
}

.photo figcaption {
  color: var(--lumin-silver);
  padding: 12px 16px;
  font-size: 14px;
}

.photo-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: 1fr 1fr;
  align-self: stretch;
  width: 100%;
  display: grid;
}

@media screen and (max-width: 767px) {
  .photo-grid {
    grid-template-columns: 1fr;
  }
}

/* Reference logos. The originals are dark-on-light PNGs from the old
   WordPress site, so each sits on its own white tile rather than on the page
   ground, where several of them would disappear. */
.ref-logos {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-self: stretch;
  width: 100%;
  display: grid;
}

.ref-logo {
  background-color: var(--white);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  height: 96px;
  padding: 16px;
  display: flex;
}

.ref-logo img {
  object-fit: contain;
  width: 100%;
  max-height: 100%;
}

/* Question and answer pairs use <details> so the answers are in the markup for
   crawlers, collapsed for readers. .faq-list already lays them out in two
   columns. */
.faq-list details {
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 16px;
}

.faq-list summary {
  color: var(--white);
  cursor: pointer;
  align-items: center;
  gap: 10px;
  font-family: Archivo, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3em;
  display: flex;
}

.faq-list summary::marker,
.faq-list summary::-webkit-details-marker {
  color: var(--lumin-glow);
}

.faq-list details p {
  color: var(--white);
  margin-bottom: 0;
  padding-top: 10px;
  line-height: 1.55em;
}

/* Prose that is not inside one of the layout system's own text blocks: the
   legal pages and the long-form explanations. */
.prose {
  color: var(--white);
  align-self: stretch;
  max-width: 68ch;
}

.prose h2 {
  letter-spacing: -.03em;
  margin-top: 40px;
  margin-bottom: 12px;
  font-family: Archivo, sans-serif;
  font-size: 2em;
  line-height: 1.1em;
}

.prose h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-family: Archivo, sans-serif;
  font-size: 1.25em;
  line-height: 1.2em;
}

.prose p,
.prose li {
  font-size: 1.05em;
  line-height: 1.6em;
}

.prose ul,
.prose ol {
  padding-left: 20px;
}

/* Highlighted number in running text — "140'000 Fahrzeuge", "360 Ausstrahlungen". */
.fig {
  color: var(--lumin-glow);
  font-weight: 700;
}

/* The LUMIN wordmark is 290 × 70 (4.1:1) where the Zellweger one this slot was
   built for is 6.4:1, so at width:100% it would stand 37px tall in a navbar
   whose own padding is 12px. Height it explicitly and let the width follow. */
.navbar-logo svg {
  width: auto;
  height: 26px;
  display: block;
}

/* Forms. core.css styles the inputs themselves (white ground, #333 text, which
   reads fine on the night background); what it has no opinion about is the
   labels and groupings around them, and on a dark page those default to black. */
.form label {
  color: var(--white);
  margin-bottom: 4px;
  font-weight: 600;
  display: block;
}

.form select.w-select {
  height: 38px;
}

.form fieldset {
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 12px;
  margin: 0 0 16px;
  padding: 12px 16px 16px;
}

.form legend {
  color: var(--white);
  padding-inline: 6px;
  font-weight: 600;
}

.form .radio-row {
  flex-flow: row wrap;
  gap: 20px;
  display: flex;
}

.form .radio-row label {
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
  display: flex;
}

.form .radio-row input {
  margin: 0;
}

.form .field-hint {
  color: var(--lumin-silver);
  margin: -6px 0 12px;
  font-size: 14px;
}

.form-note {
  color: var(--lumin-silver);
  max-width: 60ch;
  font-size: 14px;
  line-height: 1.5em;
}

/* Map. The sister sites embed Google Maps; this one embeds OpenStreetMap, which
   needs no key, sets no cookies and keeps the privacy policy shorter. */
.map-container {
  border-radius: 12px;
  align-self: stretch;
  width: 100%;
  overflow: hidden;
}

.map-container iframe {
  border: 0;
  width: 100%;
  height: 380px;
  display: block;
}

/* The homepage puts the same map beside the Standort copy. Map and OpenStreetMap
   attribution travel as one grid child so the note cannot land in its own track. */
.map-block .form-note {
  margin-top: 12px;
}

/* Why a submission bounced. Written by js/form-status.js from the ?fehler=
   parameter the PHP handlers redirect with. */
.form-error {
  color: var(--lumin-deep);
  background-color: var(--lumin-glow-soft);
  border-left: 4px solid var(--lumin-glow);
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 14px 18px;
  font-weight: 600;
}

/* The wordmark above the closing call to action. It is the solid pixel mark,
   inlined so it takes the band's white; the outlined twin is a background
   element and belongs only in the hero. */
.cta-wordmark {
  color: var(--white);
  width: 100%;
  max-width: 300px;
}

.cta-wordmark svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Footer layout. Webflow left a six-track grid here whose first track was 1fr
   against a 2.75fr neighbour; with LUMIN's shorter address block that squeezed
   the contact column until "+41 78 623 50 76" broke across two lines. Two
   readable columns, and the legal line under both. */
.footer-grid {
  grid-column-gap: 40px;
  grid-row-gap: 32px;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr auto;
}

.footer-grid > .footer-right {
  grid-area: 1 / 2 / 2 / 3;
}

.footer-grid > .footer-details {
  grid-area: 2 / 1 / 3 / 3;
  align-self: center;
}

@media screen and (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .footer-grid > .footer-right {
    grid-area: 2 / 1 / 3 / 2;
    justify-self: start;
  }

  .footer-grid > .footer-details {
    grid-area: 3 / 1 / 4 / 2;
    place-self: center stretch;
  }
}

/* The FAQ summaries are flex containers so the marker can sit at a fixed
   position, and `display: flex` on a <summary> removes the browser's own
   disclosure triangle. Without a replacement there is nothing to say the
   questions open, so draw one: a chevron that turns when the answer is out. */
.faq-list summary {
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary:before {
  content: "";
  border-right: 2px solid var(--lumin-glow);
  border-bottom: 2px solid var(--lumin-glow);
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: -3px;
  transition: transform .2s ease;
  transform: rotate(-45deg);
}

.faq-list details[open] summary:before {
  margin-top: 2px;
  transform: rotate(45deg);
}

.faq-list summary:focus-visible {
  outline: 2px solid var(--lumin-glow);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .faq-list summary:before {
    transition: none;
  }
}