/* ==========================================================================
   smobauelemente – Stylesheet
   Color world: light lilac + white
   ========================================================================== */

:root {
  /* Matched to the brand colors from the smobauelemente logo */
  --lilac-50: #f8f4fc;
  --lilac-100: #efe2fa;
  --lilac-200: #ddc6f2;
  --lilac-300: #bfa0dc;
  --lilac-400: #9c72c4;
  --lilac-500: #7c4aa8;
  --lilac-600: #5b2d84;
  --lilac-700: #3e1760;

  --camel-50: #faf5ec;
  --camel-100: #f2e5d4;
  --camel-300: #dcc4a8;
  --camel-500: #b79471;
  --camel-600: #9c723e;

  --ivy-50: #f2f5f1;
  --ivy-100: #e1e8de;
  --ivy-300: #8fa38c;
  --ivy-500: #4a5c48;
  --ivy-600: #334132;

  --ink: #2b2233;
  --muted: #6d6478;
  --white: #ffffff;
  --success: #2f8f5b;
  --error: #c14545;

  --font-base: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 12px 30px -14px rgba(94, 56, 148, 0.35);
  --container: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--lilac-300) var(--lilac-50);
  scrollbar-width: thin;
}

::selection {
  background: var(--lilac-300);
  color: var(--ink);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--lilac-50); }
::-webkit-scrollbar-thumb {
  background: var(--lilac-300);
  border-radius: 999px;
  border: 3px solid var(--lilac-50);
}
::-webkit-scrollbar-thumb:hover { background: var(--lilac-400); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--lilac-400);
  outline-offset: 2px;
}

[id] {
  scroll-margin-top: 100px;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
  /* Light download protection against right-click/drag "save image as" –
     deters casual users but is no real copy protection (see
     initImageProtection() in main.js for the right-click/drag part). */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

a {
  color: inherit;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 80px 0;
}

.section--alt {
  background: var(--lilac-50);
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lilac-600);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.eyebrow::before,
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.text-muted { color: var(--muted); }
.text-center { text-align: center; }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: linear-gradient(135deg, var(--lilac-500), var(--lilac-700));
  color: var(--white);
  box-shadow: var(--shadow);
}

.btn--primary:hover { box-shadow: 0 16px 34px -14px rgba(94, 56, 148, 0.5); }

.btn--ghost {
  background: transparent;
  border-color: var(--lilac-300);
  color: var(--lilac-700);
}

.btn--ghost:hover { background: var(--lilac-100); }

.btn--block { width: 100%; }

.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: btn-spin 0.7s linear infinite;
}

.btn--ghost .btn-spinner { border-color: rgba(94, 56, 148, 0.25); border-top-color: var(--lilac-700); }

.btn.is-loading { cursor: not-allowed; opacity: 0.85; pointer-events: none; }
.btn.is-loading .btn-spinner { display: inline-block; }

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Promo banner ----------------------------------------------------------- */

.promo-banner {
  background: linear-gradient(135deg, var(--camel-600), var(--camel-500));
  color: var(--white);
}

.promo-banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
}

.promo-banner-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
  color: var(--white);
  text-decoration: none;
}

.promo-banner-badge {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.promo-banner-text {
  font-size: 0.88rem;
  font-weight: 500;
}

.promo-banner-cta {
  flex-shrink: 0;
  font-weight: 700;
  text-decoration: underline;
}

.promo-banner-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.85;
}

.promo-banner-close:hover { opacity: 1; }

/* Promo section (homepage) ---------------------------------------------- */

.promo-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  background: linear-gradient(135deg, var(--camel-50), var(--white));
  border: 2px solid var(--camel-300);
  border-radius: var(--radius);
  padding: 40px;
}

.promo-conditions { margin: 20px 0; }

.promo-card-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  flex-shrink: 0;
  text-align: center;
  padding: 16px;
  border-radius: 50%;
  background: var(--camel-600);
  color: var(--white);
}

.promo-amount { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.promo-amount-label { display: block; font-size: 0.85rem; margin-top: 4px; }
.promo-days-left { display: block; font-size: 0.72rem; margin-top: 10px; opacity: 0.85; }

.promo-share {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.promo-share-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.promo-share-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.promo-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--camel-300);
  background: var(--white);
  color: var(--camel-600);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.promo-share-btn svg { width: 18px; height: 18px; }

.promo-share-btn:hover {
  background: var(--camel-600);
  color: var(--white);
  transform: translateY(-2px);
}

.promo-share-feedback {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: var(--ink);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.promo-share-feedback::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
}

.promo-share-feedback.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 720px) {
  .promo-card { grid-template-columns: 1fr; text-align: center; padding: 28px; }
  .promo-card-badge { margin: 0 auto; }
  .promo-share { justify-content: center; }
}

/* Promo note (contact page) --------------------------------------------- */

.promo-note {
  background: var(--camel-50);
  border: 1px solid var(--camel-300);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 24px;
  font-size: 0.9rem;
}

.promo-note strong { color: var(--camel-600); }

/* Header / Navigation ------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--lilac-100);
}

/* The blur background deliberately sits in a ::before instead of directly
   on .site-header: "backdrop-filter" on the header itself would create a new
   containing block for "position: fixed" child elements (the mobile menu)
   and squash its full-screen positioning down to 84px height. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  z-index: -1;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--ink);
}

.logo-img {
  height: 48px;
  width: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  background: var(--lilac-100);
  color: var(--lilac-700);
}

.nav-cta-mobile { display: none; }
.nav-cta-desktop { white-space: nowrap; }

/* Own class instead of .header-phone: this one should only appear in the
   side menu (<=900px) and must not be affected by the ".header-phone span
   { display:none }" rule for the icon-only state of the outer header. */
.nav-phone-mobile { display: none; }

/* Hover mega menu under "Produkte" -------------------------------------- */

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item-row {
  display: flex;
  align-items: center;
}

.nav-caret {
  width: 10px;
  height: 10px;
  transition: transform 0.15s ease;
}

/* Only used in the mobile accordion (<=900px, see below) to expand the
   categories without the "Produkte" link also navigating right away. From
   901px up it's hidden (see @media (min-width: 901px)): on real desktops
   hover already reveals the menu, and on touch devices without reliable
   hover (iPads, touch laptops) a first tap on "Produkte" itself now opens
   the menu instead (js: initMegaMenu() in main.js). */
.nav-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-caret-btn:hover,
.nav-caret-btn:focus-visible {
  background: var(--lilac-100);
  color: var(--lilac-700);
}

.nav-item.is-open .nav-caret-btn {
  background: var(--lilac-100);
  color: var(--lilac-700);
}

.nav-item.is-open .nav-caret {
  transform: rotate(180deg);
}

/* .nav-mega is the invisible hover zone: it starts seamlessly (top: 100%,
   no gap) right below the link, so the mouse never crosses a "dead zone"
   without a hover target while moving down. The visible card frame
   (background/shadow/animation) lives in the .nav-mega-inner child, which
   is visually offset via padding-top. */
.nav-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 200;
}

.nav-mega-inner {
  background: var(--white);
  border: 1px solid var(--lilac-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
  display: grid;
  grid-template-columns: repeat(3, 190px);
  gap: 24px;
  transform: translateY(-6px);
  transition: transform 0.15s ease;
}

/* From 901px there's enough room for the full desktop nav (see the breakpoint
   comment further down). Hover only opens the menu when the device can hover
   reliably (real mouse/trackpad) – on touch devices like a landscape iPad,
   the browser otherwise emulates hover on the first tap, which feels like a
   misclick. There, the click on .nav-caret-btn takes over instead (js: .is-open),
   see main.js initMegaMenu(). Keyboard focus (:focus-within) always works
   regardless of input device. */
@media (min-width: 901px) {
  .nav-caret-btn { display: none; }

  :root:not(.nav-tap-mode) .nav-item:hover .nav-caret,
  .nav-item:focus-within .nav-caret {
    transform: rotate(180deg);
  }

  :root:not(.nav-tap-mode) .nav-item:hover .nav-mega,
  .nav-item:focus-within .nav-mega,
  .nav-item.is-open .nav-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  :root:not(.nav-tap-mode) .nav-item:hover .nav-mega-inner,
  .nav-item:focus-within .nav-mega-inner,
  .nav-item.is-open .nav-mega-inner {
    transform: translateY(0);
  }
}

.nav-mega h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lilac-600);
  margin: 0 0 12px;
}

.nav-mega ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-mega a {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 8px;
  display: block;
}

.nav-mega a:hover {
  background: var(--lilac-50);
  color: var(--lilac-700);
}

.nav-mega-footer {
  grid-column: 1 / -1;
  border-top: 1px solid var(--lilac-100);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.nav-mega-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
}

.nav-mega-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}

.funding-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--camel-100);
  color: var(--camel-600);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.funding-badge svg {
  width: 10px;
  height: 10px;
}

.nav-mega a .funding-badge {
  margin-left: 4px;
  vertical-align: middle;
}

/* Category tags ------------------------------------------------------------ */

.tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.tag--lilac { background: var(--lilac-100); color: var(--lilac-700); }
.tag--camel { background: var(--camel-100); color: var(--camel-600); }
.tag--ivy { background: var(--ivy-100); color: var(--ivy-600); }
.tag--neutral { background: #ece8ee; color: var(--muted); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  color: var(--lilac-700);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  width: 26px;
  height: 3px;
  background: var(--ink);
  border-radius: 2px;
}

/* Between tablet landscape and small laptop windows (901-1100px), there's
   still enough width for the full desktop nav, but not for the spelled-out
   phone number as well – so only the icon remains here, the number is of
   course still linked (tel: link on the <a> element). */
@media (max-width: 1100px) {
  .header-phone span { display: none; }
  .nav { gap: 2px; }
  .nav a { padding: 10px 10px; }
  .header-actions { gap: 12px; }
  .nav-cta-desktop { padding: 12px 20px; font-size: 0.92rem; }
}

/* From here down (tablet portrait like iPad and narrower), there's no longer
   room for logo + full nav + phone number + CTA button in one row – so the
   header already switches fully to the mobile menu here instead of only at
   phone widths. Covers common tablet portrait widths (768-834px). */
@media (max-width: 900px) {
  /* Pins banner + header to the viewport top while the mobile menu is open
     (class + --promo-banner-h are set by initNavToggle in main.js), so the
     nav panel below always starts exactly beneath them regardless of scroll
     position or whether the promo banner is currently active. Both switch to
     "fixed" and leave the document flow, so body gets matching padding-top
     to stop the page content underneath from jumping up by that amount –
     only noticeable now that the narrower nav panel leaves page content
     visible beside it. */
  body.nav-pinned {
    padding-top: calc(var(--promo-banner-h, 0px) + 84px);
  }

  body.nav-pinned .promo-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
  }

  body.nav-pinned .site-header {
    position: fixed;
    top: var(--promo-banner-h, 0px);
    left: 0;
    right: 0;
  }

  .nav {
    position: fixed;
    top: calc(var(--promo-banner-h, 0px) + 84px);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(420px, 100vw);
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    gap: 4px;
    box-shadow: var(--shadow);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav a { padding: 14px 16px; }
  .nav-item { width: 100%; flex-wrap: wrap; }
  .nav-item > .nav-item-row {
    flex: 1 1 auto;
    justify-content: space-between;
  }
  .nav-caret-btn {
    width: 44px;
    height: 44px;
    margin-left: 5px;
    background: var(--lilac-50);
    border: 1px solid var(--lilac-100);
  }
  .nav-caret-btn .nav-caret { width: 14px; height: 14px; }

  /* On the current-page pill for "Produkte", the highlight otherwise only
     wraps the <a> text and stops right before the caret button, leaving it
     looking disconnected from the button's own lilac-50 chip. Scoping the
     background to .nav-item-row (link + button only, not .nav-mega, which
     is a separate sibling further down in .nav-item) lets the pill span the
     full row and stay put when the dropdown opens, instead of stretching
     into one giant oval around the whole open dropdown. */
  .nav-item-row:has(> a[aria-current="page"]) {
    background: var(--lilac-100);
    border-radius: 999px;
  }
  .nav-item-row:has(> a[aria-current="page"]) > a,
  .nav-item-row:has(> a[aria-current="page"]) > .nav-caret-btn {
    background: transparent;
    color: var(--lilac-700);
  }

  .nav-toggle { display: flex; }
  .nav-cta-desktop { display: none; }

  /* Below 901px, almost every device is touch-operated anyway and the
     nav becomes a full-width, stacked list – the hover-vs-touch question
     is irrelevant here, the mega menu expands as an accordion via a click
     on .nav-caret-btn under "Produkte" instead of appearing beside it. */
  .nav-mega {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    padding-top: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 0.25s ease;
    z-index: auto;
  }

  .nav-item.is-open .nav-mega {
    /* Well above the actual content height (6 product groups + footer,
       currently around 1600-1700px): otherwise overflow:hidden clips the
       footer/its rounded corners before they become visible. */
    max-height: 2400px;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-mega-inner {
    display: block;
    background: var(--lilac-50);
    border: none;
    box-shadow: none;
    border-radius: var(--radius);
    padding: 16px 16px 26px;
    margin: 4px 0 12px;
    transform: none;
  }

  .nav-mega-inner > div { margin-bottom: 16px; }
  .nav-mega-footer { border-top: 1px solid var(--lilac-200); }
  .nav-mega-footer-links { flex-direction: column; align-items: center; }
  .nav .nav-phone-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
  }
  .nav-phone-mobile-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-weight: 700;
    text-decoration: none;
    color: var(--lilac-700);
    white-space: nowrap;
  }
  .nav-phone-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--lilac-100);
    border-radius: 50%;
    background: var(--lilac-50);
    color: var(--lilac-700);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-phone-copy:hover,
  .nav-phone-copy:focus-visible {
    background: var(--lilac-100);
  }
  .nav-phone-copy.is-copied {
    background: var(--ivy-100);
    color: var(--ivy-600);
  }
  .nav a.nav-cta-mobile {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    color: var(--white);
  }

  .promo-banner-cta { display: none; }
  .promo-banner-text { font-size: 0.8rem; }
}

/* Hero ---------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--lilac-50) 0%, var(--white) 60%);
  padding: 44px 0 96px;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  width: 420px;
  height: 420px;
  background: var(--camel-300);
  opacity: 0.3;
  top: -140px;
  right: -80px;
}

.hero::after {
  width: 320px;
  height: 320px;
  background: var(--ivy-300);
  opacity: 0.22;
  bottom: -120px;
  left: 8%;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}

.hero-eyebrow {
  color: var(--lilac-600);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.hero-funding-link {
  margin-top: 18px;
}

.hero-trust {
  display: flex;
  gap: 28px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero-trust div {
  font-weight: 700;
  color: var(--lilac-700);
  font-size: 1.4rem;
}

.hero-trust-label {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Image placeholders --------------------------------------------------------
   Some products don't have a photo yet. These boxes deliberately mark
   visibly where real image material should go once it's available. */

.img-placeholder {
  background: linear-gradient(135deg, var(--lilac-100), var(--lilac-200));
  border: 1px dashed var(--lilac-400);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--lilac-700);
  gap: 10px;
  text-align: center;
  padding: 16px;
  min-height: 220px;
}

.img-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.7;
  transition: transform 0.25s ease;
}

.card:hover .img-placeholder svg { transform: scale(1.12); }

.img-placeholder span {
  font-size: 0.8rem;
  font-weight: 600;
}

.hero .img-placeholder {
  min-height: 380px;
  border-radius: 24px;
}

.hero-media img {
  width: 100%;
  height: auto;
  max-height: 720px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

/* USP strip ------------------------------------------------------------------ */

.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.usp-item {
  text-align: center;
  padding: 24px 16px;
}

.usp-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: var(--lilac-100);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lilac-700);
}

.usp-icon svg { width: 28px; height: 28px; }

.usp-item:nth-child(3n+2) .usp-icon { background: var(--camel-100); color: var(--camel-600); }
.usp-item:nth-child(3n+3) .usp-icon { background: var(--ivy-100); color: var(--ivy-600); }

/* Cards ----------------------------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--lilac-100);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  /* Own stable compositing layer for the rounded/clipped corners – without
     this, Chromium/WebKit sometimes rasterizes the clipped image area at
     lower quality, visible as slight pixelation of the tile (even without hover). */
  transform: translateZ(0);
}

.funding-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: var(--camel-600);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
  will-change: transform;
}

.card:hover .card-photo { transform: scale(1.04); }

.card-body {
  padding: 24px;
}

.card-body h3 {
  margin-bottom: 8px;
}

.card-title-link {
  color: inherit;
  text-decoration: none;
}

.card-title-link:hover { color: var(--lilac-600); }

.card-link {
  font-weight: 700;
  color: var(--lilac-600);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* Split section (image + text) -------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split.reverse .split-media { order: 2; }

.split-media { min-width: 0; }

.split-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}


/* Testimonials / references ----------------------------------------------------- */

.referenzen-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--lilac-200);
  background: var(--white);
  color: var(--lilac-700);
  font-weight: 600;
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.filter-chip:hover { background: var(--lilac-50); }

.filter-chip.is-active {
  background: linear-gradient(135deg, var(--lilac-500), var(--lilac-700));
  border-color: transparent;
  color: var(--white);
}

.referenzen-filter-count {
  margin-bottom: 32px;
  font-size: 0.9rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.gallery-photo {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  transform: translateZ(0);
}

.gallery-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  will-change: transform;
}

.gallery-photo:hover img { transform: scale(1.04); }

.gallery-photo-count {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  background: rgba(20, 16, 28, 0.72);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
}

.gallery-photo-zoom {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 34, 51, 0.28);
  color: var(--white);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gallery-photo-zoom svg { width: 30px; height: 30px; }

.gallery-photo:hover .gallery-photo-zoom,
.gallery-photo:focus-visible .gallery-photo-zoom { opacity: 1; }

.testimonial {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid var(--lilac-100);
}

.testimonial-quote {
  font-size: 1.05rem;
  font-style: italic;
  margin-bottom: 16px;
}

.testimonial-author {
  font-weight: 700;
  color: var(--lilac-700);
}

/* Product pages: features, process, FAQ --------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--lilac-50);
  border-radius: var(--radius);
  padding: 16px;
  font-weight: 600;
}

.feature-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lilac-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon svg { width: 15px; height: 15px; }

.funding-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--camel-50);
  border: 1px solid var(--camel-300);
  border-radius: var(--radius);
  padding: 16px;
  margin: 4px 0 24px;
  font-size: 0.92rem;
}

.funding-hint svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--camel-600);
}

.funding-hint a {
  color: var(--camel-600);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.funding-hint a:hover { text-decoration: underline; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process-step {
  text-align: center;
  padding: 24px 16px;
}

.process-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--lilac-100);
  color: var(--lilac-700);
  font-size: 1.3rem;
  font-weight: 800;
}

.process-step:nth-child(3n+2) .process-step-number { background: var(--camel-100); color: var(--camel-600); }
.process-step:nth-child(3n+3) .process-step-number { background: var(--ivy-100); color: var(--ivy-600); }

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--lilac-100);
  border-radius: var(--radius);
  padding: 8px 24px;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 28px 16px 0;
  font-weight: 700;
  position: relative;
}

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

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 16px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lilac-600);
}

.faq-item[open] summary::after { content: '−'; }

.faq-item p { padding-bottom: 16px; margin: 0; }

/* Funding page: BAFA/§35c comparison ------------------------------------ */

.funding-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.funding-card {
  background: var(--white);
  border: 1px solid var(--lilac-100);
  border-radius: var(--radius);
  padding: 32px;
}

.funding-figure {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--lilac-700);
  margin: 16px 0 8px;
}

.funding-figure--sm {
  font-size: 1.8rem;
  margin-top: 20px;
}

.funding-figure span {
  font-size: 0.5em;
  font-weight: 700;
  margin-left: 2px;
}

/* CTA banner ---------------------------------------------------------------- */

.cta-banner {
  background: linear-gradient(135deg, var(--lilac-600), var(--lilac-700));
  color: var(--white);
  border-radius: 28px;
  padding: 56px;
  text-align: center;
}

.cta-banner h2 { color: var(--white); }

.cta-banner .btn--ghost {
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--white);
}

.cta-banner .btn--ghost:hover { background: rgba(255, 255, 255, 0.15); }

.cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.cta-banner .btn--white {
  background: var(--white);
  color: var(--lilac-700);
}

.cta-banner .btn--white:hover { background: var(--lilac-50); }

/* Forms ----------------------------------------------------------------------- */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group.full { grid-column: 1 / -1; }

label { font-weight: 600; font-size: 0.9rem; }

input, textarea, select {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--lilac-200);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--lilac-500);
  box-shadow: 0 0 0 3px var(--lilac-100);
}

textarea { resize: vertical; min-height: 140px; }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--muted);
}

.checkbox-row input { width: auto; margin-top: 4px; }

.choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--lilac-200);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.choice input { width: auto; margin: 0; accent-color: var(--lilac-600); }

.choice:has(input:checked) {
  background: var(--lilac-100);
  border-color: var(--lilac-500);
  color: var(--lilac-700);
}

.form-honeypot { position: absolute; left: -9999px; opacity: 0; }

.alert {
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 24px;
  font-weight: 600;
}

.alert--success { background: #e5f5ec; color: var(--success); }
.alert--error { background: #fbe9e9; color: var(--error); }

/* Breadcrumbs ------------------------------------------------------------------ */

.breadcrumbs {
  background: var(--lilac-50);
  border-bottom: 1px solid var(--lilac-100);
  padding: 14px 0;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  color: var(--muted);
}

.breadcrumbs li:not(:last-child)::after {
  content: '/';
  color: var(--lilac-300);
  margin: 0 8px;
}

.breadcrumbs a {
  color: var(--lilac-600);
  text-decoration: none;
  font-weight: 600;
}

.breadcrumbs a:hover { text-decoration: underline; }

.breadcrumbs li:last-child span { color: var(--ink); font-weight: 600; }

/* Related products (chips) ---------------------------------------------------- */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--lilac-50);
  border: 1px solid var(--lilac-100);
  color: var(--lilac-700);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.chip:hover {
  background: var(--lilac-100);
  transform: translateY(-2px);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.related-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--lilac-100);
  border-radius: var(--radius);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.related-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--lilac-300);
}

.related-card-thumb {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  min-height: 0;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  transform: translateZ(0);
}

.related-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-card-thumb svg {
  width: 26px;
  height: 26px;
}

.related-card:hover .related-card-thumb svg { transform: scale(1.12); }

.related-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.related-card-title {
  font-weight: 700;
  color: var(--ink);
}

.related-card-teaser {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.4;
}

.region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.chip--static {
  cursor: default;
}

.chip--static:hover {
  transform: none;
  background: var(--lilac-50);
}

.chip--headquarters {
  background: var(--lilac-600);
  border-color: var(--lilac-600);
  color: var(--white);
  font-weight: 700;
}

.chip--headquarters:hover {
  background: var(--lilac-600);
}

.tag--link {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tag--link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px rgba(43, 34, 51, 0.35);
}

/* Page header (subpages) --------------------------------------------------- */

.page-header {
  background: var(--lilac-50);
  padding: 56px 0;
  text-align: center;
}

.page-header .eyebrow { justify-content: center; }

/* Footer ----------------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #d8d0e0;
  padding: 64px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid h4 {
  color: var(--white);
  margin-bottom: 16px;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-grid a {
  text-decoration: none;
  color: #d8d0e0;
}

.footer-grid a:hover { color: var(--white); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  font-size: 0.85rem;
  color: #a89bb8;
}

.footer-bottom a { color: #a89bb8; text-decoration: underline; }

/* Scroll reveal + form error states ---------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.field-error {
  border-color: var(--error) !important;
  box-shadow: 0 0 0 3px rgba(193, 69, 69, 0.15) !important;
}

/* Utilities -------------------------------------------------------------------- */

.mt-0 { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
ul.stack { list-style: none; padding: 0; margin: 0 0 1em; }
ul.stack li { color: var(--ink); }

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

@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  /* In the single-column layout, the hero photo at a 3:4 ratio would become
     very tall at full width and visually overpower the other (smaller) image
     placeholders on the page – so it's cropped flatter here. */
  .hero-media img { aspect-ratio: 4 / 3; max-height: 420px; }
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .usp-grid { grid-template-columns: 1fr 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 36px 24px; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  .feature-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .funding-grid { grid-template-columns: 1fr; }
  .lightbox { padding: 0; }
  .lightbox-dialog { max-height: 100vh; height: 100%; border-radius: 0; }
  .lightbox-media { border-radius: 0; }
  .lightbox-image { max-height: 42vh; }
  .lightbox-body { padding: 20px; }
  .lightbox-nav { width: 38px; height: 38px; }
}

/* Back-to-top --------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--lilac-500), var(--lilac-700));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 90;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover { transform: translateY(-2px); }
.back-to-top.is-visible:hover { transform: translateY(-2px); }

.back-to-top svg { width: 20px; height: 20px; }

/* Lightbox (reference photos) --------------------------------------------------------- */

body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox[hidden] { display: none; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 28, 0.72);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.is-open .lightbox-backdrop { opacity: 1; }

.lightbox-dialog {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius);
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lightbox.is-open .lightbox-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 16, 28, 0.55);
  color: var(--white);
  cursor: pointer;
}

.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-close:hover { background: rgba(20, 16, 28, 0.75); }

.lightbox-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  background: var(--ink);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 56vh;
  object-fit: contain;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 16, 28, 0.55);
  color: var(--white);
  cursor: pointer;
}

.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-nav:hover { background: rgba(20, 16, 28, 0.75); }
.lightbox-nav--prev { left: 14px; }
.lightbox-nav--next { right: 14px; }

/* .lightbox-nav/-counter set display:flex/inline-block as an author rule,
   which would otherwise override the native [hidden] behavior (user-agent stylesheet). */
.lightbox-nav[hidden],
.lightbox-counter[hidden] { display: none; }

.lightbox-counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 16, 28, 0.55);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}

.lightbox-body {
  padding: 28px 32px 32px;
}

.lightbox-title {
  margin: 0 0 8px;
}

.lightbox-description {
  color: var(--muted);
  margin: 0 0 24px;
}

.lightbox-products { margin-bottom: 24px; }

.lightbox-products-label {
  display: block;
  font-weight: 700;
  color: var(--lilac-600);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.lightbox-actions {
  display: flex;
  justify-content: flex-start;
}