/* ============================================================
   Get it Done — modern design overlay
   Loaded after the Webflow stylesheet to retheme without forking
   the generated CSS. Brand colors preserved (green #07ad91,
   warm orange #f18400, slate ink), upgraded with:
     • Fluid type (clamp) + Inter Variable for UI text
     • Layered surfaces (glass, edge, glow)
     • Gradient mesh + dot-grid backgrounds
     • Motion primitives (reveal, magnetic, ticker)
     • Net-new sections styled from scratch (vision, scale,
       capability pillars, segment chooser v2)
   The classes that begin with `gid-` are entirely new and
   defined here. Webflow class overrides are scoped via
   `:where()` so they keep low specificity and can be tweaked
   per-page when needed.
   ============================================================ */

/* ----- 1. Design tokens ------------------------------------- */
:root {
  /* Brand */
  --gid-green: #07ad91;
  --gid-green-bright: #0fd9b6;
  --gid-green-deep: #04806b;
  --gid-orange: #f18400;
  --gid-orange-bright: #ffae3d;

  /* Neutrals — premium dark */
  --gid-ink: #0a0d14;
  --gid-ink-2: #0f131c;
  --gid-surface: #151a25;
  --gid-surface-2: #1c2231;
  --gid-edge: rgba(255, 255, 255, 0.08);
  --gid-edge-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --gid-text: rgba(255, 255, 255, 0.94);
  --gid-text-soft: rgba(255, 255, 255, 0.76);
  --gid-muted: rgba(255, 255, 255, 0.58);
  --gid-dim: rgba(255, 255, 255, 0.40);

  /* Light surfaces (for light sections) */
  --gid-paper: #f6f8fb;
  --gid-paper-2: #ffffff;
  --gid-ink-on-paper: #0a0d14;
  --gid-text-on-paper: #2a2d34;

  /* Radii / spacing */
  --gid-r-sm: 10px;
  --gid-r-md: 18px;
  --gid-r-lg: 28px;
  --gid-r-pill: 999px;

  /* Shadows */
  --gid-shadow-soft: 0 10px 40px -20px rgba(0, 0, 0, 0.55),
                     0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --gid-shadow-lift: 0 24px 60px -28px rgba(0, 0, 0, 0.65),
                     0 4px 10px -4px rgba(0, 0, 0, 0.45);
  --gid-glow-green: 0 0 50px -10px rgba(7, 173, 145, 0.45);
  --gid-glow-orange: 0 0 50px -10px rgba(241, 132, 0, 0.45);

  /* Motion */
  --gid-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gid-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Fluid type ramp */
  --gid-fz-display: clamp(2.6rem, 1.4rem + 5.8vw, 6.5rem);
  --gid-fz-h1:      clamp(2.2rem, 1.4rem + 3.6vw, 4.5rem);
  --gid-fz-h2:      clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  --gid-fz-h3:      clamp(1.35rem, 1rem + 1.4vw, 1.9rem);
  --gid-fz-lead:    clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  --gid-fz-body:    clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem);
  --gid-fz-eyebrow: 0.78rem;

  /* Layout */
  --gid-container: min(1240px, 92vw);
}

/* ----- 2. Inter Variable (modern body font) ----------------- */
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://rsms.me/inter/font-files/InterVariable.woff2?v=4.0')
       format('woff2-variations');
}

/* ----- 3. Base body retheme --------------------------------- */
html { scroll-behavior: smooth; }

body,
body.body-2,
body.body-3,
body.body-4,
body.body-7,
body[class*="body-"] {
  background: var(--gid-ink);
  color: var(--gid-text);
  font-family: 'InterVariable', 'Inter', 'Archivo', system-ui, -apple-system,
               'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  font-size: var(--gid-fz-body);
  line-height: 1.6;
}

/* Make the legacy Webflow paragraphs feel more readable */
:where(p, .paragraph, .paragraph-light, .paragraph-3, .paragraph-4,
       .paragraph-5, .paragraph-6, .paragraph-7, .paragraph-8) {
  font-family: inherit;
  font-size: var(--gid-fz-body);
  line-height: 1.65;
  color: var(--gid-text-soft);
}

/* Display headings continue to use Oswald for character continuity */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: 'Oswald', 'InterVariable', sans-serif;
  letter-spacing: -0.01em;
  color: var(--gid-text);
}

/* Smooth, modern link defaults */
:where(a) {
  transition: color 200ms var(--gid-ease),
              opacity 200ms var(--gid-ease);
}

/* Selection */
::selection {
  background: var(--gid-green);
  color: var(--gid-ink);
}

/* Hide the Webflow image overlay on the hero that dims everything */
.background-video-overlay,
.bg-overlay-2 {
  display: none !important;
}

/* ----- 4. Reusable utility surfaces ------------------------- */
.gid-container {
  width: var(--gid-container);
  margin-inline: auto;
}

.gid-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: var(--gid-fz-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gid-green-bright);
}
.gid-eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--gid-green-bright), transparent);
}

.gid-glass {
  background: linear-gradient(180deg,
              rgba(255,255,255,0.04),
              rgba(255,255,255,0.015));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Dotted-grid background, used as a layer behind hero/sections */
.gid-dotgrid {
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
}

/* ----- 5. Modern navbar ------------------------------------- */
.navbar---header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  /* Fully transparent at the top of the page so the hero gradient
     flows behind the navbar with no visible seam. Glass + border
     fade in once the user scrolls (.gid-scrolled). The Webflow rule
     sets a dark rgba bg with higher specificity than :where(),
     so we use a plain selector + !important. */
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid transparent;
  transition: background 250ms var(--gid-ease),
              backdrop-filter 250ms var(--gid-ease),
              -webkit-backdrop-filter 250ms var(--gid-ease),
              border-color 250ms var(--gid-ease),
              padding 250ms var(--gid-ease);
  padding-block: 14px;
}
.gid-scrolled .navbar---header,
.navbar---header.gid-scrolled {
  background: rgba(10, 13, 20, 0.86) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  border-bottom-color: var(--gid-edge);
  padding-block: 8px;
}

/* Push body content below the now-fixed navbar (all body class variants) */
body.body-2,
body.body-3,
body.body-4,
body.body-7,
body[class*="body-"] { padding-top: 84px; }
@media (max-width: 767px) {
  body.body-2,
  body.body-3,
  body.body-4,
  body.body-7,
  body[class*="body-"] { padding-top: 76px; }
}

/* Pull every page's first hero section up behind the fixed navbar so
   the body's 84px padding-top doesn't show as a black band above the
   hero. The hero's own background then fills the area behind the
   (transparent) navbar — matching the index page's behaviour. Also
   neutralises the legacy `margin-top: 64px` Webflow puts on most
   secondary heroes. Scoped to the body classes that get padding-top —
   pages without a body class never had the band and the negative
   margin would push their hero behind the navbar. */
body[class*="body-"] > section:first-of-type {
  margin-top: -84px !important;
}
@media (max-width: 767px) {
  body[class*="body-"] > section:first-of-type {
    margin-top: -76px !important;
  }
}

:where(.navbarcontainer) {
  width: var(--gid-container);
  max-width: none;
  display: flex;
  align-items: center;
}
:where(.navbar-content) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
:where(.navbar-menu-mobile) {
  display: flex;
  align-items: center;
  gap: 6px;
}
:where(.navbar-link.w-nav-link) {
  position: relative;
  padding: 10px 14px;
  border-radius: var(--gid-r-pill);
  font-family: 'InterVariable', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--gid-text-soft);
  transition: color 180ms var(--gid-ease),
              background 180ms var(--gid-ease);
}
:where(.navbar-link.w-nav-link):hover {
  color: var(--gid-text);
  background: rgba(255,255,255,0.06);
}
:where(.navbar-link.w-nav-link.w--current),
:where(.navbar-link.w-nav-link[aria-current="page"]) {
  color: var(--gid-text);
  background: rgba(7, 173, 145, 0.14);
  box-shadow: inset 0 0 0 1px rgba(7, 173, 145, 0.35);
}
:where(.kunden-tab-default-white-copy,
       .b2b-tab-default-white-copy,
       .partner-tab-default-white,
       .team-tab-default-white,
       .login-dropdown-text-white) {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
}
:where(.dropdown.w-dropdown) {
  margin-left: 8px;
}
:where(.dropdown-login-default-white.w-dropdown-toggle) {
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--gid-green), var(--gid-green-deep));
  color: white;
  border-radius: var(--gid-r-pill);
  font-weight: 600;
  box-shadow: var(--gid-glow-green);
  transition: transform 180ms var(--gid-ease),
              box-shadow 180ms var(--gid-ease);
}
:where(.dropdown-login-default-white.w-dropdown-toggle):hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(7,173,145,0.18), var(--gid-glow-green);
}
:where(.dropdown-list.w-dropdown-list) {
  background: rgba(15, 19, 28, 0.96);
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-md);
  padding: 6px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--gid-shadow-lift);
}
:where(.dropdown-link-mobile, .dropdown-link-2-mobile) {
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--gid-text-soft);
  transition: background 160ms var(--gid-ease), color 160ms var(--gid-ease);
}
:where(.dropdown-link-mobile, .dropdown-link-2-mobile):hover {
  background: rgba(255,255,255,0.06);
  color: var(--gid-text);
}

/* Infra dropdown: close the 5px gap between toggle and list so the cursor
   doesn't leave the hit area while traversing it. Webflow renders the list
   with margin-top:5px below the toggle — that gap fires mouseout and the
   dropdown collapses before the user reaches the items. Replace the margin
   with padding so the visible items stay where they were but the list
   element itself touches the toggle, keeping the hit area continuous. */
.infra-dropdown .infra-dropdown__list.w-dropdown-list {
  margin-top: 0 !important;
  padding-top: 13px;
}

/* Mobile dropdown: Webflow keeps the list absolute-positioned even inside
   the mobile menu overlay, so it covers the sibling links below it and
   the user can't reach them without closing the submenu first. Below the
   navbar's "medium" collapse breakpoint (991px), let the submenu expand
   inline: drop the panel chrome, push siblings down. The mobile menu
   chrome is white, so keep sub-item text dark to match the rest. */
@media (max-width: 991px) {
  .infra-dropdown .infra-dropdown__list.w-dropdown-list {
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 0 8px 18px !important;
    margin: 0 !important;
  }
  .infra-dropdown .infra-dropdown__list .dropdown-link-mobile {
    display: block;
    padding: 10px 12px;
    color: #1a1a1a;
    font-size: 0.95rem;
    line-height: 1.3;
    border-radius: 6px;
    white-space: normal;
  }
  .infra-dropdown .infra-dropdown__list .dropdown-link-mobile:hover,
  .infra-dropdown .infra-dropdown__list .dropdown-link-mobile.w--current {
    background: rgba(7,173,145,0.10);
    color: #00866d;
  }
  /* Caret affordance on mobile so users know the row expands. */
  .infra-dropdown > .w-dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 10px;
    vertical-align: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 180ms var(--gid-ease);
  }
  .infra-dropdown > .w-dropdown-toggle.w--open::after {
    transform: rotate(-135deg);
    vertical-align: -1px;
  }
}

/* Logo: make it crisp on the new translucent navbar */
:where(.link-block-4) img,
:where(.footer-brand-2) img { filter: drop-shadow(0 1px 0 rgba(0,0,0,0.2)); }

/* Mobile menu button */
:where(.menu-button-3.w-nav-button) {
  background: transparent;
  color: var(--gid-text);
  border-radius: 12px;
}

/* ----- 6. Buttons ------------------------------------------- */
:where(.button-home-hero-cta.w-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 26px;
  border-radius: var(--gid-r-pill);
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-transform: none;
  background: linear-gradient(135deg, var(--gid-green), var(--gid-green-deep));
  color: white;
  border: none;
  box-shadow: var(--gid-glow-green), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 180ms var(--gid-ease),
              box-shadow 200ms var(--gid-ease),
              filter 200ms var(--gid-ease);
  position: relative;
  overflow: hidden;
}
:where(.button-home-hero-cta.w-button)::after {
  content: '→';
  font-size: 1.05em;
  transition: transform 220ms var(--gid-ease);
}
:where(.button-home-hero-cta.w-button):hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 4px rgba(7,173,145,0.18),
              0 20px 50px -15px rgba(7,173,145,0.55);
}
:where(.button-home-hero-cta.w-button):hover::after {
  transform: translateX(4px);
}
/* Second/third CTA variants — outline glass */
.hero-homepage-cta .cta-button-wrapper a:nth-child(2),
.hero-homepage-cta .cta-button-wrapper a:nth-child(3) {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--gid-edge-strong);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-homepage-cta .cta-button-wrapper a:nth-child(2):hover,
.hero-homepage-cta .cta-button-wrapper a:nth-child(3):hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.28);
  box-shadow: none;
}
.hero-homepage-cta .cta-button-wrapper a:nth-child(3) {
  background: linear-gradient(135deg, var(--gid-orange), #ce6c00);
  border-color: transparent;
  box-shadow: var(--gid-glow-orange), inset 0 1px 0 rgba(255,255,255,0.18);
}
.hero-homepage-cta .cta-button-wrapper a:nth-child(3):hover {
  background: linear-gradient(135deg, var(--gid-orange-bright), var(--gid-orange));
  filter: brightness(1.06);
  box-shadow: 0 0 0 4px rgba(241,132,0,0.18),
              0 20px 50px -15px rgba(241,132,0,0.55);
}

/* ----- 7. Hero section -------------------------------------- */
/* The Webflow CSS sets a `background-image: linear-gradient(...), url(...)`
   on `.hero-homepage-cta`. We need to override both the image and the
   shorthand bits with full specificity so the modern gradient mesh wins. */
.hero-homepage-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--gid-ink) !important;
  background-image:
    radial-gradient(60% 60% at 15% 15%, rgba(7,173,145,0.22) 0%, transparent 60%),
    radial-gradient(50% 60% at 85% 30%, rgba(15,217,182,0.16) 0%, transparent 60%),
    radial-gradient(80% 70% at 50% 110%, rgba(241,132,0,0.14) 0%, transparent 60%),
    linear-gradient(180deg, #0a0d14 0%, #0f131c 100%) !important;
  background-position: 0 0 !important;
  background-size: auto, auto, auto, auto !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-attachment: scroll !important;
  /* Pull the hero up under the fixed navbar so the gradient fills the
     84px area now occupied by body's padding-top (otherwise the body's
     plain dark color shows through and the green/orange tints create
     a visible seam at the navbar boundary). */
  margin-top: -84px !important;
  padding: calc(clamp(80px, 8vw, 140px) + 84px) 0 clamp(80px, 8vw, 120px) !important;
}
@media (max-width: 767px) {
  .hero-homepage-cta {
    margin-top: -76px !important;
    padding-top: calc(clamp(80px, 8vw, 140px) + 76px) !important;
  }
}
:where(.hero-homepage-cta)::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(60% 60% at 50% 30%, black, transparent 80%);
  pointer-events: none;
}
:where(.hero-homepage-cta)::after {
  content: '';
  position: absolute; left: 50%; top: -10%;
  width: 80vw; height: 60vw; max-width: 1400px; max-height: 1000px;
  transform: translateX(-50%);
  background: conic-gradient(from 220deg at 50% 50%,
              rgba(7,173,145,0.18),
              rgba(15,217,182,0.06) 30%,
              transparent 60%,
              rgba(241,132,0,0.10) 80%,
              rgba(7,173,145,0.18));
  filter: blur(70px);
  opacity: 0.7;
  pointer-events: none;
}
:where(.hero-homepage-cta) .contact-container,
:where(.hero-homepage-cta) .hero-wrapper-two {
  position: relative;
  z-index: 1;
}
:where(.hero-homepage-cta) .contact-container {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}
:where(.hero-homepage-cta) .hero-wrapper-two {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

/* Eyebrow above the display */
:where(.hero-homepage-cta) .heading-2 {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 auto 6px;
  padding: 8px 14px;
  font-family: 'InterVariable', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gid-green-bright);
  background: rgba(7,173,145,0.10);
  border: 1px solid rgba(7,173,145,0.35);
  border-radius: var(--gid-r-pill);
}
:where(.hero-homepage-cta) .heading-2::before {
  content: '●';
  font-size: 0.55em;
  color: var(--gid-green-bright);
  animation: gid-pulse 2.2s ease-in-out infinite;
}
/* Two-line eyebrow: primary identity on top, value-prop line below
   in a slightly softer weight so it reads as a sub-claim. The two
   spans are nested in .gid-eyebrow-stack so the pulse dot ::before
   stays aligned to the left of the whole stack. */
.hero-homepage-cta .heading-2 .gid-eyebrow-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.hero-homepage-cta .heading-2 .gid-eyebrow-l1 {
  font-weight: 600;
  letter-spacing: 0.22em;
}
.hero-homepage-cta .heading-2 .gid-eyebrow-l2 {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.78);
}
@keyframes gid-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.3); }
}

:where(.hero-homepage-cta) .charge-up-tomorrow-heading {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: var(--gid-fz-display);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #d9e7e3 60%, #94c5b9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(7,173,145,0.25);
}

:where(.hero-homepage-cta) .heading-untertitel {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: clamp(1.2rem, 0.9rem + 1.4vw, 2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gid-text-soft);
}

:where(.hero-homepage-cta) .homepage-paragraph {
  max-width: 62ch;
  margin: 6px auto 8px;
  font-size: var(--gid-fz-lead);
  line-height: 1.6;
  color: var(--gid-text-soft);
}

:where(.hero-homepage-cta) .cta-button-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

:where(.hero-homepage-cta) .div-block-9 {
  margin-top: 60px;
}
:where(.hero-homepage-cta) .heading-green-cap {
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gid-muted);
}

/* Customer logo strip — modernize spacing */
:where(.hero-homepage-cta) .logo-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 64px);
  margin-top: 18px;
  opacity: 0.85;
}
:where(.hero-homepage-cta) .logo-wrapper img {
  height: clamp(22px, 1.4vw + 0.8rem, 32px);
  width: auto;
  max-width: 160px;
  filter: brightness(0) invert(1) opacity(0.7);
  transition: filter 220ms var(--gid-ease), opacity 220ms var(--gid-ease);
}
:where(.hero-homepage-cta) .logo-wrapper img:hover {
  filter: brightness(0) invert(1) opacity(1);
}
:where(.hero-homepage-cta) .hero-wrapper-two > img {
  margin-top: 14px;
  height: clamp(28px, 1.6vw + 1rem, 40px);
  width: auto;
  filter: brightness(0) invert(1) opacity(0.7);
}

/* ----- 7b. Sub-page heroes ---------------------------------- */
/* Every secondary page has its own hero class with a different photo
   background. We keep the photos (on-brand) but normalize the
   muddy overlay to a strong bottom-up dark fade for legibility. */
:where(.hero-unternehmen,
       .hero-kunden,
       .hero-kunden-dark,
       .hero-kunden-bright,
       .hero-kunden-notar-enerando,
       .hero-kunden-elli,
       .hero-partners,
       .team-hero,
       .blog-hero-homepage) {
  position: relative;
  isolation: isolate;
  background-color: var(--gid-ink);
  background-blend-mode: normal;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  margin-top: 0 !important;
  padding: clamp(80px, 8vw, 140px) 0 clamp(60px, 6vw, 100px) !important;
  min-height: 460px;
  overflow: hidden;
}
:where(.hero-unternehmen,
       .hero-kunden,
       .hero-kunden-dark,
       .hero-kunden-bright,
       .hero-kunden-notar-enerando,
       .hero-kunden-elli,
       .hero-partners,
       .blog-hero-homepage)::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    /* Left scrim — anchors a dark band under the left-aligned hero copy so
       white text stays legible even where the photo has bright/white areas
       (sky, white walls, light facades). Fades out to the right so the
       photo subject stays visible. */
    linear-gradient(90deg,
                    rgba(10,13,20,0.88) 0%,
                    rgba(10,13,20,0.78) 32%,
                    rgba(10,13,20,0.50) 56%,
                    rgba(10,13,20,0.20) 80%,
                    rgba(10,13,20,0.04) 100%),
    /* Vertical — darken under the navbar, hold a mid floor so bright photos
       don't blow out behind the copy, and fade into the ink base. */
    linear-gradient(180deg,
                    rgba(10,13,20,0.55) 0%,
                    rgba(10,13,20,0.38) 42%,
                    rgba(10,13,20,0.80) 90%,
                    var(--gid-ink) 100%);
}
/* team-hero is center-aligned, so it gets a symmetric vertical darkening
   rather than the left scrim used for the left-aligned heroes. */
:where(.team-hero)::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
                    rgba(10,13,20,0.62) 0%,
                    rgba(10,13,20,0.46) 45%,
                    rgba(10,13,20,0.82) 90%,
                    var(--gid-ink) 100%);
}
:where(.hero-unternehmen,
       .hero-kunden,
       .hero-partners,
       .team-hero,
       .blog-hero-homepage)::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(7,173,145,0.16) 0%, transparent 60%),
    radial-gradient(50% 60% at 80% 70%, rgba(241,132,0,0.10) 0%, transparent 60%);
}

/* Hero text containers — use the same container width as the rest */
:where(.hero-unternehmen .container-3,
       .hero-unternehmen .container-4,
       .hero-unternehmen .container-5,
       .hero-kunden .container-7,
       .hero-kunden-bottom .container-8,
       .hero-partners .container-3,
       .team-hero .container-8,
       .blog-hero-homepage .container-6) {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}

/* Generic display headings used across hero sections.
   The Webflow .heading-untertitel rule sets letter-spacing: 13px,
   which makes hero titles wrap badly — we override with !important. */
.hero-unternehmen :where(h1),
.hero-partners :where(h1),
.hero-kunden :where(h1),
.team-hero :where(h1),
.blog-hero-homepage :where(h1) {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  background: linear-gradient(180deg, #ffffff 0%, #cfe2dd 70%, #94c5b9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 60px rgba(7,173,145,0.25);
  margin-top: 0;
  text-align: left;
  /* Reset Webflow's text-shadow stacking on .heading-untertitel */
  text-shadow: 0 0 60px rgba(7,173,145,0.25) !important;
}

/* Hero copy legibility insurance — a soft shadow keeps the eyebrow, lead and
   bullets readable where the photo runs bright at the right edge of the text
   column (the left scrim in ::before handles the rest). Image-agnostic and
   doesn't darken the photo. Pages with their own tuning (e.g. .weg-hero) keep
   their stronger shadows since those rules are more specific. */
:where(.gid-uk-eyebrow, .gid-sp-eyebrow,
       .gid-uk-lead, .gid-sp-lead,
       .gid-uk-hero .gid-uk-trust,
       .gid-sp-hero-bullets, .gid-sp-hero-scope-note,
       .gid-sp-trust, .gid-uk-trust-label, .gid-sp-trust-label) {
  text-shadow: 0 1px 6px rgba(8,11,18,0.55);
}

/* hero-kunden-bottom is a 2nd hero band on the kunden page */
:where(.hero-kunden-bottom, .hero-kunden-top) {
  background: var(--gid-ink) !important;
  padding-block: clamp(40px, 4vw, 80px);
  margin: 0 !important;
}

/* ----- 8. Generic dark-section retheme ---------------------- */
:where(.hero-additional,
       .wir-installieren-section,
       .process-quality-assurance-section,
       .cards-cta) {
  background: var(--gid-ink);
  position: relative;
}
:where(.hero-additional) {
  padding-block: clamp(60px, 6vw, 110px);
}
:where(.hero-additional .container-2) {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}
:where(.hero-additional .hero-wrapper-two-2) {
  display: flex; flex-direction: column; gap: 16px;
  max-width: 80ch;
}
:where(.heading-green-cap.var-2) {
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gid-green-bright);
}
:where(.margin-bottom-24px.var-2text) {
  font-size: var(--gid-fz-lead);
  line-height: 1.7;
  color: var(--gid-text-soft);
}

/* ----- 9. Segment-chooser cards (3 cards on home) ----------- */
/* The original Webflow stylesheet sets photo backgrounds on .card-1/2/3.
   We keep the photos (they're charging-station shots, very on-brand)
   but override the muddy double-gradient overlay with a clean bottom-up
   dark fade so eyebrow + CTA are razor-sharp. */
:where(.cards-cta) {
  padding-block: clamp(60px, 6vw, 100px);
  background: var(--gid-ink);
}
:where(.cards-cta .homepage-cards-cta) {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}
:where(.cards-cta .cards-homepage-wrapper) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.cards-cta .card-wrapper {
  position: relative;
  min-height: 380px;
  padding: 28px !important;
  border-radius: var(--gid-r-lg) !important;
  border: 1px solid var(--gid-edge) !important;
  overflow: hidden;
  /* Preserve the original Webflow `background-image: url(...)` (the photo);
     remove the muddy overlays by inserting a clean dark gradient on top. */
  background-blend-mode: normal;
  background-position: 50% !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch !important;
  isolation: isolate;
  transition: transform 320ms var(--gid-ease),
              border-color 320ms var(--gid-ease),
              box-shadow 320ms var(--gid-ease);
}
.cards-cta .card-wrapper::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
                    rgba(10,13,20,0.55) 0%,
                    rgba(10,13,20,0.20) 35%,
                    rgba(10,13,20,0.65) 75%,
                    rgba(10,13,20,0.92) 100%);
  transition: background 320ms var(--gid-ease);
}
.cards-cta .card-wrapper::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(135deg,
              rgba(7,173,145,0.0) 0%,
              rgba(7,173,145,0.0) 60%,
              rgba(7,173,145,0.45) 110%);
  opacity: 0;
  transition: opacity 320ms var(--gid-ease);
}
.cards-cta .card-wrapper:hover {
  transform: translateY(-6px);
  border-color: rgba(7,173,145,0.55) !important;
  box-shadow: var(--gid-shadow-lift), 0 30px 60px -25px rgba(7,173,145,0.35);
}
.cards-cta .card-wrapper:hover::before {
  background:
    linear-gradient(180deg,
                    rgba(10,13,20,0.40) 0%,
                    rgba(10,13,20,0.05) 35%,
                    rgba(10,13,20,0.55) 75%,
                    rgba(10,13,20,0.95) 100%);
}
.cards-cta .card-wrapper:hover::after { opacity: 1; }

.cards-cta .heading-5 {
  font-family: 'InterVariable', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: white !important;
  margin: 0 !important;
  align-self: flex-start;
  padding: 8px 14px;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--gid-r-pill);
}
.cards-cta .link-block-17,
.cards-cta .link-block-18,
.cards-cta .link-block-19 {
  text-decoration: none;
  display: block;
  margin-top: auto;
}
.cards-cta .card-signup-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.cards-cta .card-heading-homepage {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem) !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: white !important;
  margin: 0 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.cards-cta .image-29 {
  width: 44px !important;
  height: 44px !important;
  padding: 12px !important;
  border-radius: 50% !important;
  background: var(--gid-green) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 8px 20px -8px rgba(7,173,145,0.6);
  transition: transform 240ms var(--gid-ease),
              background 240ms var(--gid-ease);
}
.cards-cta .card-wrapper:hover .image-29 {
  background: white !important;
  filter: brightness(0) saturate(100%) invert(45%) sepia(96%) saturate(2410%) hue-rotate(140deg) brightness(95%) contrast(96%);
  transform: translateX(8px);
}

/* ----- 10. "Wir installieren produkte von" ticker ----------- */
:where(.wir-installieren-section) {
  padding-block: clamp(60px, 6vw, 110px);
  background: var(--gid-ink-2);
  border-top: 1px solid var(--gid-edge);
  border-bottom: 1px solid var(--gid-edge);
}
:where(.wir-installieren-section .products-hersteller) {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
  display: flex; flex-direction: column; gap: 22px;
  align-items: flex-start;
}
:where(.wir-installieren-section .logo-wrapper) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
:where(.wir-installieren-section .product-brand) {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gid-text-soft);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-pill);
  transition: transform 200ms var(--gid-ease),
              border-color 200ms var(--gid-ease),
              color 200ms var(--gid-ease);
}
:where(.wir-installieren-section .product-brand):hover {
  color: var(--gid-text);
  border-color: rgba(7,173,145,0.45);
  transform: translateY(-2px);
}

/* ----- 11. Process / quality-assurance section -------------- */
:where(.process-quality-assurance-section) {
  padding-block: clamp(80px, 8vw, 140px);
  background:
    radial-gradient(50% 50% at 90% 10%, rgba(7,173,145,0.10) 0%, transparent 60%),
    var(--gid-ink);
}
:where(.process-quality-assurance-section .container-13) {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}
:where(.process-quality-assurance-section .hero-wrapper-5) {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 900px) {
  :where(.process-quality-assurance-section .hero-wrapper-5) {
    grid-template-columns: 1fr;
  }
}
:where(.process-quality-assurance-section .hero-split-5) {
  display: flex; flex-direction: column; gap: 18px;
}
:where(.process-quality-assurance-section .shadow-two-5) {
  width: 100%;
  height: auto;
  border-radius: var(--gid-r-lg);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
:where(.heading-green-cap-middle) {
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gid-green-bright);
}
:where(.process-quality-text) {
  font-size: var(--gid-fz-body);
  line-height: 1.75;
  color: var(--gid-text-soft);
  max-width: 62ch;
}

/* ----- 12. Footer ------------------------------------------- */
:where(.footer-dark-2) {
  padding: clamp(60px, 6vw, 100px) 0 32px;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(7,173,145,0.08) 0%, transparent 60%),
    #06080d;
  border-top: 1px solid var(--gid-edge);
}
:where(.footer-dark-2 .footer-container) {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}
:where(.footer-dark-2 .footer-wrapper-2) {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: clamp(28px, 3vw, 48px);
  align-items: start;
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--gid-edge);
}
@media (max-width: 900px) {
  :where(.footer-dark-2 .footer-wrapper-2) {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  :where(.footer-dark-2 .footer-wrapper-2) {
    grid-template-columns: 1fr;
  }
}
:where(.footer-dark-2 .footer-brand-2) {
  display: inline-block;
}
:where(.footer-dark-2 .footer-content-2) {
  display: contents;
}
:where(.footer-dark-2 .footer-block-2) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(.footer-dark-2 .footer-link-2) {
  color: var(--gid-text-soft);
  text-decoration: none;
  font-size: 0.94rem;
  width: fit-content;
  position: relative;
  transition: color 180ms var(--gid-ease), transform 180ms var(--gid-ease);
}
:where(.footer-dark-2 .footer-link-2):hover {
  color: var(--gid-green-bright);
  transform: translateX(2px);
}
:where(.footer-dark-2 .footer-social-block-2) {
  display: flex;
  gap: 10px;
}
:where(.footer-dark-2 .footer-social-link-2) {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--gid-edge);
  border-radius: 50%;
  transition: background 180ms var(--gid-ease),
              border-color 180ms var(--gid-ease),
              transform 180ms var(--gid-ease);
}
:where(.footer-dark-2 .footer-social-link-2):hover {
  background: rgba(7,173,145,0.18);
  border-color: rgba(7,173,145,0.5);
  transform: translateY(-2px);
}
:where(.footer-dark-2 .footer-social-link-2) img {
  width: 18px; height: 18px;
}
:where(.footer-dark-2 .footer-copyright-center) {
  padding-top: 24px;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--gid-dim);
}

/* ----- 13. NEW: Vision / scale section ---------------------- */
.gid-vision {
  position: relative;
  padding: clamp(90px, 9vw, 160px) 0;
  background: var(--gid-ink);
  overflow: hidden;
}
.gid-vision::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(80% 80% at 50% 50%, black, transparent 100%);
  opacity: 0.7;
  pointer-events: none;
}
.gid-vision::after {
  content: '';
  position: absolute;
  width: 720px; height: 720px;
  left: 50%; top: -200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7,173,145,0.25) 0%, transparent 60%);
  filter: blur(80px);
  pointer-events: none;
}
.gid-vision .gid-container { position: relative; z-index: 1; }
.gid-vision__head {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 60ch;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.gid-vision__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: var(--gid-fz-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--gid-text);
  margin: 0;
}
.gid-vision__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gid-green-bright), var(--gid-green) 50%, var(--gid-orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gid-vision__lead {
  font-size: var(--gid-fz-lead);
  line-height: 1.6;
  color: var(--gid-text-soft);
  margin: 0;
}

.gid-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gid-edge);
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
  overflow: hidden;
}
@media (max-width: 900px) {
  .gid-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gid-stats { grid-template-columns: 1fr; }
}
.gid-stat {
  padding: clamp(24px, 3vw, 36px);
  background: var(--gid-surface);
  display: flex; flex-direction: column; gap: 8px;
  transition: background 240ms var(--gid-ease);
}
.gid-stat:hover {
  background: var(--gid-surface-2);
}
.gid-stat__value {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gid-text);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.gid-stat__value sup {
  font-size: 0.45em;
  color: var(--gid-green-bright);
  font-weight: 600;
  margin-left: 2px;
  vertical-align: super;
}
.gid-stat__label {
  font-family: 'InterVariable', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gid-muted);
}
.gid-stats__note {
  margin: 16px 0 0;
  font-size: 0.78rem;
  color: var(--gid-dim);
  letter-spacing: 0.02em;
}

/* ----- 14. NEW: Capability pillars -------------------------- */
.gid-pillars {
  position: relative;
  padding: clamp(80px, 8vw, 140px) 0;
  background: var(--gid-ink-2);
  border-top: 1px solid var(--gid-edge);
  border-bottom: 1px solid var(--gid-edge);
}
.gid-pillars__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 80px);
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 60px);
}
@media (max-width: 800px) {
  .gid-pillars__head { grid-template-columns: 1fr; align-items: start; }
}
.gid-pillars__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: var(--gid-fz-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 8px 0 0;
}
.gid-pillars__lead {
  font-size: var(--gid-fz-lead);
  color: var(--gid-text-soft);
  margin: 0;
  line-height: 1.6;
}
.gid-pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.gid-pillar {
  position: relative;
  padding: 26px 24px;
  border-radius: var(--gid-r-lg);
  background: var(--gid-surface);
  border: 1px solid var(--gid-edge);
  transition: transform 240ms var(--gid-ease),
              border-color 240ms var(--gid-ease);
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
.gid-pillar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(7,173,145,0.16), transparent 60%);
  opacity: 0;
  transition: opacity 280ms var(--gid-ease);
}
.gid-pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(7,173,145,0.4);
}
.gid-pillar:hover::after { opacity: 1; }
.gid-pillar > * { position: relative; z-index: 1; }
.gid-pillar__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(7,173,145,0.18), rgba(15,217,182,0.06));
  border: 1px solid rgba(7,173,145,0.35);
  color: var(--gid-green-bright);
}
.gid-pillar__icon svg { width: 22px; height: 22px; }
.gid-pillar__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: var(--gid-fz-h3);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--gid-text);
}
.gid-pillar__body {
  color: var(--gid-text-soft);
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ----- 15. NEW: Horizon CTA band ---------------------------- */
.gid-horizon {
  padding: clamp(80px, 8vw, 140px) 0;
  position: relative;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(7,173,145,0.18) 0%, transparent 70%),
    radial-gradient(40% 80% at 100% 100%, rgba(241,132,0,0.10) 0%, transparent 70%),
    var(--gid-ink);
  overflow: hidden;
}
.gid-horizon__inner {
  position: relative;
  padding: clamp(40px, 5vw, 72px);
  border-radius: var(--gid-r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--gid-edge-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.gid-horizon__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: var(--gid-fz-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.gid-horizon__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gid-green-bright), var(--gid-orange-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gid-horizon__lead {
  font-size: var(--gid-fz-lead);
  color: var(--gid-text-soft);
  margin: 0;
  max-width: 62ch;
}
.gid-horizon__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 6px;
}
.gid-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--gid-r-pill);
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 180ms var(--gid-ease),
              background 180ms var(--gid-ease),
              box-shadow 180ms var(--gid-ease);
}
.gid-btn--primary {
  background: linear-gradient(135deg, var(--gid-green), var(--gid-green-deep));
  color: white;
  box-shadow: var(--gid-glow-green);
}
.gid-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(7,173,145,0.18), 0 20px 50px -15px rgba(7,173,145,0.55);
}
.gid-btn--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--gid-text);
  border: 1px solid var(--gid-edge-strong);
}
.gid-btn--ghost:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}
.gid-btn::after { content: '→'; transition: transform 220ms var(--gid-ease); }
.gid-btn:hover::after { transform: translateX(4px); }

/* ----- 16. Motion: subtle entrance only --------------------- */
/* Modern take: don't hide content waiting for JS. Just animate
   `.gid-reveal` elements in with a soft fade-up that runs once the
   element enters the viewport. If JS never runs, content is already
   visible. The animation uses a forward fill so once played it stays. */
.gid-reveal.is-visible {
  animation: gid-rise 680ms var(--gid-ease) both;
  animation-delay: var(--gid-reveal-delay, 0ms);
}
@keyframes gid-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gid-reveal { opacity: 1; transform: none; transition: none; }
  *, ::before, ::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ----- 17. Inline icon glyphs (currentColor) ---------------- */
.gid-icon { width: 22px; height: 22px; stroke: currentColor; fill: none;
            stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ----- 18. Responsive tweaks -------------------------------- */
@media (max-width: 991px) {
  :where(.navbar-menu-mobile) {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(10, 13, 20, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gid-edge);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px 20px;
    gap: 4px;
  }
  :where(.navbar-link.w-nav-link) {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
  }
  :where(.dropdown.w-dropdown) {
    width: 100%;
    margin-left: 0;
  }
  :where(.dropdown-login-default-white.w-dropdown-toggle) {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  :where(.hero-homepage-cta) .cta-button-wrapper {
    flex-direction: column;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }
  :where(.hero-homepage-cta) .cta-button-wrapper a {
    width: 100%;
  }
  :where(.hero-homepage-cta) .logo-wrapper { gap: 22px; }
  :where(.hero-homepage-cta) .logo-wrapper img { height: 22px; }
}

/* ----- 19. Light-section override (used in legal pages) ----- */
:where(.section, .section-2, .section-3, .section-4, .section-5) {
  background: var(--gid-ink-2);
}
:where(.rich-text-block, .rich-text-block-2) {
  color: var(--gid-text-soft);
}
:where(.rich-text-block h1, .rich-text-block h2, .rich-text-block h3,
       .rich-text-block-2 h1, .rich-text-block-2 h2, .rich-text-block-2 h3) {
  color: var(--gid-text);
}

/* ============================================================
   21. KUNDEN page-specific modernization
   ============================================================ */

/* --- 21.1 "So einfach geht's" step-cards (cta-wallbox) --- */
.cta-wallbox {
  background: var(--gid-ink) !important;
  padding-block: clamp(60px, 6vw, 110px) !important;
}
.cta-wallbox .steps-cta-3 {
  background: transparent !important;
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
  padding: 0 !important;
  gap: clamp(24px, 3vw, 40px) !important;
}
.cta-wallbox .centered-heading {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--gid-text) !important;
  margin: 0 !important;
  text-align: center;
}
.cta-wallbox .centered-heading::before {
  content: 'unser prozess';
  display: block;
  font-family: 'InterVariable', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--gid-green-bright);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.cta-wallbox .schnitte {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  align-items: stretch !important;
  position: relative;
}
/* Connector line between step cards on wide screens */
@media (min-width: 960px) {
  .cta-wallbox .schnitte::before {
    content: '';
    position: absolute;
    top: 56px;
    left: 12%; right: 12%;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(7,173,145,0.45) 20%,
      rgba(7,173,145,0.45) 80%,
      transparent);
    z-index: 0;
  }
}
.cta-wallbox .card-schritte-bright2 {
  position: relative;
  width: 100% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important;
  border: 1px solid var(--gid-edge) !important;
  border-radius: var(--gid-r-lg) !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 14px !important;
  transition: transform 240ms var(--gid-ease),
              border-color 240ms var(--gid-ease),
              box-shadow 240ms var(--gid-ease);
  z-index: 1;
}
.cta-wallbox .card-schritte-bright2:hover {
  transform: translateY(-4px);
  border-color: rgba(7,173,145,0.45) !important;
  box-shadow: var(--gid-shadow-lift);
}
.cta-wallbox .card-schritte-bright2 .text-93 {
  display: inline-flex !important;
  padding: 6px 14px !important;
  font-family: 'InterVariable', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gid-green-bright) !important;
  background: rgba(7,173,145,0.12) !important;
  border: 1px solid rgba(7,173,145,0.35) !important;
  border-radius: var(--gid-r-pill) !important;
  line-height: 1 !important;
  height: auto !important;
  width: auto !important;
}
.cta-wallbox .card-schritte-bright2 img {
  width: 56px !important;
  height: 56px !important;
  padding: 12px !important;
  background: linear-gradient(135deg, rgba(7,173,145,0.18), rgba(15,217,182,0.06)) !important;
  border: 1px solid rgba(7,173,145,0.35) !important;
  border-radius: 16px !important;
  /* The source SVGs are dark — tint them to brand green */
  filter: brightness(0) saturate(100%) invert(78%) sepia(58%) saturate(478%) hue-rotate(118deg) brightness(95%) contrast(92%) !important;
}
.cta-wallbox .card-schritt-text-kunden {
  color: var(--gid-text-soft) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
}

/* --- 21.2 Wallbox-kosten form section --- */
.wallboxkosten-form {
  background: var(--gid-ink) !important;
  padding-block: clamp(40px, 5vw, 80px) !important;
}
.wallboxkosten-form .container-16 {
  width: var(--gid-container) !important;
  max-width: none !important;
  margin-inline: auto !important;
}
.wallboxkosten-form .heading-gesamtkosten-erhalten-middle {
  display: block;
  color: var(--gid-text) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin: 0 0 28px !important;
  text-align: center;
}
.wallboxkosten-form .heading-gesamtkosten-erhalten-middle::before {
  content: 'angebot in 5 minuten';
  display: block;
  font-family: 'InterVariable', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--gid-green-bright);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.wallboxkosten-form .html-embed,
.wallboxkosten-form iframe {
  border-radius: var(--gid-r-lg) !important;
  overflow: hidden;
  background: var(--gid-paper);
  box-shadow: var(--gid-shadow-lift);
  border: 1px solid var(--gid-edge);
}

/* --- 21.3 Kunden FAQ link section (light bg) --- */
.kunden-faq-link {
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(7,173,145,0.05) 0%, transparent 60%),
    var(--gid-paper) !important;
  margin: 0 !important;
  padding: clamp(60px, 6vw, 100px) 0 clamp(60px, 6vw, 100px) !important;
}
.kunden-faq-link .hero-wrapper-faq {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}
.kunden-faq-link .heading-gesamtkosten-erhalten-middle {
  display: block;
  color: var(--gid-ink-on-paper) !important;
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  margin: 0 0 28px !important;
  text-align: center;
}
.kunden-faq-link .heading-gesamtkosten-erhalten-middle::before {
  content: 'wissensbasis';
  display: block;
  font-family: 'InterVariable', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--gid-green);
  margin-bottom: 12px;
  text-transform: uppercase;
}
/* Modernize the existing accordion items (the inline-FAQ styles set
   sane defaults; here we polish them up). */
.kunden-faq-link .faq-accordion {
  max-width: 880px !important;
  padding: 0 !important;
}
.kunden-faq-link .faq-accordion .faq-item {
  border-radius: 14px !important;
  border-color: rgba(10,13,20,0.08) !important;
  background: white !important;
  box-shadow: 0 1px 0 rgba(10,13,20,0.04);
  transition: box-shadow 220ms var(--gid-ease),
              border-color 220ms var(--gid-ease),
              transform 220ms var(--gid-ease);
}
.kunden-faq-link .faq-accordion .faq-item:hover {
  border-color: rgba(7,173,145,0.30) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -10px rgba(10,13,20,0.18);
}
.kunden-faq-link .faq-accordion .faq-item[open] {
  border-color: var(--gid-green) !important;
  box-shadow: 0 10px 30px -10px rgba(7,173,145,0.30);
}
.kunden-faq-link .faq-accordion summary {
  padding: 18px 4px !important;
}

/* --- 21.4 "Nur bei GID" section --- */
.nur-bei-gid-section {
  background:
    radial-gradient(50% 70% at 100% 0%, rgba(7,173,145,0.08) 0%, transparent 60%),
    var(--gid-ink) !important;
  padding-block: clamp(70px, 7vw, 120px) !important;
}
.nur-bei-gid-section .container-8 {
  width: var(--gid-container) !important;
  max-width: none !important;
  margin: 0 auto !important;
  display: block !important;
}
.nur-bei-gid-section .hero-wrapper-2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 800px) {
  .nur-bei-gid-section .hero-wrapper-2 {
    grid-template-columns: 1fr !important;
  }
}
.nur-bei-gid-section .hero-split-2 {
  max-width: none !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
}
.nur-bei-gid-section .hero-split-2 img,
.nur-bei-gid-section .hero-split-2 picture img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--gid-r-lg) !important;
  box-shadow: var(--gid-shadow-lift);
}
.nur-bei-gid-section .hero-split-2 picture {
  width: 100%;
  display: block;
}
/* Remove the hardcoded <br/> line breaks in the body copy */
.nur-bei-gid-section .text-small-middle br { display: none; }

/* Tame the .heading-v1 (light + 9px letter-spacing) and .text-small-middle
   (text-align: justify) Webflow defaults that bleed into multiple sections. */
.heading-v1 {
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem) !important;
  line-height: 1.2 !important;
  text-align: left !important;
  color: var(--gid-green-bright) !important;
  margin: 6px 0 4px !important;
  font-family: 'Oswald', sans-serif !important;
}
.text-small-middle {
  text-align: left !important;
  font-family: 'InterVariable', sans-serif !important;
  font-size: var(--gid-fz-body) !important;
  line-height: 1.65 !important;
  color: var(--gid-text-soft) !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-weight: 400 !important;
}

/* --- 21.5 Main hero: kunden Auto-Bild badge --- */
.hero-kunden .container-14 {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}
.hero-kunden .hero-wrapper-b2c {
  display: grid !important;
  /* minmax(0, 1fr) prevents the right column's natural content width
     from collapsing the left column to its min-content. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-auto-columns: auto !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  place-content: stretch !important;
}
.hero-kunden .hero-wrapper-b2c > .hero-b2c-split-left,
.hero-kunden .hero-b2c-split-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  /* Webflow caps these at max-width:40%/54% of the cell — we need full width */
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: center !important;
  flex: 1 1 auto !important;
}
.hero-kunden .hero-wrapper-b2c > .hero-split---right,
.hero-kunden .hero-split---right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-self: center !important;
  flex: 1 1 auto !important;
}
/* Slightly tighter hero title size on .hero-kunden because the
   "Die richtige Wallbox für jeden Anspruch" copy is long. */
.hero-kunden :where(h1) {
  font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.6rem) !important;
}
@media (max-width: 800px) {
  .hero-kunden .hero-wrapper-b2c {
    grid-template-columns: 1fr !important;
  }
}
.hero-kunden .heading-1 {
  font-family: 'InterVariable', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gid-green-bright) !important;
  margin: 0 0 14px !important;
  background: none !important;
  -webkit-text-fill-color: var(--gid-green-bright) !important;
}
.hero-kunden .autobild-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--gid-edge-strong) !important;
  border-radius: var(--gid-r-md) !important;
  margin-top: 20px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero-kunden .autobild-wrapper img,
.hero-kunden .autobild-wrapper picture img {
  height: 40px !important;
  width: auto !important;
  margin: 0 !important;
}
.hero-kunden .autobild-text {
  font-family: 'InterVariable', sans-serif !important;
  font-size: 0.84rem !important;
  color: var(--gid-text-soft) !important;
}
.hero-kunden .text-small-middle-copy {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--gid-edge) !important;
  border-radius: var(--gid-r-lg) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 24px !important;
  color: var(--gid-text) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  text-align: left !important;
  margin: 0 0 24px !important;
}
.hero-kunden .button-gesamtkosten-erhalten {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 26px !important;
  background: linear-gradient(135deg, var(--gid-green), var(--gid-green-deep)) !important;
  color: white !important;
  border-radius: var(--gid-r-pill) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  box-shadow: var(--gid-glow-green) !important;
  transition: transform 180ms var(--gid-ease),
              box-shadow 200ms var(--gid-ease),
              filter 200ms var(--gid-ease) !important;
}
.hero-kunden .button-gesamtkosten-erhalten::after {
  content: '→';
  transition: transform 220ms var(--gid-ease);
}
.hero-kunden .button-gesamtkosten-erhalten:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 4px rgba(7,173,145,0.18),
              0 20px 50px -15px rgba(7,173,145,0.55) !important;
}
.hero-kunden .button-gesamtkosten-erhalten:hover::after {
  transform: translateX(4px);
}

/* --- 21.6 kunden-faq-hero-image: bigger header treatment --- */
.kunden-faq-hero-image {
  min-height: 320px !important;
  padding: clamp(80px, 8vw, 120px) 0 clamp(60px, 6vw, 100px) !important;
}
.kunden-faq-hero-image .container-3 {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}
.kunden-faq-hero-image .hero-wrapper-two-3 {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.kunden-faq-hero-image .hero-wrapper-two-3 :where(h1, h2, h3, h4) {
  font-family: 'Oswald', sans-serif !important;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #cfe2dd 70%, #94c5b9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 60px rgba(7,173,145,0.25);
}

/* ============================================================
   21.7 UNTERNEHMENSKUNDE page-specific modernization
   ============================================================ */
.hero-unternehmen .container-3 {
  width: var(--gid-container);
  max-width: none;
  margin-inline: auto;
}
.hero-unternehmen .hero-wrapper-two-3 {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
}
.hero-unternehmen .title-unternehmen,
.hero-unternehmen h1,
.hero-unternehmen h2 {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 1.5rem + 4vw, 5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  text-align: left !important;
  background: linear-gradient(180deg, #ffffff 0%, #cfe2dd 70%, #94c5b9 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: 0 0 60px rgba(7,173,145,0.25);
  word-break: normal !important;
  display: block !important;
}
.button-unternehmen-werden,
a.button-unternehmen-werden.w-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 16px 26px !important;
  background: linear-gradient(135deg, var(--gid-green), var(--gid-green-deep)) !important;
  color: white !important;
  border-radius: var(--gid-r-pill) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: var(--gid-glow-green) !important;
  transition: transform 180ms var(--gid-ease),
              box-shadow 200ms var(--gid-ease),
              filter 200ms var(--gid-ease) !important;
}
.button-unternehmen-werden::after { content: '→'; }
.button-unternehmen-werden:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 4px rgba(7,173,145,0.18),
              0 20px 50px -15px rgba(7,173,145,0.55) !important;
}

/* The "wir-installieren-section" on unternehmenskunde is a body-text band,
   not the brand-pills section (which is on index). Tame it. */
.wir-installieren-section .wir-installieren {
  width: var(--gid-container) !important;
  max-width: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)) !important;
  border: 1px solid var(--gid-edge) !important;
  border-radius: var(--gid-r-lg) !important;
  padding: clamp(28px, 4vw, 48px) !important;
  margin: 0 auto !important;
}
.wir-installieren-section .unternehmen-text {
  color: var(--gid-text-soft) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-size: var(--gid-fz-lead) !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  text-align: left !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wir-installieren-section .unternehmen-text br + br + br,
.wir-installieren-section .unternehmen-text br + br {
  display: none;
}
.wir-installieren-section .unternehmen-text br {
  display: block;
  content: '';
  margin-top: 16px;
}

/* "process-quality-assurance-section" with .unsere-partner-wrapper layout */
.process-quality-assurance-section .unsere-partner-wrapper {
  width: 100% !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important;
  gap: clamp(28px, 4vw, 72px) !important;
  align-items: center !important;
  padding: 0 !important;
}
@media (max-width: 800px) {
  .process-quality-assurance-section .unsere-partner-wrapper {
    grid-template-columns: 1fr !important;
  }
}
.process-quality-assurance-section .hero-split-5 {
  max-width: none !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.process-quality-assurance-section .hero-split-5 img,
.process-quality-assurance-section .hero-split-5 picture img,
.process-quality-assurance-section .shadow-two-5 {
  width: 100% !important;
  max-width: 480px !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: var(--gid-r-lg) !important;
  border: 1px solid var(--gid-edge) !important;
  box-shadow: var(--gid-shadow-lift) !important;
}

/* ============================================================
   21.8 Generic "card" wrapper rounding for legacy .container-* boxes
   ============================================================ */
.steps-cta-3,
.cta-wallbox .steps-cta-3,
.unsere-partner-wrapper,
.wir-installieren {
  border-radius: 0 !important;
}

/* ============================================================
   21.7b UNTERNEHMENSKUNDE — premium B2B-brand rebuild
   ============================================================ */
/* Shared section-title treatment used by the new B2B sections */
.gid-section-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: var(--gid-fz-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--gid-text);
  margin: 8px 0 0;
}
.gid-section-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gid-green-bright), var(--gid-green) 50%, var(--gid-orange-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gid-section-lead {
  font-size: var(--gid-fz-lead);
  line-height: 1.6;
  color: var(--gid-text-soft);
  margin: 16px 0 0;
  max-width: 64ch;
}

/* --- 21.7b.1 Hero: white-label network for big B2C brands --- */
.hero-unternehmen .gid-uk-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 20px !important;
  text-align: left !important;
}
.gid-uk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 8px 14px;
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gid-green-bright);
  background: rgba(7,173,145,0.10);
  border: 1px solid rgba(7,173,145,0.35);
  border-radius: var(--gid-r-pill);
}
.gid-uk-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gid-green-bright);
  animation: gid-pulse 2.2s ease-in-out infinite;
}
.gid-uk-title {
  margin: 0 !important;
  max-width: 18ch;
}
.gid-uk-lead {
  max-width: 64ch;
  margin: 0 !important;
  font-size: var(--gid-fz-lead);
  line-height: 1.6;
  color: var(--gid-text-soft) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-weight: 400 !important;
  text-align: left !important;
}
.gid-uk-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.gid-uk-trust {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--gid-edge);
  width: 100%;
}
.gid-uk-trust-label {
  font-family: 'InterVariable', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gid-muted);
}
.gid-uk-trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  opacity: 0.85;
}
.gid-uk-trust-logos img {
  height: clamp(22px, 0.6rem + 1.4vw, 30px);
  width: auto;
  max-width: 160px;
  filter: brightness(0) invert(1) opacity(0.7);
  transition: filter 220ms var(--gid-ease), opacity 220ms var(--gid-ease);
}
.gid-uk-trust-logos img:hover {
  filter: brightness(0) invert(1) opacity(1);
}

/* --- 21.7b.2 Capabilities grid (6 products) --- */
.gid-uk-capabilities {
  position: relative;
  background: var(--gid-ink);
  padding-block: clamp(80px, 8vw, 140px);
  border-top: 1px solid var(--gid-edge);
}
.gid-uk-cap-head {
  max-width: 64ch;
  margin-bottom: clamp(40px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gid-cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.gid-cap {
  position: relative;
  padding: 26px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 240ms var(--gid-ease),
              border-color 240ms var(--gid-ease),
              background 240ms var(--gid-ease);
  overflow: hidden;
}
.gid-cap::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(80% 80% at 0% 0%, rgba(7,173,145,0.16) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 280ms var(--gid-ease);
  pointer-events: none;
}
.gid-cap:hover {
  transform: translateY(-4px);
  border-color: rgba(7,173,145,0.45);
}
.gid-cap:hover::after { opacity: 1; }
.gid-cap > * { position: relative; z-index: 1; }
.gid-cap__icon {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(7,173,145,0.18), rgba(15,217,182,0.06));
  border: 1px solid rgba(7,173,145,0.35);
  color: var(--gid-green-bright);
}
.gid-cap__icon svg { width: 22px; height: 22px; }
.gid-cap__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: var(--gid-fz-h3);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--gid-text);
}
.gid-cap__body {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--gid-text-soft);
}

/* --- 21.7b.3 KPI strip --- */
.gid-uk-kpis {
  background: var(--gid-ink-2);
  padding-block: clamp(50px, 5vw, 90px);
  border-top: 1px solid var(--gid-edge);
  border-bottom: 1px solid var(--gid-edge);
}
.gid-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gid-edge);
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
  overflow: hidden;
}
@media (max-width: 900px) { .gid-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gid-kpi-grid { grid-template-columns: 1fr; } }
.gid-kpi {
  padding: clamp(24px, 3vw, 36px);
  background: var(--gid-surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 240ms var(--gid-ease);
}
.gid-kpi:hover { background: var(--gid-surface-2); }
.gid-kpi__value {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gid-text);
}
.gid-kpi__value sup,
.gid-kpi__value .gid-kpi__unit {
  font-size: 0.5em;
  color: var(--gid-green-bright);
  font-weight: 600;
  margin-left: 2px;
  vertical-align: super;
}
.gid-kpi__label {
  font-family: 'InterVariable', sans-serif;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gid-muted);
}
.gid-uk-kpi-note {
  margin: 16px 0 0;
  font-size: 0.78rem;
  color: var(--gid-dim);
  letter-spacing: 0.02em;
}

/* --- 21.7b.4 5-step process flow --- */
.gid-uk-flow {
  background: var(--gid-ink);
  padding-block: clamp(80px, 8vw, 140px);
}
.gid-uk-flow-head {
  max-width: 64ch;
  margin-bottom: clamp(40px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gid-flow-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  counter-reset: step;
}
@media (max-width: 1100px) { .gid-flow-steps { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 600px) { .gid-flow-steps { grid-template-columns: 1fr; } }
.gid-flow-step {
  position: relative;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--gid-edge);
  transition: background 240ms var(--gid-ease);
}
.gid-flow-step:last-child { border-right: none; }
@media (max-width: 1100px) {
  .gid-flow-step {
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid var(--gid-edge);
    border-radius: var(--gid-r-lg);
  }
}
.gid-flow-step::before {
  content: '';
  position: absolute;
  left: 22px; top: 28px;
  width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--gid-green-bright), transparent);
}
.gid-flow-step__num {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  color: var(--gid-green-bright);
  padding-left: 38px;
}
.gid-flow-step__title {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--gid-text);
}
.gid-flow-step__body {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--gid-text-soft);
}

/* --- 21.7b.5 Integration cards (API / Portal / Excel) --- */
.gid-uk-integrate {
  background: var(--gid-ink-2);
  padding-block: clamp(80px, 8vw, 140px);
  border-top: 1px solid var(--gid-edge);
  border-bottom: 1px solid var(--gid-edge);
}
.gid-uk-int-head {
  max-width: 64ch;
  margin-bottom: clamp(40px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gid-int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.gid-int-card {
  position: relative;
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 240ms var(--gid-ease),
              border-color 240ms var(--gid-ease);
  overflow: hidden;
}
.gid-int-card:hover {
  transform: translateY(-4px);
  border-color: rgba(7,173,145,0.45);
}
.gid-int-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 4px 10px;
  font-family: 'InterVariable', sans-serif;
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gid-ink);
  background: var(--gid-green-bright);
  border-radius: var(--gid-r-pill);
}
.gid-int-card__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--gid-text);
}
.gid-int-card__body {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--gid-text-soft);
}
.gid-int-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gid-int-card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.94rem;
  color: var(--gid-text-soft);
}
.gid-int-card__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 60%),
    var(--gid-green);
  box-shadow: 0 0 8px rgba(7,173,145,0.5);
}
.gid-int-card__code {
  margin: 4px 0 0;
  padding: 16px;
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-md);
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--gid-text-soft);
  overflow-x: auto;
}
.gid-int-card__code code {
  color: var(--gid-text);
  font-family: inherit;
  background: none;
  padding: 0;
}

/* --- 21.7b.6 Kontakt section: B2B-aligned copy + cleaner layout --- */
.kontakt-section {
  background: var(--gid-ink) !important;
  padding-block: clamp(80px, 8vw, 140px) !important;
}
.kontakt-section .contact-container {
  width: var(--gid-container) !important;
  max-width: none !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: start !important;
}
.kontakt-section .contact-wrapper {
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.kontakt-section .flex-block {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
}
.kontakt-section .contact-form-brands {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
}
@media (max-width: 900px) {
  .kontakt-section .contact-container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }
  .kontakt-section .contact-wrapper { grid-column: 1 !important; grid-row: 1 !important; }
  .kontakt-section .flex-block       { grid-column: 1 !important; grid-row: 2 !important; }
  .kontakt-section .contact-form-brands { grid-column: 1 !important; grid-row: 3 !important; }
}
.kontakt-section .contact-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: none !important;
}
.kontakt-section .heading-green-cap {
  font-family: 'InterVariable', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--gid-green-bright) !important;
  margin: 0 !important;
}
.kontakt-section .kontakt-text-small {
  color: var(--gid-text-soft) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-size: var(--gid-fz-lead) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  text-align: left !important;
}
.kontakt-section .heading-kontakt {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--gid-text) !important;
  margin: 8px 0 0 !important;
  text-align: left !important;
}
.kontakt-section .flex-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 20px 0 0 !important;
  align-items: stretch !important;
}
.kontakt-section .button-cta-contact {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  border-radius: var(--gid-r-pill) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transition: transform 180ms var(--gid-ease),
              filter 200ms var(--gid-ease),
              box-shadow 200ms var(--gid-ease) !important;
}
.kontakt-section .button-cta-contact:first-of-type {
  background: linear-gradient(135deg, var(--gid-green), var(--gid-green-deep)) !important;
  color: white !important;
  box-shadow: var(--gid-glow-green) !important;
}
.kontakt-section .button-cta-contact:first-of-type::after { content: '→'; }
.kontakt-section .button-cta-contact:first-of-type:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 4px rgba(7,173,145,0.18),
              0 20px 50px -15px rgba(7,173,145,0.55) !important;
}
.kontakt-section .button-cta-contact:last-of-type {
  background: rgba(255,255,255,0.06) !important;
  color: var(--gid-text) !important;
  border: 1px solid var(--gid-edge-strong) !important;
}
.kontakt-section .button-cta-contact:last-of-type:hover {
  background: rgba(255,255,255,0.1) !important;
  transform: translateY(-2px);
}
/* Form column: glassy card */
.kontakt-section .contact-form-brands {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
  padding: clamp(24px, 3vw, 36px) !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}
.kontakt-section .form-unternehmen {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.kontakt-section .form-unternehmen label {
  font-family: 'InterVariable', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--gid-text) !important;
  margin: 8px 0 4px !important;
}
.kontakt-section .form-unternehmen .w-input,
.kontakt-section .form-unternehmen textarea,
.kontakt-section .textfield-form {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid var(--gid-edge) !important;
  border-radius: var(--gid-r-md) !important;
  padding: 12px 14px !important;
  color: var(--gid-text) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-size: 0.95rem !important;
  transition: border-color 180ms var(--gid-ease),
              background 180ms var(--gid-ease) !important;
}
.kontakt-section .form-unternehmen .w-input::placeholder,
.kontakt-section .form-unternehmen textarea::placeholder {
  color: var(--gid-dim) !important;
}
.kontakt-section .form-unternehmen .w-input:focus,
.kontakt-section .form-unternehmen textarea:focus {
  border-color: rgba(7,173,145,0.55) !important;
  outline: none !important;
  background: rgba(0,0,0,0.45) !important;
}
.kontakt-section .w-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  margin: 14px 0 6px !important;
}
.kontakt-section .checkbox-label {
  font-size: 0.86rem !important;
  color: var(--gid-text-soft) !important;
  line-height: 1.45 !important;
}
.kontakt-section .agb-link,
.kontakt-section .agb-link span {
  color: var(--gid-green-bright) !important;
  text-decoration: underline !important;
}
.kontakt-section .submit-button {
  margin-top: 12px !important;
  background: linear-gradient(135deg, var(--gid-green), var(--gid-green-deep)) !important;
  color: white !important;
  padding: 14px 28px !important;
  border-radius: var(--gid-r-pill) !important;
  font-family: 'InterVariable', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  box-shadow: var(--gid-glow-green) !important;
  border: none !important;
  cursor: pointer !important;
  transition: transform 180ms var(--gid-ease),
              filter 200ms var(--gid-ease) !important;
}
.kontakt-section .submit-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* ============================================================
   21.9 SERVICE-PARTNER page — full rebuild for craftspeople firms
   ============================================================ */

/* -- 21.9.0 Section heads (shared scaffold) -------------------- */
.gid-sp-section-head {
  max-width: 64ch;
  margin-bottom: clamp(40px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gid-sp-section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  align-items: center;
}

/* -- 21.9.1 HERO (gid-sp-hero) -------------------------------- */
.hero-partners.gid-sp-hero {
  position: relative;
  background:
    radial-gradient(80% 60% at 8% 0%, rgba(7,173,145,0.18) 0%, transparent 55%),
    radial-gradient(60% 60% at 100% 100%, rgba(241,132,0,0.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--gid-ink) 0%, var(--gid-ink-2) 100%) !important;
  padding-block: clamp(80px, 9vw, 140px) clamp(60px, 7vw, 110px) !important;
  overflow: hidden;
  border-bottom: 1px solid var(--gid-edge);
}
.hero-partners.gid-sp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* fine dot texture (brand detail) */
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    /* left scrim — keeps the left-aligned headline legible over bright photo
       areas (white walls, light panels). Fades right so the photo shows. */
    linear-gradient(90deg,
                    rgba(10,13,20,0.90) 0%,
                    rgba(10,13,20,0.80) 32%,
                    rgba(10,13,20,0.52) 56%,
                    rgba(10,13,20,0.22) 80%,
                    rgba(10,13,20,0.06) 100%),
    /* vertical floor so bright photos don't wash out behind the copy */
    linear-gradient(180deg,
                    rgba(10,13,20,0.55) 0%,
                    rgba(10,13,20,0.40) 42%,
                    rgba(10,13,20,0.82) 100%);
}
.gid-sp-hero__inner {
  position: relative;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 32px);
}
.gid-sp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  align-self: flex-start;
  background: rgba(7,173,145,0.12);
  border: 1px solid rgba(7,173,145,0.35);
  border-radius: var(--gid-r-pill);
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--gid-green-bright);
}
.gid-sp-eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gid-green-bright);
  box-shadow: 0 0 12px rgba(15,217,182,0.7);
  animation: gid-sp-pulse 2.4s ease-in-out infinite;
}
@keyframes gid-sp-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.7; }
}
.gid-sp-title {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  margin: 0 !important;
  color: var(--gid-text) !important;
  text-align: left !important;
}
.gid-sp-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gid-green-bright) 0%, #7be8b9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gid-sp-lead {
  margin: 0 !important;
  max-width: 56ch;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem) !important;
  line-height: 1.55 !important;
  color: var(--gid-text-soft) !important;
}
.gid-sp-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.gid-sp-hero-bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.gid-sp-hero-bullets li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gid-text-soft);
  font-size: 0.94rem;
}
.gid-sp-tick {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(7,173,145,0.18);
  border: 1px solid rgba(7,173,145,0.45);
  position: relative;
  flex-shrink: 0;
}
.gid-sp-tick::after {
  content: '';
  position: absolute;
  left: 5px; top: 8px;
  width: 4px; height: 8px;
  border-right: 2px solid var(--gid-green-bright);
  border-bottom: 2px solid var(--gid-green-bright);
  transform: rotate(45deg) translate(-1px, -1px);
}
.gid-sp-trust {
  margin-top: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--gid-edge);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gid-sp-trust-label {
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gid-muted);
}
.gid-sp-trust-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 56px);
  opacity: 0.85;
}
.gid-sp-trust-logos img {
  height: clamp(22px, 0.6rem + 1.4vw, 30px);
  width: auto;
  max-width: 160px;
  filter: brightness(0) invert(1) opacity(0.7);
  transition: filter 220ms var(--gid-ease), opacity 220ms var(--gid-ease);
}
.gid-sp-trust-logos img:hover {
  filter: brightness(0) invert(1) opacity(1);
}
@media (max-width: 600px) {
  .gid-sp-title { font-size: 2.2rem !important; }
  .gid-sp-ctas .gid-btn { width: 100%; justify-content: center; }
}

/* Suppress legacy hero markup if it ever leaks through */
.hero-partners .hero-wrapper-process,
.hero-partners .hero-split---left,
.hero-partners .hero-split---right { all: unset; }

/* -- 21.9.2 KPIs strip (gid-sp-kpis) -------------------------- */
.gid-sp-kpis {
  background: var(--gid-ink-2);
  padding-block: clamp(50px, 5vw, 80px);
  border-bottom: 1px solid var(--gid-edge);
}
.gid-sp-kpis .gid-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.gid-sp-kpis .gid-kpi {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-md);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.gid-sp-kpis .gid-kpi__value {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.8rem);
  line-height: 1;
  color: var(--gid-green-bright);
}
.gid-sp-kpis .gid-kpi__value sup {
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 2px;
}
.gid-sp-kpis .gid-kpi__unit {
  font-size: 0.55em;
  color: var(--gid-text-soft);
  margin-left: 2px;
}
.gid-sp-kpis .gid-kpi__label {
  font-family: 'InterVariable', sans-serif;
  font-size: 0.88rem;
  color: var(--gid-text-soft);
  line-height: 1.4;
}
@media (max-width: 800px) {
  .gid-sp-kpis .gid-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .gid-sp-kpis .gid-kpi-grid { grid-template-columns: 1fr; }
}

/* -- 21.9.3 Benefits grid (gid-sp-benefits) ------------------- */
.gid-sp-benefits {
  padding-block: clamp(80px, 8vw, 140px);
}
.gid-sp-benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.gid-sp-benefit {
  position: relative;
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 240ms var(--gid-ease),
              border-color 240ms var(--gid-ease),
              background 240ms var(--gid-ease);
}
.gid-sp-benefit:hover {
  transform: translateY(-4px);
  border-color: rgba(7,173,145,0.45);
  background: linear-gradient(180deg, rgba(7,173,145,0.06), rgba(255,255,255,0.02));
}
.gid-sp-benefit__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(7,173,145,0.14);
  border: 1px solid rgba(7,173,145,0.30);
  color: var(--gid-green-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gid-sp-benefit__icon .gid-icon {
  width: 24px; height: 24px;
  stroke-width: 1.6;
}
.gid-sp-benefit__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--gid-text);
}
.gid-sp-benefit__body {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--gid-text-soft);
}

/* -- 21.9.4 Flow (gid-sp-flow) ------------------------------- */
.gid-sp-flow {
  background: var(--gid-ink-2);
  padding-block: clamp(80px, 8vw, 140px);
  border-top: 1px solid var(--gid-edge);
  border-bottom: 1px solid var(--gid-edge);
}
.gid-sp-flow-steps {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
  overflow: hidden;
}
@media (max-width: 1100px) {
  .gid-sp-flow-steps {
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
}

/* -- 21.9.5 App showcase (gid-sp-appshow) -------------------- */
.gid-sp-appshow {
  padding-block: clamp(80px, 8vw, 140px);
}
.gid-sp-app-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 60px);
}
.gid-sp-app-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
}
.gid-sp-app-card--reverse {
  direction: rtl;
}
.gid-sp-app-card--reverse > * {
  direction: ltr;
}
.gid-sp-app-card__img {
  position: relative;
  border-radius: var(--gid-r-md);
  overflow: hidden;
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(7,173,145,0.18) 0%, transparent 60%),
    var(--gid-surface);
  border: 1px solid var(--gid-edge);
  padding: 14px;
}
.gid-sp-app-card__img img,
.gid-sp-app-card__img picture {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
}
.gid-sp-app-card__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gid-sp-app-card__chip {
  align-self: flex-start;
  padding: 5px 11px;
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gid-green-bright);
  background: rgba(7,173,145,0.12);
  border: 1px solid rgba(7,173,145,0.3);
  border-radius: var(--gid-r-pill);
}
.gid-sp-app-card__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--gid-text);
}
.gid-sp-app-card__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gid-text-soft);
}
@media (max-width: 860px) {
  .gid-sp-app-card,
  .gid-sp-app-card--reverse { grid-template-columns: 1fr; direction: ltr; }
}

/* -- 21.9.6 Gewerke pills (gid-sp-gewerke) ------------------- */
.gid-sp-gewerke {
  background: var(--gid-ink-2);
  padding-block: clamp(70px, 7vw, 120px);
  border-top: 1px solid var(--gid-edge);
  border-bottom: 1px solid var(--gid-edge);
}
.gid-sp-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 920px;
  margin: 0 auto;
}
.gid-sp-pill {
  padding: 11px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-pill);
  font-family: 'InterVariable', sans-serif;
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--gid-text);
  transition: background 200ms var(--gid-ease),
              border-color 200ms var(--gid-ease),
              transform 200ms var(--gid-ease);
}
.gid-sp-pill:hover {
  background: linear-gradient(180deg, rgba(7,173,145,0.12), rgba(7,173,145,0.04));
  border-color: rgba(7,173,145,0.45);
  transform: translateY(-2px);
}

/* -- 21.9.7 Proof + Testimonial (gid-sp-proof) --------------- */
.gid-sp-proof {
  padding-block: clamp(80px, 8vw, 140px);
}
.gid-sp-proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 60px);
  align-items: stretch;
}
.gid-sp-proof-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gid-sp-proof-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gid-sp-proof-list li {
  position: relative;
  padding-left: 28px;
  color: var(--gid-text-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.gid-sp-proof-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), transparent 60%),
    var(--gid-green);
}
.gid-sp-proof-list li strong {
  color: var(--gid-text);
  font-weight: 600;
}
.gid-sp-proof-quote {
  position: relative;
  padding: 36px 32px;
  background:
    radial-gradient(80% 80% at 100% 0%, rgba(7,173,145,0.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
  display: flex;
  flex-direction: column;
  gap: 22px;
  justify-content: center;
}
.gid-sp-proof-quote__mark {
  width: 48px; height: 48px;
  color: var(--gid-green-bright);
  opacity: 0.85;
  fill: currentColor;
}
.gid-sp-proof-quote__text {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  line-height: 1.4;
  color: var(--gid-text);
}
.gid-sp-proof-quote__by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 18px;
  border-top: 1px solid var(--gid-edge);
}
.gid-sp-proof-quote__name {
  font-family: 'InterVariable', sans-serif;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--gid-text);
}
.gid-sp-proof-quote__role {
  font-size: 0.88rem;
  color: var(--gid-muted);
}
@media (max-width: 900px) {
  .gid-sp-proof-grid { grid-template-columns: 1fr; }
}

/* -- 21.9.8 Signup section (gid-sp-signup) ------------------- */
.gid-sp-signup {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(7,173,145,0.12) 0%, transparent 60%),
    var(--gid-ink-2);
  padding-block: clamp(80px, 8vw, 140px);
  border-top: 1px solid var(--gid-edge);
  border-bottom: 1px solid var(--gid-edge);
}
.gid-sp-signup__head {
  max-width: 64ch;
  margin: 0 auto clamp(36px, 4vw, 60px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.gid-sp-signup__frame {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--gid-r-lg);
  overflow: hidden;
  background: var(--gid-paper);
  box-shadow: var(--gid-shadow-lift);
  border: 1px solid var(--gid-edge);
}
.gid-sp-signup .html-embed-partner {
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--gid-paper) !important;
  box-shadow: none !important;
  min-height: 720px;
}
.gid-sp-signup .html-embed-partner iframe {
  display: block;
  width: 100% !important;
  min-height: 720px;
  border: none !important;
}

/* Hide the legacy "heading-partner-registrieren" if it ever leaks. */
.heading-partner-registrieren { display: none !important; }

/* -- 21.9.9 Support / final CTA (gid-sp-support) ------------- */
.gid-sp-support {
  padding-block: clamp(70px, 7vw, 120px);
}
.gid-sp-support__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding: clamp(36px, 4vw, 60px);
  background:
    radial-gradient(60% 80% at 0% 50%, rgba(7,173,145,0.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--gid-edge);
  border-radius: var(--gid-r-lg);
}
.gid-sp-support__copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gid-sp-support__title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1.1;
  margin: 0;
  color: var(--gid-text);
  text-transform: none;
}
.gid-sp-support__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--gid-green-bright), #7be8b9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gid-sp-support__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gid-text-soft);
}
.gid-sp-support__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .gid-sp-support__inner { grid-template-columns: 1fr; }
  .gid-sp-support__actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .gid-sp-support__actions .gid-btn { width: 100%; justify-content: center; }
}

/* Partner FAQ section — keep readable on dark BG */
.partner-faq-section {
  background: var(--gid-ink) !important;
  padding-block: clamp(80px, 8vw, 140px) !important;
  border-top: 1px solid var(--gid-edge);
  /* Legacy Webflow CSS pins this section to min-height: 1450px, which
     causes the accordion to overflow into the footer once items expand.
     Let it grow with content instead. */
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
}
.partner-faq-section .heading-partner-faq-middle {
  display: block !important;
  text-align: center;
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem) !important;
  text-transform: uppercase;
  letter-spacing: 0.01em !important;
  color: var(--gid-text) !important;
  margin: 0 auto clamp(28px, 3vw, 44px) !important;
  width: var(--gid-container);
  max-width: none;
}
.partner-faq-section .hero-wrapper-faq--partner {
  width: var(--gid-container);
  max-width: none;
  margin: 0 auto;
  /* Same problem: legacy CSS sets height: 1000px on this wrapper. */
  height: auto !important;
  min-height: 0 !important;
}
.partner-faq-section .faq-accordion {
  max-width: 920px;
}

/* ============================================================
   21.10 Generic catch-all: tame the rest of legacy headings
   ============================================================ */
/* Many one-off headings across pages use the Webflow "very wide
   letter-spacing + thin font-weight" treatment that doesn't read.
   Reset across the site. */
:where(.heading-untertitel-dkv,
       .heading-untertitel-elli,
       .heading-untertitel-notar) {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   22. Footer override — make sure all pages get the dark footer
   ============================================================ */
.footer-dark-2 {
  padding: clamp(60px, 6vw, 100px) 0 32px !important;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(7,173,145,0.08) 0%, transparent 60%),
    #06080d !important;
  border-top: 1px solid var(--gid-edge);
  color: var(--gid-text);
}
.footer-dark-2 .footer-link-2 { color: var(--gid-text-soft) !important; }
.footer-dark-2 .footer-link-2:hover { color: var(--gid-green-bright) !important; }
.footer-dark-2 .footer-copyright-center { color: var(--gid-dim) !important; }

/* ============================================================
   23. Cookie/consent banner (Privado) — dark-theme restyle
   ============================================================ */
/* Replaces the section 20 placeholder */
.gid-noop {}
/* Privado injects #cookie-consent-banner (bottom bar) and #manage-cookies
   (settings side panel). Style both as dark cards with light text; the
   paragraphs/headings get transparent backgrounds so the card shows
   through (Privado's own CSS leaves their text black). */
#cookie-consent-banner {
  bottom: 16px !important;
  top: auto !important;
  left: 16px !important;
  right: 16px !important;
  max-width: 720px;
  margin-inline: auto;
  border-radius: var(--gid-r-md) !important;
  box-shadow: var(--gid-shadow-lift);
}
#cookie-consent-banner,
#manage-cookies {
  border: 1px solid var(--gid-edge) !important;
  background: rgba(15, 19, 28, 0.97) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--gid-text) !important;
}
#cookie-consent-banner .privado-para,
#cookie-consent-banner .banner-close-icon,
#manage-cookies .privado-para,
#manage-cookies .modal-notice-heading,
#manage-cookies .modal-heading-icon,
#manage-cookies .manage-cookies-modal-content,
#manage-cookies .manage-cookies-cookielist,
#manage-cookies .manage-cookies-save-container {
  background: transparent !important;
  color: var(--gid-text) !important;
}
#cookie-consent-banner a,
#manage-cookies a {
  color: var(--gid-green-bright) !important;
}
/* "Cookie details" accordion toggles + expanded detail boxes ship with
   black text from Privado's CSS */
#manage-cookies .cookie-detail-collapsible,
#manage-cookies .cookie-detail-box,
#manage-cookies .cookie-heading,
#manage-cookies .cookie-desc {
  color: var(--gid-text) !important;
}
/* Primary actions on-brand; secondary as quiet outline */
#cookie-consent-banner .banner-filled-button,
#manage-cookies .save-button-cookie-policy {
  background: var(--gid-green-deep) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
#cookie-consent-banner .banner-link-button {
  background: transparent !important;
  color: var(--gid-text) !important;
  border: 1px solid var(--gid-edge) !important;
}

/* ============================================================
   24. Mobile navigation (Webflow collapses at <=991px)
   ============================================================ */
@media (max-width: 991px) {
  /* --- Hamburger button: the webflow-icons glyph rule was lost in the
         static rebuild (::before content rendered empty), so the button was
         invisible. Draw the icon in CSS instead. --- */
  .menu-button-3.w-nav-button {
    padding: 14px;
    border-radius: 10px;
    transition: background 0.2s;
  }
  .menu-button-3.w-nav-button.w--open {
    background: rgba(7, 173, 145, 0.14) !important;
  }
  .menu-button-3 .icon.w-icon-nav-menu {
    position: relative;
    width: 24px;
    height: 18px;
    font-size: 0 !important;
    background: linear-gradient(var(--gid-green-bright), var(--gid-green-bright))
      center / 100% 2px no-repeat;
  }
  .menu-button-3 .icon.w-icon-nav-menu::before,
  .menu-button-3 .icon.w-icon-nav-menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gid-green-bright);
    transition: transform 0.25s ease, top 0.25s ease, bottom 0.25s ease;
  }
  .menu-button-3 .icon.w-icon-nav-menu::before { top: 0; }
  .menu-button-3 .icon.w-icon-nav-menu::after  { bottom: 0; }
  /* open state: middle bar fades, outer bars form an X */
  .menu-button-3.w--open .icon.w-icon-nav-menu { background: none; }
  .menu-button-3.w--open .icon.w-icon-nav-menu::before {
    top: 8px;
    transform: rotate(45deg);
  }
  .menu-button-3.w--open .icon.w-icon-nav-menu::after {
    bottom: 8px;
    transform: rotate(-45deg);
  }

  /* --- Backdrop behind the open menu --- */
  .w-nav-overlay {
    background: rgba(5, 8, 13, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }

  /* --- The menu panel: full-width dark sheet instead of the floating
         white Webflow box --- */
  .navbar-menu-mobile.w-nav-menu {
    width: 100%;
    background: rgba(10, 13, 20, 0.98) !important;
    border-bottom: 1px solid var(--gid-edge);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    padding: 10px 14px 18px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
  }

  /* --- Items: light text, generous tap targets, hairline separators --- */
  .navbar-menu-mobile .w-nav-link,
  .navbar-menu-mobile .w-dropdown-toggle {
    display: block;
    width: 100%;
    background: transparent !important;
    padding: 15px 12px;
    border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
  }
  .navbar-menu-mobile .w-nav-link div,
  .navbar-menu-mobile .w-dropdown-toggle div {
    color: var(--gid-text) !important;
    font-size: 1.02rem;
    font-weight: 500;
  }
  .navbar-menu-mobile .w-nav-link:active,
  .navbar-menu-mobile .w-dropdown-toggle:active {
    background: rgba(7, 173, 145, 0.12) !important;
  }

  /* --- Expandable entries get a chevron --- */
  .navbar-menu-mobile .w-dropdown-toggle {
    position: relative;
    padding-right: 40px;
  }
  .navbar-menu-mobile .w-dropdown-toggle::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gid-green-bright);
    border-bottom: 2px solid var(--gid-green-bright);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .navbar-menu-mobile .w-dropdown-toggle.w--open::after,
  .navbar-menu-mobile .gid-dd-open .w-dropdown-toggle::after {
    transform: translateY(-30%) rotate(225deg);
  }
  .navbar-menu-mobile .w-dropdown.gid-dd-open .w-dropdown-list {
    display: block !important;
  }
  /* hide Webflow's own dropdown arrow glyph if present */
  .navbar-menu-mobile .w-dropdown-toggle .w-icon-dropdown-toggle { display: none; }

  /* --- Submenu lists: indented quiet links on the same dark sheet --- */
  .navbar-menu-mobile .w-dropdown-list {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 4px 0 6px;
  }
  .navbar-menu-mobile .w-dropdown-link {
    background: transparent !important;
    color: var(--gid-text-soft) !important;
    padding: 12px 12px 12px 28px;
    border-radius: 8px;
    font-size: 0.98rem;
    text-align: left;
  }
  .navbar-menu-mobile .w-dropdown-link:active,
  .navbar-menu-mobile .w-dropdown-link.w--current {
    color: var(--gid-green-bright) !important;
    background: rgba(7, 173, 145, 0.08) !important;
  }
}