/* ==========================================================================
   DropsA — HEADER + FOOTER (GLOBAL)
   Replaces the scattered header/footer rules in /style.css. Loaded after both
   global sheets, so it wins without !important.
   The logo is untouched: same file, same size, same position.
   ========================================================================== */

/* ---------- header ---------- */
/* FIXED, not sticky, and paired with a constant-height spacer below.
   With `position:sticky` the header keeps a placeholder in normal flow at the
   very top of the document. Collapsing the utility row on scroll shrank that
   placeholder by ~39px, so every time it condensed the whole page yanked up
   by 39px — the visible "jitter" on the first scroll. Taking the header out of
   flow and reserving its EXPANDED height once (--hd-full) means condensing
   changes nothing about the document's layout. */
.ds-hd{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--ds-navy);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow var(--ds-t);
}
.ds-hd__spacer{ height:var(--hd-full, 92px); flex:none; }
/* used while measuring the expanded height so the in-flight transition
   cannot report a mid-animation value */
.ds-hd.is-measuring .ds-hd__util{ transition:none !important; }
/* /style.css has `header:not(.sticky-header){ padding:20px 0 }` — a selector
   whose specificity (type + :not(.class)) a plain `.ds-hd` class rule cannot
   outrank no matter which file loads last. This header used to also carry
   `.sticky-header` purely to dodge that rule via the `:not()`, but that class
   is what several OTHER legacy, `!important`-laden, ID-selector rules for the
   OLD mobile menu also key off (`.sticky-header #nav-links`, `.sticky-header
   .menu-toggle` — one of them silently pinned this header's own drawer
   off-screen). Matching the same specificity tier directly instead. */
header.ds-hd{ padding:0 !important; margin:0 !important; }
.ds-hd[data-stuck="true"]{ box-shadow:0 10px 30px rgba(8,27,53,.28); }

/* utility row — contact first, the way a B2B buyer scans a supplier site */
.ds-hd__util{
  background:rgba(0,0,0,.22); border-bottom:1px solid rgba(255,255,255,.06);
  max-height:48px; overflow:hidden;
  transition:max-height 220ms ease, opacity 180ms ease, border-color 220ms ease;
}
/* scrolling down past the top tucks the contact strip away and keeps only the
   main bar sticky, reclaiming vertical space; scrolling back up (even a
   little) brings it straight back — never hidden while still at the top */
.ds-hd[data-condensed="true"] .ds-hd__util{
  max-height:0; opacity:0; border-color:transparent; pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .ds-hd__util{ transition:none; } }
.ds-hd__util-in{
  /* matches .ds-hd__in's width so the two rows stay left/right aligned.
     3-column grid (not flex+auto-margins) so the company name is centred on
     the BAR, not merely on the space left over by the items beside it. */
  max-width:1680px; margin-inline:auto;
  padding:0 var(--ds-gutter); min-height:38px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--ds-4);
}
.ds-hd__util-l{ display:flex; align-items:center; gap:var(--ds-5); min-width:0; }
.ds-hd__util-r{ display:flex; align-items:center; justify-content:flex-end; min-width:0; }
.ds-hd__util-brand{
  justify-self:center; white-space:nowrap;
  font-size:.8125rem; font-weight:600; letter-spacing:.02em; color:#dbe6f6;
}
.ds-hd__util-i{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.8125rem; line-height:1; color:#b9c9e0; text-decoration:none;
  padding:9px 0; transition:color var(--ds-t);
}
.ds-hd__util-i svg{ width:14px; height:14px; flex:none; color:var(--ds-gold); }
.ds-hd__util-i:not(.ds-hd__util-i--plain):hover{ color:#fff; }
/* the address is a full street line now, not just the city — keep it on one
   line and clip rather than let it wrap and blow past the strip's 48px cap */
.ds-hd__util-i--plain{ margin-left:auto; min-width:0; }
.ds-hd__util-i--plain span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* main bar
   NOT capped at var(--ds-container) (1200px) — that is the page CONTENT
   width, sized for reading columns and card grids. The header is a persistent
   bar, not a card, and 7 nav items + a CTA + a language switcher genuinely
   need more horizontal room than that: capping it here meant real (non-mocked)
   font metrics forced the mobile drawer open even on a 1900px monitor. 1680px
   comfortably fits the longest (German) label set inline with room to spare,
   confirmed by the JS overflow check below never engaging above ~1160px. */
.ds-hd__in{
  max-width:1680px; margin-inline:auto;
  padding:0 var(--ds-gutter); min-height:84px;
  display:flex; align-items:center; gap:var(--ds-5);
}
.ds-hd__logo{ flex:none; display:flex; align-items:center; }
.ds-hd__logo a{ display:block; line-height:0; }
/* slightly taller than the 44px nav-item row so the wordmark reads as the
   most prominent thing in the bar, not smaller than the links beside it */
.ds-hd__logo img{ display:block; height:48px; width:auto; }

.ds-hd__panel{ display:flex; align-items:center; gap:var(--ds-6); flex:1; min-width:0; }
/* CENTRED, not left-packed. The nav track takes the whole space between the
   logo and the actions and centres its items inside it, so the bar reads as
   three balanced blocks (logo | menu | language + CTA) instead of a left-heavy
   run of links with a gap before the buttons. `justify-content` only moves the
   items within the track, so the drawer breakpoint measurement below — which
   reads `nav.scrollWidth` — is unaffected. */
.ds-hd__nav{
  display:flex; align-items:center; justify-content:center; gap:4px;
  list-style:none; margin:0; padding:0; flex:1; min-width:0;
}
.ds-hd__nav a{
  position:relative; display:inline-flex; align-items:center;
  min-height:44px; padding:0 15px; border-radius:8px;
  color:#d7e2f2; font-size:.9375rem; font-weight:500; text-decoration:none;
  white-space:nowrap; transition:color var(--ds-t), background var(--ds-t);
}
.ds-hd__nav a:hover{ color:#fff; background:rgba(255,255,255,.07); }
/* current page marked by weight + a gold rule, never by colour alone */
.ds-hd__nav a.is-current{ color:#fff; font-weight:700; }
.ds-hd__nav a.is-current::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px;
  height:2px; border-radius:2px; background:var(--ds-gold);
}
.ds-hd__aside{ display:flex; align-items:center; gap:var(--ds-4); flex:none; }
.ds-hd__cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 18px; border-radius:10px;
  background:var(--ds-gold); color:var(--ds-navy);
  font-size:.9063rem; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background var(--ds-t), transform var(--ds-t);
}
.ds-hd__cta:hover{ background:var(--ds-gold-dark); transform:translateY(-1px); }

/* burger — appears only once the nav stops fitting */
.ds-hd__burger{
  display:none; margin-left:auto;
  width:48px; height:48px; padding:12px;
  background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:10px;
  cursor:pointer; flex-direction:column; justify-content:space-between;
}
.ds-hd__burger span{
  display:block; height:2px; width:100%; background:#fff; border-radius:2px;
  transition:transform var(--ds-t), opacity var(--ds-t);
}
.ds-hd__burger.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.ds-hd__burger.is-open span:nth-child(2){ opacity:0; }
.ds-hd__burger.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

.ds-hd__scrim{
  position:fixed; inset:0; z-index:998;
  background:rgba(3,10,22,.55); backdrop-filter:blur(2px);
}

.ds-hd a:focus-visible, .ds-hd button:focus-visible{
  outline:3px solid var(--ds-gold); outline-offset:2px; border-radius:8px;
}

/* ---------- header, compact mode ----------
   A fixed pixel breakpoint here was guessed once from a headless measurement
   and was WRONG in a real browser: real font metrics (Poppins vs. the
   fallback font used while measuring) made the nav noticeably wider than
   assumed, so nav items silently wrapped inside the bar instead of switching
   to the drawer. Fixed by measuring the real rendered width in JS (see the
   header script) and toggling `.is-compact` on `.ds-hd` — correct regardless
   of font, browser, zoom or OS. Defined once as a mixin-style rule block and
   applied both by that class and, as a plain-CSS safety net for a screen this
   narrow under any language/font combination, by `max-width:900px`. */
/* compact: drop the city and let the company name sit at the right, so the
   strip keeps two useful items instead of three cramped ones */
.ds-hd.is-compact .ds-hd__util-r{ display:none; }
.ds-hd.is-compact .ds-hd__util-in{ grid-template-columns:auto 1fr; }
.ds-hd.is-compact .ds-hd__util-brand{ justify-self:end; }
.ds-hd.is-compact .ds-hd__burger{ display:flex; }
.ds-hd.is-compact .ds-hd__panel{
  position:fixed; inset:0 0 0 auto; z-index:999;
  width:min(360px, 88vw);
  flex-direction:column; align-items:stretch; justify-content:flex-start;
  /* --hd-h is set by the header script to the header's REAL rendered height —
     a hardcoded guess here was wrong once already (see the nav-overflow fix
     above) and would go wrong again the next time the header's height changes. */
  gap:0; padding:calc(var(--hd-h, 84px) + env(safe-area-inset-top)) 0 24px;
  background:var(--ds-navy-2);
  border-left:1px solid rgba(255,255,255,.1);
  box-shadow:-18px 0 44px rgba(3,10,22,.45);
  transform:translateX(100%); visibility:hidden;
  overflow-y:auto; overscroll-behavior:contain;
  transition:transform 260ms cubic-bezier(.2,.7,.3,1), visibility 260ms;
}
.ds-hd.is-compact .ds-hd__panel.is-open{ transform:none; visibility:visible; }
.ds-hd.is-compact .ds-hd__nav{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; flex:none; }
.ds-hd.is-compact .ds-hd__nav a{
  min-height:52px; padding:0 24px; border-radius:0;
  border-bottom:1px solid rgba(255,255,255,.07); font-size:1rem;
}
.ds-hd.is-compact .ds-hd__nav a.is-current::after{ left:24px; right:auto; width:22px; bottom:12px; }
.ds-hd.is-compact .ds-hd__aside{
  flex-direction:column; align-items:stretch; gap:var(--ds-4);
  padding:var(--ds-5) 24px 0;
}
.ds-hd.is-compact .ds-hd__cta{ min-height:48px; }
/* the compact drawer IS the touch/mobile experience regardless of whether
   the pointer actually reports as coarse, so size these for a thumb here
   unconditionally rather than depending on a `(pointer:coarse)` match */
/* centred, not left-aligned: `.ds-lang` carries `margin-left:auto` for the
   inline bar, which in the drawer's stretched column pinned the three pills
   hard against the right edge while the CTA under them was full width. The
   auto margin is cancelled here and the group centred over that button. */
.ds-hd.is-compact .ds-hd__panel .ds-lang{ justify-content:center; margin-inline:0; gap:8px; }
.ds-hd.is-compact .ds-hd__panel .ds-lang__b{ min-width:44px; min-height:44px; padding:8px 14px; }
body.nav-open{ overflow:hidden; }

@media (max-width:900px){
  .ds-hd__util-r{ display:none; }
  .ds-hd__util-in{ grid-template-columns:auto 1fr; }
  .ds-hd__util-brand{ justify-self:end; }
  .ds-hd__burger{ display:flex; }
  .ds-hd__panel{
    position:fixed; inset:0 0 0 auto; z-index:999;
    width:min(360px, 88vw);
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:calc(var(--hd-h, 84px) + env(safe-area-inset-top)) 0 24px;
    background:var(--ds-navy-2);
    border-left:1px solid rgba(255,255,255,.1);
    box-shadow:-18px 0 44px rgba(3,10,22,.45);
    transform:translateX(100%); visibility:hidden;
    overflow-y:auto; overscroll-behavior:contain;
    transition:transform 260ms cubic-bezier(.2,.7,.3,1), visibility 260ms;
  }
  .ds-hd__panel.is-open{ transform:none; visibility:visible; }
  .ds-hd__nav{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; flex:none; }
  .ds-hd__nav a{
    min-height:52px; padding:0 24px; border-radius:0;
    border-bottom:1px solid rgba(255,255,255,.07); font-size:1rem;
  }
  .ds-hd__nav a.is-current::after{ left:24px; right:auto; width:22px; bottom:12px; }
  .ds-hd__aside{
    flex-direction:column; align-items:stretch; gap:var(--ds-4);
    padding:var(--ds-5) 24px 0;
  }
  .ds-hd__cta{ min-height:48px; }
  .ds-hd__panel .ds-lang{ justify-content:center; margin-inline:0; gap:8px; }
  .ds-hd__panel .ds-lang__b{ min-width:44px; min-height:44px; padding:8px 14px; }
}
@media (max-width:560px){
  .ds-hd__util-in{ gap:var(--ds-3); }
  .ds-hd__util-i span, .ds-hd__util-brand{ font-size:.75rem; }
  .ds-hd__in{ min-height:64px; }
  .ds-hd__logo img{ height:38px; }
  /* padding-top comes from --hd-h (set by JS) already covering this height */
}
@media (max-width:480px){
  /* phone + company name only: the e-mail is the one duplicated in the footer
     and on the contact page, so it is the one that goes when space runs out */
  .ds-hd__util-l .ds-hd__util-i:nth-child(2){ display:none; }
}
@media (max-width:360px){
  .ds-hd__util-brand{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ds-hd__panel{ transition:none; }
  .ds-hd__cta:hover{ transform:none; }
}

/* ---------- footer ---------- */
.ds-ft{
  background:var(--ds-navy); color:#c3d2e6;
  margin-top:var(--ds-3);
  border-radius:var(--ds-r-xl) var(--ds-r-xl) 0 0;
}
.ds-ft__in{
  max-width:var(--ds-container); margin-inline:auto;
  padding:clamp(36px,4vw,56px) var(--ds-gutter) clamp(28px,3vw,40px);
  display:grid; grid-template-columns:minmax(240px,1fr) 2.4fr;
  gap:clamp(28px,4vw,56px);
}
.ds-ft__logo{ display:block; width:150px; height:auto; margin:0 0 var(--ds-4); }
.ds-ft__name{ margin:0 0 var(--ds-2); font-size:1rem; font-weight:700; color:#fff; }
.ds-ft__addr{ font-style:normal; font-size:.9063rem; line-height:1.8; display:grid; gap:2px; }
.ds-ft__addr a{ color:#c3d2e6; text-decoration:none; }
.ds-ft__addr a:hover{ color:var(--ds-gold); text-decoration:underline; }

.ds-ft__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.ds-ft__h{
  margin:0 0 var(--ds-4); font-size:.75rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ds-gold);
}
.ds-ft__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ds-ft__col a{
  display:block; padding:7px 0; font-size:.9375rem; line-height:1.5;
  color:#c3d2e6; text-decoration:none; transition:color var(--ds-t);
}
.ds-ft__col a:hover{ color:var(--ds-gold); }

.ds-ft__bar{ border-top:1px solid rgba(255,255,255,.1); }
.ds-ft__bar-in{
  max-width:var(--ds-container); margin-inline:auto;
  padding:var(--ds-4) var(--ds-gutter);
  display:flex; align-items:center; gap:var(--ds-4) var(--ds-5); flex-wrap:wrap;
  font-size:.8438rem; color:#93a7c2;
}
.ds-ft__copy{ margin:0; }
.ds-ft__legal{ display:flex; gap:var(--ds-4); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.ds-ft__legal a{ color:#93a7c2; text-decoration:none; padding:6px 0; display:inline-block; }
.ds-ft__legal a:hover{ color:#fff; text-decoration:underline; }
.ds-ft__langs{ display:flex; gap:6px; margin-left:auto; }
.ds-ft__langs a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:34px; padding:0 10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.16); color:#c3d2e6;
  font-size:.75rem; font-weight:700; text-decoration:none;
  transition:border-color var(--ds-t), color var(--ds-t), background var(--ds-t);
}
.ds-ft__langs a:hover{ border-color:var(--ds-gold); color:#fff; }
.ds-ft__langs a.is-active{ background:var(--ds-gold); border-color:var(--ds-gold); color:var(--ds-navy); }
.ds-ft__top{
  display:inline-flex; align-items:center; gap:7px;
  min-height:34px; padding:0 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.16);
  color:#c3d2e6; font-size:.8125rem; font-weight:600; text-decoration:none;
  transition:border-color var(--ds-t), color var(--ds-t);
}
.ds-ft__top svg{ width:14px; height:14px; }
.ds-ft__top:hover{ border-color:var(--ds-gold); color:#fff; }
.ds-ft a:focus-visible{ outline:3px solid var(--ds-gold); outline-offset:2px; border-radius:6px; }

/* A 32px link is fine under a mouse and too small under a thumb. Raise the
   dense utility rows to the 44px minimum only where the pointer is coarse,
   instead of making the desktop bars bulky for everyone. */
@media (pointer:coarse), (max-width:768px){
  .ds-hd__util-i{ min-height:44px; padding-block:0; }
  .ds-ft__top, .ds-ft__langs a{ min-height:44px; }
  .ds-ft__legal a{ padding:11px 0; }
  .ds-ft__col a{ padding:11px 0; }
}

@media (max-width:900px){
  .ds-ft__in{ grid-template-columns:1fr; }
  .ds-ft__cols{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .ds-ft__cols{ grid-template-columns:1fr; gap:var(--ds-5); }
  .ds-ft__bar-in{ flex-direction:column; align-items:flex-start; }
  .ds-ft__langs{ margin-left:0; }
}

/* /style.css reserves `padding-top: var(--site-header-height)` on `body`
   (plus `.has-dropsa-header` / `.products-page` / `.seo-landing` variants,
   one of them `!important`) — clearance for a header that is FIXED/absolute
   and therefore removed from normal document flow. This header is
   `position:sticky` (occupies its own space at the top of the page, then
   sticks once scrolled) and sizes itself dynamically (see --hd-h above), so
   reserving space for it a second time via body padding left a large blank
   band above it on every page — including this exact page class. */
body,
body.has-dropsa-header,
body.products-page,
body.seo-landing,
body.products-page.seo-landing{ padding-top:0 !important; }

/* `dropsa-global.css` sets `html,body{ overflow-x:hidden }` as a guard against
   accidental horizontal scroll. But `overflow` on an ancestor establishes a
   scroll container, and `position:sticky` sticks to its nearest scrolling
   ancestor — so with it on <body> the header scrolled away entirely instead of
   sticking. `overflow-x:clip` gives the exact same protection without creating
   a scroll container, so sticky resolves against the viewport again.
   (The audited layouts have no horizontal overflow anyway — verified 0 at
   375/390/768/1024/1160/1280/1440/1680/1920 — this stays purely as a guard.) */
html, body{ overflow-x:clip; }

/* ---------- page canvas ----------
   SIX rules across style.css and dropsa-global.css set an html/body background,
   four of them navy #081b35:
     style.css        html, body                      -> navy
     style.css        body                            -> navy
     style.css        body                            -> var(--bg)  (light)
     style.css        body.home:has(.video-hero)      -> navy
     dropsa-global    html, body.home                 -> navy
   The navy was a backstop for the video hero painting in, but the hero carries
   its own background, so it was only ever visible where it should not be. Two
   places it actually showed:
     - `html` is navy on EVERY page: visible on overscroll, and behind any body
       shorter than the viewport;
     - `body.home` is navy on the 8 pages that inherited that class from the old
       markup WITHOUT having a video hero (/branchen/ and its EN/IT variants) —
       the previous fix here only covered `:has(.video-hero)`, so those stayed
       navy behind the breadcrumb and around every inset section.
   Sections are inset "cards", so the canvas shows in their side margins on
   every page: it has to be the light page colour, and the SAME one everywhere.
   Declared once, on the last-loaded sheet, so source order settles it without
   !important. */
html,
body,
body.home,
body.home:has(.video-hero){ background-color:var(--ds-bg); }