/* =============================================================================
   A&K TECHPARTS — styles.css
   Premium European B2B: dark navy, white, light grey, electric blue accent.
   Green is reserved for WhatsApp and success states only.
   ============================================================================= */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Colour */
  --navy-900: #071628;
  --navy-800: #0b1f3a;
  --navy-700: #122c4e;
  --navy-600: #1b3d63;
  --navy-line: #24507f;

  --blue-600: #1257c9;
  --blue-500: #1f6bef;
  --blue-400: #2f7dfb;
  --blue-100: #e5eefd;

  --white: #ffffff;
  --grey-50: #f7f9fc;
  --grey-100: #eef2f7;
  --grey-200: #e1e8f0;
  --grey-300: #cbd6e2;
  --grey-500: #7b8a9c;
  --grey-700: #47566a;
  --ink: #16212f;

  --green-600: #128c4a;
  --green-500: #1faa5c;
  --whatsapp: #25d366;
  --danger: #c0341d;
  --danger-bg: #fdecea;

  /* Typography — system stack: no external font requests, so nothing is
     loaded from a third party before the visitor consents. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;

  --wrap: 1200px;
  --wrap-narrow: 860px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(11, 31, 58, .06), 0 1px 3px rgba(11, 31, 58, .08);
  --sh-md: 0 4px 12px rgba(11, 31, 58, .08), 0 1px 3px rgba(11, 31, 58, .06);
  --sh-lg: 0 12px 32px rgba(11, 31, 58, .12), 0 4px 10px rgba(11, 31, 58, .06);
  --sh-blue: 0 8px 24px rgba(31, 107, 239, .28);

  --header-h: 82px;
}

/* -------------------------------------------------------------- BASE RESET */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
.sprite { display: none; }

/* The hidden attribute must beat any class-level display rule
   (otherwise .modal{display:grid} keeps an invisible overlay over the page). */
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: var(--lh-tight); letter-spacing: -.02em; color: var(--navy-900); font-weight: 700; }
h1 { font-size: clamp(2rem, 4.4vw, var(--fs-4xl)); }
h2 { font-size: clamp(1.6rem, 3vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; border-radius: var(--r-sm); }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--blue-600); color: #fff; padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { inset-inline-start: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: var(--sp-3);
}
.section--dark .eyebrow, .hero .eyebrow { color: var(--blue-400); }

.lead { font-size: var(--fs-md); color: var(--grey-700); }
.section--dark .lead, .hero .lead { color: #b9c9dd; }

/* ------------------------------------------------------------------- ICONS */
.ico { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico--xs { width: 14px; height: 14px; }
.ico--sm { width: 18px; height: 18px; }
.ico--lg { width: 30px; height: 30px; }
.ico--xl { width: 40px; height: 40px; }

/* ----------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 10px 16px; font-size: var(--fs-sm); }
.header__actions .btn { white-space: nowrap; padding: 10px 14px; font-size: .8125rem; }
.btn--block { width: 100%; }

.btn--primary { background: var(--blue-600); color: #fff; box-shadow: var(--sh-blue); }
.btn--primary:hover { background: var(--blue-500); }

.btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--grey-300); }
.btn--ghost:hover { border-color: var(--blue-500); color: var(--blue-600); background: var(--blue-100); }

.btn--ghost-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: #fff; color: var(--navy-800); }

.btn--wa { background: var(--whatsapp); color: #fff; box-shadow: 0 6px 18px rgba(37,211,102,.28); }
.btn--wa:hover { background: #1fbe5b; color: #fff; }
.wa-ico { width: 18px; height: 18px; flex: 0 0 auto; }

.btn--text { background: none; color: var(--navy-800); text-decoration: underline; padding-inline: var(--sp-2); }
.btn--text:hover { color: var(--blue-600); }

.btn[disabled] { opacity: .6; cursor: not-allowed; }

.link-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--blue-600);
}
.card__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: auto; padding-top: var(--sp-4); }
.card__cta .link-cta { margin-top: 0; padding-top: 0; }
.link-cta--alt { color: var(--grey-700); font-weight: 500; }
.link-cta--alt:hover { color: var(--blue-600); }
.link-cta::after { content: "→"; transition: transform .15s ease; }
.link-cta:hover { text-decoration: none; }
.link-cta:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------ TOP BAR */
.topbar { background: var(--navy-900); color: #a9bdd4; font-size: var(--fs-xs); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 38px; padding-block: 8px; }
.topbar__text { margin: 0; }
.topbar__link { color: #fff; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--blue-400); }
.topbar__link:hover { color: var(--blue-400); text-decoration: none; }

/* ------------------------------------------------------------------- HEADER */
.header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--grey-200);
  backdrop-filter: saturate(160%) blur(8px);
  transition: box-shadow .2s ease;
}
.header.is-stuck { box-shadow: var(--sh-md); }
.header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); min-width: 0; }

/* Logo — Bilddatei mit fester Hoehe, Breite folgt dem Seitenverhaeltnis 3.14:1.
   Desktop 230px breit, Mobil 176px. */
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.logo:hover { text-decoration: none; }
.logo picture { display: block; }
.logo img { display: block; width: auto; height: 50px; }

/* Nav */
.nav {
  display: flex; align-items: center; gap: 16px;
  margin-inline-start: auto;      /* statt margin-left: in RTL sonst falsch herum */
  min-width: 0; flex-wrap: nowrap; flex-shrink: 1;
}

/* Menuepunkte duerfen nicht schrumpfen — sonst laufen sie in Sprachen mit
   laengeren Woertern (Russisch, Arabisch) ineinander. Der Inhaltsbereich ist
   auf 1200 px begrenzt, dort passen keine zehn Eintraege nebeneinander.
   Diese vier stehen deshalb nur in der Fusszeile und im Mobilmenue. */
.nav a { flex: 0 0 auto; }
.nav .nav-hide, .nav .hide-lg { display: none; }
.nav a { white-space: nowrap; }
.nav a {
  color: var(--grey-700); font-size: .78rem; font-weight: 500; letter-spacing: .005em;
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--navy-900); border-bottom-color: var(--blue-500); text-decoration: none; }

.header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-inline-start: auto; flex: 0 0 auto; }
.nav + .header__actions { margin-left: 0; }

/* Language selector */
.langsel { position: relative; }
.langsel__btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: transparent; border: 1px solid var(--grey-300); color: var(--navy-800);
  border-radius: var(--r-md); padding: 7px 9px 7px 10px;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  cursor: pointer; line-height: 1; transition: border-color .18s ease, background-color .18s ease;
}
.langsel__globe { width: 16px; height: 16px; color: var(--grey-500); }
.langsel__chev { width: 11px; height: 11px; color: var(--grey-500); margin-left: -1px; }
.langsel__btn:hover { border-color: var(--blue-500); background: var(--blue-100); }
.langsel__btn:hover .langsel__globe, .langsel__btn:hover .langsel__chev { color: var(--blue-600); }
.langsel__btn[aria-expanded="true"] .langsel__chev { transform: rotate(180deg); }
.langsel__chev { transition: transform .18s ease; }
.langsel__btn:hover { border-color: var(--blue-400); }
.langsel__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 95;
  min-width: 160px; background: #fff; border: 1px solid var(--grey-200);
  border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 6px; margin: 0;
}
.langsel__menu button {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--sp-4);
  background: none; border: 0; padding: 9px 10px; border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; text-align: left;
}
.langsel__menu button span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--grey-500); }
.langsel__menu button:hover, .langsel__menu button[aria-selected="true"] { background: var(--blue-100); color: var(--blue-600); }

/* Burger */
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--grey-200); background: var(--white); border-radius: var(--r-md); cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--navy-800); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------- HERO
   Light, commercial and product-led — a supplier's shop window rather than a
   dark software landing page. */
.hero {
  background:
    radial-gradient(900px 420px at 88% -10%, rgba(18,87,201,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--grey-50) 100%);
  color: var(--ink);
  padding-block: var(--sp-8) var(--sp-9);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--grey-200);
}
.hero__grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--sp-8); align-items: center; }
.hero h1 { color: var(--navy-900); max-width: 15ch; }
.hero .lead { color: var(--grey-700); max-width: 56ch; }
.hero .lead + .lead { margin-top: calc(var(--sp-3) * -1); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__points {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-6);
  padding-top: var(--sp-5); border-top: 1px solid var(--grey-200);
}
.hero__points li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); color: var(--grey-700); font-weight: 500; }
.hero__points .ico { color: var(--blue-600); margin-top: 2px; }

.hero__side { display: grid; gap: var(--sp-4); }
.hero__photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--grey-200); background: #fff; }
.hero__photo img, .product-visual { display: block; width: 100%; height: auto; }

/* Quick quotation card beside the product visual */
.quotecard {
  background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--sh-md);
}
.quotecard__title { font-weight: 700; color: var(--navy-900); margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.quotecard__row { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-3); }
.quotecard__field { display: block; margin-bottom: var(--sp-3); }
.quotecard__field span { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-700); margin-bottom: 5px; }
.quotecard__field input {
  font: inherit; font-size: var(--fs-sm); width: 100%;
  border: 1px solid var(--grey-300); border-radius: var(--r-md); padding: 11px 12px; color: var(--ink); background: #fff;
}
.quotecard__field input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(31,107,239,.15); }
.quotecard__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--grey-500); }

/* ---------------------------------------------------------------- TRUST BAR */
.trustbar { background: var(--navy-800); }
.trustbar__inner { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--sp-4); padding-block: var(--sp-5); }
.trustbar__item { display: flex; align-items: center; gap: 10px; color: #dbe5f1; font-size: var(--fs-sm); font-weight: 500; }
.trustbar__item .ico { color: var(--blue-400); }

/* ----------------------------------------------------------------- SECTIONS */
.section { padding-block: var(--sp-9); }
.section--muted { background: var(--grey-50); border-block: 1px solid var(--grey-200); }
.section--dark { background: var(--navy-800); color: #cfdcec; }
.section--dark h2, .section--dark h3 { color: #fff; }

.sec-head { max-width: 720px; margin-bottom: var(--sp-7); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head__lead { color: var(--grey-700); font-size: var(--fs-md); margin: 0; }
.section--dark .sec-head__lead { color: #b9c9dd; }

.disclaimer {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--blue-500);
  background: var(--blue-100);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  color: var(--grey-700);
  max-width: 900px;
}
.section--muted .disclaimer { background: #fff; }
.disclaimer--tight { margin-top: var(--sp-4); }

/* ------------------------------------------------------------ CATEGORY CARDS */
.grid { display: grid; gap: var(--sp-4); }
.grid--cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Drei Spalten fuer die Verweiskarten der Startseite */
#more .grid--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#more .fcard { padding: var(--sp-5); }
#more .fcard .ico { margin-bottom: var(--sp-3); }
.grid--services { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid--quality { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--sh-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--blue-400); box-shadow: var(--sh-lg); transform: translateY(-2px); }
.card .ico { color: var(--blue-600); margin-bottom: var(--sp-4); }
.card h3 { font-size: var(--fs-base); margin-bottom: 6px; }
.card p { font-size: var(--fs-sm); color: var(--grey-700); margin: 0; }

.scard {
  background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--sh-sm);
}
.scard .ico { color: var(--blue-600); margin-bottom: var(--sp-3); }

/* Eigene Icon-Familie der Supply-Sektion: 32er-Raster auf 30px Box, damit die
   Zeichnung die Flaeche fuellt und die Strichstaerke optisch bei ~1.9px liegt. */
.ico--sup { stroke-width: 2; transition: transform .2s ease, color .2s ease; }
.scard:hover .ico--sup { transform: translateY(-2px); color: var(--blue-500); }
@media (prefers-reduced-motion: reduce) { .scard:hover .ico--sup { transform: none; } }
.scard h3 { font-size: var(--fs-base); }
.scard p { font-size: var(--fs-sm); color: var(--grey-700); margin: 0; }

.qitem { border-top: 2px solid var(--navy-800); padding-top: var(--sp-4); }
.qitem h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--navy-800); }
.qitem p { font-size: var(--fs-sm); color: var(--grey-700); margin: 0; }

/* ----------------------------------------------------------------- BOM BLOCK */
.bom__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: start; }
.steps { margin-top: var(--sp-6); display: grid; gap: var(--sp-5); }
.steps--two { grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
.steps--two li { align-items: flex-start; }
.steps--two h3 { font-size: var(--fs-sm); }
.steps--two p { font-size: var(--fs-xs); }
.steps li { display: flex; gap: var(--sp-4); }
.steps__n {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue-600); color: #fff; display: grid; place-items: center;
  font-size: var(--fs-sm); font-weight: 700;
}
.steps h3 { font-size: var(--fs-base); margin-bottom: 4px; }
.steps p { font-size: var(--fs-sm); color: var(--grey-700); margin: 0; }
.section--dark .steps p { color: #b9c9dd; }

.uploadcard { position: sticky; top: calc(var(--header-h) + 20px); background: #fff; border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-lg); color: var(--ink); }
.uploadcard h3 { font-size: var(--fs-lg); color: var(--navy-900); }
.dropzone {
  display: grid; place-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4); padding: var(--sp-7) var(--sp-4);
  border: 2px dashed var(--grey-300); border-radius: var(--r-md);
  background: var(--grey-50); text-align: center; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--blue-500); background: var(--blue-100); }
.dropzone.is-drag { border-color: var(--blue-500); background: var(--blue-100); }
.dropzone .ico { color: var(--blue-600); }
.dropzone__title { margin: 0; font-weight: 600; font-size: var(--fs-sm); }
.dropzone__hint { margin: 0; font-size: var(--fs-xs); color: var(--grey-500); }

.filelist { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.filelist li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--grey-100); border: 1px solid var(--grey-200); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: var(--fs-sm);
}
.filelist .fname { font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.filelist button { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: var(--fs-xs); font-weight: 700; }
.filelist .bad { color: var(--danger); }

.confidential { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--grey-700); }
.confidential .ico { color: var(--green-600); }
.uploadcard__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.uploadcard__cta .btn--ghost-light { background: transparent; color: var(--navy-800); border-color: var(--grey-300); }
.uploadcard__cta .btn--ghost-light:hover { background: var(--blue-100); color: var(--blue-600); border-color: var(--blue-500); }

/* ------------------------------------------------------------------- CHIPS */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chips li {
  background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-pill);
  padding: 11px 20px; font-size: var(--fs-sm); font-weight: 500; color: var(--navy-800);
  box-shadow: var(--sh-sm);
}

/* --------------------------------------------------------------- WHY / LISTS */
.why__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--sp-8); align-items: start; }
.ticklist { display: grid; gap: var(--sp-3); }
.ticklist li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-md); padding: 14px 16px; font-size: var(--fs-sm); }
.ticklist .ico { color: var(--green-600); margin-top: 2px; }
.ticklist--compact li { background: transparent; border: 0; padding: 0; }

/* ----------------------------------------------------------------- PROCESS */
.process { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-5); }
.process li { border-top: 2px solid var(--blue-400); padding-top: var(--sp-4); }
.process__n { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--blue-400); letter-spacing: .1em; }
.process h3 { font-size: var(--fs-base); margin: 6px 0 6px; }
.process p { font-size: var(--fs-sm); color: var(--grey-700); margin: 0; }
.section--dark .process p { color: #b9c9dd; }

/* -------------------------------------------------------------- EU COUNTRIES */
.euro__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: start; }
.countries { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-2); }
.countries li {
  background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-md);
  padding: 12px 14px; font-size: var(--fs-sm); font-weight: 500; color: var(--navy-800);
  display: flex; align-items: center; gap: 8px;
}
.countries li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); flex: 0 0 auto; }

/* -------------------------------------------------------------------- FORM */
.rfq__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--sp-8); align-items: start; }
.rfq__points { margin-bottom: var(--sp-6); }
.rfq__alt {
  margin-top: var(--sp-6); padding-top: var(--sp-5);
  border-top: 1px solid var(--grey-200);
}
.rfq__altLabel { font-size: var(--fs-xs); color: var(--grey-500); margin-bottom: var(--sp-3); }

.rfq__intro .hintbox {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--blue-100); border-radius: var(--r-md); padding: var(--sp-4);
  font-size: var(--fs-sm); color: var(--navy-800); margin-bottom: var(--sp-5);
}
.rfq__intro .hintbox .ico { color: var(--blue-600); margin-top: 2px; }

.rfq { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-md); display: grid; gap: var(--sp-4); }
.rfq__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4); }
.field { display: flex; flex-direction: column; }
.field label { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-700); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-sm);
  color: var(--ink); background: #fff;
  border: 1px solid var(--grey-300); border-radius: var(--r-md);
  padding: 12px 13px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--grey-500); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(31,107,239,.15); }
.field input[type="file"] { padding: 9px 12px; background: var(--grey-50); }
.field ::placeholder { color: var(--grey-500); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); background: #fdf4f2; }

/* The message is always in the flow and only toggles visibility. Once the form
   has been submitted once, a line of space is reserved under every field, so
   showing or clearing an error never moves the controls under the cursor. */
.err { display: block; margin-top: 5px; font-size: var(--fs-xs); color: var(--danger); font-weight: 600; visibility: hidden; }
.rfq.was-validated .err { min-height: 1.15em; }
.field.is-invalid .err { visibility: visible; }

.field--check { flex-direction: row; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.field--check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--blue-600); }
.field--check label {
  flex: 1 1 240px;                     /* bleibt neben der Box statt darunter */
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: var(--fs-sm); color: var(--grey-700); margin: 0; line-height: 1.5;
}
.field--check .err { flex-basis: 100%; }

/* Honeypot: unsichtbar, ohne Layout zu beeinflussen. Kein negatives left,
   das wuerde in RTL die Seite nach links aufziehen. */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.formstate { border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); }
.formstate--ok { background: #e8f7ee; border: 1px solid var(--green-500); color: #0e5c33; }
.formstate--warn { background: #fff6e5; border: 1px solid #d9a125; color: #6b4a06; }
.formstate--err { background: #fdeeeb; border: 1px solid var(--danger); color: #8c2415; }
.formstate strong { display: block; margin-bottom: 4px; }
.formstate a { color: inherit; text-decoration: underline; }

/* --------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: var(--sp-2); }
.faq__item { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-md); overflow: hidden; }
.faq__q {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: none; border: 0; cursor: pointer;
  padding: 18px 20px; font: inherit; font-weight: 600; font-size: var(--fs-sm); color: var(--navy-900); text-align: left;
}
.faq__q .ico { color: var(--blue-600); transition: transform .2s ease; }
.faq__q[aria-expanded="true"] { color: var(--blue-600); }
.faq__q[aria-expanded="true"] .ico { transform: rotate(180deg); }
.faq__a { display: none; padding: 0 20px 18px; font-size: var(--fs-sm); color: var(--grey-700); }
.faq__a.is-open { display: block; }

/* --------------------------------------------------------------- FINAL CTA */
.finalcta { background: linear-gradient(120deg, var(--navy-800), var(--navy-700)); color: #fff; padding-block: var(--sp-8); }
.finalcta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.finalcta h2 { color: #fff; }
.finalcta p { color: #cfdcec; max-width: 60ch; margin: 0; }
.finalcta__btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ------------------------------------------------------------------ FOOTER */
.footer { background: var(--navy-900); color: #9db2c9; font-size: var(--fs-sm); padding-top: var(--sp-8); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--sp-6); padding-bottom: var(--sp-7); }
.footer .logo img { height: 62px; }
.footer__brand p { margin-top: var(--sp-4); max-width: 34ch; }
.footer__legalline { color: #7b93ad; }
.footer__col h2 { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: var(--sp-4); font-family: var(--font-mono); font-weight: 500; }
.footer__col a { display: block; color: #9db2c9; padding: 4px 0; }
.footer__col a:hover { color: #fff; text-decoration: none; }
.footer__cookiebtn { display: block; background: none; border: 0; padding: 4px 0; color: #9db2c9; font: inherit; cursor: pointer; text-align: left; }
.footer__cookiebtn:hover { color: #fff; }
.footer__contact p { margin-bottom: var(--sp-3); line-height: 1.6; }
.footer__contact strong { color: #fff; font-weight: 600; }
.footer__contact a { color: #9db2c9; }
.footer__contact a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid #16304d; padding-block: var(--sp-4) var(--sp-5); }
.footer__bottom p { font-size: var(--fs-xs); color: #6d84a0; margin: 0; }

/* --------------------------------------------------------------- WHATSAPP */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: flex; align-items: center; gap: 10px;
  transition: transform .22s ease;
}
/* Toggled from script.js so the button never sits on top of the cookie banner
   or the form's submit button on small screens. */
.wa.is-raised { transform: translateY(-96px); }
.wa__tip {
  background: var(--navy-900); color: #fff; font-size: var(--fs-xs); font-weight: 600;
  padding: 9px 13px; border-radius: var(--r-md); box-shadow: var(--sh-lg); white-space: nowrap;
}
.wa__btn {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--whatsapp); color: #fff;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .42);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa__btn svg { width: 32px; height: 32px; }
.wa__btn:hover { transform: scale(1.06); text-decoration: none; box-shadow: 0 10px 26px rgba(37,211,102,.5); }

/* ----------------------------------------------------------- COOKIE BANNER */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: #fff; border-top: 3px solid var(--blue-600); box-shadow: 0 -8px 30px rgba(7,22,40,.18);
}
.cookie__inner {
  max-width: var(--wrap); margin-inline: auto; padding: var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap;
}
.cookie h2 { font-size: var(--fs-base); margin-bottom: 6px; }
.cookie p { font-size: var(--fs-sm); color: var(--grey-700); max-width: 72ch; margin: 0; }
.cookie__btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

.modal { position: fixed; inset: 0; z-index: 160; background: rgba(7,22,40,.6); display: grid; place-items: center; padding: var(--sp-4); }
.modal__box { background: #fff; border-radius: var(--r-lg); padding: var(--sp-6); max-width: 560px; width: 100%; box-shadow: var(--sh-lg); max-height: 90vh; overflow-y: auto; }
.modal__box h2 { font-size: var(--fs-lg); }
.ckrow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-4) 0; border-top: 1px solid var(--grey-200); }
.ckrow h3 { font-size: var(--fs-sm); margin-bottom: 4px; }
.ckrow p { font-size: var(--fs-xs); color: var(--grey-700); margin: 0; }
.modal__btns { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }

.switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; background: var(--grey-300); border-radius: var(--r-pill); transition: background-color .18s ease; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .18s ease; box-shadow: var(--sh-sm); }
.switch input:checked + span { background: var(--green-500); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled + span { background: var(--green-600); opacity: .6; }
.switch input:focus-visible + span { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* --------------------------------------------------------------- LEGAL PAGE */
.legalhero { background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); color: #fff; padding-block: var(--sp-8); }
.legalhero h1 { color: #fff; }
.legalhero p { color: #b9c9dd; margin: 0; }
.legal { padding-block: var(--sp-8); }
.legal__body { max-width: 72ch; }
.legal__body h2 { font-size: var(--fs-lg); margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--grey-200); }
.legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__body h3 { font-size: var(--fs-base); margin-top: var(--sp-5); }
.legal__body ul { list-style: none; margin: var(--sp-3) 0; }
.legal__body ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.legal__body ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-500); }
.legal__body .placeholder { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--grey-100); padding: 2px 6px; border-radius: var(--r-sm); }
.legal__updated { font-size: var(--fs-xs); color: var(--grey-500); font-family: var(--font-mono); }
.langnote { background: var(--blue-100); border-left: 3px solid var(--blue-500); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--sp-4); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }

/* ------------------------------------------- FREQUENTLY REQUESTED / MFR GRID */
.grid--freq { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.fcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--grey-200); border-left: 3px solid var(--blue-600);
  border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--sh-sm);
}
.fcard .ico { color: var(--blue-600); margin-bottom: var(--sp-3); }

/* Produkt-Icons der Kategorie-Karten: 32er-Raster auf 30px Box. */
.ico--frq { stroke-width: 1.9; transition: transform .2s ease, color .2s ease; }
.fcard:hover .ico--frq { transform: translateY(-2px); color: var(--blue-500); }
@media (prefers-reduced-motion: reduce) { .fcard:hover .ico--frq { transform: none; } }
.fcard h3 { font-size: var(--fs-base); margin-bottom: 6px; }
.fcard p { font-size: var(--fs-sm); color: var(--grey-700); margin: 0; }
.fcard .link-cta { margin-top: auto; }

.mfrgrid {
  display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  border: 1px solid var(--grey-200); border-radius: var(--r-lg); overflow: hidden; background: var(--grey-200);
  gap: 1px;
}
.mfrgrid li {
  background: #fff; padding: 22px var(--sp-4); text-align: center;
  font-size: var(--fs-sm); font-weight: 600; color: var(--navy-800); letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; min-height: 74px;
  transition: background-color .15s ease, color .15s ease;
}
.mfrgrid li:hover { background: var(--blue-100); color: var(--blue-600); }

.mfrgrid--logos li { padding: 0; }
.mfrgrid--logos a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px 18px; }
.mfrgrid--logos a:hover { text-decoration: none; }
/* Logos bleiben in Originalfarbe — Umfaerben oder Graustufen kann gegen die
   Markenrichtlinien eines Herstellers verstossen. */
.mfrgrid--logos img {
  display: block; width: 100%; height: auto; max-height: 52px; object-fit: contain;
  opacity: .92; transition: opacity .2s ease, transform .2s ease;
}
.mfrgrid--logos li:hover img { opacity: 1; transform: scale(1.05); }
.mfrgrid--logos li { min-height: 104px; }
.mfrgrid--logos picture { display: block; width: 100%; }

/* Delivery destinations column heading */
.euro__title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .08em; color: var(--grey-700); font-family: var(--font-mono); font-weight: 500; margin-bottom: var(--sp-4); }
.section--dark .countries li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #dbe5f1; }
.section--dark .ticklist--dark li, .finalcta .ticklist--dark li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #dbe5f1; }
.section--dark .ticklist--dark .ico, .finalcta .ticklist--dark .ico { color: #4bd07f; }
.ticklist--dark .ico { color: var(--green-600); }
.section--dark .disclaimer { background: rgba(47,125,251,.12); color: #cfdcec; border-left-color: var(--blue-400); }


/* ------------------------------------------------------------- IMAGE MEDIA */
.hero__photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); border: 1px solid var(--grey-200); background: #fff; }
.hero__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Large image-led cards in the component supply section */
.grid--supply { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-5); }
.vcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.vcard:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: var(--grey-300); }
.vcard__media { margin: 0; overflow: hidden; background: var(--grey-100); }
.vcard__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; }
.vcard:hover .vcard__media img { transform: scale(1.04); }
.vcard__body { display: flex; flex-direction: column; padding: var(--sp-5); flex: 1; }
.vcard__body h3 { font-size: var(--fs-md); }
.vcard__body p { font-size: var(--fs-sm); color: var(--grey-700); }
.vcard__body .link-cta { margin-top: auto; }

/* Category cards carrying photography */
.card--photo { padding: 0; overflow: hidden; }
.card--photo .card__media { margin: 0; overflow: hidden; background: var(--grey-100); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.card--photo .card__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.card--photo:hover .card__media img { transform: scale(1.05); }
.card--photo h3 { padding: var(--sp-5) var(--sp-5) 0; margin-bottom: 6px; }
.card--photo p { padding: 0 var(--sp-5); }
.card--photo .card__cta { padding: var(--sp-4) var(--sp-5) var(--sp-5); margin-top: auto; }

/* Standalone figures in the quality and delivery sections */
.mediastrip { display: grid; gap: var(--sp-5); margin-top: var(--sp-7); grid-template-columns: 1.1fr .9fr; align-items: center; }
.mediastrip__fig { margin: 0; }
.mediastrip__fig img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-lg); border: 1px solid var(--grey-200); box-shadow: var(--sh-md); background: var(--grey-100);
}
.mediastrip__fig figcaption { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--grey-500); font-style: italic; }
/* Lieferabschnitt: ein grosses Bild oben, zwei kleinere darunter */
.shipgrid {
  margin: 0 0 var(--sp-5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
}
.shipgrid picture { display: block; border-radius: var(--r-md); overflow: hidden; background: rgba(255,255,255,.06); }
.shipgrid__lead { grid-column: 1 / -1; }
.shipgrid img {
  display: block; width: 100%; height: auto; object-fit: cover;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md);
}
.shipgrid__lead img { aspect-ratio: 16 / 9; }
.shipgrid picture:not(.shipgrid__lead) img { aspect-ratio: 4 / 3; }
.section--dark .euro__title { color: #b9c9dd; }
.shipgrid figcaption {
  grid-column: 1 / -1; margin-top: 2px;
  font-size: var(--fs-xs); color: var(--grey-500); font-style: italic; line-height: 1.55;
}
.section--dark .shipgrid figcaption { color: #8ba2bd; }
.del__body { font-size: var(--fs-sm); color: var(--grey-700); margin-bottom: var(--sp-6); }
.section--dark .del__body { color: #b9c9dd; }

/* ----------------------------------------------------------------- CONTACT */
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.contact__card { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-lg); padding: var(--sp-6); box-shadow: var(--sh-md); }
.contact__brand { font-size: var(--fs-md); color: var(--navy-900); margin-bottom: var(--sp-5); }
.contact__brand span { font-size: var(--fs-xs); color: var(--grey-500); letter-spacing: .05em; text-transform: uppercase; }
.contact__dl { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 10px var(--sp-5); margin: 0; font-size: var(--fs-sm); }
.contact__dl dt { color: var(--grey-500); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; padding-top: 2px; }
.contact__dl dd { margin: 0; color: var(--ink); }

/* Disclaimer under the enquiry form */
.formnote { font-size: var(--fs-xs); color: var(--grey-500); line-height: 1.6; margin: 0; border-top: 1px solid var(--grey-200); padding-top: var(--sp-4); }

.sec-head--wide { max-width: 860px; }
.sec-cta { margin-top: var(--sp-7); text-align: center; }
.sec-cta__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--grey-500); }
.footer__address { color: #9db2c9; }


/* ------------------------------------------------------------ PART SELECTOR */
.picker { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: var(--sp-5); align-items: start; }

.picker__main { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.picker__controls { display: grid; gap: var(--sp-3); }
.picker__search { position: relative; display: flex; align-items: center; }
.picker__search .ico { position: absolute; left: 14px; color: var(--grey-500); pointer-events: none; }
.picker__search input {
  font: inherit; font-size: var(--fs-sm); width: 100%;
  padding: 13px 40px 13px 42px; border: 1px solid var(--grey-300); border-radius: var(--r-md);
  color: var(--ink); background: #fff; -webkit-appearance: none;
}
.picker__search input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(31,107,239,.15); }
.picker__search input::-webkit-search-cancel-button { display: none; }
.picker__clearsearch {
  position: absolute; right: 8px; width: 28px; height: 28px; border: 0; background: none;
  color: var(--grey-500); font-size: 20px; line-height: 1; cursor: pointer; border-radius: var(--r-sm);
}
.picker__clearsearch:hover { color: var(--navy-900); background: var(--grey-100); }

.picker__selects { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.picker__sel { display: block; }
.picker__sel span { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-700); margin-bottom: 5px; }
.picker__sel select {
  font: inherit; font-size: var(--fs-sm); width: 100%;
  padding: 11px 12px; border: 1px solid var(--grey-300); border-radius: var(--r-md); background: #fff; color: var(--ink);
}
.picker__sel select:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(31,107,239,.15); }

.picker__count { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-xs); color: var(--grey-500); font-family: var(--font-mono); }

.picker__table { border: 1px solid var(--grey-200); border-radius: var(--r-md); overflow: hidden; }
.picker__head, .picker__row {
  display: grid; grid-template-columns: 1.5fr 1.1fr 2.2fr .8fr auto;
  gap: var(--sp-3); align-items: center; padding: 11px var(--sp-4);
}
.picker__head {
  background: var(--grey-100); border-bottom: 1px solid var(--grey-200);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey-700);
}
.picker__rows { max-height: 460px; overflow-y: auto; }
.picker__row { border-bottom: 1px solid var(--grey-100); font-size: var(--fs-sm); }
.picker__row:last-child { border-bottom: 0; }
.picker__row:hover { background: var(--blue-100); }
.picker__mpn { font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; color: var(--navy-900); overflow-wrap: anywhere; }
.picker__mfr { color: var(--grey-700); }
.picker__desc { color: var(--grey-700); font-size: var(--fs-xs); }
.picker__pkg { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--grey-500); }
.picker__action { justify-self: end; }
.picker__add {
  font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; white-space: nowrap;
  padding: 8px 14px; border-radius: var(--r-md); border: 1px solid var(--blue-600);
  background: var(--blue-600); color: #fff; transition: background-color .15s ease, color .15s ease;
}
.picker__add:hover { background: var(--blue-500); }
.picker__add.is-added { background: #e8f7ee; color: var(--green-600); border-color: var(--green-500); }
.picker__none { padding: var(--sp-6) var(--sp-4); text-align: center; font-size: var(--fs-sm); color: var(--grey-700); }
.picker__note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--grey-500); line-height: 1.65; }
#pkMore { margin-top: var(--sp-3); }

.picker__cart {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--navy-800); color: #dbe5f1; border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-md);
}
.picker__cartHead { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.picker__cartHead h3 { color: #fff; font-size: var(--fs-base); margin: 0; }
.picker__badge {
  min-width: 28px; height: 28px; padding: 0 8px; border-radius: var(--r-pill);
  background: var(--blue-500); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.picker__empty { font-size: var(--fs-xs); color: #9db2c9; margin: 0; line-height: 1.65; }
.picker__cartRows { display: grid; gap: var(--sp-2); max-height: 380px; overflow-y: auto; }
.picker__cartRow {
  display: grid; grid-template-columns: 1fr 72px 28px; gap: 8px; align-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md); padding: 9px 10px;
}
.picker__cartMpn { display: block; font-family: var(--font-mono); font-size: .75rem; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.picker__cartMfr { display: block; font-size: 10px; color: #9db2c9; margin-top: 2px; }
.picker__qty {
  font: inherit; font-size: var(--fs-xs); width: 100%; text-align: center;
  padding: 7px 6px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.2); color: #fff;
}
.picker__qty::placeholder { color: #7b93ad; }
.picker__qty:focus { outline: none; border-color: var(--blue-400); }
.picker__remove {
  width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: rgba(255,255,255,.08); color: #cfdcec; font-size: 18px; line-height: 1;
}
.picker__remove:hover { background: rgba(224,74,54,.9); color: #fff; }
.picker__cartFoot { margin-top: var(--sp-4); }
.picker__cartActions { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.picker__cartActions button, .picker__cartActions a {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); color: #9db2c9; text-decoration: underline;
}
.picker__cartActions button:hover, .picker__cartActions a:hover { color: #fff; }
.picker__saved { margin-top: var(--sp-3); font-size: 10.5px; color: #7b93ad; }


/* ------------------------------------------------------------ FORM DETAILS */
/* Pflichtkennzeichnung per CSS: bleibt beim Sprachwechsel erhalten, weil das
   i18n-Skript den textContent der Labels ersetzt. */
.field--req > label::after { content: "*"; color: var(--danger); font-weight: 700; margin-left: 4px; }
.rfq__reqnote { font-size: var(--fs-xs); color: var(--grey-500); margin: 0; }
.rfq__more { border: 1px solid var(--grey-200); border-radius: var(--r-md); background: var(--grey-50); }
.rfq__more > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3);
  cursor: pointer; padding: 14px var(--sp-4); list-style: none;
  font-size: var(--fs-sm); font-weight: 600; color: var(--navy-800);
}
.rfq__more > summary::-webkit-details-marker { display: none; }
.rfq__more > summary::before {
  content: "+"; display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: var(--r-sm);
  background: var(--blue-600); color: #fff; font-size: 15px; line-height: 1; flex: 0 0 auto;
}
.rfq__more[open] > summary::before { content: "–"; }
.rfq__more[open] > summary { border-bottom: 1px solid var(--grey-200); }
.rfq__moreHint { font-size: var(--fs-xs); font-weight: 400; color: var(--grey-500); }
.rfq__moreBody { display: grid; gap: var(--sp-4); padding: var(--sp-4); }
.uploadcard__csv { display: inline-flex; align-items: center; font-size: var(--fs-xs); color: var(--grey-700); text-decoration: underline; }

/* ------------------------------------------------------------ PRODUCT PAGE */
.pchero {
  background: linear-gradient(180deg, #fff 0%, var(--grey-50) 100%);
  border-bottom: 1px solid var(--grey-200); padding-block: var(--sp-7);
}
.pchero__inner { display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: var(--sp-6); align-items: end; }
.pchero h1 { margin-bottom: var(--sp-3); }
.pchero__lead { color: var(--grey-700); font-size: var(--fs-sm); max-width: 60ch; margin: 0; }
.pchero__search { position: relative; display: flex; align-items: center; }
.pchero__search .ico { position: absolute; left: 14px; color: var(--grey-500); pointer-events: none; }
.pchero__search input {
  font: inherit; font-size: var(--fs-sm); width: 100%;
  padding: 14px 40px 14px 42px; border: 1px solid var(--grey-300); border-radius: var(--r-md);
  background: #fff; color: var(--ink); box-shadow: var(--sh-sm); -webkit-appearance: none;
}
.pchero__search input:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(31,107,239,.15); }
.pchero__search input::-webkit-search-cancel-button { display: none; }

.pcmain { padding-block: var(--sp-7); background: var(--grey-50); }
.pc__grid { display: grid; grid-template-columns: 244px minmax(0,1fr) 290px; gap: var(--sp-5); align-items: start; }
.pc__side { display: grid; gap: var(--sp-4); position: sticky; top: calc(var(--header-h) + 16px); }
.pc__panel { background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.pc__panelTitle {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--grey-700);
  margin-bottom: var(--sp-4); padding-left: 10px; border-left: 3px solid var(--blue-600); font-weight: 700;
}
.pc__cats { display: grid; gap: 2px; }
.pc__cat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%;
  background: none; border: 0; border-radius: var(--r-md); cursor: pointer; text-align: left;
  padding: 9px 11px; font: inherit; font-size: var(--fs-sm); color: var(--grey-700);
}
.pc__cat span { font-size: var(--fs-xs); color: var(--grey-500); font-family: var(--font-mono); }
.pc__cat:hover { background: var(--grey-100); color: var(--navy-900); }
.pc__cat.is-active { background: var(--blue-600); color: #fff; font-weight: 600; }
.pc__cat.is-active span { color: rgba(255,255,255,.75); }
.pc__panel .picker__sel { margin-bottom: var(--sp-3); }
.pc__panel--cta { background: var(--navy-800); border-color: var(--navy-700); }
.pc__panel--cta .pc__panelTitle { color: #cfdcec; border-left-color: var(--blue-400); }
.pc__listCount { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.pc__listCount span:first-child { font-size: var(--fs-xl); font-weight: 800; margin-right: 6px; }
.pc__link { display: block; margin-top: var(--sp-3); font-size: var(--fs-xs); color: #9db2c9; text-decoration: underline; }
.pc__link:hover { color: #fff; }

.pc__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.pc__count { margin: 0; font-size: var(--fs-xs); color: var(--grey-500); font-family: var(--font-mono); }
.pc__sort { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--grey-700); }
.pc__sort select { font: inherit; font-size: var(--fs-sm); padding: 8px 10px; border: 1px solid var(--grey-300); border-radius: var(--r-md); background: #fff; color: var(--ink); }
.pc__sort select:focus { outline: none; border-color: var(--blue-500); }

.pc__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.pcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--grey-200); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.pcard:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: var(--grey-300); }
.pcard__media { position: relative; margin: 0; background: var(--grey-100); overflow: hidden; }
.pcard__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.pcard__badge {
  position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px);
  background: rgba(255,255,255,.94); border: 1px solid var(--grey-200); border-radius: var(--r-sm);
  padding: 4px 8px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--navy-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-4); }
.pcard__mpn { font-family: var(--font-mono); font-size: .8125rem; font-weight: 700; color: var(--navy-900); margin-bottom: 6px; overflow-wrap: anywhere; }
.pcard__desc { font-size: var(--fs-xs); color: var(--grey-700); margin-bottom: var(--sp-3); }
.pcard__pkg { font-size: var(--fs-xs); color: var(--grey-500); font-family: var(--font-mono); margin: 0 0 var(--sp-4); }
.pcard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: auto; }
.pcard__detail, .pcard__add {
  font: inherit; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; padding: 9px 8px; border-radius: var(--r-md);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pcard__detail { background: #fff; border: 1px solid var(--grey-300); color: var(--navy-800); }
.pcard__detail:hover { border-color: var(--blue-500); color: var(--blue-600); }
.pcard__add { background: var(--blue-600); border: 1px solid var(--blue-600); color: #fff; }
.pcard__add:hover { background: var(--blue-500); }
.pcard__add.is-added { background: #e8f7ee; border-color: var(--green-500); color: var(--green-600); }
/* ---------------------------------------------------- TECHNICAL DOCUMENTATION */
.dslink {
  display: inline-flex; align-items: center; gap: 7px; width: 100%;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--grey-100);
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--grey-700);
  text-align: left; cursor: pointer; transition: color .18s ease;
}
.dslink .ico { width: 14px; height: 14px; color: var(--grey-500); flex: 0 0 auto; transition: color .18s ease; }
.dslink:hover { color: var(--blue-600); text-decoration: none; }
.dslink:hover .ico { color: var(--blue-600); }
.dslink__ext { margin-left: auto; color: var(--grey-500); font-size: 11px; }
.dslink:hover .dslink__ext { color: var(--blue-600); }
.dslink--request { color: var(--grey-500); font-weight: 500; }
.dslink--request:hover { color: var(--navy-800); }
.dslink--request.is-done { color: var(--green-600); }
.dslink--request.is-done .ico { color: var(--green-600); }

.pcard__dsbadge {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(255,255,255,.94); border: 1px solid var(--grey-200); border-radius: var(--r-sm);
  padding: 3px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grey-700);
}

.pc__docs { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--grey-200); }
.pc__docs h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--grey-700); margin-bottom: var(--sp-3); }
.pc__docs .dslink { border-top: 0; padding-top: 0; margin-top: 0; }
.pc__docs .dslink + .dslink { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--grey-100); }
.dslink--mfr { color: var(--grey-500); font-weight: 500; }
.dslink--mfr:hover { color: var(--blue-600); }
.pc__docs .pc__modalNote { margin-top: var(--sp-3); margin-bottom: 0; }

.pc__none { grid-column: 1 / -1; padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--grey-700); font-size: var(--fs-sm); }

.pc__modal { position: relative; max-width: 520px; }
.pc__modalClose {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: var(--r-md);
  background: var(--grey-100); color: var(--grey-700); font-size: 22px; line-height: 1; cursor: pointer;
}
.pc__modalClose:hover { background: var(--grey-200); color: var(--navy-900); }
.pc__modalMedia { margin: 0 0 var(--sp-4); border-radius: var(--r-md); overflow: hidden; background: var(--grey-100); }
.pc__modalMedia img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pc__modal h2 { font-family: var(--font-mono); font-size: var(--fs-lg); overflow-wrap: anywhere; }
.pc__specs { display: grid; grid-template-columns: 120px 1fr; gap: 8px var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }
.pc__specs dt { color: var(--grey-500); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.pc__specs dd { margin: 0; color: var(--ink); }
.pc__modalNote { font-size: var(--fs-xs); color: var(--grey-500); margin-bottom: var(--sp-4); }


/* ------------------------------------------------------- WARENKORB (rechts) */
.cart {
  position: sticky; top: calc(var(--header-h) + 16px);
  background: var(--navy-800); color: #dbe5f1;
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-md);
  max-height: calc(100vh - var(--header-h) - 32px); display: flex; flex-direction: column;
}
.cart__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex: 0 0 auto; }
.cart__title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: #cfdcec; margin: 0; padding-left: 10px; border-left: 3px solid var(--blue-400); font-weight: 700; }
.cart__badge { min-width: 28px; height: 28px; padding: 0 9px; border-radius: var(--r-pill); background: var(--blue-500); color: #fff; font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.cart__empty { font-size: var(--fs-xs); color: #9db2c9; margin: 0; line-height: 1.65; }

.cart__rows { display: grid; gap: var(--sp-2); overflow-y: auto; min-height: 0; margin: 0 -4px; padding: 0 4px; }
.cart__row { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 10px 11px; }
.cart__rowHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cart__mpn { font-family: var(--font-mono); font-size: .75rem; font-weight: 700; color: #fff; overflow-wrap: anywhere; line-height: 1.35; }
.cart__mfr { display: block; font-size: 10px; color: #9db2c9; margin-top: 2px; }
.cart__remove { width: 24px; height: 24px; flex: 0 0 auto; border: 0; border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #cfdcec; font-size: 16px; line-height: 1; cursor: pointer; }
.cart__remove:hover { background: rgba(224,74,54,.9); color: #fff; }

.cart__qtyRow { display: grid; grid-template-columns: 30px 1fr 30px; gap: 6px; margin-top: 9px; }
.cart__step {
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-sm);
  background: rgba(0,0,0,.18); color: #dbe5f1; font-size: 15px; line-height: 1;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.cart__step:hover { background: var(--blue-600); border-color: var(--blue-500); color: #fff; }
.cart__qty {
  font: inherit; font-size: var(--fs-xs); width: 100%; text-align: center;
  padding: 7px 4px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.2); color: #fff; -moz-appearance: textfield;
}
.cart__qty::placeholder { color: #7b93ad; }
.cart__qty:focus { outline: none; border-color: var(--blue-400); background: rgba(0,0,0,.35); }

.cart__foot { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.14); flex: 0 0 auto; }
.cart__sum { font-size: var(--fs-xs); color: #9db2c9; margin-bottom: var(--sp-3); }
.cart__sum span { color: #fff; font-weight: 700; }
.cart__actions { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); }
.cart__actions button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--fs-xs); color: #9db2c9; text-decoration: underline; }
.cart__actions button:hover { color: #fff; }
.cart__note { margin-top: var(--sp-3); font-size: 10.5px; color: #7b93ad; }

/* Mobile Leiste am unteren Rand */
.cartbar {
  position: fixed; left: 14px; right: 84px; bottom: 14px; z-index: 110;
  display: none; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px; border: 0; border-radius: var(--r-md);
  background: var(--navy-800); color: #fff; box-shadow: var(--sh-lg);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.cartbar__badge { min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); background: var(--blue-500); font-size: var(--fs-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* Hinweiszeile statt Anfrage-Schaltflaeche, wenn kein Dokument hinterlegt ist */
.dsnote { margin: 0; font-size: var(--fs-xs); color: var(--grey-500); }
.pc__docs .dsnote { margin-top: 2px; }


/* --------------------------------------------------- ANKAUF (Startseite) */
.buyteaser { display: grid; grid-template-columns: 1fr .8fr; gap: var(--sp-8); align-items: center; }
.buyteaser__lead { color: #b9c9dd; font-size: var(--fs-base); margin-bottom: var(--sp-5); max-width: 58ch; }
.buyteaser__points { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.buyteaser__points li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: #dbe5f1; }
.buyteaser__points .ico { color: #4bd07f; margin-top: 2px; flex: 0 0 auto; }
.buyteaser__cta { margin: 0; }
.buyteaser__fig { margin: 0; border-radius: var(--r-lg); overflow: hidden; }
.buyteaser__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); }

/* Dunkler Abschnitt: Farben umkehren */
.section--dark .buy__h { color: #cfdcec; border-left-color: var(--blue-400); }
.section--dark .buy__list li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #dbe5f1; }
.section--dark .buy__list .ico { color: #4bd07f; }
.section--dark .buy__list--plain li { color: #b9c9dd; }
.section--dark .buysteps h4 { color: #fff; }
.section--dark .buysteps p { color: #b9c9dd; }

/* -------------------------------------------------------------- ANKAUF */
.buy__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--sp-8); align-items: start; margin-top: var(--sp-7); }
.buy__h { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--grey-700); margin-bottom: var(--sp-4); padding-left: 10px; border-left: 3px solid var(--blue-600); font-weight: 700; }
.buy__h--mt { margin-top: var(--sp-7); }
.buy__list { display: grid; gap: var(--sp-2); }
.buy__list li { display: flex; gap: 11px; align-items: flex-start; background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--r-md); padding: 12px 14px; font-size: var(--fs-sm); color: var(--ink); }
.buy__list .ico { color: var(--green-600); margin-top: 2px; flex: 0 0 auto; }
.buy__list--plain li { background: none; border: 0; padding: 4px 0 4px 18px; position: relative; color: var(--grey-700); font-size: var(--fs-xs); }
.buy__list--plain li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-400); }

.buysteps { display: grid; gap: var(--sp-4); counter-reset: bs; }
.buysteps li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.buysteps__n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-600); color: #fff; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; }
.buysteps h4 { font-size: var(--fs-base); color: var(--navy-900); margin: 3px 0 5px; }
.buysteps p { font-size: var(--fs-sm); color: var(--grey-700); margin: 0; }
.buysteps li:nth-child(5) .buysteps__n { background: var(--green-500); }

.buy__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-7); }

/* Lange Woerter umbrechen lassen — Deutsch, Niederlaendisch und Polnisch
   bilden Komposita, die sonst ueber den Spaltenrand hinauslaufen. */
.qitem, .qitem *, .card p, .scard p, .fcard p, .vcard__body p,
.buy__list li, .buysteps p, .chips li, .picker__desc, .pcard__desc,
.contact__dl dd, .legal__body li { overflow-wrap: break-word; hyphens: auto; }

/* ------------------------------------------------------------------- RTL
   Arabisch laeuft von rechts nach links. Die meisten Abstaende sind bereits
   logisch gesetzt; hier nur, was gespiegelt werden muss. */
html.is-rtl .logo__rule,
html.is-rtl .buy__h,
html.is-rtl .cart__title,
html.is-rtl .pc__panelTitle { border-left: 0; border-right: 3px solid var(--blue-500); padding-left: 0; padding-right: 10px; }
html.is-rtl .disclaimer { border-left: 0; border-right: 3px solid var(--blue-500); border-radius: var(--r-md) 0 0 var(--r-md); }
html.is-rtl .fcard { border-left: 1px solid var(--grey-200); border-right: 3px solid var(--blue-600); }
html.is-rtl .link-cta::after { content: "←"; }
html.is-rtl .link-cta:hover::after { transform: translateX(-3px); }
html.is-rtl .picker__search .ico,
html.is-rtl .pchero__search .ico { left: auto; right: 14px; }
html.is-rtl .picker__search input,
html.is-rtl .pchero__search input { padding: 13px 42px 13px 40px; }
html.is-rtl .picker__clearsearch { right: auto; left: 8px; }
html.is-rtl .dslink__ext { margin-left: 0; margin-right: auto; }
html.is-rtl .wa { right: auto; left: 20px; }
/* In RTL darf nichts ueber den linken Rand hinauslaufen */
html.is-rtl .wa.is-raised { transform: translateY(-96px); }
html.is-rtl .cartbar { left: 84px; right: 14px; }
html.is-rtl .langsel__menu { right: auto; left: 0; }
html.is-rtl .langsel__btn > span { direction: ltr; }
html.is-rtl .header__actions { gap: var(--sp-3); }
html.is-rtl .skip-link { border-radius: 0 0 0 var(--r-md); }
html.is-rtl .steps__n, html.is-rtl .buysteps__n { margin-left: 0; }
/* Teilenummern und Codes bleiben immer von links nach rechts lesbar */
html.is-rtl .picker__mpn, html.is-rtl .pcard__mpn, html.is-rtl .cart__mpn,
html.is-rtl .picker__pkg, html.is-rtl .pcard__pkg,
html.is-rtl .eyebrow, html.is-rtl .euro__title { direction: ltr; text-align: start; unicode-bidi: isolate; }

/* Sekundaerer Knopf auf dunklem Grund: Text muss weiss sein, sonst
   verschwindet er im Navy — genau das war beim E-Mail-Knopf der Fall. */
.btn--onDark {
  color: #fff; border-color: rgba(255,255,255,.38); background: transparent;
}
.btn--onDark:hover { color: var(--navy-900); background: #fff; border-color: #fff; }

/* ------------------------------------------------------------- RESPONSIVE */
@media (max-width: 1080px) {
  .trustbar__inner { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__contact { grid-column: 1 / -1; }
}

@media (max-width: 1520px) {
  .hide-lg { display: none; }
}

@media (max-width: 1420px) {
  .nav { gap: 15px; }
  .nav a { font-size: .78rem; }
  .hide-md { display: none; }          /* "Upload BOM" weicht zuerst */
}

@media (max-width: 1240px) {
  .logo__endorse, .logo__rule { display: none; }
  .nav { gap: 12px; }
  .nav a { font-size: .75rem; }
}

@media (max-width: 1180px) {
  .nav { gap: 14px; }
  .nav a { font-size: .78rem; }
  .hide-md { display: none; }
  .logo img { height: 44px; }
}

@media (max-width: 1080px) {
  .nav { gap: 11px; }
  .nav a { font-size: .74rem; }
  .header__inner { gap: var(--sp-3); }
  .logo img { height: 40px; }
  .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Tablet: Sektionen und Karten atmen weniger, aber gleichmaessig ---- */
@media (max-width: 940px) {
  :root {
    --header-h: 72px;
    --sp-9: 64px;      /* Sektionsabstand */
    --sp-8: 48px;
    --sp-7: 40px;
  }
  .wrap { padding-inline: var(--sp-5); }
  .sec-head { margin-bottom: var(--sp-6); }
  .steps--two { grid-template-columns: 1fr; }
  .uploadcard { position: static; }
  .rfq { padding: var(--sp-5); }
  .contact__card, .pc__panel { padding: var(--sp-5); }

  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--grey-200);
    box-shadow: var(--sh-lg); padding: var(--sp-3) var(--sp-5) var(--sp-5);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--grey-100); font-size: var(--fs-base); }
  .nav a:hover { border-bottom-color: var(--grey-100); }
  .burger { display: block; }
  .header__actions { margin-left: auto; }
  .hide-sm, .hide-md { display: none; }
  .mfrgrid { grid-template-columns: repeat(3, minmax(0,1fr)); }

  .hero { padding-block: var(--sp-8); }
  .hero__grid, .bom__grid, .why__grid, .euro__grid, .rfq__grid, .contact__grid, .buy__grid, .buyteaser { grid-template-columns: 1fr; gap: var(--sp-7); }
  .grid--supply { grid-template-columns: 1fr 1fr; }
  .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mediastrip { grid-template-columns: 1fr; }
  .picker { grid-template-columns: 1fr; }
  .pc__grid { grid-template-columns: 232px minmax(0,1fr); }
  .cart { grid-column: 1 / -1; position: static; max-height: none; }
  .cart__rows { max-height: none; }
  .pc__side { position: static; grid-template-columns: 1fr 1fr; }
  .pchero__inner { grid-template-columns: 1fr; }
  .picker__cart { position: static; }
  .picker__cartRows { max-height: none; }
  .logo img { height: 40px; }
  /* Hero order on small screens: text, then image, then the quote card */
  .hero__grid { display: flex; flex-direction: column; gap: var(--sp-6); }
  .hero__side { display: contents; }
  .hero__copy { order: 1; }
  .hero__photo { order: 2; }
  .quotecard { order: 3; }
  .process { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Phone: eine einzige Abstandsskala fuer alle Seiten ---- */
@media (max-width: 700px) {
  :root {
    --sp-9: 48px;      /* Sektionsabstand */
    --sp-8: 36px;
    --sp-7: 32px;
    --sp-6: 24px;
    --sp-5: 18px;
  }
  .wrap { padding-inline: 18px; }
  h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  h2 { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .lead, .sec-head__lead { font-size: var(--fs-base); }
  .sec-head { margin-bottom: var(--sp-6); }
  .card, .scard, .fcard, .vcard__body, .uploadcard, .quotecard,
  .contact__card, .pc__panel, .picker__main { padding: var(--sp-5); }
  .card--photo { padding: 0; }
  .card--photo h3 { padding: var(--sp-5) var(--sp-5) 0; }
  .card--photo p { padding: 0 var(--sp-5); }
  .card--photo .card__cta { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
  .rfq { padding: var(--sp-5) var(--sp-4); }
  .rfq__moreBody { padding: var(--sp-4) var(--sp-3); }
  .modal { padding: var(--sp-3); }
  .modal__box { padding: var(--sp-5); }
  .topbar__inner { padding-block: 10px; }
  .footer { padding-top: var(--sp-7); }
  .footer__grid { gap: var(--sp-6); padding-bottom: var(--sp-6); }
  .finalcta__inner { gap: var(--sp-5); }
  .chips { gap: var(--sp-2); }
  .chips li { padding: 9px 15px; font-size: var(--fs-xs); }
  .mfrgrid--logos li { min-height: 84px; }
  .mfrgrid--logos a { padding: 12px 14px; }
  .topbar__inner { flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
  .trustbar__inner { grid-template-columns: 1fr 1fr; }
  .hero__points { grid-template-columns: 1fr; }
  .hero__cta .btn, .finalcta__btns .btn, .uploadcard__cta .btn { flex: 1 1 100%; }
  .process { grid-template-columns: 1fr; }
  .countries { grid-template-columns: 1fr 1fr; }
  .mfrgrid { grid-template-columns: 1fr 1fr; }
  .quotecard__row { grid-template-columns: 1fr; }
  .hero__cta .btn, .buy__cta .btn { flex: 1 1 100%; }
  .rfq__row { grid-template-columns: 1fr; }
  .rfq { padding: var(--sp-5) var(--sp-4); }
  .grid--supply { grid-template-columns: 1fr; }
  .grid--cards { grid-template-columns: 1fr; }
  .contact__dl { grid-template-columns: 1fr; gap: 2px; }
  /* Table collapses into stacked cards on phones */
  .picker__main { padding: var(--sp-4) var(--sp-3); }
  .picker__selects { grid-template-columns: 1fr; }
  .picker__head { display: none; }
  .picker__row { grid-template-columns: 1fr auto; gap: 4px var(--sp-3); padding: var(--sp-4); }
  .picker__mpn { grid-column: 1; }
  .picker__action { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .picker__mfr, .picker__desc, .picker__pkg { grid-column: 1; font-size: var(--fs-xs); }
  .picker__rows { max-height: 420px; }
  .pc__side { grid-template-columns: 1fr; }
  .pc__grid { grid-template-columns: 1fr; }
  .pc__cards { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .cartbar { display: flex; }
  .cart { padding: var(--sp-4); }
  .pcard__actions { grid-template-columns: 1fr; }
  .pc__specs { grid-template-columns: 1fr; gap: 2px; }
  .pc__specs dd { margin-bottom: var(--sp-3); }
  .contact__dl dd { margin-bottom: var(--sp-3); }
  .contact__actions .btn { flex: 1 1 100%; }
  .logo img { height: 36px; }
  .footer .logo img { height: 50px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__contact { grid-column: auto; }

  /* Keep the floating button clear of form buttons and content on mobile */
  .wa { right: 14px; bottom: 14px; }
  .wa__tip { display: none; }
  .wa__btn { width: 52px; height: 52px; }
  .wa__btn svg { width: 28px; height: 28px; }
  body { padding-bottom: 0; }
  .cookie__inner { padding: var(--sp-4); }
  .cookie__btns .btn { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .logo__name { font-size: 0.95rem; }
  .logo__endorse { font-size: 8px; }
  .trustbar__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- MOTION/PRINT */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .header, .topbar, .wa, .cookie, .modal, .hero__side, .finalcta__btns { display: none !important; }
  body { color: #000; }
  .section { padding-block: 16px; }
}