/* ==========================================================================
   DropsA — Industrial Design Layer (GLOBAL)
   Palette preserved: navy #081b35 + gold #ffc107. Hero untouched.
   Scope: all `.ds-*` classes. Loaded site-wide from Layout.astro.
   ========================================================================== */

:root{
  /* ---- brand palette (unchanged) ---- */
  --ds-navy:#081b35;
  --ds-navy-2:#0d274a;
  --ds-navy-3:#12305b;
  --ds-gold:#ffc107;
  --ds-gold-dark:#e0a800;

  /* ---- neutrals derived from brand ---- */
  --ds-ink:#0f1f36;
  --ds-body:#475a70;
  --ds-muted:#6b7f96;
  --ds-line:#e3e9f1;
  --ds-line-soft:#eef2f7;
  --ds-surface:#ffffff;
  --ds-bg:#f5f8fc;
  --ds-link:#1560b4;

  /* ---- spacing scale (8pt rhythm) ---- */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:24px;
  --ds-6:32px; --ds-7:40px; --ds-8:48px; --ds-9:64px; --ds-10:80px;

  /* ---- layout ---- */
  --ds-container:1200px;
  --ds-gutter:clamp(16px, 4vw, 32px);
  --ds-section-y:clamp(44px, 4.6vw, 68px);   /* fix #6: tighter vertical rhythm */

  /* ---- radius / elevation ---- */
  --ds-r-sm:6px; --ds-r:12px; --ds-r-lg:18px; --ds-r-xl:clamp(16px, 1.8vw, 26px);
  /* every section shell is inset by this, so nothing is glued to the edge */
  --ds-inset:clamp(10px, 1.8vw, 26px);
  --ds-shadow:0 1px 2px rgba(8,27,53,.06), 0 8px 24px rgba(8,27,53,.06);
  --ds-shadow-lg:0 2px 4px rgba(8,27,53,.08), 0 18px 44px rgba(8,27,53,.12);

  /* ---- motion ---- */
  --ds-t:220ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- section shell ----------
   GLOBAL RULE: no section touches the viewport edge. Every section shell is
   inset by the same amount and rounded, so a coloured block (hero, CTA, tinted
   band) reads as a card instead of a full-bleed stripe glued into the corners.
   The inset is identical on all of them, so the inner content columns of two
   neighbouring sections still line up exactly. */
.ds, .ds-phero, .ds-cta{
  /* inset on small screens, capped at the site container on large ones — a
     section must never stretch across a 2560px monitor */
  width:min(100% - 2 * var(--ds-inset), calc(var(--ds-container) + 2 * var(--ds-gutter)));
  margin-inline:auto;
  border-radius:var(--ds-r-xl);
  overflow:hidden;
}
.ds{ padding:var(--ds-section-y) 0; background:var(--ds-surface); }
/* PANEL RULE: a prose-only band (no cards to give it structure) otherwise reads
   as naked body text — the faint alt tint is nearly invisible on white. Give
   every text section a hairline + soft shadow so it reads as a distinct card,
   matching the card/spec/faq sections around it. Scoped to prose sections so a
   card grid isn't double-framed; dark sections keep their own treatment. */
.ds:not(.ds--dark):has(> .ds__in > .ds-prose){
  border:1px solid var(--ds-line); box-shadow:var(--ds-shadow);
  /* hug the reading measure instead of a 1200px band with the text stranded
     on the left and a wide empty gutter on the right */
  width:min(100% - 2 * var(--ds-inset), 880px);
}
/* a prose panel reads as a centred, focused reading card: heading centred,
   body left-aligned (readable) but the column centred so whitespace is even. */
.ds:has(> .ds__in > .ds-prose) > .ds__in{ max-width:none; }
.ds:has(> .ds__in > .ds-prose) .ds__head{ text-align:center; margin-bottom:var(--ds-5); }
.ds:has(> .ds__in > .ds-prose) .ds__head .ds__eyebrow{ justify-content:center; }
.ds:has(> .ds__in > .ds-prose) .ds-prose{ margin-inline:auto; }
/* a small gap between stacked cards, and none against the page edges */
.ds + .ds, .ds + .ds-cta, .ds-cta + .ds, .ds-phero + .ds,
.ds-phero + main > .ds:first-child{ margin-top:var(--ds-3); }
.ds--alt{ background:var(--ds-bg); }
.ds--dark{ background:var(--ds-navy); color:#dfe7f2; }
.ds__in{ max-width:var(--ds-container); margin-inline:auto; padding-inline:var(--ds-gutter); }

/* blueprint grid — pure CSS, no image request */
.ds--grid{
  background-image:
    linear-gradient(rgba(8,27,53,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,27,53,.045) 1px, transparent 1px);
  background-size:44px 44px;
  background-color:var(--ds-bg);
}
.ds--dark.ds--grid{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-color:var(--ds-navy);
}

/* ---------- section header ---------- */
.ds__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ds-gold-dark); margin:0 0 var(--ds-3);
}
.ds--dark .ds__eyebrow{ color:var(--ds-gold); }
.ds__eyebrow::before{ content:""; width:28px; height:2px; background:var(--ds-gold); flex:none; }

.ds__title{
  font-size:clamp(1.6rem, 3vw, 2.35rem); line-height:1.18; font-weight:700;
  color:var(--ds-ink); margin:0 0 var(--ds-3); letter-spacing:-.02em; text-wrap:balance;
}
.ds--dark .ds__title{ color:#fff; }
.ds__lead{
  font-size:clamp(1rem, 1.3vw, 1.075rem); line-height:1.7; color:var(--ds-body);
  margin:0; max-width:68ch;
}
.ds--dark .ds__lead{ color:#b9c7dc; }
.ds__head{ margin-bottom:var(--ds-6); }   /* fix #6 */
.ds__head--center{ text-align:center; }
.ds__head--center .ds__eyebrow{ justify-content:center; }
.ds__head--center .ds__lead{ margin-inline:auto; }

/* ---------- spec cards (numbered, technical) ---------- */
.ds-specs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:var(--ds-4); }
/* same surface rule as .ds-card so all cards read consistently */
.ds-spec{
  position:relative; background:var(--ds-bg); border:1px solid var(--ds-line);
  border-radius:var(--ds-r); padding:var(--ds-6) var(--ds-5) var(--ds-5);
  overflow:hidden; box-shadow:0 1px 2px rgba(8,27,53,.05);
  transition:transform var(--ds-t), box-shadow var(--ds-t), border-color var(--ds-t), background var(--ds-t);
}
.ds--alt .ds-spec, .ds--grid .ds-spec, .ds--dark .ds-spec{ background:var(--ds-surface); }
.ds-spec::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--ds-gold);
  transform:scaleX(0); transform-origin:left; transition:transform var(--ds-t);
}
.ds-spec:hover{ transform:translateY(-4px); box-shadow:var(--ds-shadow-lg); border-color:#d5e0ee; }
.ds-spec:hover::before{ transform:scaleX(1); }
.ds-spec__t{ font-size:1.075rem; font-weight:700; color:var(--ds-ink); margin:0 0 var(--ds-2); }
.ds-spec__d{ font-size:.9375rem; line-height:1.65; color:var(--ds-body); margin:0; }

/* ---------- media cards (products / industries) ---------- */
.ds-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(272px,1fr)); gap:var(--ds-5); }
/* fix #4: 6-item grids stay balanced (3+3) instead of leaving an orphan row */
/* cap card width + centre so few cards don't stretch into oversized tiles with
   a small product shot lost in a tall empty plate (same family as --4/--1). */
@media (min-width:1000px){ .ds-cards--3{ grid-template-columns:repeat(3, minmax(0, 380px)); justify-content:center; } }
/* 4-up: four cards read as one even row on desktop instead of two oversized
   2×2 tiles (small product shots looked lost in a half-width plate); 2-up on
   tablet, 1-up on phone. */
@media (min-width:1080px){ .ds-cards--4{ grid-template-columns:repeat(4, 1fr); } }
@media (min-width:600px) and (max-width:1079.98px){ .ds-cards--4{ grid-template-columns:repeat(2, 1fr); } }
/* 1 card: a lone card in a 2-col grid stretched to half-width with a dead
   empty column beside it. Instead: one card at normal size, centred. */
.ds-cards--1{ grid-template-columns:minmax(0, 340px); justify-content:center; }
/* SURFACE HIERARCHY: a card always contrasts with the section it sits in —
   tinted card on a white section, white card on a tinted/dark section.
   Previously both were white, so cards disappeared into the background. */
.ds-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--ds-bg);
  border:1px solid var(--ds-line); border-radius:var(--ds-r-lg); overflow:hidden;
  box-shadow:0 1px 2px rgba(8,27,53,.05);
  transition:transform var(--ds-t), box-shadow var(--ds-t), border-color var(--ds-t), background var(--ds-t);
  color:inherit; height:100%;
}
.ds--alt .ds-card, .ds--grid .ds-card, .ds--dark .ds-card{ background:var(--ds-surface); }
/* the whole card is one <a>; a global a:hover{text-decoration:underline} was
   underlining the title, body copy and CTA together on hover. */
.ds-card, .ds-card *,
.ds-card:hover, .ds-card:hover *,
.ds-card:focus, .ds-card:focus *{ text-decoration:none !important; }
.ds-card:hover{
  transform:translateY(-5px); box-shadow:var(--ds-shadow-lg);
  border-color:#c3d3e6; background:var(--ds-surface);
}
.ds--alt .ds-card:hover, .ds--grid .ds-card:hover{ background:#fff; }
/* gold rule reveals on hover — same language as the spec cards */
.ds-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--ds-gold);
  transform:scaleX(0); transform-origin:left; transition:transform var(--ds-t); z-index:2;
}
.ds-card:hover::after{ transform:scaleX(1); }
.ds-card:hover .ds-card__more{ color:var(--ds-navy); }
/* fix #5: white media plate so `contain` product shots blend seamlessly
   (no two-tone bars); a hairline keeps the media/body separation readable. */
/* image plate stays white so product shots (mostly white backgrounds) read
   cleanly, and it separates visually from the tinted card body */
.ds-card__media{
  position:relative; aspect-ratio:16/10; background:#fff; overflow:hidden; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--ds-line);
}
.ds--alt .ds-card__media, .ds--grid .ds-card__media{ background:#fbfcfe; }
/* product shots come in very different aspect ratios; cap the drawn area so a
   wide fitting and a tall pump read at a similar optical size */
.ds-card__media img{
  width:auto; max-width:82%; height:auto; max-height:78%;
  object-fit:contain; margin:auto;
  transition:transform 320ms cubic-bezier(.2,.7,.3,1);
}
.ds-card--cover .ds-card__media{ background:var(--ds-bg); border-bottom:0; }
.ds-card--cover .ds-card__media img{
  width:100%; max-width:none; height:100%; max-height:none; object-fit:cover; margin:0;
}
/* keyboard users get the same affordance as hover */
.ds-card:focus-visible{
  outline:3px solid var(--ds-gold-dark); outline-offset:3px;
  transform:translateY(-5px); box-shadow:var(--ds-shadow-lg);
}
.ds-card:focus-visible::after{ transform:scaleX(1); }
.ds-card:hover .ds-card__media img{ transform:scale(1.045); }
.ds-card__body{
  padding:var(--ds-4) var(--ds-5) var(--ds-5);
  display:flex; flex-direction:column; gap:6px; flex:1;
}
/* no reserved blank line: the CTA is pinned to the bottom instead, so cards
   stay aligned without dead space under short titles. */
.ds-card__t{
  font-size:1.0625rem; font-weight:700; color:var(--ds-ink); margin:0; line-height:1.35;
  display:block; text-wrap:balance;
}
.ds-card__d{ font-size:.9375rem; line-height:1.6; color:var(--ds-body); margin:0; }
.ds-card__more{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:auto; padding-top:var(--ds-4);
  font-size:.9375rem; font-weight:700; color:var(--ds-link);
  transition:color var(--ds-t);
}
.ds-card__more svg{ transition:transform var(--ds-t); }
.ds-card:hover .ds-card__more svg{ transform:translateX(4px); }

/* ---------- feature list (Warum DropsA) ---------- */
.ds-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.ds-feats{ list-style:none; margin:var(--ds-5) 0 0; padding:0; display:grid; gap:var(--ds-3); }
.ds-feat{ display:flex; gap:var(--ds-3); align-items:flex-start; }
.ds-feat__ic{
  flex:none; width:26px; height:26px; border-radius:50%; background:rgba(255,193,7,.16);
  display:grid; place-items:center; margin-top:2px;
}
.ds-feat__ic svg{ width:15px; height:15px; stroke:var(--ds-gold-dark); }
.ds--dark .ds-feat__ic{ background:rgba(255,193,7,.18); }
.ds--dark .ds-feat__ic svg{ stroke:var(--ds-gold); }
.ds-feat__tx{ font-size:.9688rem; line-height:1.6; color:var(--ds-body); }
.ds--dark .ds-feat__tx{ color:#c8d5e8; }
.ds-feat__tx b{ color:var(--ds-ink); font-weight:600; }
.ds--dark .ds-feat__tx b{ color:#fff; }

/* single readable column (no fabricated stat panel) */
.ds-narrow{ max-width:760px; }

/* "Warum DropsA": copy + CTA left, the page's own advantages as a panel right.
   The right half was empty before. Still NO fabricated figures — the panel only
   re-homes the three bullets that were already in the list. */
.ds-split--why{ align-items:center; }
.ds-split--why .ds__lead{ max-width:52ch; }
.ds-feats--panel{
  margin:0; gap:var(--ds-4);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--ds-r-lg);
  padding:clamp(20px,2.6vw,32px);
}
.ds-feats--panel .ds-feat{ align-items:flex-start; }
.ds-feats--panel .ds-feat__tx{ font-size:1rem; }
@media (max-width:860px){
  .ds-split--why{ grid-template-columns:1fr; }
  .ds-feats--panel{ margin-top:var(--ds-5); }
}

/* ---------- FAQ ---------- */
.ds-faq{ max-width:860px; margin-inline:auto; display:grid; gap:var(--ds-3); }
.ds-faq details{
  background:var(--ds-bg); border:1px solid var(--ds-line); border-radius:var(--ds-r);
  padding:0; overflow:hidden; transition:border-color var(--ds-t), box-shadow var(--ds-t);
}
.ds-faq details[open]{ border-color:#d5e0ee; box-shadow:var(--ds-shadow); }
.ds-faq summary{
  cursor:pointer; list-style:none; padding:var(--ds-4) var(--ds-5);
  font-weight:600; color:var(--ds-ink); font-size:1rem; line-height:1.5;
  display:flex; align-items:center; justify-content:space-between; gap:var(--ds-4);
  min-height:56px;
}
.ds-faq summary::-webkit-details-marker{ display:none; }
.ds-faq summary::after{
  content:""; flex:none; width:11px; height:11px; margin-left:auto;
  border-right:2px solid var(--ds-gold-dark); border-bottom:2px solid var(--ds-gold-dark);
  transform:rotate(45deg) translateY(-2px); transition:transform var(--ds-t);
}
.ds-faq details[open] summary::after{ transform:rotate(-135deg) translateY(-2px); }
.ds-faq__a{ padding:0 var(--ds-5) var(--ds-5); margin:0; color:var(--ds-body); line-height:1.7; font-size:.9688rem; }
.ds--alt .ds-faq details, .ds--grid .ds-faq details{ background:var(--ds-surface); }

/* ---------- link row ---------- */
/* A row of links sitting directly in a section body follows a centred card
   grid, so it centres with it. `.ds-inline .ds-links` (a row inside running
   text) is deliberately not covered — that one belongs on the text's left. */
.ds__in > .ds-links{ justify-content:center; }
.ds-links{ display:flex; flex-wrap:wrap; gap:var(--ds-3); list-style:none; margin:0; padding:0; }
/* action family = crisp corners (industrial), not oval pills */
.ds-links a{
  display:inline-flex; align-items:center; gap:8px; min-height:44px;
  padding:10px var(--ds-4); border:1px solid var(--ds-line); border-radius:10px;
  background:var(--ds-surface); color:var(--ds-ink); font-size:.9375rem; font-weight:600;
  transition:border-color var(--ds-t), background var(--ds-t), transform var(--ds-t);
}
.ds-links a:hover{ border-color:var(--ds-gold); background:#fffdf5; transform:translateY(-2px); }

/* ---------- buttons ---------- */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:46px; padding:12px 22px; border-radius:10px; font-weight:700; font-size:.9688rem;
  background:var(--ds-gold); color:var(--ds-navy); border:1px solid var(--ds-gold);
  cursor:pointer; transition:background var(--ds-t), transform var(--ds-t), box-shadow var(--ds-t);
  text-decoration:none; letter-spacing:.005em;
}
.ds-btn:hover{ background:var(--ds-gold-dark); border-color:var(--ds-gold-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,193,7,.28); }
/* an inline <svg> with only a viewBox has no intrinsic size and stretches to
   fill the flex line — the first icon button on the site rendered 219px tall
   instead of 46px. No existing .ds-btn carries an icon, so this only defines
   the case that was previously undefined. */
.ds-btn svg{ width:18px; height:18px; flex:none; }
/* Secondary buttons used to be fully transparent with a --ds-line border
   (1.22:1 against the page). Next to the solid gold primary they read as
   unfinished — an outline someone forgot to fill — and the boundary failed
   WCAG 1.4.11, which wants 3:1 for a control's edge.
   Both variants now carry a real surface: a tint that is visible on white AND
   on the --ds-bg sections, and a border at 3.26:1. Still clearly subordinate
   to the gold primary, but no longer a hole in the layout. */
.ds-btn--ghost{
  background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.6);
}
.ds-btn--ghost:hover{ background:rgba(255,255,255,.22); border-color:#fff; box-shadow:none; }
.ds-btn--outline{
  background:#d2dfee; color:var(--ds-ink); border-color:#7d90ab;
}
.ds-btn--outline:hover{ background:#fff; border-color:var(--ds-gold); box-shadow:none; }
.ds-actions{ display:flex; flex-wrap:wrap; gap:var(--ds-3); margin-top:var(--ds-6); }
.ds-actions--center{ justify-content:center; }

/* ---------- final CTA ---------- */
.ds-cta{
  background:linear-gradient(135deg, var(--ds-navy-3) 0%, var(--ds-navy) 65%);
  color:#fff; text-align:center; padding:clamp(56px,7vw,88px) 0;
}
.ds-cta__t{ font-size:clamp(1.6rem,3vw,2.3rem); font-weight:700; margin:0 0 var(--ds-3); letter-spacing:-.02em; color:#fff; }
.ds-cta__d{ font-size:1.0625rem; line-height:1.7; color:#c2d0e6; margin:0 auto; max-width:60ch; }

/* ---------- reviews (keeps existing carousel JS/classes) ---------- */
.ds-rev{ max-width:760px; margin-inline:auto; text-align:center; }
.ds-rev .review-slide{ display:none; }
.ds-rev .review-slide.active{ display:block; animation:ds-fade .35s ease; }
@keyframes ds-fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.ds-rev .review p{
  font-size:clamp(1.0625rem,1.8vw,1.3rem); line-height:1.65; color:var(--ds-ink);
  margin:0 0 var(--ds-4); font-weight:500; text-wrap:balance;
}
.ds-rev .review span{ font-size:.9375rem; color:var(--ds-muted); }
.ds-rev .review-carousel-dots{ display:flex; gap:10px; justify-content:center; margin-top:var(--ds-5); }
.ds-rev .dot{
  width:10px; height:10px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:#cfdae8; transition:background var(--ds-t), transform var(--ds-t);
}
.ds-rev .dot.active{ background:var(--ds-gold); transform:scale(1.25); }
.ds-rev .dot:focus-visible{ outline:2px solid var(--ds-gold-dark); outline-offset:3px; }

/* ---------- fix #1: hero sub-lines were unreadable over the video ----------
   Colour only — hero layout/markup untouched. */
.video-hero .hero-bullets p,
.video-hero .hero-bullets strong{
  color:#f2f6fc;
  text-shadow:0 1px 2px rgba(4,14,28,.55), 0 4px 18px rgba(4,14,28,.45);
}
.video-hero .hero-subtext,
.video-hero .hero-content .lead{
  color:#e8eef8;
  text-shadow:0 1px 2px rgba(4,14,28,.5), 0 4px 16px rgba(4,14,28,.4);
}

/* ---------- fix #8: compact, denser knowledge/link section ---------- */
.ds--compact{ padding:clamp(36px,3.4vw,52px) 0; }
.ds--compact .ds__head{ margin-bottom:var(--ds-5); }
.ds-inline{
  display:grid; grid-template-columns:minmax(240px,.85fr) 1.15fr;
  gap:clamp(20px,3vw,44px); align-items:center;
}
@media (max-width:860px){ .ds-inline{ grid-template-columns:1fr; } }

/* ---------- language switcher (GLOBAL, server-rendered) ----------
   A <details> disclosure, not a JS widget: the open/close state, keyboard
   activation and Escape-to-close are the element's own behaviour, so the
   switcher still works with JavaScript off. The header script only adds
   click-outside dismissal on top. */
/* style.css styles EVERY <details> as an FAQ card
   (`details{background:#fff;border:1px solid;border-radius:12px;padding:12px}`).
   Inherited here it painted a white card behind the switcher and, via the 12px
   padding, made this box 111px wide around an 85px button — so the menu, which
   is right-aligned to this element, hung 12px past the button's edge. Reset to
   a bare positioning context. */
.ds-lang{
  position:relative; flex:none; display:inline-flex;
  background:none; border:0; border-radius:0; padding:0; margin:0;
}
.ds-lang__t{
  display:inline-flex; align-items:center; gap:7px;
  min-height:38px; padding:6px 10px 6px 9px; border-radius:9px;
  font-size:.875rem; font-weight:700; letter-spacing:.02em; color:#dbe6f6;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  cursor:pointer; user-select:none; list-style:none; white-space:nowrap;
  justify-content:center; box-sizing:border-box;
  transition:background var(--ds-t), color var(--ds-t), border-color var(--ds-t);
}
/* the default disclosure triangle would sit next to our own chevron */
.ds-lang__t::-webkit-details-marker{ display:none; }
.ds-lang__t::marker{ content:""; }
.ds-lang__t:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.32); }
.ds-lang__t svg{ width:16px; height:16px; flex:none; }
.ds-lang__cx{ width:13px; height:13px; opacity:.7; transition:transform var(--ds-t); }
.ds-lang[open] .ds-lang__t{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.34); }
.ds-lang[open] .ds-lang__cx{ transform:rotate(180deg); }
.ds-lang__t:focus-visible{ outline:3px solid var(--ds-gold); outline-offset:2px; }

.ds-lang__m{
  position:absolute; top:calc(100% + 8px); right:0; z-index:1001;
  min-width:190px; margin:0; padding:6px; list-style:none;
  background:var(--ds-navy-2); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; box-shadow:0 18px 44px rgba(3,10,22,.5);
}
.ds-lang__i{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:8px 10px; border-radius:8px;
  color:#c6d4e8; text-decoration:none; font-size:.9375rem;
  transition:background var(--ds-t), color var(--ds-t);
}
.ds-lang__i:hover{ background:rgba(255,255,255,.09); color:#fff; }
.ds-lang__code{
  flex:none; min-width:30px; padding:2px 6px; border-radius:6px; text-align:center;
  font-size:.75rem; font-weight:800; letter-spacing:.04em;
  background:rgba(255,255,255,.09); color:#dbe6f6;
}
.ds-lang__name{ flex:1; }
.ds-lang__ck{ width:15px; height:15px; flex:none; color:var(--ds-gold); }
/* current language marked by the tick AND the gold code chip, never colour alone */
.ds-lang__i.is-active{ color:#fff; font-weight:600; }
.ds-lang__i.is-active .ds-lang__code{ background:var(--ds-gold); color:var(--ds-navy); }
.ds-lang__i:focus-visible{ outline:3px solid var(--ds-gold); outline-offset:-2px; }

/* the old JS-injected switcher must never double up with the rendered one */
.locale-switcher{ display:none !important; }

/* Inside the mobile drawer the menu is not a popover: it is part of the
   column, so it drops the absolute positioning and simply stacks.
   These MUST stay scoped to compact mode. An earlier version keyed the second
   half off `.ds-hd__panel .ds-lang`, which also matches in the inline bar — the
   resulting `width:100%` inflated the aside, and the header's overflow check
   (`nav.scrollWidth + aside.scrollWidth > available`) then forced the drawer
   open even on a 1920px monitor. */
/* the menu drops to `position:static` below, so it becomes a flex ITEM of
   this inline-flex box — without switching the axis it sat BESIDE the button
   instead of under it */
.ds-hd.is-compact .ds-lang{ width:100%; flex-direction:column; align-items:stretch; }
.ds-hd.is-compact .ds-lang__t{ width:100%; justify-content:center; min-height:44px; }
.ds-hd.is-compact .ds-lang__m{
  position:static; width:100%; min-width:0; box-sizing:border-box; margin-top:8px; box-shadow:none;
  background:rgba(255,255,255,.04);
}
@media (max-width:900px){
  .ds-hd__panel .ds-lang{ width:100%; flex-direction:column; align-items:stretch; }
  .ds-hd__panel .ds-lang__t{ width:100%; justify-content:center; min-height:44px; }
  .ds-hd__panel .ds-lang__m{
    position:static; width:100%; min-width:0; box-sizing:border-box; margin-top:8px; box-shadow:none;
    background:rgba(255,255,255,.04);
  }
}

/* ---------- breadcrumb (GLOBAL, ~266 pages) ----------
   nav.js replaces the static markup with .site-breadcrumb-shell >
   .breadcrumb.breadcrumb--global, which shipped as a full-width white pill
   floating between header and hero. Reset it to a slim, container-aligned
   strip that sits quietly above the page hero. */
.site-breadcrumb-shell{
  width:100% !important; max-width:var(--ds-container) !important;
  margin:0 auto !important; padding:14px var(--ds-gutter) 14px !important;
}
/* compact soft pill that hugs its text (not the old full-width white card) */
.breadcrumb,
.breadcrumb.breadcrumb--global{
  display:inline-flex !important; flex-wrap:wrap; align-items:center; gap:.45rem;
  margin:0 !important; padding:8px 16px !important;
  background:#f1f5fa !important; border:1px solid var(--ds-line-soft) !important;
  border-radius:999px !important; box-shadow:none !important; backdrop-filter:none !important;
  font-size:.8125rem; line-height:1.4; color:var(--ds-muted); width:auto !important;
}
.breadcrumb a, .breadcrumb.breadcrumb--global a{
  color:var(--ds-muted); font-weight:500; text-decoration:none;
  border-radius:4px; transition:color var(--ds-t);
}
.breadcrumb a:hover{ color:var(--ds-link); text-decoration:underline; }
.breadcrumb .breadcrumb-separator{ color:#b3c2d4; }
.breadcrumb .breadcrumb-current{ color:var(--ds-ink); font-weight:600; }
/* static fallback (before nav.js runs / if JS is off) — same look */
.breadcrumb-nav{
  max-width:var(--ds-container); margin-inline:auto;
  padding:14px var(--ds-gutter);
}
.breadcrumb-nav .breadcrumb-list{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:8px 16px; background:#f1f5fa; border:1px solid var(--ds-line-soft);
  border-radius:999px; font-size:.8125rem; color:var(--ds-muted);
}
.breadcrumb-nav a{ color:var(--ds-muted); text-decoration:none; }
.breadcrumb-nav a:hover{ color:var(--ds-link); text-decoration:underline; }
.breadcrumb-nav span[aria-current]{ color:var(--ds-ink); font-weight:600; }

/* ---------- inner-page hero (navy, on-brand) ---------- */
.ds-phero{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(135deg, var(--ds-navy-3) 0%, var(--ds-navy) 62%);
  color:#fff; padding:clamp(44px,5.2vw,72px) 0 clamp(40px,4.8vw,64px);
  border-top:1px solid rgba(255,255,255,.07);
}
/* blueprint texture — same language as .ds--grid, pure CSS */
.ds-phero::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 92%);
  mask-image:linear-gradient(180deg, #000 0%, transparent 92%);
}
/* warm brand glow so the panel isn't a flat slab */
.ds-phero::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:-28%; right:-8%; width:min(620px,62%); aspect-ratio:1;
  background:radial-gradient(circle, rgba(255,193,7,.16) 0%, rgba(255,193,7,.05) 42%, transparent 70%);
}
/* centred hero content — the copy block hugs its text instead of hanging on
   the left with a large empty right half */
.ds-phero__in{
  position:relative; max-width:900px; margin-inline:auto;
  padding-inline:var(--ds-gutter); text-align:center;
}
.ds-phero .ds__eyebrow{ justify-content:center; }
.ds-phero .ds-chips{ justify-content:center; }
.ds-phero .ds-actions{ justify-content:center; }
/* thin gold rule at the bottom edge, ties into the section below */
.ds-phero::marker{ content:none; }
.ds-phero + .ds, .ds-phero + main > .ds:first-child{ border-top:0; }
.ds-phero h1{
  font-size:clamp(1.75rem,3.6vw,2.7rem); line-height:1.14; font-weight:700; color:#fff;
  margin:0 auto var(--ds-3); letter-spacing:-.02em; text-wrap:balance;
  max-width:18ch;                    /* measure, not a hard wrap point */
  hyphens:manual;                    /* stop "Schmierpro-dukte" mid-word breaks */
  overflow-wrap:break-word;
}
@media (min-width:900px){ .ds-phero h1{ max-width:24ch; } }
.ds-phero__sub{
  font-size:clamp(1rem,1.4vw,1.125rem); line-height:1.7; color:#c6d4e8;
  margin:0 auto; max-width:62ch; text-wrap:pretty;
}
.ds-phero__sub strong{ color:#fff; font-weight:600; }
.ds-phero .ds-actions{ margin-top:var(--ds-6); }
/* key statements as quiet chips (not fake metrics) */
.ds-chips{ display:flex; flex-wrap:wrap; gap:var(--ds-2); margin-top:var(--ds-5); justify-content:center; }
.ds-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:#dbe6f6; font-size:.875rem; line-height:1.4;
}
.ds-chip::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ds-gold); flex:none; }

/* ---------- bullet lists inside cards ---------- */
.ds-bullets{ list-style:none; margin:var(--ds-3) 0 0; padding:0; display:grid; gap:7px; }
.ds-bullets li{
  position:relative; padding-left:20px; font-size:.9063rem; line-height:1.55; color:var(--ds-body);
}
.ds-bullets li::before{
  content:""; position:absolute; left:2px; top:.55em; width:7px; height:7px; border-radius:2px;
  background:var(--ds-gold); transform:rotate(45deg);
}
.ds--dark .ds-bullets li{ color:#c8d5e8; }

/* ---------- numbered process steps ---------- */
.ds-steps{ list-style:none; margin:var(--ds-5) 0 0; padding:0; display:grid; gap:var(--ds-4); }
.ds-step{ display:flex; gap:var(--ds-4); align-items:flex-start; }
.ds-step__n{
  flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--ds-navy); color:var(--ds-gold); font-weight:700; font-size:.9375rem;
  font-variant-numeric:tabular-nums;
}
.ds-step__t{ font-size:1rem; font-weight:700; color:var(--ds-ink); margin:2px 0 4px; }
.ds-step__d{ font-size:.9375rem; line-height:1.6; color:var(--ds-body); margin:0; }

/* ---------- KPI figures (GLOBAL) ----------
   For pages whose own copy contains measured figures. Never invent values —
   only render numbers the page already states. */
.ds-kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ds-3);
  margin-top:var(--ds-6);
}
.ds-kpi{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--ds-r); padding:var(--ds-4) var(--ds-3); text-align:center;
}
.ds-kpi__n{
  display:block; font-size:clamp(1.25rem,2.2vw,1.65rem); font-weight:800; color:var(--ds-gold);
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.ds-kpi__l{ display:block; font-size:.8125rem; color:#b9c7dc; margin-top:6px; line-height:1.4; }
/* light-surface variant */
.ds:not(.ds--dark) .ds-kpi{ background:var(--ds-surface); border-color:var(--ds-line); box-shadow:var(--ds-shadow); }
.ds:not(.ds--dark) .ds-kpi__n{ color:var(--ds-navy); }
.ds:not(.ds--dark) .ds-kpi__l{ color:var(--ds-muted); }
@media (max-width:720px){ .ds-kpis{ grid-template-columns:repeat(2,1fr); } }

/* ---------- content tags ---------- */
.ds-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:var(--ds-5); }
.ds-tag{
  padding:6px 13px; border-radius:8px; font-size:.8125rem; font-weight:600;
  background:rgba(255,193,7,.14); color:var(--ds-gold); border:1px solid rgba(255,193,7,.28);
}

/* ---------- clickable topic tag ---------- */
.ds-tag--link{ text-decoration:none; transition:background var(--ds-t), border-color var(--ds-t); }
.ds-tag--link:hover{ background:rgba(255,193,7,.24); border-color:var(--ds-gold); }
.ds-tag--link:focus-visible{ outline:3px solid var(--ds-gold-dark); outline-offset:2px; }

/* ---------- download item ---------- */
.ds-dl{
  display:flex; align-items:center; gap:var(--ds-4);
  background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:var(--ds-r-lg);
  padding:var(--ds-4) var(--ds-5); text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(8,27,53,.05);
  transition:transform var(--ds-t), box-shadow var(--ds-t), border-color var(--ds-t);
}
.ds-dl:hover{ transform:translateY(-3px); box-shadow:var(--ds-shadow-lg); border-color:#c3d3e6; }
.ds-dl, .ds-dl *{ text-decoration:none !important; }
.ds-dl__ic{
  flex:none; width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,193,7,.16); color:var(--ds-gold-dark);
}
.ds-dl__tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ds-dl__tx strong{ font-size:.9688rem; font-weight:700; color:var(--ds-ink); line-height:1.35; }
.ds-dl__tx span{ font-size:.8125rem; color:var(--ds-muted); }
.ds-dl__cta{ margin-left:auto; color:var(--ds-link); flex:none; display:grid; place-items:center; }
.ds-dl:hover .ds-dl__cta{ transform:translateX(3px); transition:transform var(--ds-t); }

/* ---------- article card (blog index) ---------- */
.ds-posts{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:var(--ds-5); }
.ds-post{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--ds-bg); border:1px solid var(--ds-line); border-radius:var(--ds-r-lg);
  box-shadow:0 1px 2px rgba(8,27,53,.05); color:inherit; height:100%;
  transition:transform var(--ds-t), box-shadow var(--ds-t), border-color var(--ds-t), background var(--ds-t);
}
.ds--alt .ds-post{ background:var(--ds-surface); }
.ds-post, .ds-post *, .ds-post:hover, .ds-post:hover *{ text-decoration:none !important; }
.ds-post:hover{
  transform:translateY(-5px); box-shadow:var(--ds-shadow-lg);
  border-color:#c3d3e6; background:var(--ds-surface);
}
.ds--alt .ds-post:hover{ background:#fff; }
.ds-post::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--ds-gold);
  transform:scaleX(0); transform-origin:left; transition:transform var(--ds-t); z-index:2;
}
.ds-post:hover::after{ transform:scaleX(1); }
.ds-post:focus-visible{ outline:3px solid var(--ds-gold-dark); outline-offset:3px; }
.ds-post__media{
  position:relative; aspect-ratio:16/9; overflow:hidden; flex:none;
  background:#e8eef6; border-bottom:1px solid var(--ds-line);
}
.ds-post__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 340ms cubic-bezier(.2,.7,.3,1);
}
.ds-post:hover .ds-post__media img{ transform:scale(1.05); }
.ds-post__media--none{
  background:
    linear-gradient(135deg, var(--ds-navy-3) 0%, var(--ds-navy) 70%);
}
.ds-post__body{ padding:var(--ds-4) var(--ds-5) var(--ds-5); display:flex; flex-direction:column; gap:7px; flex:1; }
.ds-post__t{
  font-size:1.0156rem; font-weight:700; line-height:1.4; color:var(--ds-ink);
  text-wrap:balance;
}
.ds-post__d{ font-size:.9063rem; line-height:1.6; color:var(--ds-body); }
.ds-post__more{
  display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:var(--ds-3);
  font-size:.9063rem; font-weight:700; color:var(--ds-link); transition:color var(--ds-t);
}
.ds-post:hover .ds-post__more{ color:var(--ds-navy); }
.ds-post:hover .ds-post__more svg{ transform:translateX(4px); transition:transform var(--ds-t); }

/* count badge next to a section title */
.ds-count{
  display:inline-grid; place-items:center; margin-left:12px; vertical-align:middle;
  min-width:30px; height:24px; padding:0 9px; border-radius:999px;
  background:var(--ds-navy); color:var(--ds-gold);
  font-size:.8125rem; font-weight:700; font-variant-numeric:tabular-nums;
}

/* ---------- topic list card (blog clusters) ---------- */
@media (min-width:900px){ .ds-cards--2{ grid-template-columns:repeat(2, minmax(0, 380px)); justify-content:center; } }
.ds-topic{
  background:var(--ds-bg); border:1px solid var(--ds-line); border-radius:var(--ds-r-lg);
  padding:var(--ds-5); box-shadow:0 1px 2px rgba(8,27,53,.05);
}
.ds--alt .ds-topic, .ds--grid .ds-topic{ background:var(--ds-surface); }
.ds-topic__t{
  display:flex; align-items:center; gap:10px; margin:0 0 var(--ds-4);
  font-size:1.0625rem; font-weight:700; color:var(--ds-ink); line-height:1.3;
  padding-bottom:var(--ds-3); border-bottom:2px solid var(--ds-gold);
}
.ds-topic__n{
  margin-left:auto; flex:none; min-width:26px; height:22px; padding:0 8px; border-radius:999px;
  background:var(--ds-navy); color:var(--ds-gold); font-size:.75rem; font-weight:700;
  display:grid; place-items:center; font-variant-numeric:tabular-nums;
}
.ds-topic__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.ds-topic__list li{ position:relative; }
.ds-topic__list a{
  display:block; padding:8px 10px 8px 20px; border-radius:8px;
  font-size:.9375rem; line-height:1.5; color:var(--ds-body); text-decoration:none;
  transition:background var(--ds-t), color var(--ds-t);
}
.ds-topic__list a::before{
  content:""; position:absolute; left:4px; top:1.05em; width:6px; height:6px;
  border-radius:2px; background:var(--ds-gold); transform:rotate(45deg);
}
.ds-topic__list a:hover{ background:rgba(21,96,180,.07); color:var(--ds-link); }
.ds-topic__list a:focus-visible{ outline:2px solid var(--ds-gold-dark); outline-offset:1px; }

/* ---------- table of contents ---------- */
.ds-toc{
  background:var(--ds-surface); border:1px solid var(--ds-line); border-radius:var(--ds-r-lg);
  padding:var(--ds-5); box-shadow:var(--ds-shadow); max-width:760px; margin-inline:auto;
}
.ds-toc__t{
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ds-gold-dark); margin:0 0 var(--ds-3);
}
.ds-toc ol{ margin:0; padding-left:1.15rem; display:grid; gap:7px; }
.ds-toc li{ font-size:.9375rem; line-height:1.5; }
.ds-toc a{ color:var(--ds-link); text-decoration:none; }
.ds-toc a:hover{ text-decoration:underline; }

/* ---------- prose block (guide text) ---------- */
.ds-prose{ max-width:70ch; }
.ds-prose p{ font-size:1rem; line-height:1.75; color:var(--ds-body); margin:0 0 var(--ds-4); }
.ds-prose ul{ list-style:none; margin:0 0 var(--ds-4); padding:0; display:grid; gap:8px; }
.ds-prose ul li{ position:relative; padding-left:22px; font-size:.9688rem; line-height:1.6; color:var(--ds-body); }
.ds-prose ul li::before{
  content:""; position:absolute; left:2px; top:.58em; width:7px; height:7px;
  border-radius:2px; background:var(--ds-gold); transform:rotate(45deg);
}
.ds-prose a{ color:var(--ds-link); font-weight:600; text-decoration:underline; text-underline-offset:.16em; }

/* pitfalls list — same rhythm, warning accent */
.ds-warn li::before{ background:#d9822b !important; }

/* ---------- note / callout (GLOBAL, reusable) ----------
   For the short "we help you choose …" style lines that would otherwise sit
   as orphaned body text between sections. */
.ds-note{
  display:flex; align-items:flex-start; gap:var(--ds-3);
  margin:var(--ds-6) 0 0; padding:var(--ds-4) var(--ds-5);
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-left:3px solid var(--ds-gold); border-radius:var(--ds-r);
  box-shadow:var(--ds-shadow);
  font-size:.9688rem; line-height:1.65; color:var(--ds-body);
}
.ds--alt .ds-note, .ds--grid .ds-note{ background:var(--ds-surface); }
.ds-note__ic{
  flex:none; width:24px; height:24px; border-radius:50%; margin-top:1px;
  background:rgba(255,193,7,.18); display:grid; place-items:center;
}
.ds-note__ic svg{ width:14px; height:14px; stroke:var(--ds-gold-dark); }
.ds-note p{ margin:0; }
.ds-note a{ color:var(--ds-link); font-weight:600; text-decoration:underline; text-underline-offset:.16em; }
.ds-note a:hover{ color:#0f4d95; }
.ds--dark .ds-note{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12);
  border-left-color:var(--ds-gold); color:#c8d5e8; box-shadow:none;
}
.ds--dark .ds-note a{ color:var(--ds-gold); }

/* ---------- reference table (GLOBAL, reusable) ----------
   The DS layer had no table style at all — only the legacy `.seo-table` in
   industrial-seo.css, which is a different type scale and a different border
   language. Content depth on the technical pages means real reference data
   (NLGI grades, ISO VG bands, temperature codes), so the table is a first-class
   DS component, not a per-page hack.
   The wrapper scrolls on its own so a 4-column spec table never makes the page
   body scroll horizontally on a phone. */
.ds-table-wrap{
  margin:0 0 var(--ds-5); overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--ds-line); border-radius:var(--ds-r);
  background:var(--ds-surface); box-shadow:var(--ds-shadow);
}
.ds-table{
  border-collapse:collapse; width:100%; min-width:520px;
  font-size:.9375rem; line-height:1.55; color:var(--ds-body);
}
.ds-table caption{
  caption-side:top; text-align:left; padding:var(--ds-4) var(--ds-4) var(--ds-3);
  font-size:.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ds-gold-dark);
}
.ds-table th, .ds-table td{
  padding:10px var(--ds-4); text-align:left; vertical-align:top;
  border-bottom:1px solid var(--ds-line-soft);
}
.ds-table thead th{
  background:var(--ds-bg); color:var(--ds-ink); font-weight:700;
  font-size:.8438rem; letter-spacing:.02em;
  border-bottom:2px solid var(--ds-line);
  position:sticky; top:0;
}
.ds-table tbody th{ color:var(--ds-ink); font-weight:600; white-space:nowrap; }
.ds-table tbody tr:last-child th, .ds-table tbody tr:last-child td{ border-bottom:0; }
.ds-table tbody tr:nth-child(even){ background:rgba(21,96,180,.028); }
/* the row the reader is meant to leave with */
.ds-table tbody tr.is-key{ background:rgba(255,193,7,.11); }
.ds-table tbody tr.is-key th, .ds-table tbody tr.is-key td{ color:var(--ds-ink); font-weight:600; }
/* numeric columns line up on the digits */
.ds-table .num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- text-heavy table ----------
   `min-width:520px` above exists so a numeric spec table never collapses into
   an unreadable column of wrapped digits. On the /branchen/ tables the cells
   hold whole sentences, and that same min-width pushed them into a horizontally
   scrolling box — the reader had to drag sideways to finish a sentence.
   This modifier drops the floor and lets prose wrap the way prose should. */
.ds-table--text{ min-width:0; }
.ds-table--text td, .ds-table--text th{ white-space:normal; word-break:normal; overflow-wrap:anywhere; }
.ds-table--text td{ min-width:14ch; }
.ds-table--text .num{ white-space:normal; }
@media (max-width:640px){
  /* below this a multi-column sentence table is unreadable however it wraps:
     stack it into label/value pairs instead */
  .ds-table--text, .ds-table--text tbody, .ds-table--text tr, .ds-table--text td,
  .ds-table--text th{ display:block; width:auto; }
  .ds-table--text thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .ds-table--text tr{ padding:var(--ds-3) 0; border-bottom:1px solid var(--ds-line); }
  .ds-table--text tr:last-child{ border-bottom:0; }
  .ds-table--text tbody th{ padding-bottom:2px; white-space:normal; }
  .ds-table--text td{ border-bottom:0; padding-top:2px; padding-bottom:2px; }
}

/* The legacy `.section-card` is a light surface, but its own stylesheet sets a
   red, centred, justified type scale. Inside our prose block that fights the
   DS rhythm, so re-assert it. */
.section-card .ds-prose h2, .section-card .ds-prose h3{ color:var(--ds-ink); text-align:left; }
.section-card .ds-prose p, .section-card .ds-prose li{ color:var(--ds-body); text-align:left; }
.section-card > h2{ color:var(--ds-ink); text-align:left; }

/* `.ds-prose--article` sets `max-width:none` because inside `.ds-article` the
   column is already capped at 820px. On a `.section-card` there is no such
   parent, so the same class let prose and tables run the full width of a
   desktop viewport — lines of 200+ characters touching both screen edges.
   Cap the measure here instead. */
/* One shared measure for the block. `74ch` cannot be reused on the heading:
   `ch` resolves against the element's own font, so on a ~43px h2 it came out
   1466px against the body text's 744px and the heading started ~190px further
   left than the paragraph it introduces. A length both can share fixes it. */
.section-card{ --measure:46.5rem; }
.section-card .ds-prose--article{ max-width:var(--measure); margin-inline:auto; }
.section-card > h2{ max-width:var(--measure); margin-inline:auto; }
.section-card .ds-prose--article .ds-table-wrap{
  max-width:none; width:100%;
}
@media (min-width:1100px){
  /* a wide reference table may exceed the reading measure, but only outward
     from the same centre line, never past the card */
  .section-card .ds-prose--article .ds-table-wrap{
    width:min(100% + 14vw, 100%); margin-inline:auto;
  }
}
.ds-prose .ds-table-wrap{ margin-block:var(--ds-5) var(--ds-6); }
.ds-prose .ds-table ul{ margin:0; }

/* ---------- source line under a table / claim ---------- */
.ds-src{
  margin:calc(-1 * var(--ds-3)) 0 var(--ds-6);
  font-size:.8125rem; line-height:1.55; color:var(--ds-muted);
}
.ds-prose .ds-src{ margin-top:calc(-1 * var(--ds-4)); }

/* ---------- plain surface card (text blocks) ---------- */
.ds-panel{
  background:var(--ds-bg); border:1px solid var(--ds-line); border-radius:var(--ds-r-lg);
  padding:clamp(20px,2.6vw,30px); box-shadow:var(--ds-shadow);
}
.ds-panel__t{ font-size:1.125rem; font-weight:700; color:var(--ds-ink); margin:0 0 var(--ds-2); }
.ds-panel p{ font-size:.9688rem; line-height:1.65; color:var(--ds-body); margin:0; }
.ds--alt .ds-panel, .ds--grid .ds-panel{ background:var(--ds-surface); }

/* ---------- product detail: single-product showcase ---------- */
.ds-show{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,52px); align-items:center;
}
.ds-show__media{
  box-sizing:border-box;
  background:#fff; border:1px solid var(--ds-line); border-radius:var(--ds-r-lg);
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,3vw,36px); box-shadow:var(--ds-shadow); overflow:hidden;
}
/* never upscaled (same rule as `.ds-card__media`) — small shots get a plate
   sized to them instead of floating in a large empty box */
.ds-show__media img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.ds-show__media--sm{ aspect-ratio:1/1; max-width:340px; padding:clamp(16px,2vw,26px); }
/* a very small source (e.g. 75×84) otherwise floats tiny in the plate — scale it
   up to a comfortable size (capped so it stays reasonably crisp, ~2.5x max) and
   centre it. `contain` in a capped box keeps aspect and never overflows. */
.ds-show__media--sm img{
  width:100%; height:100%; max-width:210px; max-height:210px;
  object-fit:contain; margin:auto;
}
.ds-show__t{
  font-size:clamp(1.25rem,2.1vw,1.55rem); font-weight:700; color:var(--ds-ink);
  margin:0 0 var(--ds-3); line-height:1.3; text-wrap:balance;
}
.ds-show__d{ font-size:1rem; line-height:1.75; color:var(--ds-body); margin:0; }
.ds-show .ds-actions{ margin-top:var(--ds-5); }
@media (max-width:860px){ .ds-show{ grid-template-columns:1fr; } }

/* ---------- product card whose CTA is a button, not a link ----------
   The card is not clickable as a whole, so it must not borrow the link
   affordances (lift, gold rule, image zoom) of `.ds-card`. */
.ds-card--prod::after{ content:none; }
.ds-card--prod:hover{
  transform:none; background:var(--ds-bg); border-color:var(--ds-line);
  box-shadow:0 1px 2px rgba(8,27,53,.05);
}
.ds--alt .ds-card--prod:hover, .ds--grid .ds-card--prod:hover{ background:var(--ds-surface); }
.ds-card--prod:hover .ds-card__media img{ transform:none; }
.ds-card__act{ margin-top:auto; padding-top:var(--ds-5); }
.ds-card__act .ds-btn{ width:100%; }

/* the legacy inquiry button skin (`/produkte/sublink.css`) still ships with
   these pages for the modal; two-class selectors keep the DS skin on top. */
.ds-btn.product-inquiry-btn{
  background:var(--ds-gold); color:var(--ds-navy); border:1px solid var(--ds-gold);
  border-radius:10px; padding:12px 22px; font-size:.9688rem; font-weight:700;
  box-shadow:none; margin-top:0;
}
.ds-btn.product-inquiry-btn:hover{
  background:var(--ds-gold-dark); border-color:var(--ds-gold-dark);
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,193,7,.28);
}
.ds-btn--outline.product-inquiry-btn{ background:#d2dfee; color:var(--ds-ink); border-color:#7d90ab; }
.ds-btn--outline.product-inquiry-btn:hover{
  background:#fff; border-color:var(--ds-gold); color:var(--ds-ink);
  transform:none; box-shadow:none;
}

/* sublink.css draws a blue gradient rule under every h1; the DS hero has its
   own navy/gold language, so suppress it there. */
.ds-phero h1::after{ content:none; display:none; }

/* prose headings/nesting — spec lists carried over from the source pages */
.ds-prose h3{
  font-size:1.0625rem; font-weight:700; color:var(--ds-ink);
  margin:var(--ds-6) 0 var(--ds-3); line-height:1.35;
}
.ds-prose > h3:first-child{ margin-top:0; }
.ds-prose strong{ color:var(--ds-ink); font-weight:600; }
.ds-prose li > ul{ margin:8px 0 0; }
.ds-inline .ds__title{ margin-bottom:8px; }
/* The "Weiterführende Inhalte" list lives in the right column of .ds-inline and
   can hold 10+ items. As a wrapping flex row in a ~665px column every pill was
   wider than half the column, so each one took its own line at its own width —
   a ragged left-aligned pile with right edges from 346px to 499px.
   A grid gives them equal tracks: two clean columns where there is room, one
   full-width column when there is not, right edges aligned either way. */
.ds-inline .ds-links{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  align-items:stretch;
}
.ds-inline .ds-links a{ width:100%; box-sizing:border-box; }

/* ---------- technical article (blog post) ----------
   A measured reading column, not a newspaper page: one column, ~70 characters,
   a real figure, a table of contents so a long piece is navigable, and the
   same section rhythm as the rest of the site. */
.ds-phero--article .ds-phero__in{ max-width:820px; text-align:left; }
.ds-phero--article .ds__eyebrow{ justify-content:flex-start; }
.ds-phero--article h1{ margin-inline:0; max-width:22ch; }
@media (min-width:900px){ .ds-phero--article h1{ max-width:26ch; } }
.ds-phero__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:var(--ds-4) 0 0; font-size:.9063rem; color:#a9bcd6;
}
.ds-phero__meta time{ color:#dbe6f6; font-weight:600; }
.ds-phero__meta span[aria-hidden]{ color:var(--ds-gold); }

.ds-article{ max-width:820px; margin-inline:auto; }
.ds-figure{
  margin:0 0 var(--ds-7); border-radius:var(--ds-r-lg); overflow:hidden;
  border:1px solid var(--ds-line); box-shadow:var(--ds-shadow); background:#fff;
}
.ds-figure img{ display:block; width:100%; height:auto; }
/* pull the figure up so it overlaps the hero edge — ties the two together */
.ds-article > .ds-figure:first-child{ margin-top:calc(-1 * clamp(28px,4vw,52px)); }

.ds-prose--article{ max-width:none; }
.ds-prose--article > p:first-of-type{
  font-size:1.075rem; line-height:1.75; color:var(--ds-ink);
}
.ds-prose--article h2{
  font-size:clamp(1.25rem,2.2vw,1.55rem); font-weight:700; color:var(--ds-ink);
  line-height:1.25; letter-spacing:-.01em;
  margin:var(--ds-8) 0 var(--ds-4); padding-top:var(--ds-4);
  border-top:1px solid var(--ds-line-soft); scroll-margin-top:90px;
}
.ds-prose--article h2:first-child{ margin-top:0; border-top:0; padding-top:0; }
.ds-prose--article h2::before{
  content:""; display:block; width:34px; height:3px; background:var(--ds-gold);
  border-radius:2px; margin-bottom:var(--ds-3);
}
/* the "read this too" line the posts carry inline */
.ds-prose--article .ds-note{ margin:var(--ds-5) 0; }

/* table of contents for the article */
.ds-toc--article{ margin:0 0 var(--ds-7); max-width:none; }
.ds-toc--article ol{ padding-left:1.1rem; }

/* ---------- accessibility ---------- */
.ds a:focus-visible, .ds-btn:focus-visible, .ds-card:focus-visible, .ds-faq summary:focus-visible{
  outline:3px solid var(--ds-gold-dark); outline-offset:3px; border-radius:var(--ds-r-sm);
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .ds-split{ grid-template-columns:1fr; }
  }
@media (max-width:560px){
  .ds-cards{ grid-template-columns:1fr; }
  .ds-specs{ grid-template-columns:1fr; }
  .ds-statgrid{ grid-template-columns:1fr 1fr; }
  .ds-actions .ds-btn{ width:100%; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ds-spec, .ds-card, .ds-btn, .ds-links a, .ds-card__media img, .ds-card__more svg{
    transition:none !important;
  }
  .ds-spec:hover, .ds-card:hover, .ds-btn:hover, .ds-links a:hover{ transform:none; }
  .ds-rev .review-slide.active{ animation:none; }
}

/* ==========================================================================
   Contact page (/kontakt/, /en/contact/, /it/contatto/)
   Built on the same tokens as every other ds-* block — navy/gold, 8pt rhythm,
   var(--ds-r*) radii. No new palette, no page-local font.
   ========================================================================== */

/* --ds-muted (#6b7f96) is only 4.12:1 on white — fine for the 15-16px body
   copy it was picked for, below AA for the 12-13px hints, legend and field
   captions on this page. One page-scoped tone at 4.94:1 (4.64:1 on the tinted
   section) covers every small secondary string here without touching the
   global token that the rest of the site is built on. */
#kontakt-page{
  --ds-muted-aa:#5f7288;
  /* --ds-line (#e3e9f1) is a divider tone: 1.22:1 against the white form card,
     so the inputs read as blank white space rather than as fields. WCAG 1.4.11
     wants 3:1 for a control's boundary — this border is 3.26:1 on white and
     3.03:1 on the tinted fill below, and the fill itself separates the wells
     from the card even before the border is noticed. */
  --ds-field-line:#7d90ab;
  --ds-field-fill:#f4f7fb;
}

/* The shared hero is tuned for landing pages that need to sell the section
   below them. Here the section below IS the action, and at 1440x900 the stock
   hero (610px) put the form card's first field exactly on the fold. Trimmed
   padding + a denser trust strip pull it back above it; nothing is removed,
   the same four facts are just stated in less vertical space. */
#kontakt-page .ds-phero{ padding-block:clamp(34px,3.4vw,50px) clamp(28px,2.8vw,40px); }
#kontakt-page .ds-phero .ds-actions{ margin-top:var(--ds-5); }
#kontakt-page .ds-kpis{ margin-top:var(--ds-5); gap:var(--ds-2); }
#kontakt-page .ds-kpi{ padding:var(--ds-3) var(--ds-2); }
#kontakt-page .ds-kpi__n{ font-size:clamp(1.0625rem,1.5vw,1.25rem); }
#kontakt-page .ds-kpi__l{ font-size:.75rem; margin-top:3px; }

/* form column is the wider one: it is the page's primary action, and its
   two-up field rows need more room than a stack of contact details */
.ds-contact{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(20px, 3vw, 40px); align-items:start;
}
/* NOT sticky: every `.ds` section shell carries `overflow:hidden` (that is what
   makes it a rounded card), which turns it into the sticky scrollport. The
   aside would never actually stick — it would only pick up a constant ~139px
   offset that knocks it out of alignment with the form beside it. The hero's
   call/e-mail buttons already keep direct contact one scroll away. */
.ds-contact__side{ display:grid; gap:var(--ds-4); align-content:start; }
/* both side panels switched off in /admin -> the form gets the full column
   instead of leaving an empty 1fr track beside it */
.ds-contact--solo{ grid-template-columns:minmax(0,1fr); max-width:820px; }

/* ---------- form card ---------- */
/* the three cards are white on a #f5f8fc section (1.07:1), so their edge is
   the only thing separating them from the page — at --ds-line (1.22:1) that
   edge was effectively invisible and the whole column read as one flat sheet */
#kontakt-page .ds-panel{ border-color:#cbd8ea; }
.ds-form{
  background:var(--ds-surface); border:1px solid #cbd8ea;
  border-radius:var(--ds-r-lg); box-shadow:var(--ds-shadow);
  padding:clamp(20px, 2.8vw, 34px);
}
/* the header CTA links to /kontakt/#contactForm and the header is fixed, so
   without this the jump parks the form's heading underneath it. --hd-h is the
   header's real measured height (set by the header script). */
#kontakt-page #contactForm,
#kontakt-page .ds-form{ scroll-margin-top:calc(var(--hd-h, 84px) + var(--ds-5)); }
.ds-form__t{ font-size:clamp(1.25rem,2vw,1.5rem); font-weight:700; color:var(--ds-ink); margin:0 0 var(--ds-2); letter-spacing:-.01em; }
.ds-form__d{ font-size:.9688rem; line-height:1.65; color:var(--ds-body); margin:0 0 var(--ds-5); max-width:56ch; }
/* filled by forms.js from ?product= — collapsed to nothing when empty so it
   never leaves a gap on a plain visit */
.ds-form__product:not(:empty){
  margin:0 0 var(--ds-4); padding:10px var(--ds-4);
  background:rgba(255,193,7,.12); border-left:3px solid var(--ds-gold);
  border-radius:var(--ds-r-sm); font-size:.9375rem; color:var(--ds-ink);
}

#contactForm{ display:grid; gap:var(--ds-4); }
/* name+company and email+phone pair up on desktop: five stacked fields read as
   a long form, three rows read as a short one.
   `align-items:start` is load-bearing: grid items stretch by default, so the
   E-Mail field grew to match the Telefon field beside it (which is taller by
   its hint line) and its input rendered 74px against the other three at 51px. */
.ds-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ds-4); align-items:start; }

.ds-field{ display:grid; gap:6px; min-width:0; align-content:start; }
.ds-field label{
  font-size:.875rem; font-weight:600; color:var(--ds-ink); line-height:1.3;
}
.ds-field__req{ color:#b3261e; font-weight:700; }
.ds-field__opt{ color:var(--ds-muted-aa); font-weight:400; }
.ds-field input,
.ds-field textarea{
  /* the page inherits content-box (there is no global border-box reset), so
     without this the declared min-height silently became min-height + padding
     + border — 70px for a field specced at 46px */
  box-sizing:border-box;
  width:100%; min-height:48px; padding:11px 14px;
  font:inherit; font-size:1rem;              /* 16px: stops iOS zoom-on-focus */
  color:var(--ds-ink); background:var(--ds-field-fill);
  border:1px solid var(--ds-field-line); border-radius:var(--ds-r-sm);
  transition:border-color var(--ds-t), box-shadow var(--ds-t), background var(--ds-t);
}
.ds-field textarea{ resize:vertical; line-height:1.6; min-height:132px; }
/* the message placeholder carries a real example, so it has to be readable,
   not decorative grey */
.ds-field input::placeholder,
.ds-field textarea::placeholder{ color:var(--ds-muted-aa); opacity:1; }
.ds-field input:hover,
.ds-field textarea:hover{ border-color:#5f7288; }
/* `:focus`, not `:focus-visible` — a text field must show focus however it was
   reached. The rule replaces the UA outline with a ring drawn OUTSIDE the box
   (box-shadow), so it cannot be clipped by the field's own border radius. */
.ds-field input:focus,
.ds-field textarea:focus{
  outline:none; background:var(--ds-surface);
  border-color:var(--ds-gold-dark);
  box-shadow:0 0 0 3px rgba(255,193,7,.28);
}
/* validate on blur, never mid-typing: :user-invalid only matches after the
   field has been interacted with and left, so an error cannot appear while
   someone is still halfway through their e-mail address */
.ds-field input:user-invalid,
.ds-field textarea:user-invalid{ border-color:#b3261e; }
.ds-field input:user-invalid:focus,
.ds-field textarea:user-invalid:focus{ box-shadow:0 0 0 3px rgba(179,38,30,.2); }
.ds-field__hint{ margin:0; font-size:.8125rem; line-height:1.5; color:var(--ds-muted-aa); }

.ds-form__legal{ margin:0; font-size:.8125rem; line-height:1.6; color:var(--ds-muted-aa); }
.ds-form__legal a{ color:var(--ds-link); font-weight:600; text-decoration:underline; text-underline-offset:.16em; }

.ds-form__submit{ justify-self:start; min-height:50px; padding-inline:26px; }
.ds-form__submit-ic{ width:17px; height:17px; }
/* busy state — set by forms.js while the POST is in flight */
.ds-form__submit[aria-busy="true"]{ opacity:.75; cursor:progress; transform:none; }
.ds-form__submit[aria-busy="true"] .ds-form__submit-ic{
  border-radius:50%; border:2px solid rgba(8,27,53,.28); border-top-color:var(--ds-navy);
  animation:ds-spin 700ms linear infinite;
}
@keyframes ds-spin{ to{ transform:rotate(360deg); } }
/* ---------- success state ----------
   Ported from the retired /kontakt/kontakt.css so the confirmation still has a
   shape once the form is hidden. `.success-box` itself is in dropsa-global.css.
   The card keeps a floor height so the page does not jump upward by ~800px at
   the exact moment the user is told it worked. */
.contact-form--success{ display:flex; flex-direction:column; justify-content:center; min-height:280px; }
.contact-form--success #feedback{ margin-top:0; flex:1; display:flex; align-items:center; justify-content:center; }
.success-box--page{
  width:100%; margin-top:0; padding:28px 24px;
  font-size:1.05rem; text-align:center; border-left-width:6px;
}
/* the lead paragraph is part of the "please fill this in" framing; once the
   form is gone it would read as an instruction with nothing to act on */
.contact-form--success .ds-form__d{ display:none; }

/* ---------- direct-contact panel ---------- */
.ds-reach__lead{ font-size:.9375rem; line-height:1.6; color:var(--ds-body); margin:0 0 var(--ds-4); }
.ds-reach__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--ds-4); }
.ds-reach__i{ display:flex; gap:var(--ds-3); align-items:flex-start; }
.ds-reach__ic{
  flex:none; width:34px; height:34px; border-radius:9px; background:rgba(255,193,7,.16);
  display:grid; place-items:center;
}
.ds-reach__ic svg{ width:17px; height:17px; stroke:var(--ds-gold-dark); }
.ds-reach__tx{ display:grid; gap:2px; min-width:0; }
.ds-reach__l{
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ds-muted-aa);
}
.ds-reach__v{
  font-size:1rem; font-weight:600; color:var(--ds-ink); line-height:1.5;
  text-decoration:none; word-break:break-word;
}
a.ds-reach__v{ display:inline-flex; align-items:center; min-height:32px; }
a.ds-reach__v:hover{ color:var(--ds-link); text-decoration:underline; text-underline-offset:.16em; }
.ds-reach__v--plain{ font-weight:500; color:var(--ds-body); }
.ds-reach__route{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px; min-height:32px;
  font-size:.875rem; font-weight:700; color:var(--ds-link); text-decoration:none;
}
.ds-reach__route svg{ width:14px; height:14px; }
.ds-reach__route:hover{ text-decoration:underline; text-underline-offset:.16em; }

/* ---------- "what happens next" ---------- */
.ds-next__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--ds-4); counter-reset:none; }
.ds-next__i{ display:flex; gap:var(--ds-3); align-items:flex-start; }
.ds-next__n{
  flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--ds-navy); color:var(--ds-gold);
  display:grid; place-items:center; font-size:.8125rem; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.ds-next__tx{ font-size:.9375rem; line-height:1.6; color:var(--ds-body); }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .ds-contact{ grid-template-columns:1fr; }
  /* sticky is meaningless once the aside is a full-width block under the form */
  .ds-contact__side{ position:static; }
}
@media (max-width:560px){
  .ds-form__row{ grid-template-columns:1fr; }
  .ds-form__submit{ justify-self:stretch; width:100%; }
  #kontakt-page .ds-kpis{ grid-template-columns:1fr 1fr; }
  /* keyed off width as well as `pointer:coarse`: touch-capable laptops and
     several emulators report a fine pointer, and these three links are the
     ones a visitor actually taps on a phone */
  a.ds-reach__v, .ds-reach__route{ min-height:44px; }
}
/* thumb-sized targets on touch. The contact panel's phone / e-mail / route
   links are the ones a visitor taps on a phone, so they get the full 44px —
   the inline Datenschutz link inside a sentence is exempt (WCAG 2.5.8). */
@media (pointer:coarse){
  .ds-field input{ min-height:52px; }
  a.ds-reach__v, .ds-reach__route{ min-height:44px; }
  .ds-reach__route{ margin-top:2px; }
}
@media (prefers-reduced-motion:reduce){
  .ds-field input, .ds-field textarea{ transition:none; }
  .ds-form__submit[aria-busy="true"] .ds-form__submit-ic{ animation:none; }
}