/* =====================================================================
   GLOBALIST THEME OVERRIDE
   Wendet das Design aus "Globalist Home.html" (dark mode, mint-accent
   #00EDB3, Inter, uppercase headlines) auf die komplette Webflow-Site an.
   Lädt NACH eine-neue-welt.webflow.css, überschreibt dort Werte.
   ===================================================================== */

/* ——— Design tokens ——— */
:root {
  --bg:#020c09;
  --bg-raised:#041410;
  --card:#051a15;
  --surface-1:#071f19;
  --secondary:#0a2923;
  --primary:#00EDB3;
  --primary-600:#00d4a2;
  --primary-glow:rgba(0,237,179,.45);
  --fg:#e0e7e5;
  --white:#ffffff;
  --muted:#5c7c75;
  --muted-2:#3e5852;
  --border:rgba(0,237,179,.12);
  --border-strong:rgba(0,237,179,.25);
  --hair:rgba(255,255,255,.06);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:24px;

  /* Page-Container-Breite: bestimmt u.a. die max-width der Navbar-Bar
     (.gl-nav__bar). Muss überall gleich sein, sonst wirkt die Navbar
     auf manchen Pages edge-to-edge und auf anderen zentriert. */
  --container:1360px;

  /* Map Webflow's own variables to the new palette so their existing
     rules inherit the new colors automatically. */
  --_globalist-farben---background:#020c09;
  --_globalist-farben---box-fill:#051a15;
  --_globalist-farben---2nd-box-fill:#0a2923;
  --_globalist-farben---stroke:rgba(0,237,179,.25);
  --_globalist-farben---globalist-highlight:#00EDB3;
  --_globalist-farben---new-highlight:#00EDB3;
  --_globalist-farben---glow:rgba(0,237,179,.45);
  --_globalist-farben---white:#fff;
  --white-text:#fff;
  --new-highlight:#00EDB3;
  --dark-green:#020c09;
  --blogback:#051a15;
  --creativeborder:rgba(0,237,179,.25);
}

/* ——— Base ——— */
/* Hard viewport-lock — verhindert horizontales Pan/Shift auf Mobile.
   Jedes Element das breiter als der Viewport rendert (Marquees mit
   width:max-content, absolut positionierte SVGs, Slider, etc.) wird
   damit zwangsweise geclippt statt den Body horizontal zu pushen. */
html, body{
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip; /* überschreibt overflow-x:hidden in modernen Browsern,
                      verhindert dass Body nicht-scrollbar wird */
}
/* Media safety net — verhindert dass Bilder/Embeds/Tables den
   Viewport pushen auf Mobile. Class-spezifische height-Overrides
   (z.B. .gl-nav__brand img { height: 30px }) gewinnen via Specificity. */
img, video, iframe{ max-width:100%; height:auto; }
table{ max-width:100%; }
pre, code{ max-width:100%; overflow-x:auto; word-wrap:break-word; }
html{ scroll-behavior:smooth; }
/* HTML carries the base color so there's never a flash of white during
   paint, and so the fixed atmospheric layer below has a fallback. */
html{ background:var(--bg); }

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro','Segoe UI',Roboto,sans-serif !important;
  background:transparent !important;
  color:var(--fg) !important;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
  position:relative;
  z-index:0;                       /* Stacking context for ::before */
}

/* ——— Atmospheric background layer ———————————————————————————————
   A fixed-positioned pseudo-element replaces the old
   `background-attachment:fixed` on body. iOS Safari has long-standing
   bugs where `fixed` repaints with visible seams every time the URL
   bar collapses/expands, which is what created the "harte Kanten"
   the user reported. A fixed pseudo-element is the standard fix and
   renders smoothly across iOS, Android, and desktop. */
body::before{
  content:"";
  position:fixed;
  inset:-4vh -4vw;                /* small overscan so iOS URL-bar
                                     collapse never reveals an edge */
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 15% 12%, rgba(0,237,179,.11), transparent 62%),
    radial-gradient(ellipse 65% 55% at 85% 80%, rgba(0,237,179,.085), transparent 64%),
    radial-gradient(ellipse 95% 70% at 50% 50%, rgba(0,237,179,.025), transparent 78%),
    var(--bg);
}
/* Tablet/Mobile — recentre the gradient hotspots so they don't collapse
   into the corners of a narrow viewport, and widen them so the whole
   screen sits inside one continuous wash. */
@media (max-width:991px){
  body::before{
    background:
      radial-gradient(ellipse 110% 38% at 50% 8%, rgba(0,237,179,.10), transparent 72%),
      radial-gradient(ellipse 115% 50% at 50% 92%, rgba(0,237,179,.07), transparent 74%),
      radial-gradient(ellipse 130% 80% at 50% 50%, rgba(0,237,179,.022), transparent 82%),
      var(--bg);
  }
}
@media (max-width:480px){
  body::before{
    background:
      radial-gradient(ellipse 130% 32% at 50% 6%, rgba(0,237,179,.085), transparent 74%),
      radial-gradient(ellipse 130% 42% at 50% 94%, rgba(0,237,179,.06), transparent 76%),
      var(--bg);
  }
}

::selection{ background:var(--primary); color:#001d17; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#0a2923; border-radius:100px; }
::-webkit-scrollbar-thumb:hover{ background:#0f3a31; }

/* ——— Typography ——— */
h1, h2, h3, h4, h5,
.heading-style-h1, .heading-style-h2, .heading-style-h3, .heading-style-h4, .heading-style-h5, .heading-style-h6,
[class*="heading-style-h"], [class*="_heading"], [class^="heading-"]{
  font-family:'Inter',sans-serif !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:-.02em !important;
  color:var(--white) !important;
  line-height:1.04 !important;
}
/* Don't force uppercase on blog body / long-form text that uses heading-style classes inside articles */
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4,
.blogtext h1, .blogtext h2, .blogtext h3, .blogtext h4,
.w-richtext h1, .w-richtext h2, .w-richtext h3, .w-richtext h4{
  text-transform:none !important;
  letter-spacing:-.01em !important;
  font-weight:800 !important;
}
/* Case-study layer overrides — the editorial Investment-Report look uses
   light Inter weights and tight letter-spacing, NOT the homepage's
   weight-900 / uppercase / -.02em treatment. The .cs-* (custom static
   case pages) and .report (Payload-driven case route) + .portfolio
   (case-studies index) + .trust-report layers all opt out. */
[class^="cs-"] h1, [class^="cs-"] h2, [class^="cs-"] h3, [class^="cs-"] h4, [class^="cs-"] h5,
.report h1, .report h2, .report h3, .report h4, .report h5,
.report-display, .report-tagline,
.portfolio h1, .portfolio h2, .portfolio h3, .portfolio h4,
.portfolio-title,
.trust-report h1, .trust-report h2, .trust-report h3, .trust-report h4,
.trust-report-title{
  font-family:'Inter',sans-serif !important;
  font-weight:300 !important;
  text-transform:none !important;
  letter-spacing:-.025em !important;
  line-height:1.15 !important;
}

p, .text-size-regular, .text-size-medium, .text-size-small{
  color:rgba(255,255,255,.72) !important;
}
.text-color-white, [class*="text-color-white"]{ color:var(--white) !important; }
.text-color-primary, .text-color-highlight, [class*="highlight"]{ color:var(--primary) !important; }

a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--primary); }

/* Brand accent glow */
.accent, .new-highlight, [class*="highlight-text"]{
  color:var(--primary) !important;
  text-shadow:0 0 40px var(--primary-glow);
}

/* =====================================================================
   BUTTONS — single source of truth.
   Two and only two looks exist on this site:
     1) .btn-primary  (mint solid, dark green text)
     2) .btn-ghost    (glass ghost, white text, mint hover)
   Every legacy CTA class on the site is aliased onto one of these two.
   Forbidden visual variants (gradient stroke, plain bordered, etc.) are
   neutralised below with !important.
   ===================================================================== */

/* Shared base — applies to every CTA, anywhere on the site */
.btn,
.btn-primary,
.btn-ghost,
.w-button,
.primary-button,
.primary-button.with-shadow,
.primary-button.primary-button-nav,
.secondary-button,
.secondarybutton,
a.button,
button.button,
.button-4,
.gnext-btn-primary,
.gnext-btn-secondary,
.gp-btn,
.gp-btn-primary,
.gp-btn-ghost,
.products-cta .btn,
.jh-hero-cta,
.btn.grad-stroke,
.btn.grad-stroke.minw,
.btn.grad-stroke.minw.green-bdr,
.btn.grad-stroke.new-grad{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:14px 22px !important;
  border-radius:999px !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro','Segoe UI',Roboto,sans-serif !important;
  font-weight:700 !important;
  font-size:13px !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  text-decoration:none !important;
  transition:all .3s var(--ease) !important;
  border:1px solid transparent !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  background-image:none;
  /* reset Webflow's grid-display on .grad-stroke variants */
  grid-template-rows:none !important;
  grid-template-columns:none !important;
}
.btn svg,
.btn-primary svg,
.btn-ghost svg,
.primary-button svg,
.secondary-button svg,
.gnext-btn-primary svg,
.gnext-btn-secondary svg,
.gp-btn svg,
.products-cta .btn svg,
.jh-hero-cta svg,
.button-4 svg{
  width:14px !important;height:14px !important;
  stroke:currentColor;stroke-width:2;fill:none;
}

/* ——— Primary look (mint solid + dark text + glow on hover) ——— */
.btn-primary,
.primary-button,
.primary-button.with-shadow,
.primary-button.primary-button-nav,
a.primary-button,
.w-button.primary-button,
.gnext-btn-primary,
.gp-btn-primary,
.products-cta .btn,
.jh-hero-cta,
.btn.grad-stroke,
.btn.grad-stroke.minw,
.btn.grad-stroke.minw.green-bdr,
.btn.grad-stroke.new-grad,
.button-4:not(.is-secondary):not(.is-link):not(.is-tertiary):not(.is-alternate){
  background:var(--primary) !important;
  background-image:none !important;
  color:#011d17 !important;
  border-color:transparent !important;
  box-shadow:0 0 0 0 var(--primary-glow);
}
.btn-primary:hover,
.primary-button:hover,
a.primary-button:hover,
.gnext-btn-primary:hover,
.gp-btn-primary:hover,
.products-cta .btn:hover,
.jh-hero-cta:hover,
.btn.grad-stroke:hover,
.button-4:not(.is-secondary):not(.is-link):not(.is-tertiary):not(.is-alternate):hover{
  transform:translateY(-1px) !important;
  background:var(--primary) !important;
  color:#011d17 !important;
  box-shadow:0 10px 40px -8px var(--primary-glow) !important;
}

/* ——— Ghost look (glass + white text + mint border on hover) ——— */
.btn-ghost,
.secondary-button,
.secondarybutton,
a.secondary-button,
.gnext-btn-secondary,
.gp-btn-ghost,
.button-4.is-secondary,
.button-4.is-secondary.is-alternate,
.button-4.is-tertiary,
.button-4.is-alternate{
  position:relative;
  isolation:isolate;
  color:var(--white) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  background:
    radial-gradient(120% 180% at 20% 0%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 55%),
    radial-gradient(120% 180% at 80% 100%,rgba(0,237,179,.18) 0%,rgba(0,237,179,.04) 35%,rgba(0,237,179,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.08) 100%),
    linear-gradient(180deg,rgba(10,41,35,.35),rgba(4,20,16,.45)) !important;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 1px 2px rgba(0,0,0,.4),
    0 8px 24px -8px rgba(0,237,179,.18) !important;
  overflow:hidden;
}
.btn-ghost:hover,
.secondary-button:hover,
.secondarybutton:hover,
a.secondary-button:hover,
.gnext-btn-secondary:hover,
.gp-btn-ghost:hover,
.button-4.is-secondary:hover,
.button-4.is-tertiary:hover,
.button-4.is-alternate:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(0,237,179,.5) !important;
  color:var(--primary) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 12px 32px -6px rgba(0,237,179,.3) !important;
}

/* ——— Inline / link-style buttons collapse to ghost too ——— */
.button-4.is-link,
.button-4.is-link.is-icon{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--white) !important;
  padding:8px 14px !important;
  box-shadow:none !important;
}
.button-4.is-link:hover{
  color:var(--primary) !important;
}

/* =====================================================================
   GL-NAV · single source of truth (desktop bar + mega-menu)
   Replaces former .navbar6_* Webflow overrides. The outer wrapper still
   carries `class="navbar6_component"` so scripts/sync-navbar.ts finds
   it, but no Webflow w-nav/w-dropdown styling is relied upon.
   Mobile drawer CSS lives further below in @media(max-width:991px).
   ===================================================================== */

.gl-nav{
  /* Override Webflow base: .navbar6_component is set to display:flex;
     justify-content:center; padding:0 5%; min-height:4.5rem in
     eine-neue-welt.webflow.css. We need a plain block so .gl-nav__bar
     below can stretch full-width and lay out brand/menu/burger itself. */
  display:block;
  padding:0;
  min-height:0;
  width:100%;
  position:sticky; top:0; z-index:60;
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.gl-nav.is-scrolled,
.gl-nav:has(.gl-nav__trigger[aria-expanded="true"]),
.gl-nav:has(.gl-nav__menu-item:hover),
.gl-nav:has(.gl-nav__menu-item:focus-within){
  background:rgba(2,12,9,.78);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
          backdrop-filter:blur(24px) saturate(160%);
  border-bottom-color:var(--border);
}

/* Wenn der Mobile-Drawer offen ist, übernimmt der Drawer-Scrim die
   Backdrop-Behandlung. Die Navbar wird stabilisiert (kein Flackern
   beim Auf-/Zumachen, wenn vorher gescrollt wurde). */
body.gl-mnav-open .gl-nav,
body.gl-mnav-open .gl-nav.is-scrolled{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
          backdrop-filter:none !important;
  border-bottom-color:transparent !important;
}

.gl-nav__bar{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  height:72px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}

.gl-nav__brand{
  display:inline-flex; align-items:center;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.gl-nav__brand img{ height:30px; width:auto; display:block; border-radius:0; }
.gl-nav__brand:focus-visible{ outline:2px solid var(--primary); outline-offset:4px; border-radius:4px; }

.gl-nav__desktop{
  display:flex; align-items:center; gap:20px;
  flex:1; justify-content:flex-end;
}

.gl-nav__menu{
  list-style:none; margin:0; padding:0;
  height:100%;
  display:flex; align-items:stretch; gap:2px;
}
/* Item fills the full bar height so mouseenter/leave fire across the
   whole vertical column — not only on the smaller button rect. Without
   this the cursor flickered out of `:hover` whenever it crossed the
   28px of empty space inside the bar, briefly closing the panel. */
.gl-nav__menu-item{
  position:static;
  display:flex; align-items:center;
}

.gl-nav__link,
.gl-nav__trigger{
  display:inline-flex; align-items:center; gap:6px;
  height:44px; padding:0 14px;
  font-family:'Inter',sans-serif;
  font-size:13px; font-weight:500; letter-spacing:0;
  color:rgba(255,255,255,.74);
  text-decoration:none;
  background:transparent; border:0;
  border-radius:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .2s var(--ease), background .2s var(--ease);
}
.gl-nav__link:hover,
.gl-nav__trigger:hover,
.gl-nav__trigger[aria-expanded="true"]{
  color:#fff;
  background:rgba(255,255,255,.04);
}
.gl-nav__link:focus-visible,
.gl-nav__trigger:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.gl-nav__chev{
  width:12px; height:12px;
  flex-shrink:0;
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.gl-nav__trigger[aria-expanded="true"] .gl-nav__chev{
  transform:rotate(180deg);
  color:var(--primary);
}

/* Mega-panel — absolute to .gl-nav__bar (item is position:static) */
.gl-nav__mega{
  position:absolute;
  top:100%; left:0; right:0;
  margin:0 auto;
  width:min(96vw, 1200px);
  padding:24px;
  background:rgba(5,20,16,.96);
  border:1px solid var(--border-strong);
  border-radius:20px;
  box-shadow:
    0 40px 100px -30px rgba(0,0,0,.75),
    0 0 60px -20px rgba(0,237,179,.18);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
          backdrop-filter:blur(28px) saturate(160%);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-4px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.gl-nav__trigger[aria-expanded="true"] + .gl-nav__mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(0);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear;
}

.gl-nav__mega-grid{
  display:grid;
  grid-template-columns:1.05fr 1.1fr 0.9fr 1fr;
  gap:24px;
}
.gl-nav__mega-col{ display:flex; flex-direction:column; min-width:0; }
.gl-nav__mega-label{
  margin:0 0 6px;
  padding:0 4px;
  font-size:10px; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--primary);
}
.gl-nav__mega-label--linked a{
  color:inherit; text-decoration:none;
  transition:color .2s var(--ease);
}
.gl-nav__mega-label--linked a:hover{ color:#fff; }
.gl-nav__mega-divider{
  margin:14px 4px 6px;
  font-size:10px; font-weight:700;
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--primary);
}

.gl-nav__mega-item{
  display:flex; align-items:flex-start; gap:12px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none; color:inherit;
  transition:background .2s var(--ease);
}
.gl-nav__mega-item img{
  flex-shrink:0;
  width:32px; height:32px;
  object-fit:contain;
  border-radius:0;
}
.gl-nav__mega-item-text{
  display:flex; flex-direction:column; gap:2px;
  min-width:0;
}
.gl-nav__mega-item-title{
  font-family:'Inter',sans-serif;
  font-size:13px; font-weight:700;
  color:#fff;
  letter-spacing:0; text-transform:none;
  line-height:1.2;
}
.gl-nav__mega-item-sub{
  margin:0;
  font-size:12px; line-height:1.4;
  color:var(--muted);
}
.gl-nav__mega-item:hover{ background:rgba(0,237,179,.06); }
.gl-nav__mega-item:hover .gl-nav__mega-item-title{ color:var(--primary); }
.gl-nav__mega-item:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

.gl-nav__mega-link{
  display:flex; align-items:center;
  padding:9px 12px;
  font-size:13px; font-weight:500;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  border-radius:8px;
  transition:background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.gl-nav__mega-link::before{
  content:"›";
  margin-right:8px;
  color:rgba(0,237,179,.55);
  font-weight:700;
}
.gl-nav__mega-link:hover{
  background:rgba(0,237,179,.06);
  color:var(--primary);
  padding-left:14px;
}
.gl-nav__mega-link:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* CTA group — uses site-wide .btn-ghost / .btn-primary for visual
   consistency with every other CTA on the site. The shared button base
   defined further up (line ~134) enforces identical padding/radius/
   font/height across both buttons via !important — guarantees they
   never drift apart. */
.gl-nav__cta-group{
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
/* Tighten the shared button paddings inside the nav only — they were
   designed for hero-sized CTAs (14px 22px). Nav-context wants slightly
   tighter to keep the bar readable at narrow desktop widths. */
.gl-nav__cta-group > .btn-ghost,
.gl-nav__cta-group > .btn-primary{
  padding:11px 18px !important;
  font-size:13px !important;
  line-height:1 !important;
}

/* Mid-desktop — tighten spacing so menu + 2 CTAs fit comfortably */
@media (max-width:1199px){
  .gl-nav__bar{ padding:0 20px; }
  .gl-nav__desktop{ gap:16px; }
}
@media (max-width:1099px) and (min-width:992px){
  .gl-nav__link, .gl-nav__trigger{ padding:0 10px; font-size:12px; }
  .gl-nav__cta-group > .btn-ghost,
  .gl-nav__cta-group > .btn-primary{
    padding:9px 14px !important;
    font-size:12px !important;
  }
  .gl-nav__mega{ width:96vw; padding:20px; }
  .gl-nav__mega-grid{ gap:16px; grid-template-columns:1fr 1fr 1fr 1fr; }
  .gl-nav__mega-item-sub{ display:none; }
}

/* Mobile breakpoint — desktop nav off, hamburger handled in mobile block below */
@media (max-width:991px){
  .gl-nav__bar{ height:60px; padding:0 16px; }
  .gl-nav__brand img{ height:26px; }
  .gl-nav__desktop{ display:none; }
}

/* Reduced motion — kill all nav animations (covers mobile drawer too) */
@media (prefers-reduced-motion: reduce){
  .gl-nav,
  .gl-nav *,
  .gl-mnav,
  .gl-mnav *{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
  }
}

/* ——— Sections ——— */
section, .section, [class*="section_"]{ background:transparent !important; }
/* page-wrapper must be transparent so the body::before atmospheric layer
   shows through. A solid var(--bg) here was occluding the gradient on
   every page that uses .page-wrapper (~45 pages). */
.page-wrapper{ background:transparent !important; }

.padding-section-large, .padding-section-medium, .padding-section-small{
  padding-top:clamp(48px,8vw,120px) !important;
  padding-bottom:clamp(48px,8vw,120px) !important;
}

/* ——— Header / Hero (Webflow: header76, header-*) ——— */
.header76_component,
[class*="header"][class*="_component"]{
  background:transparent !important;
  min-height:auto;
}
.header76_heading, [class*="header"][class*="_heading"]{
  font-size:clamp(40px,7vw,104px) !important;
  letter-spacing:-.02em !important;
  line-height:1.02 !important;
}

/* ——— Cards / Boxes (tile, layout blocks) ——— */
[class*="_card"],
.card,
[class*="layout"][class*="_card"],
[class*="testimonial"][class*="_card"],
[class*="testimonial"][class*="_component"] > div{
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
}

/* Stat boxes */
[class*="stats"][class*="_component"] [class*="stats"][class*="_item"]{
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
  padding:28px !important;
}
[class*="stats"][class*="_number"]{
  color:var(--primary) !important;
  font-size:clamp(36px,4vw,56px) !important;
  font-weight:900 !important;
}

/* Images soften */
img{ border-radius:8px; }
.navbar6_logo, .footer2_logo-link img, img[src*="Logo"], img[src*="logo"]{ border-radius:0 !important; }

/* ——— Forms ——— */
.form_input, .w-input, .w-select, textarea,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"]{
  background:var(--card) !important;
  border:1px solid var(--border-strong) !important;
  border-radius:12px !important;
  color:var(--white) !important;
  font-family:'Inter',sans-serif !important;
  padding:14px 16px !important;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form_input:focus, .w-input:focus, textarea:focus,
input:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px rgba(0,237,179,.15) !important;
  outline:none !important;
}
.form_input::placeholder, input::placeholder, textarea::placeholder{
  color:var(--muted);
}
.form_field-label, label{
  color:rgba(255,255,255,.72) !important;
  font-size:12px !important;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:600;
}

/* ——— Footer ——— */
.footer2_component, [class*="footer"][class*="_component"]{
  background:linear-gradient(180deg,var(--bg),rgba(2,12,9,.3)) !important;
  border-top:1px solid var(--border) !important;
  color:var(--fg);
}
.footer2_link, [class*="footer"][class*="_link"]{
  color:rgba(255,255,255,.72) !important;
  font-size:13px !important;
  transition:color .2s var(--ease);
}
.footer2_link:hover, [class*="footer"][class*="_link"]:hover{ color:var(--primary) !important; }
.footer2_title, [class*="footer"][class*="_title"], [class*="footer"][class*="_heading"]{
  color:var(--primary) !important;
  font-size:11px !important;
  letter-spacing:.3em !important;
  text-transform:uppercase !important;
  font-weight:700 !important;
}
.footer2_credit-text, [class*="credit"]{
  color:var(--muted) !important;
  font-size:11px !important;
  letter-spacing:.1em;
}

/* ——— Blog / Richtext ——— */
.w-richtext, .blogtext{
  color:rgba(255,255,255,.82) !important;
  font-size:16px;
  line-height:1.7;
}
.w-richtext a, .blogtext a{
  color:var(--primary) !important;
  text-decoration:underline;
  text-decoration-color:rgba(0,237,179,.35);
  text-underline-offset:3px;
}
.w-richtext blockquote, .blogtext blockquote{
  border-left:3px solid var(--primary) !important;
  padding:6px 0 6px 20px !important;
  margin:1.5em 0 !important;
  font-style:italic;
  color:rgba(255,255,255,.7) !important;
}
.w-richtext img, .blogtext img{
  border-radius:12px;
  max-width:100%;
  height:auto;
  margin:1.5em auto;
  display:block;
}

/* ——— Tables ——— */
table, .fs-table{
  width:100%;
  border-collapse:collapse;
  margin:1.5em 0;
  font-size:14px;
}
th, td{
  border:1px solid var(--border) !important;
  padding:10px 14px;
  text-align:left;
  color:rgba(255,255,255,.82);
}
th{
  background:var(--card) !important;
  color:var(--primary) !important;
  font-weight:700;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.15em;
}

/* ——— FAQ (webflow faq3_*) ——— */
[class*="faq"][class*="_component"], [class*="faq"][class*="_item"]{
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
}
[class*="faq"][class*="_question"]{ color:var(--white) !important; }

/* ——— Testimonials ——— */
[class*="testimonial"][class*="_quote"],
[class*="testimonial"][class*="_text"]{
  color:rgba(255,255,255,.85) !important;
  font-size:clamp(18px,2.2vw,26px);
  line-height:1.5;
}

/* ——— Dividers / HR ——— */
hr, [class*="divider"]{ border-color:var(--border) !important; background:var(--border); }

/* ——— Tags / Chips ——— */
.tag, .chip, [class*="_tag"], [class*="category"]{
  display:inline-block;
  padding:6px 12px;
  background:rgba(0,237,179,.08);
  color:var(--primary) !important;
  border:1px solid var(--border-strong);
  border-radius:999px;
  font-size:11px !important;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ——— Responsive tweaks ——— */
@media (max-width:991px){
  .padding-section-large{ padding-top:64px !important; padding-bottom:64px !important; }
}
@media (max-width:767px){
  [class*="header"][class*="_heading"]{ font-size:clamp(32px,9vw,52px) !important; }
  .navbar6_dropdown-list{ padding:16px !important; }
}
@media (max-width:480px){
  .btn, .btn-primary, .btn-ghost,
  .primary-button, .secondary-button, .secondarybutton, .w-button,
  .gnext-btn-primary, .gnext-btn-secondary,
  .gp-btn, .gp-btn-primary, .gp-btn-ghost,
  .products-cta .btn, .jh-hero-cta,
  .button-4{
    padding:12px 18px !important;
    font-size:12px !important;
  }
}

/* ——— Utility overrides for inline Webflow backgrounds that fight us ——— */
[style*="background-color: rgb(255"]{ background-color:var(--bg) !important; }
[style*="background-color: rgb(250"]{ background-color:var(--card) !important; }
[style*="background: #fff"], [style*="background: white"]{ background:var(--bg) !important; }

/* Prevent light-mode body on blog pages */
body[class*="light"], body.blog, body.post{
  background:var(--bg) !important;
  color:var(--fg) !important;
}

/* =====================================================================
   NEW HERO — imported 1:1 from Globalist Home.html
   ===================================================================== */
.hero{
  position:relative;padding:96px 0 40px;text-align:center;
  overflow:hidden;isolation:isolate;min-height:min(95vh,980px);
}
.hero-inner{max-width:1040px;margin:0 auto;position:relative;z-index:2;padding:0 28px}

/* solid-color background layer (logo-field style, mint palette) */
.hero-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(0,237,179,.10), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(0,237,179,.08), transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, #041410 100%);
}

/* stage holds glow + dotted globe + readability vignette
   z-index ordering inside .hero-stage:
     hero-glow         z:1   (soft mint pulse)
     hero-globe        z:2   (rotating dotted sphere)
     hero-readability  z:3   (darkens center for text legibility) */
.hero-stage{position:absolute;inset:0;pointer-events:none;z-index:0}

.hero-glow{z-index:1}
.hero-globe{z-index:2}
.hero-readability{z-index:3}

/* ── Dotted globe ─────────────────────────────────────────────── */
.hero-globe{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(880px,82vw);height:min(880px,82vw);
  /* Soft circular mask so dots fade at the rim */
  -webkit-mask-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,.85) 0%, #000 50%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,.85) 0%, #000 50%, transparent 78%);
  opacity:.55;
}
.hero-globe svg{width:100%;height:100%;display:block;overflow:visible}
.globe-rotator{
  /* viewBox is -300 -300 600 600, so SVG (0,0) is the visual center.
     Keep default transform-box so rotation happens around user-space origin. */
  transform-origin:0 0;
  animation:globeSpin 160s linear infinite;
  will-change:transform;
}
@keyframes globeSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .globe-rotator{animation:none}
}

.hero-glow{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:min(1120px,100vw);height:min(1120px,100vw);border-radius:50%;
  background:
    radial-gradient(circle at 32% 34%,rgba(0,237,179,.22) 0%,transparent 46%),
    radial-gradient(circle at 72% 68%,rgba(0,237,179,.14) 0%,transparent 52%);
  filter:blur(42px);animation:glowPulse 9s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}

.hero-readability{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(1100px,100vw);height:620px;pointer-events:none;
  background:radial-gradient(ellipse 55% 55% at 50% 50%,rgba(2,12,9,.78) 0%,rgba(2,12,9,.4) 38%,transparent 72%);
  filter:blur(30px);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 72%,var(--bg) 100%);
}

/* trust pill */
.hero-trust{
  display:inline-flex;align-items:center;gap:12px;
  padding:7px 14px 7px 7px;border-radius:100px;
  background:rgba(4,20,16,.6);border:1px solid var(--border-strong);
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.85);
  margin-bottom:36px;backdrop-filter:blur(12px);
}
.hero-trust .dot-wrap{width:20px;height:20px;border-radius:50%;background:rgba(0,237,179,.15);display:flex;align-items:center;justify-content:center}
.hero-trust .dot{width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block;box-shadow:0 0 0 0 rgba(0,237,179,.55);animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,237,179,.55)}100%{box-shadow:0 0 0 14px rgba(0,237,179,0)}}
.hero-trust strong{color:var(--primary);font-weight:800;letter-spacing:.1em}

/* headline */
.hero h1{
  font-size:clamp(40px,6.4vw,90px);letter-spacing:-.012em;margin:0 auto 28px;line-height:.98;max-width:18ch;
  background:linear-gradient(180deg,#fff 0%,#fff 50%,rgba(255,255,255,.72) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  text-wrap:balance;text-transform:uppercase !important;font-weight:800;
}
.hero h1 .accent{
  color:var(--primary);-webkit-text-fill-color:var(--primary);
  text-shadow:0 0 100px var(--primary-glow),0 0 40px var(--primary-glow);
  background:none;position:relative;white-space:nowrap;
}
.hero h1 .accent::after{
  content:"";position:absolute;left:5%;right:5%;bottom:.03em;height:.06em;
  background:var(--primary);opacity:.25;filter:blur(6px);
}
.hero-sub{
  font-size:clamp(16px,1.5vw,19px);max-width:640px;margin:0 auto 36px;
  color:rgba(235,242,240,.88) !important;font-weight:400;
  text-shadow:0 2px 18px rgba(2,12,9,.85);
}
.hero-sub em{color:#fff;font-style:normal;font-weight:700}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Hero buttons inherit the global .btn-primary / .btn-ghost spec defined
   above. Do not redefine button visuals here — single source of truth. */

/* brand marquee */
.hero-brands{
  margin-top:44px;width:100%;max-width:980px;margin-left:auto;margin-right:auto;
  display:flex;flex-direction:column;align-items:center;gap:18px;
}
.hero-brands-lbl{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--muted);font-weight:700;display:inline-flex;align-items:center;gap:12px;
}
.hero-brands-lbl::before,.hero-brands-lbl::after{
  content:"";width:44px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
}
.hero-brands-viewport{
  width:100%;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.hero-brands-track{
  display:flex;gap:56px;width:max-content;align-items:center;
  animation:hbSlide 60s linear infinite;
}
.hero-brands-viewport:hover .hero-brands-track{animation-play-state:paused}
@keyframes hbSlide{to{transform:translateX(-50%)}}

/* Real SVG/PNG logos inside the marquee */
img.hb-logo{
  height:30px;width:auto;max-width:160px;
  object-fit:contain;object-position:center;
  opacity:.72;filter:brightness(0) invert(1);          /* force white */
  transition:opacity .3s var(--ease),transform .3s var(--ease),filter .3s var(--ease);
  background:transparent !important;padding:0 !important;border-radius:0 !important;
  flex-shrink:0;
}
img.hb-logo:hover{
  opacity:1;transform:scale(1.06);
  filter:none;                                          /* show original colour on hover */
}
/* PNGs (Zalando/Qonto/Riani) are already white — skip the brightness-invert */
img.hb-logo[src$=".png"]{filter:none;opacity:.85}
img.hb-logo[src$=".png"]:hover{opacity:1}

/* Responsive hero tweaks */
@media(max-width:991px){
  .hero{min-height:auto;padding:72px 0 40px}
  .hero-inner{padding:0 20px}
  .hero h1{font-size:clamp(34px,6.6vw,64px);max-width:16ch;letter-spacing:-.01em}
  .hero-sub{font-size:15px;padding:0 8px}
  .hero-brands{margin-top:36px}
}
@media(max-width:767px){
  .hero{padding:56px 0 32px;min-height:auto}
  .hero-inner{padding:0 16px}
  .hero h1{font-size:clamp(28px,8.4vw,44px);letter-spacing:-.005em;line-height:1.02;max-width:14ch}
  .hero h1 .accent{white-space:normal}               /* allow accent to wrap on narrow screens */
  .hero-sub{font-size:14px;line-height:1.5;margin-bottom:28px}
  .hero-trust{display:none}
  .hero-ctas{gap:10px;width:100%}
  .hero .btn{flex:1 1 140px;padding:13px 16px;font-size:12.5px}
  .hero-brands{margin-top:28px;gap:14px}
  .hero-brands-lbl{font-size:9px;letter-spacing:.3em}
  .hero-brands-lbl::before,.hero-brands-lbl::after{width:24px}
  img.hb-logo{height:22px;max-width:110px}
  .hero-brands-track{gap:36px}
  /* Readability mask shrinks on mobile */
  .hero-readability{width:100%;height:420px}
}
@media(max-width:480px){
  .hero{padding:44px 0 28px}
  .hero h1{font-size:clamp(26px,9.2vw,38px);letter-spacing:0}
  .hero-sub{font-size:13.5px}
  .hero .btn{flex:1 1 100%;min-width:0}           /* stack CTAs vertically */
  img.hb-logo{height:20px;max-width:96px}
  .hero-brands-track{gap:28px}
}
/* Touch devices: disable hover scale on marquee (prevents accidental reveals) */
@media (hover:none){
  img.hb-logo:hover{opacity:.8;transform:none;filter:brightness(0) invert(1)}
  img.hb-logo[src$=".png"]:hover{opacity:.9}
  .hero-brands-viewport:hover .hero-brands-track{animation-play-state:running}
}

/* =====================================================================
   GLOBALIST · Customer Logo Marquee (reusable component)
   Single source of truth: public/_partials/customer-slider.html
   Sync via: npm run sync:customer-slider
   ===================================================================== */
.gl-brands{
  --gl-brands-fade: 8%;
  --gl-brands-gap: 64px;
  --gl-brands-logo-h: 36px;
  --gl-brands-logo-max: 180px;
  --gl-brands-speed: 40s;

  width:100%;
  display:flex;flex-direction:column;align-items:center;gap:22px;
  position:relative;
}
.gl-brands-lbl{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--muted,#9aa0a6);font-weight:700;
  display:inline-flex;align-items:center;gap:12px;
}
.gl-brands-lbl::before,.gl-brands-lbl::after{
  content:"";width:44px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
}
.gl-brands-viewport{
  width:100%;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gl-brands-fade),#000 calc(100% - var(--gl-brands-fade)),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 var(--gl-brands-fade),#000 calc(100% - var(--gl-brands-fade)),transparent);
  /* Eigener Compositing-Layer fürs Viewport — bricht das Mask-Compositing
     vom Track-Compositing ab, sonst dropped Safari iOS bei langen Tracks
     einzelne Logos im animierten Frame. */
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.gl-brands-track{
  display:flex;gap:var(--gl-brands-gap);width:max-content;align-items:center;
  animation:glBrandsSlide var(--gl-brands-speed) linear infinite;
  /* will-change entfernt — bei sehr breiten Tracks (~20.000 px doubled)
     reserviert Safari/iOS die Layer-Texture preemptiv und sprengt damit
     die maximale Texture-Size, was zum Verschwinden einzelner Logos führt.
     translate3d + backface-visibility liefern dieselbe GPU-Promotion,
     ohne den Speicher-Overhead. */
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.gl-brands-viewport:hover .gl-brands-track{animation-play-state:paused}
@keyframes glBrandsSlide{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}

img.gl-brand-logo{
  height:var(--gl-brands-logo-h);width:auto;max-width:var(--gl-brands-logo-max);
  object-fit:contain;object-position:center;
  opacity:.72;filter:brightness(0) invert(1);
  transition:opacity .3s var(--ease,cubic-bezier(.2,.7,.2,1)),
             transform .3s var(--ease,cubic-bezier(.2,.7,.2,1)),
             filter .3s var(--ease,cubic-bezier(.2,.7,.2,1));
  background:transparent !important;padding:0 !important;border-radius:0 !important;
  flex-shrink:0;
  /* Jedes Logo bekommt einen stabilen GPU-Layer — verhindert das
     "Logo-Drop"-Phänomen im Marquee, wenn der Browser einzelne
     Image-Tiles während der Animation neu rastern muss. */
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
img.gl-brand-logo:hover{
  opacity:1;transform:translateZ(0) scale(1.06);
  filter:none;
}
img.gl-brand-logo[src$=".png"]{filter:none;opacity:.85}
img.gl-brand-logo[src$=".png"]:hover{opacity:1}

.hero-inner .gl-brands{
  --gl-brands-fade: 12%;
  --gl-brands-gap: 56px;
  --gl-brands-logo-h: 30px;
  --gl-brands-logo-max: 160px;
  max-width:980px;margin:44px auto 0;gap:18px;
}

.section_logo3 .gl-brands,
.section_logo3-2 .gl-brands,
.section_logo3-3 .gl-brands{
  padding-block:8px;
}

@media(max-width:1199px){
  .gl-brands{--gl-brands-logo-h:32px;--gl-brands-gap:52px}
}
@media(max-width:991px){
  .gl-brands{--gl-brands-logo-h:28px;--gl-brands-gap:44px;gap:18px}
  .hero-inner .gl-brands{margin-top:36px}
}
@media(max-width:767px){
  .gl-brands{--gl-brands-logo-h:24px;--gl-brands-logo-max:120px;--gl-brands-gap:36px;--gl-brands-fade:6%;gap:14px}
  .hero-inner .gl-brands{--gl-brands-fade:10%;margin-top:28px}
  .gl-brands-lbl{font-size:9px;letter-spacing:.3em}
  .gl-brands-lbl::before,.gl-brands-lbl::after{width:24px}
}
@media(max-width:480px){
  .gl-brands{--gl-brands-logo-h:22px;--gl-brands-logo-max:104px;--gl-brands-gap:28px}
}
@media (hover:none){
  img.gl-brand-logo:hover{opacity:.8;transform:none;filter:brightness(0) invert(1)}
  img.gl-brand-logo[src$=".png"]:hover{opacity:.9}
  .gl-brands-viewport:hover .gl-brands-track{animation-play-state:running}
}

/* =====================================================================
   GLOBALIST · Premium Mobile Navigation
   Self-contained — Webflow's mobile nav wird auf <992px versteckt,
   diese custom Drawer-Lösung übernimmt komplett.
   ===================================================================== */

/* Trigger ist nur auf Mobile sichtbar */
.gl-mnav-trigger{ display:none; }

@media(max-width:991px){
  /* Webflow's eigene Mobile-Nav komplett ausblenden — kein Override-Krieg */
  .navbar6_component .navbar6_menu.w-nav-menu,
  .navbar6_component .navbar6_menu-button.w-nav-button,
  .navbar6_component .w-nav-overlay{
    display:none !important;
  }

  /* Top-Bar layout — sauber zentriert */
  .navbar6_component{ padding:0 !important; }
  .navbar6_container.navtop{
    display:flex !important;align-items:center !important;justify-content:space-between !important;
    height:60px;padding:0 16px !important;
  }
  .navbar6_logo{ height:26px !important;width:auto !important; }

  /* — Trigger button (Hamburger) — */
  .gl-mnav-trigger{
    position:relative;
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;
    margin:0;padding:0;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    color:#fff;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
  }
  .gl-mnav-trigger:active{ transform:scale(.95); }
  .gl-mnav-trigger[aria-expanded="true"]{
    background:rgba(0,237,179,.12);
    border-color:rgba(0,237,179,.35);
  }
  .gl-mnav-bars{
    position:relative;display:block;width:20px;height:14px;
  }
  .gl-mnav-bars > span{
    position:absolute;left:0;width:20px;height:2px;
    background:currentColor;border-radius:2px;
    transition:transform .35s var(--ease), top .25s var(--ease) .05s, opacity .15s var(--ease);
  }
  .gl-mnav-bars > span:nth-child(1){ top:1px; }
  .gl-mnav-bars > span:nth-child(2){ top:6px; }
  .gl-mnav-bars > span:nth-child(3){ top:11px; }
  .gl-mnav-trigger[aria-expanded="true"] .gl-mnav-bars > span:nth-child(1){
    top:6px; transform:rotate(45deg);
    transition:top .25s var(--ease), transform .35s var(--ease) .15s;
  }
  .gl-mnav-trigger[aria-expanded="true"] .gl-mnav-bars > span:nth-child(2){ opacity:0; }
  .gl-mnav-trigger[aria-expanded="true"] .gl-mnav-bars > span:nth-child(3){
    top:6px; transform:rotate(-45deg);
    transition:top .25s var(--ease), transform .35s var(--ease) .15s;
  }

  /* — Drawer container — */
  .gl-mnav{
    position:fixed;
    top:0;left:0;right:0;
    /* Bottom an die dynamische Viewport-Height pinnen, damit auf iOS
       Safari der Foot mit den CTAs nicht unter der Adressleiste verschwindet. */
    height:100vh;
    height:100dvh;
    z-index:9990;
    pointer-events:none;
    visibility:hidden;
    /* Visibility flippt nach der Slide-Out-Animation, damit Drawer-Content
       bis zum Ende sichtbar bleibt und keine Fokussierbarkeit zurückbleibt. */
    transition:visibility 0s linear .42s;
  }
  .gl-mnav.is-open{
    pointer-events:auto;
    visibility:visible;
    transition:visibility 0s linear;
  }

  /* Scrim (backdrop) */
  .gl-mnav-scrim{
    position:absolute;inset:0;
    background-color:rgba(2,8,6,.62) !important;
    -webkit-backdrop-filter:blur(8px) saturate(1.2);
            backdrop-filter:blur(8px) saturate(1.2);
    opacity:0;
    transition:opacity .32s cubic-bezier(0.32,0.72,0,1);
  }
  .gl-mnav.is-open .gl-mnav-scrim{ opacity:1; }

  /* Panel (the drawer itself) */
  .gl-mnav-panel{
    position:absolute;top:0;right:0;bottom:0;
    width:min(420px,92vw);
    max-width:100%;
    height:100%;
    min-height:0;
    display:flex;flex-direction:column;
    background-color:#031310 !important;
    background-image:
      radial-gradient(ellipse at 100% 0%, rgba(0,237,179,.12) 0%, transparent 55%),
      linear-gradient(180deg, rgba(7,24,19,1) 0%, rgba(2,12,9,1) 100%);
    border-left:1px solid rgba(0,237,179,.14);
    box-shadow:-32px 0 80px -20px rgba(0,0,0,.7), -1px 0 0 rgba(0,237,179,.06);
    transform:translateX(102%);
    transition:transform .42s cubic-bezier(0.32,0.72,0,1);
    outline:none;
  }
  .gl-mnav.is-open .gl-mnav-panel{ transform:translateX(0); }

  /* Drawer header */
  .gl-mnav-head{
    flex-shrink:0;
    display:flex;align-items:center;justify-content:space-between;
    height:60px;padding:0 14px 0 16px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .gl-mnav-brand{ display:inline-flex;align-items:center; }
  .gl-mnav-brand img{ height:24px;width:auto;border-radius:0 !important; }
  .gl-mnav-close{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;
    background:transparent;border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    color:rgba(255,255,255,.85);cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  }
  .gl-mnav-close:active{ transform:scale(.94); }
  .gl-mnav-close svg{ width:20px;height:20px;display:block; }
  @media(hover:hover){
    .gl-mnav-close:hover{
      background:rgba(0,237,179,.06);
      border-color:rgba(0,237,179,.3);
      color:var(--primary);
    }
  }

  /* Drawer body — scrollable */
  .gl-mnav-body{
    flex:1 1 auto;
    /* min-height:0 ist nötig, damit der flex-Body bei großem Inhalt
       schrumpft und der Foot mit den CTAs immer sichtbar bleibt. */
    min-height:0;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding:14px 14px 8px;
  }
  .gl-mnav-body::-webkit-scrollbar{ width:4px; }
  .gl-mnav-body::-webkit-scrollbar-thumb{ background:rgba(0,237,179,.18);border-radius:4px; }

  .gl-mnav-nav{ display:flex;flex-direction:column;gap:6px; }

  /* Top-level row (link + toggle share) */
  .gl-mnav-row{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;
    padding:17px 16px;
    background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.06);
    border-radius:14px;
    color:#fff;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;
    text-decoration:none;text-align:left;line-height:1.2;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
  }
  .gl-mnav-row:active{ transform:scale(.985); }
  @media(hover:hover){
    .gl-mnav-row:hover{
      background:rgba(0,237,179,.06);
      border-color:rgba(0,237,179,.18);
      color:#fff;
    }
  }
  .gl-mnav-row--toggle{ background:none; }
  .gl-mnav-row[aria-expanded="true"]{
    background:rgba(0,237,179,.08);
    border-color:rgba(0,237,179,.24);
  }
  .gl-mnav-arrow{
    color:rgba(255,255,255,.35);
    font-weight:400;font-size:18px;line-height:1;
    transition:transform .25s var(--ease), color .2s var(--ease);
  }
  .gl-mnav-row:active .gl-mnav-arrow,
  .gl-mnav-row[aria-expanded="true"] .gl-mnav-arrow{
    color:var(--primary);
    transform:translateX(2px);
  }
  .gl-mnav-chev{
    width:18px;height:18px;color:rgba(255,255,255,.5);
    transition:transform .35s var(--ease), color .2s var(--ease);
    flex-shrink:0;
  }
  .gl-mnav-row[aria-expanded="true"] .gl-mnav-chev{
    transform:rotate(180deg);
    color:var(--primary);
  }

  /* Services accordion (grid-rows trick for smooth height anim) */
  .gl-mnav-services{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .38s cubic-bezier(0.32,0.72,0,1);
  }
  .gl-mnav-services-inner{
    overflow:hidden;
    min-height:0;
  }
  .gl-mnav-services.is-open{ grid-template-rows:1fr; }
  .gl-mnav-services.is-open .gl-mnav-services-inner{ padding:6px 4px 8px; }

  /* Section in services */
  .gl-mnav-section{
    display:flex;flex-direction:column;gap:4px;
    padding:14px 0 8px;
  }
  .gl-mnav-section + .gl-mnav-section{
    border-top:1px solid rgba(255,255,255,.05);
  }
  .gl-mnav-section-label{
    font-size:10px;font-weight:700;
    letter-spacing:.32em;text-transform:uppercase;
    color:var(--primary);
    padding:4px 6px 8px;
  }

  /* Service tile (icon + title + sub) */
  .gl-mnav-tile{
    display:flex;align-items:center;gap:14px;
    padding:12px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.05);
    border-radius:12px;
    color:#fff;text-decoration:none;
    transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
  }
  .gl-mnav-tile:active{
    background:rgba(0,237,179,.06);
    border-color:rgba(0,237,179,.2);
    transform:scale(.99);
  }
  @media(hover:hover){
    .gl-mnav-tile:hover{
      background:rgba(0,237,179,.06);
      border-color:rgba(0,237,179,.2);
    }
  }
  .gl-mnav-tile img{
    flex-shrink:0;
    width:32px;height:32px;
    object-fit:contain;
    border-radius:0 !important;
  }
  .gl-mnav-tile span{
    display:flex;flex-direction:column;gap:3px;min-width:0;
  }
  .gl-mnav-tile strong{
    font-family:'Inter',sans-serif;font-size:14px;font-weight:700;
    color:#fff;letter-spacing:0;text-transform:none;line-height:1.2;
  }
  .gl-mnav-tile em{
    font-style:normal;font-weight:400;
    font-size:12px;line-height:1.4;
    color:rgba(255,255,255,.55);
  }

  /* Komplettlösungen list */
  .gl-mnav-link{
    display:flex;align-items:center;
    padding:13px 14px;
    background:rgba(255,255,255,.015);
    border:1px solid rgba(255,255,255,.04);
    border-radius:10px;
    color:rgba(255,255,255,.82);
    font-size:13px;font-weight:500;
    text-decoration:none;line-height:1.3;
    transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  }
  .gl-mnav-link::before{
    content:"›";
    margin-right:10px;
    color:rgba(0,237,179,.7);
    font-size:16px;font-weight:700;line-height:1;
  }
  .gl-mnav-link:active{
    background:rgba(0,237,179,.06);
    border-color:rgba(0,237,179,.18);
    color:var(--primary);
  }
  @media(hover:hover){
    .gl-mnav-link:hover{
      background:rgba(0,237,179,.06);
      border-color:rgba(0,237,179,.18);
      color:var(--primary);
    }
  }

  /* — Sticky footer mit CTAs — */
  .gl-mnav-foot{
    flex-shrink:0;
    display:flex;flex-direction:column;gap:10px;
    padding:14px 14px max(14px, env(safe-area-inset-bottom));
    border-top:1px solid rgba(255,255,255,.06);
    background:linear-gradient(180deg, rgba(2,12,9,.4) 0%, rgba(2,12,9,.95) 100%);
  }
  .gl-mnav-cta{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;
    min-height:50px;
    padding:14px 20px;
    border-radius:14px;
    font-family:'Inter',sans-serif;font-size:14px;font-weight:700;letter-spacing:.01em;
    text-decoration:none;
    transition:background .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease);
  }
  .gl-mnav-cta:active{ transform:scale(.985); }
  .gl-mnav-cta--primary{
    background:var(--primary);color:#011d17;
    box-shadow:0 8px 32px -10px var(--primary-glow);
  }
  @media(hover:hover){
    .gl-mnav-cta--primary:hover{
      background:var(--primary-600);
      box-shadow:0 12px 40px -8px var(--primary-glow);
    }
  }
  .gl-mnav-cta--ghost{
    background:rgba(255,255,255,.04);
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
  }
  @media(hover:hover){
    .gl-mnav-cta--ghost:hover{
      background:rgba(0,237,179,.08);
      border-color:rgba(0,237,179,.32);
      color:var(--primary);
    }
  }

  /* Body scroll lock — overflow:hidden statt position:fixed, damit
     keine sichtbaren Snap-Backs beim Schließen + keine Layout-Shifts
     beim Navigieren auf eine neue Seite. Scroll-Position bleibt
     natürlich erhalten. */
  body.gl-mnav-open{
    overflow:hidden;
    overscroll-behavior:contain;
    /* iOS Safari: verhindert rubber-band darunter */
    touch-action:none;
  }
}

/* — Phones — Drawer geht full-width — */
@media(max-width:480px){
  .gl-mnav-panel{
    width:100% !important;
    border-left:none !important;
  }
}

/* — Desktop: alles vom Mobile-Drawer komplett aus — */
@media(min-width:992px){
  .gl-mnav, .gl-mnav-trigger{ display:none !important; }
}

/* =====================================================================
   Case-Studies index — first-tile CTA "Weitere Cases anfragen"
   Frosted-glass surface, locked to position 1 via order:-9999
   ===================================================================== */
.gl-case-cta-item{ order:-9999 !important; }
.gl-case-cta-tile{
  position:relative;
  display:flex;
  align-items:stretch;
  width:100%;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  isolation:isolate;
  text-decoration:none !important;
  color:var(--white);
  border:1px solid rgba(0,237,179,.22);
  background:
    radial-gradient(120% 160% at 18% 12%,rgba(0,237,179,.18) 0%,rgba(0,237,179,.04) 35%,transparent 60%),
    radial-gradient(140% 180% at 85% 95%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 40%,transparent 65%),
    linear-gradient(160deg,rgba(7,31,25,.55) 0%,rgba(2,12,9,.75) 100%);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 1px 2px rgba(0,0,0,.4),
    0 18px 48px -16px rgba(0,237,179,.22);
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.gl-case-cta-frost{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 75% 18%,rgba(0,237,179,.20),transparent 55%),
    radial-gradient(circle at 18% 78%,rgba(0,237,179,.10),transparent 60%);
  filter:blur(18px);
  opacity:.9;
}
.gl-case-cta-tile::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(25deg,rgba(0,237,179,.04) 0 1px,transparent 1px 14px);
  mix-blend-mode:overlay;opacity:.55;
}
.gl-case-cta-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  width:100%;
  padding:clamp(20px,3vw,32px);
  gap:14px;
}
.gl-case-cta-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;
  color:#00EDB3;
  display:inline-flex;align-items:center;gap:8px;
}
.gl-case-cta-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#00EDB3;
  box-shadow:0 0 12px rgba(0,237,179,.7);
}
.gl-case-cta-headline{
  margin:0;
  font-family:'Inter',sans-serif;
  font-size:clamp(22px,2.4vw,30px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.05;
  color:#fff;
}
.gl-case-cta-sub{
  margin:0;
  font-size:14px;line-height:1.55;
  color:rgba(235,242,240,.78);
  max-width:38ch;
}
.gl-case-cta-pill{
  margin-top:6px;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;
  border-radius:999px;
  background:#00EDB3;
  color:#011d17;
  font-size:12px;font-weight:700;letter-spacing:.02em;line-height:1;
  box-shadow:0 8px 24px -8px rgba(0,237,179,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gl-case-cta-pill svg{ stroke:#011d17; }
.gl-case-cta-tile:hover{
  border-color:rgba(0,237,179,.5);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 24px 60px -18px rgba(0,237,179,.4);
}
.gl-case-cta-tile:hover .gl-case-cta-pill{
  transform:translateX(2px);
  box-shadow:0 12px 32px -8px rgba(0,237,179,.7);
}

/* Responsive — match the rest of the grid collapse */
@media (max-width:991px){
  .gl-case-cta-tile{ aspect-ratio:5/4; }
  .gl-case-cta-headline{ font-size:clamp(20px,3vw,26px); }
}
@media (max-width:767px){
  .gl-case-cta-tile{ aspect-ratio:auto;min-height:280px; }
}
@media (max-width:480px){
  .gl-case-cta-tile{ min-height:260px; }
  .gl-case-cta-eyebrow{ letter-spacing:.26em; }
  .gl-case-cta-sub{ font-size:13px; }
  .gl-case-cta-pill{ width:100%;justify-content:center; }
}
@media (hover:none){
  .gl-case-cta-tile:hover{ transform:none; }
  .gl-case-cta-tile:hover .gl-case-cta-pill{ transform:none; }
}