/* ==========================================================================
   NIC ROBOTICS — Design System
   An Yuan GmbH · nicrobotics.de
   --------------------------------------------------------------------------
   0  Tokens
   1  Reset & base
   2  Layout primitives
   3  Typography
   4  Buttons & chips
   5  Header / navigation
   6  Hero
   7  Stat strip
   8  Category rail
   9  Product cards & grid
   10 Product detail
   11 Spec tables
   12 Scenario blocks
   13 Forms
   14 Modal
   15 Footer
   16 Utility, motion, print
   ========================================================================== */

/* ========================= 0 · TOKENS ==================================== */
:root {
  /* Surfaces — near-black with a cool cast */
  --ink-900: #07090d;
  --ink-850: #0a0d13;
  --ink-800: #0e1218;
  --ink-750: #131821;
  --ink-700: #1a202b;
  --ink-600: #232b38;
  --ink-500: #323c4c;
  --ink-400: #4c5969;

  /* Text */
  --fg:        #f2f5f9;
  --fg-muted:  #a3aebd;
  --fg-dim:    #6f7b8b;

  /* Brand — sampled from the NIC mark */
  --blue:      #3c98f7;
  --blue-400:  #5faaf9;
  --blue-600:  #1f7ad9;
  --blue-700:  #175fa9;
  --blue-glow: rgba(60, 152, 247, .35);

  /* Signal colours */
  --ok:    #38c172;
  --warn:  #f0a626;
  --alert: #e5484d;

  /* Light surfaces (product plinths, tables) */
  --paper:      #ffffff;
  --paper-2:    #f4f6f9;
  --paper-edge: #e3e8ef;

  /* Type */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Scale */
  --step--2: clamp(.72rem, .70rem + .1vw, .78rem);
  --step--1: clamp(.82rem, .79rem + .15vw, .9rem);
  --step-0:  clamp(.95rem, .92rem + .18vw, 1.02rem);
  --step-1:  clamp(1.1rem, 1.03rem + .35vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.2rem + .72vw, 1.8rem);
  --step-3:  clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.5rem + 2.6vw, 3.8rem);
  --step-5:  clamp(2.6rem, 1.5rem + 4.6vw, 5.6rem);
  --step-6:  clamp(3rem, 1.2rem + 7.2vw, 7.5rem);

  /* Space */
  --gap:   clamp(1rem, .7rem + 1.4vw, 1.75rem);
  --gap-s: clamp(.6rem, .45rem + .7vw, 1rem);
  --gap-l: clamp(1.6rem, 1rem + 2.8vw, 3.25rem);
  --section: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  /* Structure */
  --wrap: 1320px;
  --wrap-narrow: 860px;
  --radius: 14px;
  --radius-s: 8px;
  --radius-l: 22px;
  --hair: rgba(255, 255, 255, .09);
  --hair-strong: rgba(255, 255, 255, .16);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.28);
  --shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 22px 50px rgba(0,0,0,.4);
  --shadow-glow: 0 0 0 1px var(--blue-glow), 0 18px 60px -12px var(--blue-glow);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --header-h: 88px;
}

/* ========================= 1 · RESET & BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg);
  background: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

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

::selection { background: var(--blue); color: #fff; }

/* Scrollbar */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--ink-850); }
  ::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 99px; border: 3px solid var(--ink-850); }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }
}

/* ========================= 2 · LAYOUT =================================== */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 560px) { .wrap, .wrap-narrow { width: min(100% - 1.75rem, var(--wrap)); } }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: calc(var(--section) * .6); }
.section--flush-top { padding-top: 0; }

.grid { display: grid; gap: var(--gap); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.stack > * + * { margin-top: var(--gap-s); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--gap-s); align-items: center; }

/* Hairline divider that fades at the ends */
.rule {
  height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--hair-strong) 20%, var(--hair-strong) 80%, transparent);
}

/* ========================= 3 · TYPOGRAPHY =============================== */
.display,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.028em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); letter-spacing: -.018em; }

.t-hero  { font-size: var(--step-6); letter-spacing: -.04em; line-height: .92; }
.t-xl    { font-size: var(--step-5); letter-spacing: -.035em; line-height: .96; }
.t-lead  { font-size: var(--step-1); line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; }
.t-small { font-size: var(--step--1); }
.t-mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-muted { color: var(--fg-muted); }
.t-dim   { color: var(--fg-dim); }
.t-blue  { color: var(--blue); }

p { text-wrap: pretty; max-width: 72ch; }

/* Section eyebrow */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .9rem;
}
.kicker::before {
  content: ''; width: 26px; height: 1px; background: var(--blue); opacity: .7;
}
.kicker--plain::before { display: none; }

.section-head { margin-bottom: var(--gap-l); max-width: 56ch; }
.section-head p { margin-top: .85rem; }

/* Numbered list for processes */
.steps { counter-reset: step; display: grid; gap: var(--gap); }
.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  padding-bottom: var(--gap-s);
  border-bottom: 1px solid var(--hair);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--step--1);
  color: var(--blue); padding-top: .2rem;
}
.steps h4 { margin-bottom: .2rem; }

/* Tick list */
.ticks { display: grid; gap: .7rem; }
.ticks li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem;
  color: var(--fg-muted); line-height: 1.5;
}
.ticks li::before {
  content: '';
  width: 1.1rem; height: 1.1rem; margin-top: .3rem;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ========================= 4 · BUTTONS & CHIPS ========================== */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  --btn-bd: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 650; font-size: var(--step--1);
  letter-spacing: .01em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  cursor: pointer;
  transition: transform .18s var(--ease), background .2s, border-color .2s, box-shadow .25s, color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px var(--blue-glow); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--hair-strong); }
.btn--ghost:hover { --btn-bd: var(--blue); --btn-fg: var(--blue); box-shadow: none; }

.btn--solid-light { --btn-bg: var(--fg); --btn-fg: var(--ink-900); --btn-bd: var(--fg); }
.btn--solid-light:hover { box-shadow: 0 10px 28px -10px rgba(255,255,255,.35); }

.btn--sm { padding: .55rem 1.05rem; font-size: var(--step--2); }
.btn--lg { padding: 1rem 1.9rem; font-size: var(--step-0); }
.btn--block { width: 100%; }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.btn--arrow svg { transition: transform .22s var(--ease); }
.btn--arrow:hover svg { transform: translateX(3px); }

/* Text link with underline reveal */
.link {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--blue); font-weight: 600;
  background-image: linear-gradient(var(--blue), var(--blue));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s var(--ease);
  padding-bottom: 1px;
}
.link:hover { background-size: 100% 1px; }
.link svg { width: 1em; height: 1em; }

/* Chips / tags */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .72rem;
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .04em;
  color: var(--fg-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hair);
  border-radius: 99px;
  white-space: nowrap;
}
.chip--blue { color: var(--blue-400); background: rgba(60,152,247,.12); border-color: rgba(60,152,247,.3); }
.chip--ok   { color: var(--ok); background: rgba(56,193,114,.12); border-color: rgba(56,193,114,.3); }
.chip--warn { color: var(--warn); background: rgba(240,166,38,.12); border-color: rgba(240,166,38,.3); }

.badge {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  padding: .28rem .7rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step--2); letter-spacing: .06em; text-transform: uppercase;
  background: var(--blue); color: #fff;
  border-radius: 4px;
}
.badge--soon { background: var(--ink-600); color: var(--fg-muted); }

/* ========================= 5 · HEADER =================================== */
.skip {
  position: fixed; top: -100%; left: 1rem; z-index: 2000;
  background: var(--blue); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 8px 8px;
}
.skip:focus { top: 0; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 1000;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(7, 9, 13, .55);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.site-header.is-stuck {
  background: rgba(7, 9, 13, .92);
  border-bottom-color: var(--hair);
  height: 76px;
}
.site-header { transition: background .3s, border-color .3s, height .25s var(--ease); }
.site-header .wrap { display: flex; align-items: center; gap: var(--gap); width: min(100% - 2rem, 1560px); }

.brand { display: flex; align-items: center; flex: none; }
.brand img {
  height: 46px;
  width: auto;
  transition: height .25s var(--ease);
}
/* The bar tightens on scroll; the mark shrinks with it. */
.site-header.is-stuck .brand img { height: 40px; }
@media (max-width: 1080px) { .brand img { height: 38px; } }
@media (max-width: 420px)  { .brand img { height: 32px; } }

/* Primary nav */
.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav > li { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: .35rem;
  padding: .55rem .85rem;
  font-size: var(--step--1); font-weight: 500;
  color: var(--fg-muted);
  border-radius: 8px;
  transition: color .18s, background .18s;
}
.nav-link:hover, .nav-link[aria-expanded='true'], .nav-link.is-active { color: var(--fg); background: rgba(255,255,255,.06); }
.nav-link.is-active { color: var(--blue); }
.nav-link .caret { width: .62em; height: .62em; transition: transform .22s var(--ease); opacity: .7; }
.nav-link[aria-expanded='true'] .caret { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Language switch */
.lang {
  display: flex; align-items: center;
  border: 1px solid var(--hair); border-radius: 99px; overflow: hidden;
}
.lang button {
  padding: .32rem .58rem;
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: .06em;
  color: var(--fg-dim);
  transition: background .18s, color .18s;
}
.lang button[aria-pressed='true'] { background: var(--blue); color: #fff; }
.lang button:not([aria-pressed='true']):hover { color: var(--fg); background: rgba(255,255,255,.07); }

/* Mega menu */
/* The panel is positioned against the header row, not against its trigger,
   so a menu opened from the first nav item is not shoved against the left
   edge of the window. .nav > li is static for exactly that reason. */
.site-header .wrap { position: relative; }
.nav > li { position: static; }

.mega {
  position: absolute; top: calc(100% + .7rem); left: 50%;
  transform: translate(-50%, -6px);
  width: min(94vw, 1120px);
  padding: 1.6rem;
  background: var(--ink-800);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav > li.is-open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: .5rem 1rem;
}
.mega-grid--3 { grid-template-columns: repeat(3, minmax(200px, 1fr)); }

.mega-item {
  display: grid; grid-template-columns: 58px 1fr; gap: 1rem; align-items: center;
  padding: .8rem .9rem; border-radius: 12px;
  border: 1px solid transparent;
  transition: background .18s, border-color .18s, transform .18s var(--ease);
}
.mega-item:hover {
  background: rgba(255,255,255,.055);
  border-color: var(--hair);
  transform: translateX(2px);
}
.mega-item .thumb {
  width: 58px; height: 58px; border-radius: 10px;
  background: linear-gradient(160deg, var(--ink-700), var(--ink-850));
  border: 1px solid var(--hair);
  display: grid; place-items: center; overflow: hidden;
}
.mega-item .thumb img {
  width: 90%; height: 90%; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.mega-item strong {
  display: block; font-family: var(--font-display); font-weight: 650;
  font-size: var(--step-0); line-height: 1.3; letter-spacing: -.01em;
  margin-bottom: .15rem;
}
.mega-item span {
  display: block; font-size: var(--step--2); color: var(--fg-dim); line-height: 1.4;
}
.mega-item[data-soon] strong::after {
  content: 'bald'; margin-left: .5rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-dim); border: 1px solid var(--hair); border-radius: 99px; padding: .05rem .4rem;
  vertical-align: middle;
}
html[lang='en'] .mega-item[data-soon] strong::after { content: 'soon'; }
html[lang='zh'] .mega-item[data-soon] strong::after { content: '即将上线'; }

.mega-foot {
  margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: var(--step--1);
}

/* Burger */
.burger {
  display: none; width: 42px; height: 42px;
  border: 1px solid var(--hair); border-radius: 10px;
  place-items: center;
}
.burger span, .burger span::before, .burger span::after {
  content: ''; display: block; width: 17px; height: 1.6px; background: var(--fg); border-radius: 2px;
  transition: transform .26s var(--ease), opacity .2s;
}
.burger span::before { position: absolute; transform: translateY(-5.5px); }
.burger span::after { position: absolute; transform: translateY(5.5px); }
.burger span { position: relative; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { transform: rotate(45deg); }
body.nav-open .burger span::after { transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .burger { display: grid; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0; z-index: 999;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 1.25rem 1.5rem 4rem;
    background: var(--ink-900);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .32s var(--ease-out);
  }
  body.nav-open .nav { transform: none; }
  body.nav-open { overflow: hidden; }
  .nav-link { padding: .95rem .2rem; font-size: var(--step-1); font-family: var(--font-display); font-weight: 600; border-radius: 0; border-bottom: 1px solid var(--hair); }
  .nav-link .caret { margin-left: auto; }
  .mega {
    position: static; transform: none; width: auto; max-width: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; border: 0; box-shadow: none; padding: .4rem 0 1rem;
    display: none;
  }
  .nav > li.is-open .mega { display: block; transform: none; }
  .mega-grid, .mega-grid--3 { grid-template-columns: 1fr; }
  .header-actions .btn { display: none; }
}

/* ========================= 6 · HERO ===================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 920px);
  display: grid; align-items: end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 5rem);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 58%;
}
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,9,13,.78) 0%, rgba(7,9,13,.25) 32%, rgba(7,9,13,.55) 62%, var(--ink-900) 97%),
    linear-gradient(95deg, rgba(7,9,13,.82) 0%, rgba(7,9,13,.35) 48%, transparent 78%);
}
/* faint technical grid over the footage */
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 45%, #000 20%, transparent 78%);
}
.hero__inner { position: relative; max-width: 940px; }
.hero h1 { margin-bottom: 1.1rem; }
.hero .t-lead { max-width: 56ch; color: #c9d3e0; }
.hero__cta { margin-top: clamp(1.5rem, 3vw, 2.4rem); display: flex; flex-wrap: wrap; gap: .75rem; }

/* Hero scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: grid; place-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-dim);
}
.scroll-cue i {
  display: block; width: 1px; height: 36px;
  background: linear-gradient(var(--blue), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0%,100% { opacity: .25; transform: scaleY(.5); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }

/* Compact page header for inner pages */
.page-hero {
  position: relative; isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,13,.84), rgba(7,9,13,.6) 45%, var(--ink-900));
}
.page-hero--plain { background: linear-gradient(180deg, var(--ink-850), var(--ink-900)); }

/* Breadcrumb */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: var(--step--2);
  color: var(--fg-dim); margin-bottom: 1rem;
}
.crumbs a:hover { color: var(--blue); }
.crumbs li + li::before { content: '/'; margin-right: .45rem; opacity: .4; }
.crumbs li { display: flex; align-items: center; }

/* ========================= 7 · STAT STRIP =============================== */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
}
.stats > div { background: var(--ink-850); padding: 1.15rem 1.25rem; }
.stats dt {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim);
  margin-bottom: .35rem;
}
.stats dd {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-2); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stats dd small { font-size: .5em; font-weight: 600; color: var(--fg-muted); letter-spacing: 0; }

/* Hero-overlapping variant */
.stats--float { margin-top: calc(var(--gap-l) * -.5); position: relative; z-index: 4; background: var(--hair); }

/* ========================= 8 · CATEGORY RAIL ============================ */
.cat-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: 400px;
  padding: 1.5rem;
  background: linear-gradient(165deg, var(--ink-750), var(--ink-850) 60%);
  border: 1px solid var(--hair);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform .34s var(--ease-out), border-color .25s, box-shadow .34s;
}
.cat-card:hover { transform: translateY(-5px); border-color: rgba(60,152,247,.4); box-shadow: var(--shadow-2); }
/* The artwork is pinned with inset instead of being a sized grid item:
   a percentage height on the <img> did not resolve against the grid area and
   the picture grew past the frame, clipping the robot at the card edge. */
.cat-card__art {
  position: absolute; inset: auto 0 0 0; height: 72%; z-index: -1;
}
.cat-card__art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.6));
  transition: transform .5s var(--ease-out);
}
.cat-card:hover .cat-card__art img { transform: scale(1.05) translateY(-5px); }
.cat-card::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse 70% 50% at 50% 100%, var(--blue-glow), transparent 70%);
  opacity: .35; transition: opacity .35s;
}
.cat-card:hover::before { opacity: .75; }
.cat-card h3 { font-size: var(--step-2); margin-bottom: .4rem; }
.cat-card p { font-size: var(--step--1); color: var(--fg-muted); max-width: 30ch; }
/* a soft scrim so the headline never fights the robot behind it */
.cat-card::after {
  content: ''; position: absolute; inset: 0 0 35% 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,13,19,.85) 0%, rgba(10,13,19,.35) 55%, transparent 100%);
}
.cat-card--soon::after { display: none; }
.cat-card .count {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--font-mono); font-size: var(--step--2);
  color: var(--blue); display: flex; align-items: center; gap: .45rem;
}
.cat-card .count svg { width: 1.1em; height: 1.1em; }
.cat-card--soon { border-style: dashed; border-color: var(--ink-600); }
.cat-card--soon::before { background: none; }
.cat-card--soon .count { color: var(--fg-dim); }

/* Horizontal scroll rail on narrow screens */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr);
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: .5rem;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 1000px) { .rail { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } }

/* ========================= 9 · PRODUCT CARDS ============================ */
.product-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.pcard {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--ink-850);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease-out), border-color .25s, box-shadow .3s;
}
.pcard:hover { transform: translateY(-4px); border-color: rgba(60,152,247,.45); box-shadow: var(--shadow-2); }

/* A near-black robot on a near-black plinth disappeared. The product stage is
   a light studio sweep instead: the black X30 and the white Lite3 both read. */
.plinth {
  background:
    radial-gradient(ellipse 55% 42% at 50% 112%, rgba(60, 152, 247, .22), transparent 62%),
    linear-gradient(168deg, #e6ecf4 0%, #cfd9e6 48%, #b0bccd 100%);
}
.plinth::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 70px rgba(80, 100, 130, .28);
}

.pcard__media {
  position: relative; aspect-ratio: 4 / 3;
  display: block;
  overflow: hidden;
}
.pcard__media img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  padding: 1.15rem;
  box-sizing: border-box;
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(40, 55, 80, .35));
  transition: transform .45s var(--ease-out);
}
.pcard:hover .pcard__media img { transform: scale(1.055); }
/* contact shadow under the machine */
.pcard__media::after {
  content: ''; position: absolute; left: 18%; right: 18%; bottom: 11%;
  height: 10px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(40,55,80,.3), transparent 70%);
}

.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.25rem; }
.pcard__brand {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim);
  margin-bottom: .3rem;
}
.pcard__name { font-size: var(--step-1); margin-bottom: .3rem; }
.pcard__name a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.pcard__tag { font-size: var(--step--1); color: var(--fg-muted); line-height: 1.45; margin-bottom: .85rem; }

.pcard__specs {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: 1rem;
}
.pcard__specs .chip { font-size: .68rem; padding: .22rem .55rem; }

.pcard__foot {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--hair);
  display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.price { display: grid; }
.price b {
  font-family: var(--font-display); font-weight: 800; font-size: var(--step-1);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.price small { font-size: var(--step--2); color: var(--fg-dim); }

.pcard__actions { display: flex; gap: .4rem; position: relative; z-index: 3; }

/* "soon" placeholder card */
.pcard--soon {
  border-style: dashed; border-color: var(--ink-600); background: transparent;
  min-height: 300px; align-items: center; justify-content: center; text-align: center;
  padding: 2rem 1.5rem;
}
.pcard--soon:hover { transform: none; box-shadow: none; border-color: var(--ink-500); }
.pcard--soon .icon {
  width: 46px; height: 46px; margin: 0 auto 1rem;
  border: 1px solid var(--hair); border-radius: 12px;
  display: grid; place-items: center; color: var(--fg-dim);
}
.pcard--soon h4 { margin-bottom: .4rem; }
.pcard--soon p { font-size: var(--step--1); color: var(--fg-dim); max-width: 30ch; margin-inline: auto; }

/* Filter bar */
.filters {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding-bottom: var(--gap);
  margin-bottom: var(--gap);
  border-bottom: 1px solid var(--hair);
}
.filters__label {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim);
  margin-right: .4rem;
}
.filter-btn {
  padding: .42rem .9rem;
  font-size: var(--step--1); font-weight: 500;
  color: var(--fg-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hair); border-radius: 99px;
  transition: all .18s;
}
.filter-btn:hover { color: var(--fg); border-color: var(--hair-strong); }
.filter-btn[aria-pressed='true'] { background: var(--blue); border-color: var(--blue); color: #fff; }
.filters__count { margin-left: auto; font-family: var(--font-mono); font-size: var(--step--2); color: var(--fg-dim); }

/* ========================= 10 · PRODUCT DETAIL ========================== */
.pdp {
  display: grid; gap: var(--gap-l);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) { .pdp { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }

/* Gallery */
.gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 959px) { .gallery { position: static; } }

.gallery__stage {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: center; padding: clamp(.75rem, 2.2vw, 1.75rem);
  border: 1px solid var(--hair);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.gallery__stage img {
  max-width: 100%; max-height: 100%; width: auto; object-fit: contain;
  filter: drop-shadow(0 20px 30px rgba(40,55,80,.4));
  position: relative; z-index: 1;
}
.gallery__stage::after {
  content: ''; position: absolute; left: 16%; right: 16%; bottom: 9%;
  height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(40,55,80,.32), transparent 70%);
}
.gallery__thumbs button { background: var(--paper-2); border-color: var(--paper-edge); }
.gallery__thumbs button:hover { border-color: var(--blue); }
.gallery__thumbs {
  display: flex; gap: .55rem; margin-top: .7rem; flex-wrap: wrap;
}
.gallery__thumbs button {
  width: 76px; aspect-ratio: 1; padding: .35rem;
  display: grid; place-items: center;
  background: var(--ink-800);
  border: 1px solid var(--hair); border-radius: 9px;
  transition: border-color .2s, transform .2s;
}
.gallery__thumbs button:hover { transform: translateY(-2px); border-color: var(--hair-strong); }
.gallery__thumbs button[aria-current='true'] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.gallery__thumbs img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

/* Buy panel */
.buybox {
  background: var(--ink-850);
  border: 1px solid var(--hair);
  border-radius: var(--radius-l);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.buybox__brand {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  margin-bottom: .5rem;
}
.buybox h1 { font-size: var(--step-3); margin-bottom: .5rem; }
.buybox__tag { font-size: var(--step-1); color: var(--fg-muted); line-height: 1.45; margin-bottom: 1.3rem; }

.priceline {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: 1.1rem 0; margin-bottom: 1.1rem;
  border-block: 1px solid var(--hair);
}
.priceline b {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--step-3); letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.priceline span { font-size: var(--step--1); color: var(--fg-dim); }

.buybox__actions { display: grid; gap: .6rem; margin-bottom: 1.1rem; }
@media (min-width: 480px) { .buybox__actions { grid-template-columns: 1fr 1fr; } }
.buybox__actions .btn--block { width: 100%; }
.buybox__actions .span-2 { grid-column: 1 / -1; }

.assurance { display: grid; gap: .55rem; font-size: var(--step--1); color: var(--fg-muted); }
.assurance li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .55rem; align-items: start; }
.assurance svg { width: 1.05rem; height: 1.05rem; color: var(--blue); margin-top: .22rem; }

.sku-line {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--hair);
  font-family: var(--font-mono); font-size: var(--step--2); color: var(--fg-dim);
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
}

/* Highlight band */
.highlights {
  display: grid; gap: 1px; background: var(--hair);
  border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.highlights li {
  background: var(--ink-850); padding: 1.1rem 1.25rem;
  display: grid; grid-template-columns: auto 1fr; gap: .8rem;
  font-size: var(--step--1); color: var(--fg-muted); line-height: 1.5;
}
.highlights li::before {
  content: ''; width: 1.15rem; height: 1.15rem; margin-top: .2rem;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Scene gallery on PDP */
.scene-grid { display: grid; gap: var(--gap-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.scene-grid figure {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--hair);
  aspect-ratio: 16 / 10;
}
.scene-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.scene-grid figure:hover img { transform: scale(1.05); }
.scene-grid .wide { grid-column: span 2; }
@media (max-width: 700px) { .scene-grid .wide { grid-column: span 1; } }

/* ========================= 11 · SPEC TABLES ============================= */
.spec-block + .spec-block { margin-top: var(--gap); }
.spec-block h3 {
  font-size: var(--step-1);
  padding-bottom: .6rem; margin-bottom: 0;
  border-bottom: 2px solid var(--blue);
  display: inline-block;
}
.spec-table { font-size: var(--step--1); }
.spec-table th, .spec-table td { padding: .78rem 1rem; text-align: left; vertical-align: top; }
.spec-table tbody tr { border-bottom: 1px solid var(--hair); }
.spec-table tbody tr:hover { background: rgba(255,255,255,.028); }
.spec-table th {
  font-weight: 500; color: var(--fg-muted); width: 42%;
  padding-left: 0;
}
.spec-table td {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--fg); padding-right: 0;
}
@media (max-width: 560px) {
  .spec-table th, .spec-table td { display: block; padding: .35rem 0; }
  .spec-table th { width: auto; padding-top: .8rem; }
  .spec-table td { padding-bottom: .8rem; }
}

/* Variant comparison table */
.vtable-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--radius); }
.vtable { font-size: var(--step--1); min-width: 640px; }
.vtable thead th {
  position: sticky; top: 0;
  background: var(--ink-700);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step--1); letter-spacing: .02em;
  padding: .85rem 1rem; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--hair-strong);
}
.vtable thead th:first-child { text-align: left; }
.vtable tbody th {
  text-align: left; font-weight: 500; color: var(--fg-muted);
  padding: .7rem 1rem; white-space: nowrap;
}
.vtable tbody td {
  padding: .7rem 1rem; text-align: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.vtable tbody tr { border-bottom: 1px solid var(--hair); }
.vtable tbody tr:last-child { border-bottom: 0; }
.vtable tbody tr:nth-child(even) { background: rgba(255,255,255,.022); }
.yes, .no { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; }
.yes { color: var(--ok); }
.no { color: var(--ink-500); }

/* Tabs */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--hair); margin-bottom: var(--gap); overflow-x: auto; }
.tabs button {
  padding: .75rem 1.1rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--step--1);
  color: var(--fg-dim); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected='true'] { color: var(--blue); border-bottom-color: var(--blue); }
.tabpanel[hidden] { display: none; }

/* ========================= 12 · SCENARIO BLOCKS ========================= */
.scenario {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  min-height: clamp(420px, 60vh, 640px);
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--hair);
}
.scenario__media { position: absolute; inset: 0; z-index: -2; }
.scenario__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.scenario:hover .scenario__media img { transform: scale(1.04); }
.scenario__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,9,13,.94) 0%, rgba(7,9,13,.78) 38%, rgba(7,9,13,.25) 75%, transparent 100%);
}
.scenario--right .scenario__media::after {
  background: linear-gradient(260deg, rgba(7,9,13,.94) 0%, rgba(7,9,13,.78) 38%, rgba(7,9,13,.25) 75%, transparent 100%);
}
.scenario__body { padding: clamp(1.75rem, 4vw, 3.25rem); max-width: 560px; }
.scenario--right .scenario__body { margin-left: auto; }
.scenario h3 { font-size: var(--step-3); margin-bottom: .7rem; }
.scenario p { color: #c3cdda; font-size: var(--step-0); }
.scenario .ticks { margin-top: 1.25rem; }
.scenario .ticks li { color: #d4dce7; font-size: var(--step--1); }
.scenario__links { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 700px) {
  .scenario__media::after,
  .scenario--right .scenario__media::after {
    background: linear-gradient(180deg, rgba(7,9,13,.55) 0%, rgba(7,9,13,.88) 45%, rgba(7,9,13,.96) 100%);
  }
  .scenario { align-items: end; min-height: 520px; }
  .scenario--right .scenario__body { margin-left: 0; }
}

/* Scenario index tiles */
.scene-tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.scene-tile {
  position: relative; isolation: isolate;
  min-height: 280px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.35rem;
  border: 1px solid var(--hair); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease-out), border-color .25s;
}
.scene-tile:hover { transform: translateY(-4px); border-color: rgba(60,152,247,.45); }
.scene-tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.scene-tile:hover img { transform: scale(1.06); }
.scene-tile::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,9,13,.15) 0%, rgba(7,9,13,.75) 55%, rgba(7,9,13,.95) 100%);
}
.scene-tile h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.scene-tile p { font-size: var(--step--1); color: var(--fg-muted); }
.scene-tile--empty { background: linear-gradient(160deg, var(--ink-800), var(--ink-850)); border-style: dashed; border-color: var(--ink-600); }
.scene-tile--empty:hover { transform: none; }

/* ========================= 13 · FORMS =================================== */
.form-card {
  background: var(--ink-850);
  border: 1px solid var(--hair);
  border-radius: var(--radius-l);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}

.field-grid { display: grid; gap: 1.05rem; }
@media (min-width: 620px) { .field-grid--2 { grid-template-columns: 1fr 1fr; } }
.field-grid .span-2 { grid-column: 1 / -1; }

.field { display: grid; gap: .4rem; }
.field > label {
  font-size: var(--step--1); font-weight: 600; color: var(--fg);
  display: flex; align-items: baseline; gap: .4rem;
}
.field > label .req { color: var(--blue); font-weight: 700; }
.field > label .opt {
  font-weight: 400; font-size: var(--step--2); color: var(--fg-dim);
  font-family: var(--font-mono);
}
.field .hint { font-size: var(--step--2); color: var(--fg-dim); line-height: 1.45; }

.input, .select, .textarea {
  width: 100%;
  padding: .78rem .95rem;
  font-size: var(--step-0);
  color: var(--fg);
  background: var(--ink-800);
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-s);
  transition: border-color .18s, box-shadow .18s, background .18s;
  appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--fg-dim); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-500); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(60,152,247,.18);
  background: var(--ink-750);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aebd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.05rem;
  padding-right: 2.6rem;
  cursor: pointer;
}
.select option { background: var(--ink-800); color: var(--fg); }

/* input with unit suffix */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-right: 3.4rem; }
.input-group .unit {
  position: absolute; right: .9rem;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-dim);
  pointer-events: none;
}

/* Radio / checkbox */
.choice { display: grid; gap: .5rem; }
.choice label {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  padding: .7rem .9rem;
  font-size: var(--step--1); color: var(--fg-muted);
  background: var(--ink-800);
  border: 1px solid var(--ink-600); border-radius: var(--radius-s);
  cursor: pointer; transition: border-color .18s, background .18s, color .18s;
}
.choice label:hover { border-color: var(--ink-500); color: var(--fg); }
.choice input { accent-color: var(--blue); width: 1.05rem; height: 1.05rem; margin-top: .18rem; }
.choice input:checked + span { color: var(--fg); }
.choice label:has(input:checked) { border-color: var(--blue); background: rgba(60,152,247,.08); }

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start;
  font-size: var(--step--1); color: var(--fg-muted); line-height: 1.5;
}
.consent input { accent-color: var(--blue); width: 1.05rem; height: 1.05rem; margin-top: .2rem; }
.consent a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

/* Dropzone */
.dropzone {
  position: relative;
  display: grid; place-items: center; gap: .6rem;
  padding: 1.8rem 1.25rem; text-align: center;
  background: var(--ink-800);
  border: 1.5px dashed var(--ink-500);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--blue); background: rgba(60,152,247,.07); }
.dropzone input[type='file'] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone svg { width: 2rem; height: 2rem; color: var(--blue); }
.dropzone strong { font-size: var(--step--1); font-weight: 600; }
.dropzone .hint { font-size: var(--step--2); color: var(--fg-dim); }

.filelist { display: grid; gap: .45rem; margin-top: .7rem; }
.filelist li {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .7rem;
  font-size: var(--step--2); font-family: var(--font-mono);
  background: var(--ink-800); border: 1px solid var(--hair); border-radius: var(--radius-s);
}
.filelist .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist .size { color: var(--fg-dim); }
.filelist .rm { color: var(--fg-dim); display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 4px; }
.filelist .rm:hover { color: var(--alert); background: rgba(229,72,77,.12); }
.filelist li.is-bad { border-color: rgba(229,72,77,.5); color: var(--alert); }

/* Fieldset */
.fset { border: 0; padding: 0; margin: 0; }
.fset + .fset { margin-top: var(--gap-l); padding-top: var(--gap-l); border-top: 1px solid var(--hair); }
.fset > legend {
  font-family: var(--font-display); font-weight: 750; font-size: var(--step-1);
  letter-spacing: -.02em; margin-bottom: .35rem; padding: 0;
}
.fset > .legend-note { font-size: var(--step--1); color: var(--fg-muted); margin-bottom: 1.2rem; }

/* Validation */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea { border-color: var(--alert); }
.err-msg { font-size: var(--step--2); color: var(--alert); display: none; }
.field.is-invalid .err-msg { display: block; }

.form-status {
  display: none; align-items: flex-start; gap: .7rem;
  padding: 1rem 1.15rem; margin-bottom: 1.25rem;
  border-radius: var(--radius); font-size: var(--step--1);
  border: 1px solid;
}
.form-status.is-shown { display: flex; }
.form-status--ok   { background: rgba(56,193,114,.1); border-color: rgba(56,193,114,.4); color: #9ae6bd; }
.form-status--err  { background: rgba(229,72,77,.1); border-color: rgba(229,72,77,.4); color: #f0a7a9; }
.form-status svg { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .15rem; }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ========================= 14 · MODAL =================================== */
.modal {
  position: fixed; inset: 0; z-index: 1500;
  display: none; place-items: center;
  padding: 1.25rem;
  background: rgba(3, 5, 8, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal.is-open { display: grid; }
.modal__panel {
  width: min(100%, 720px); max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  background: var(--ink-850);
  border: 1px solid var(--hair-strong);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-2);
  animation: panelIn .3s var(--ease-out);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.modal__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.4rem clamp(1.25rem, 3vw, 2rem) 1rem;
  background: var(--ink-850);
  border-bottom: 1px solid var(--hair);
}
.modal__head h2 { font-size: var(--step-2); }
.modal__head p { font-size: var(--step--1); color: var(--fg-muted); margin-top: .3rem; }
.modal__close {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--hair); border-radius: 9px; color: var(--fg-muted);
  transition: all .18s;
}
.modal__close:hover { color: var(--fg); border-color: var(--hair-strong); background: rgba(255,255,255,.06); }
.modal__close svg { width: 1.1rem; height: 1.1rem; }
.modal__body { padding: clamp(1.25rem, 3vw, 2rem); }

/* ========================= 15 · FOOTER ================================== */
.site-footer {
  background: var(--ink-850);
  border-top: 1px solid var(--hair);
  padding-top: var(--section);
}

/* Pre-footer CTA */
.cta-band {
  position: relative; isolation: isolate;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: var(--radius-l);
  border: 1px solid rgba(60,152,247,.3);
  background:
    radial-gradient(ellipse 70% 120% at 85% 20%, rgba(60,152,247,.2), transparent 65%),
    linear-gradient(140deg, var(--ink-750), var(--ink-850));
  overflow: hidden;
}
.cta-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 80% 20%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 80% 20%, #000, transparent 70%);
}
.cta-band h2 { font-size: var(--step-3); margin-bottom: .75rem; max-width: 20ch; }
.cta-band p { color: var(--fg-muted); max-width: 48ch; }
.cta-band .cluster { margin-top: 1.75rem; }

.footer-main {
  display: grid; gap: var(--gap-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  padding-block: var(--gap-l);
}
.footer-brand { grid-column: span 2; max-width: 34ch; }
@media (max-width: 760px) { .footer-brand { grid-column: span 1; } }
.footer-brand img { height: 56px; width: auto; margin-bottom: 1.25rem; }
.footer-brand p { font-size: var(--step--1); color: var(--fg-muted); }

.footer-col h4 {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--step--2); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 1rem;
}
.footer-col li + li { margin-top: .55rem; }
.footer-col a { font-size: var(--step--1); color: var(--fg-muted); transition: color .18s; }
.footer-col a:hover { color: var(--blue); }

.footer-contact { font-size: var(--step--1); color: var(--fg-muted); display: grid; gap: .5rem; }
.footer-contact a:hover { color: var(--blue); }
.footer-contact address { font-style: normal; line-height: 1.6; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid var(--hair);
  font-size: var(--step--2); color: var(--fg-dim);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-left: auto; }
.footer-bottom a:hover { color: var(--fg-muted); }

/* ========================= 16 · UTILITY & MOTION ======================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-l { margin-top: var(--gap-l); }
.mt { margin-top: var(--gap); }
.mb { margin-bottom: var(--gap); }
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* Panel for light content on dark */
.panel {
  background: var(--ink-850); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem);
}
.panel--glow { box-shadow: var(--shadow-glow); border-color: rgba(60,152,247,.3); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal[data-delay='1'].is-in { transition-delay: .08s; }
.reveal[data-delay='2'].is-in { transition-delay: .16s; }
.reveal[data-delay='3'].is-in { transition-delay: .24s; }
.reveal[data-delay='4'].is-in { transition-delay: .32s; }

/* i18n: show only the active language */
/* The language wrappers carry no styling of their own, so the inactive ones
   are removed outright and the active one is dissolved into its parent with
   display:contents. That keeps component rules such as `.mega-item span`
   from catching the wrapper and forcing it visible. */
[data-i18n-de], [data-i18n-en], [data-i18n-zh] { display: none !important; }
html[lang='de'] [data-i18n-de],
html[lang='en'] [data-i18n-en],
html[lang='zh'] [data-i18n-zh] { display: contents !important; }

/* Chinese sets its own type stack and needs a little more line height. */
html[lang='zh'] body {
  font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Noto Sans SC', 'Source Han Sans SC', system-ui, sans-serif;
  line-height: 1.8;
}
html[lang='zh'] .display,
html[lang='zh'] h1, html[lang='zh'] h2,
html[lang='zh'] h3, html[lang='zh'] h4 {
  font-family: 'Archivo', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Noto Sans SC', 'Source Han Sans SC', system-ui, sans-serif;
  letter-spacing: -.01em;
  line-height: 1.25;
}
/* CJK has no spaces to break on, so the display sizes need pulling back. */
html[lang='zh'] .t-hero { font-size: clamp(2.4rem, 1.2rem + 5.4vw, 5.4rem); line-height: 1.15; }
html[lang='zh'] .t-xl   { font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); line-height: 1.2; }
html[lang='zh'] .kicker { letter-spacing: .1em; }
html[lang='zh'] p { text-wrap: initial; }
html[lang='zh'] .t-lead { line-height: 1.75; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .scroll-cue, .modal, .hero__media video { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .form-card, .pcard { border-color: #ccc; }
}

/* ========================= 17 · ICON SIZING & HIDDEN FIXES ============== */
/* A bare inline <svg> with only a viewBox has no intrinsic size and stretches
   to fill its container — a 375px arrow once covered the category artwork.
   :where() keeps this at zero specificity, so every rule below still wins. */
:where(svg:not([width]):not([height])) { width: 1em; height: 1em; }
svg { flex: none; }

.footer-contact a,
.crumbs a { display: inline-flex; align-items: center; gap: .5rem; }

.footer-contact svg,
.crumbs svg,
.filelist svg,
.mega-item .thumb svg,
.scenario__links svg,
.link svg,
.chip svg { width: 1.05em; height: 1.05em; }

.pcard--soon .icon svg { width: 1.25rem; height: 1.25rem; }
.icon-box { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; }
.icon-box svg { width: 22px; height: 22px; }
.dropzone > svg { width: 2rem; height: 2rem; }
.modal__close svg { width: 1.05rem; height: 1.05rem; }
.form-status > svg { width: 1.2rem; height: 1.2rem; }
.assurance > li > svg { width: 1.05rem; height: 1.05rem; }

/* `display:grid` on .field beats the UA stylesheet's [hidden]{display:none} */
[hidden] { display: none !important; }

/* ========================= 18 · SPECIFICITY FIXES ====================== */
/* `.field > label` (0,1,1) beat `.dropzone` (0,1,0) and turned it into a row. */
.field > label.dropzone {
  display: grid;
  place-items: center;
  gap: .55rem;
  align-items: center;
  text-align: center;
  font-weight: 400;
}
.field > label.dropzone strong { font-weight: 600; font-size: var(--step--1); }

/* Footer: fixed track widths at desk width so no column is orphaned. */
@media (min-width: 1100px) {
  .footer-main { grid-template-columns: 2.1fr 1fr 1fr 1fr 1.25fr; }
  .footer-brand { grid-column: span 1; max-width: 32ch; }
}

/* ========================= 19 · MOBILE OVERFLOW ======================== */
/* The off-canvas nav is parked at translateX(100%) and still widened the
   document. Hiding it when closed also keeps it out of the tab order. */
html { overflow-x: clip; }

@media (max-width: 1080px) {
  .nav { visibility: hidden; }
  body.nav-open .nav { visibility: visible; }
}

/* ========================= 20 · MOBILE NAV CONTAINING BLOCK ============ */
/* A non-none backdrop-filter makes .site-header a containing block for its
   position:fixed descendants, which trapped the off-canvas nav inside the
   72px header. Drop the blur below the breakpoint and paint the bar solid. */
@media (max-width: 1080px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(7, 9, 13, .94);
  }
  body.nav-open .site-header { background: var(--ink-900); border-bottom-color: var(--hair); }
}

/* Mobile nav polish: full-width rows, tighter mega list. */
@media (max-width: 1080px) {
  .nav-link { width: 100%; }
  .mega-item { padding: .5rem .2rem; gap: .7rem; }
  .mega-item .thumb { width: 36px; height: 36px; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* ========================= 21 · SCENE MOSAIC =========================== */
/* aspect-ratio on each figure left ragged gaps once one item spanned two
   columns. Fixed row height + a 2×2 feature cell tiles cleanly instead. */
.scene-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 215px);
}
.scene-grid figure { aspect-ratio: auto; height: 100%; margin: 0; }
.scene-grid .wide { grid-column: span 2; grid-row: span 2; }
.scene-grid img { object-position: center 45%; }

@media (max-width: 860px) {
  .scene-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(130px, 22vw, 180px); }
}
@media (max-width: 520px) {
  .scene-grid { grid-template-columns: 1fr; grid-auto-rows: 190px; }
  .scene-grid .wide { grid-column: span 1; grid-row: span 1; }
}

/* ========================= 22 · PICTURE WRAPPER ======================== */
/* <picture> is display:inline, so a percentage height on the <img> inside
   has no definite parent to resolve against and collapses to auto.
   display:contents makes the <img> a direct child of the real container. */
picture { display: contents; }

/* Placeholder scenario tile reads as intentional, not as a broken image. */
.scene-tile--empty::before {
  content: 'Bald'; position: absolute; top: 1rem; left: 1rem;
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim);
  border: 1px solid var(--hair); border-radius: 99px; padding: .15rem .6rem;
}
html[lang='en'] .scene-tile--empty::before { content: 'Soon'; }
html[lang='zh'] .scene-tile--empty::before { content: '即将上线'; }

/* A lone scene image shouldn't sit as a small tile in a 3-column grid. */
.scene-grid > figure:only-child { grid-column: span 3; grid-row: span 2; }
@media (max-width: 860px) { .scene-grid > figure:only-child { grid-column: span 2; } }
@media (max-width: 520px) { .scene-grid > figure:only-child { grid-column: span 1; grid-row: span 1; } }

/* ========================= 23 · QUICK VIEW ============================= */
.modal--wide .modal__panel { width: min(100%, 1060px); }

.qv-brand {
  font-size: var(--step--2); letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); margin-bottom: .4rem;
}
.modal__head .qv-tag { font-size: var(--step-0); color: var(--fg-muted); margin-top: .45rem; }

.qv-top { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 760px) { .qv-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

.qv-stage {
  position: relative; aspect-ratio: 4 / 3;
  display: grid; place-items: center; padding: 1rem;
  border: 1px solid var(--hair); border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 42% at 50% 112%, rgba(60, 152, 247, .22), transparent 62%),
    linear-gradient(168deg, #e6ecf4 0%, #cfd9e6 48%, #b0bccd 100%);
}
.qv-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 60px rgba(80, 100, 130, .26);
}
.qv-stage img {
  max-width: 100%; max-height: 100%; width: auto; object-fit: contain;
  position: relative; z-index: 1;
  filter: drop-shadow(0 16px 24px rgba(40, 55, 80, .38));
}
.qv-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.qv-thumbs button {
  width: 66px; aspect-ratio: 1; padding: .3rem;
  display: grid; place-items: center;
  background: var(--paper-2);
  border: 1px solid var(--paper-edge); border-radius: 8px;
  transition: border-color .2s, transform .2s;
}
.qv-thumbs button:hover { transform: translateY(-2px); }
.qv-thumbs button[aria-current='true'] { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.qv-thumbs img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }

.qv-buy .priceline { margin-top: 0; padding-top: 0; border-top: 0; }
.qv-actions { display: grid; gap: .55rem; margin-bottom: 1.1rem; }
.qv-buy .highlights li { padding: .8rem 1rem; }

.qv-summary {
  margin-top: var(--gap);
  padding-top: var(--gap);
  border-top: 1px solid var(--hair);
}
.qv-summary p { color: var(--fg-muted); max-width: none; }

.qv-h {
  font-size: var(--step-1);
  margin: var(--gap-l) 0 var(--gap-s);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--blue);
  display: inline-block;
}
.qv-specs { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .qv-specs { grid-template-columns: 1fr 1fr; align-items: start; } }
.qv-specs .spec-block + .spec-block { margin-top: 0; }
.qv-specs .spec-block h3 { font-size: var(--step-0); }

/* The whole card is the quick-view trigger. */
.pcard__name a { cursor: pointer; }


/* ==========================================================================
   23 · MOBILE
   --------------------------------------------------------------------------
   Das Layout war ab Werk responsiv, aber auf dem Telefon zu zurückhaltend:
   Text zu klein, Tippziele zu niedrig, Fußzeile endlos, Hero-Text gegen das
   hellste Bild der Aufnahme. Dieser Block macht daraus eine eigenständige
   mobile Fassung.
   ========================================================================== */

@media (max-width: 760px) {

  /* --- 23.1 Schriftgrößen -------------------------------------------------
     Auf dem Telefon landeten alle clamp()-Werte am unteren Anschlag: 11–12 px
     Fließtext, auf Chinesisch kaum lesbar. Feste, größere Stufen. */
  :root {
    --step--2: .8125rem;   /* 13px  — Chips, Labels, Mono        */
    --step--1: .9375rem;   /* 15px  — Sekundärtext               */
    --step-0:  1.0625rem;  /* 17px  — Fließtext                  */
    --step-1:  1.25rem;    /* 20px                               */
    --step-2:  1.55rem;    /* 24.8px                             */
    --step-3:  1.9rem;     /* 30.4px                             */

    --section: 3.25rem;    /* Seiten waren fast 10 000 px hoch   */
    --gap-l: 1.75rem;
    --header-h: 76px;
  }

  body { line-height: 1.7; }
  html[lang='zh'] body { line-height: 1.85; }

  p { max-width: none; }

  /* --- 23.2 Tippziele -----------------------------------------------------
     Links liefen auf 16–25 px Höhe hinaus. Alles Antippbare bekommt Fläche. */
  .footer-col a,
  .footer-bottom a,
  .footer-contact a,
  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer-col li + li { margin-top: 0; }

  .lang button { min-height: 40px; padding-inline: .7rem; }
  .btn { min-height: 46px; }
  .btn--sm { min-height: 40px; padding: .6rem 1rem; }
  .chip { min-height: 32px; }

  /* --- 23.3 Kopfzeile ----------------------------------------------------- */
  .site-header .wrap { gap: .6rem; }
  .brand img { height: 34px; }
  .site-header.is-stuck { height: 68px; }
  .site-header.is-stuck .brand img { height: 30px; }

  .header-actions { gap: .4rem; margin-left: auto; }

  /* Der Umschalter nahm die halbe Leiste ein. Auf dem Telefon steht die
     aktive Sprache, die beiden anderen sind schmaler gesetzt. */
  .lang { flex: none; }
  .lang button { font-size: .75rem; padding-inline: .55rem; }
  .lang button[aria-pressed='true'] { padding-inline: .75rem; }

  .burger { width: 46px; height: 46px; }

  /* --- 23.4 Hero ----------------------------------------------------------
     Der Fließtext stand über der hellsten Stelle des Videos. Unten ein
     kräftigerer Verlauf, damit jede Zeile sicher trägt. */
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: 2.5rem;
  }
  .hero__media::after {
    background:
      linear-gradient(180deg,
        rgba(7,9,13,.72) 0%,
        rgba(7,9,13,.42) 22%,
        rgba(7,9,13,.78) 52%,
        rgba(7,9,13,.94) 78%,
        var(--ink-900) 100%);
  }
  .hero .t-lead { color: #dde4ec; }
  .hero__cta { gap: .6rem; width: 100%; }
  .hero__cta .btn { flex: 1 1 100%; justify-content: center; }

  /* überlagerte sich mit dem zweiten Knopf */
  .scroll-cue { display: none; }

  .hero__grid { background-size: 44px 44px; }

  /* --- 23.5 Statistikleiste ----------------------------------------------- */
  .stats { grid-template-columns: 1fr 1fr; }
  .stats--float { margin-top: 0; }
  .stats > div { padding: .95rem 1rem; }
  .stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* --- 23.6 Abschnittsköpfe ----------------------------------------------- */
  .section-head { margin-bottom: 1.5rem; }
  .kicker { margin-bottom: .6rem; }

  /* --- 23.7 Kategorien & Produkte ----------------------------------------- */
  .cat-card { min-height: 330px; }
  .cat-card__art { height: 64%; }

  .product-grid { grid-template-columns: 1fr; gap: 1rem; }
  .pcard__body { padding: 1.1rem 1.15rem 1.25rem; }
  .pcard__foot { gap: .85rem; }
  .pcard__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .pcard__actions .btn { width: 100%; }

  .filters { gap: .45rem; }
  .filters__count { width: 100%; margin-left: 0; order: 99; }

  /* --- 23.8 Produktseite --------------------------------------------------- */
  .pdp { gap: 1.5rem; }
  .gallery__stage { aspect-ratio: 1 / 1; }
  .gallery__thumbs button { width: 64px; }
  .buybox { padding: 1.25rem; }
  .buybox__actions { grid-template-columns: 1fr; }
  .buybox__actions .span-2 { grid-column: auto; }
  .priceline { flex-direction: column; align-items: flex-start; gap: .2rem; }

  .spec-table th { color: var(--fg-muted); padding-top: .9rem; }
  .spec-table td { font-size: var(--step-0); padding-bottom: .9rem; }

  /* --- 23.9 Einsatzbereiche ------------------------------------------------ */
  .scenario { min-height: auto; }
  .scenario__body { padding: 1.5rem 1.35rem 1.75rem; }
  .scenario__media img { opacity: .55; }
  .scenario h2, .scenario h3 { font-size: var(--step-2); }

  .scene-tiles { grid-template-columns: 1fr; }
  .scene-tile { min-height: 210px; }

  /* --- 23.10 Formulare ----------------------------------------------------- */
  .form-card { padding: 1.25rem 1.15rem; border-radius: var(--radius); }
  .field-grid--2 { grid-template-columns: 1fr; }
  /* 16px verhindert den Auto-Zoom von iOS beim Fokus */
  .input, .select, .textarea { font-size: 1rem; padding: .85rem .9rem; }
  .choice label { padding: .85rem .9rem; }
  .fset + .fset { margin-top: 1.75rem; padding-top: 1.75rem; }

  /* --- 23.11 Fußzeile ------------------------------------------------------
     Einspaltig wurde sie endlos. Die Linklisten stehen zu zweit nebeneinander,
     Marke und Kontakt über die volle Breite. */
  .site-footer { padding-top: 2.5rem; }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.25rem;
    padding-block: 2rem;
  }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
  .footer-brand img { height: 48px; }
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col h4 { margin-bottom: .5rem; color: var(--fg-muted); }

  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .25rem; padding-block: 1.25rem; }
  .footer-bottom nav { margin-left: 0; gap: .25rem 1rem; }

  .cta-band { padding: 1.75rem 1.35rem; }
  .cta-band h2 { max-width: none; }
  .cta-band .cluster { width: 100%; }
  .cta-band .cluster .btn { flex: 1 1 100%; justify-content: center; }

  /* --- 23.12 Modals -------------------------------------------------------- */
  .modal { padding: 0; align-items: flex-end; }
  .modal__panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    border-bottom: 0;
  }
  .modal__head { padding: 1.1rem 1.15rem .9rem; }
  .modal__body { padding: 1.15rem; }
}

/* Sehr schmale Geräte */
@media (max-width: 400px) {
  .brand img { height: 30px; }
  .lang button { font-size: .7rem; padding-inline: .45rem; }
  .pcard__actions { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
}

/* --- 23.13 Nachzügler: zu kleine Schrift und Schalter auf dem Telefon ----- */
@media (max-width: 760px) {
  /* Die Spezifikations-Chips hatten eine eigene, kleinere Größe (.68rem). */
  .pcard__specs .chip { font-size: .8125rem; padding: .3rem .7rem; }

  /* Preiszusatz und Mono-Zeilen in der Fußzeile */
  .price small,
  .footer-bottom .t-mono,
  .t-small { font-size: .8125rem; }

  /* Ankreuzfelder waren 17 px hoch — auf dem Telefon kaum zu treffen. */
  .consent input,
  .choice input { width: 1.4rem; height: 1.4rem; margin-top: .1rem; }
  .consent { gap: .85rem; align-items: center; }
  .consent span { line-height: 1.55; }

  /* Dateiliste und Dropzone */
  .dropzone { padding: 1.6rem 1rem; }
  .filelist li { padding: .7rem .8rem; font-size: .8125rem; }
  .filelist .rm { width: 2rem; height: 2rem; }

  /* Galerie-Miniaturen bequem antippbar */
  .gallery__thumbs button { width: 68px; }

  /* Breadcrumbs: eine Zeile, nicht umbrechend */
  .crumbs { font-size: .8125rem; gap: .35rem; }
  .crumbs a { min-height: 34px; }
}

/* ========================= 24 · v6 — KLARHEIT ========================== */
/* Rückmeldung: Kopfzeile zu dunkel und zu klein, Hero-Video unter Text und
   Abdunklung verschwunden, Szenen zu textlastig. Vorbild inMotion Robotic:
   heller Balken, freies Video, Bilder ohne Schleier, wenig Worte.         */

:root { --header-h: 92px; }

/* --- 24.1 Kopfzeile: heller Grund ------------------------------------- */
.site-header,
.site-header.is-stuck {
  background: #fff;
  border-bottom: 1px solid rgba(10, 20, 35, .08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.site-header { height: var(--header-h); }
.site-header.is-stuck { height: 80px; }
.brand img { height: 58px; }
.site-header.is-stuck .brand img { height: 50px; }

.lang { border-color: rgba(10, 20, 35, .16); }
.lang button { color: #4a5566; font-size: .78rem; font-weight: 600; }
.lang button:not([aria-pressed='true']):hover { color: #0b1220; background: rgba(10, 20, 35, .06); }

.burger { border-color: rgba(10, 20, 35, .18); }
.burger span, .burger span::before, .burger span::after { background: #0b1220; }
body.nav-open .burger span { background: transparent; }

@media (min-width: 1081px) {
  .nav { gap: .25rem; }
  .nav-link {
    font-size: 1.06rem; font-weight: 600;
    padding: .7rem 1.05rem;
    color: #1b2433;
  }
  .nav-link:hover,
  .nav-link[aria-expanded='true'] { color: #000; background: rgba(10, 20, 35, .06); }
  .nav-link.is-active { color: var(--blue); background: rgba(60, 152, 247, .09); }
  .header-actions .btn { font-size: .98rem; padding: .78rem 1.35rem; }
  .mega { top: calc(100% + 1rem); }
}
@media (max-width: 1080px) {
  .site-header,
  body.nav-open .site-header { background: #fff; }
  .brand img { height: 46px; }
}

/* --- 24.2 Hero: Video frei ------------------------------------------- */
.hero { min-height: 100svh; align-items: end; }
.hero__grid { display: none; }
.hero__media img, .hero__media video { object-position: center 55%; }
.hero__media::after {
  background:
    linear-gradient(90deg, rgba(7,9,13,.62) 0%, rgba(7,9,13,.22) 38%, transparent 62%),
    linear-gradient(180deg, transparent 55%, rgba(7,9,13,.55) 85%, var(--ink-900) 100%);
}
.hero__inner { max-width: 760px; }
.hero h1.t-hero {
  font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.4rem);
  line-height: .98;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
html[lang='zh'] .hero h1.t-hero { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem); line-height: 1.15; }
.t-hero em, .scenario h2 em, .scenario h3 em {
  font-style: normal;
  background: linear-gradient(92deg, #ffffff 0%, #9fd0ff 45%, var(--blue) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .t-lead {
  font-size: var(--step-1); color: #eef3f8;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}

/* --- 24.3 Szenen: Bild zuerst ---------------------------------------- */
.scenario { min-height: clamp(460px, 68vh, 700px); }
.scenario__media::after {
  background: linear-gradient(90deg, rgba(7,9,13,.86) 0%, rgba(7,9,13,.55) 30%, rgba(7,9,13,.08) 56%, transparent 70%);
}
.scenario--right .scenario__media::after {
  background: linear-gradient(270deg, rgba(7,9,13,.86) 0%, rgba(7,9,13,.55) 30%, rgba(7,9,13,.08) 56%, transparent 70%);
}
.scenario__body { max-width: 520px; }
.scenario h2, .scenario h3 {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
html[lang='zh'] .scenario h2, html[lang='zh'] .scenario h3 { line-height: 1.2; letter-spacing: 0; }
.scenario .kicker { color: #8cc4ff; }
.scenario .ticks { margin-top: 1.4rem; }

/* Kennzahlen als Display-Typografie */
.facts {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 0;
}
.facts > div {
  display: flex; flex-direction: column-reverse;
  padding: .2rem 1.4rem .2rem 0; margin-right: 1.4rem;
  border-right: 1px solid rgba(255,255,255,.16);
}
.facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.facts dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 3rem);
  line-height: 1; letter-spacing: -.035em;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 25%, #8cc4ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.facts dt {
  margin-top: .45rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: #c3d0df;
}
html[lang='zh'] .facts dt { letter-spacing: .06em; font-size: .8rem; font-family: inherit; }

/* --- 24.4 Abschnittsköpfe ohne Absatz rücken enger an ---------------- */
.section-head h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); }

/* --- 24.5 Mobil ------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --header-h: 74px; }
  .site-header.is-stuck { height: 66px; }
  .brand img { height: 40px; }
  .site-header.is-stuck .brand img { height: 36px; }

  .hero { min-height: 88svh; padding-bottom: 2rem; }
  .hero__media::after {
    background: linear-gradient(180deg, transparent 38%, rgba(7,9,13,.55) 66%, rgba(7,9,13,.92) 90%, var(--ink-900) 100%);
  }
  .hero h1.t-hero { font-size: 2.45rem; }
  html[lang='zh'] .hero h1.t-hero { font-size: 2.2rem; }
  .hero .t-lead { font-size: 1.05rem; }

  /* Bild als freier Streifen oben, Text darunter — kein Schleier mehr */
  .scenario { display: block; min-height: 0; background: var(--ink-850); }
  .scenario__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 11; }
  .scenario__media img { opacity: 1 !important; }
  .scenario__media::after,
  .scenario--right .scenario__media::after {
    background: linear-gradient(180deg, transparent 70%, var(--ink-850) 100%);
  }
  .scenario__body { padding: 1.1rem 1.25rem 1.6rem; }
  .scenario h2, .scenario h3 { font-size: 1.85rem; margin-bottom: 1.1rem; text-shadow: none; }
  .facts > div { padding-right: 1rem; margin-right: 1rem; }
  .facts dd { font-size: 1.75rem; }
  .facts dt { font-size: .62rem; }
}

/* --- 24.6 Feinschliff -------------------------------------------------- */
@media (min-width: 1081px) {
  .site-header nav { margin-left: auto; }
  .header-actions { margin-left: 1.25rem; }
}
.hero h1.t-hero { font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.8rem); }
.t-hero em, .scenario h2 em, .scenario h3 em { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0,0,0,.55)); }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  max-width: 480px;
}
.facts > div {
  margin: 0; padding: .15rem 1rem;
  border-right: 0;
  border-left: 1px solid rgba(255,255,255,.18);
}
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts > div:last-child { padding-right: 0; }
.facts dd { font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.6rem); }
.facts dt { line-height: 1.35; }
@media (max-width: 760px) {
  .facts > div { padding-inline: .7rem; }
  .facts dd { font-size: 1.6rem; }
}
.hero .scroll-cue { display: none; }
.hero .btn--ghost { background: rgba(7,9,13,.45); border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.facts > div { justify-content: flex-end; }
html[lang='zh'] .scenario h2, html[lang='zh'] .scenario h3 { font-size: clamp(1.9rem, 1.1rem + 2vw, 2.9rem); }
@media (max-width: 760px) {
  .scenario .kicker { letter-spacing: .1em; font-size: .68rem; }
}

/* ========================= 25 · SCHWEBENDE KOPFZEILE ==================== */
/* Vorbild inMotion: eine abgerundete, mattierte Leiste, die über dem Video
   schwebt. Eigene Note: Glas mit feiner Lichtkante, blauer Aktiv-Punkt,
   dunkle Kapsel-Knöpfe mit blauem Schimmer.
   Der Blur sitzt auf ::before — backdrop-filter direkt auf .site-header
   würde das Off-Canvas-Menü wieder in die Leiste sperren (siehe §20).   */

:root { --hdr-top: 14px; --hdr-bar: 68px; --header-h: calc(var(--hdr-top) + var(--hdr-bar)); }

.site-header,
.site-header.is-stuck {
  top: var(--hdr-top); left: 0; right: 0; bottom: auto;
  margin-inline: auto;
  width: min(100% - 2rem, 1480px);
  height: var(--hdr-bar);
  background: transparent;
  border: 0; box-shadow: none;
  border-radius: 999px;
  isolation: isolate;
  transition: top .3s var(--ease), height .3s var(--ease);
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(244,247,251,.74) 100%);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(10,20,35,.06),
    0 10px 40px -8px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.12);
  transition: background .3s var(--ease);
}
.site-header.is-stuck { top: 10px; height: 62px; }
.site-header.is-stuck::before { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,248,251,.9)); }

.site-header .wrap { width: 100%; padding-inline: 1.1rem 0.6rem; gap: 1rem; }
.brand { padding-left: .4rem; }
.brand img, .site-header.is-stuck .brand img { height: 44px; }
.site-header.is-stuck .brand img { height: 40px; }

/* Herkunfts-Abzeichen */
.hdr-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem .3rem .55rem; margin-left: .4rem;
  border-radius: 99px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(10,20,35,.1);
  box-shadow: 0 1px 2px rgba(10,20,35,.06);
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #3b4658;
  white-space: nowrap;
}
html[lang='zh'] .hdr-badge { font-family: inherit; letter-spacing: .04em; font-size: .72rem; }
.hdr-badge i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: hdrPulse 2.4s ease-out infinite;
}
@keyframes hdrPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70%,100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
@media (prefers-reduced-motion: reduce) { .hdr-badge i { animation: none; } }
@media (max-width: 1320px) { .hdr-badge { display: none; } }

@media (min-width: 1081px) {
  .site-header nav { margin-inline: auto; }
  .nav { gap: .1rem; }
  .nav-link {
    position: relative;
    font-size: 1rem; font-weight: 600; letter-spacing: -.005em;
    padding: .6rem 1rem; border-radius: 99px;
    color: #111a28;
  }
  .nav-link:hover,
  .nav-link[aria-expanded='true'] { background: rgba(10,20,35,.07); color: #000; }
  .nav-link.is-active { background: transparent; color: #000; }
  .nav-link.is-active::after {
    content: ''; position: absolute; left: 50%; bottom: .18rem;
    width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
    background: var(--blue); box-shadow: 0 0 8px var(--blue);
  }
  .header-actions { margin-left: 0; gap: .45rem; }
  .mega { top: calc(100% + .8rem); }
}

/* Sprache: kompakte Kapsel */
.lang {
  background: rgba(10,20,35,.06);
  border: 0; padding: 3px; gap: 2px;
}
.lang button {
  border-radius: 99px; padding: .3rem .6rem;
  color: #4a5566; font-size: .74rem;
}
.lang button[aria-pressed='true'] { background: #fff; color: #0b1220; box-shadow: 0 1px 3px rgba(10,20,35,.18); }
.lang button:not([aria-pressed='true']):hover { background: rgba(255,255,255,.6); color: #0b1220; }

/* Anfrage-Knopf: dunkle Kapsel mit blauem Schimmer */
.header-actions .btn {
  background: linear-gradient(180deg, #1a2433 0%, #0b1220 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 14px -4px rgba(11,18,32,.6);
  border-radius: 99px;
  padding: .72rem 1.25rem;
  font-size: .95rem; font-weight: 600;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), background .25s;
}
.header-actions .btn:hover {
  background: linear-gradient(180deg, #24324a 0%, #101a2c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 0 0 3px rgba(60,152,247,.25), 0 8px 22px -6px rgba(60,152,247,.65);
  transform: translateY(-1px);
}
.header-actions .btn::after { content: '→'; margin-left: .45rem; transition: transform .2s; }
.header-actions .btn:hover::after { transform: translateX(3px); }

/* Burger als runder Knopf */
.burger { border-radius: 50%; border-color: rgba(10,20,35,.14); background: rgba(255,255,255,.7); }

/* Hero beginnt hinter der Leiste — das Video läuft bis ganz nach oben */
.hero { padding-top: calc(var(--header-h) + 2.5rem); }

/* --- Mobil -------------------------------------------------------------- */
@media (max-width: 1080px) {
  .site-header, body.nav-open .site-header { background: transparent; }
  .nav {
    inset: calc(var(--header-h) + 8px) .75rem auto;
    max-height: calc(100svh - var(--header-h) - 20px);
    border-radius: 22px;
    border: 1px solid var(--hair-strong);
    box-shadow: 0 24px 60px -10px rgba(0,0,0,.6);
    transform: translateY(-8px) scale(.98); opacity: 0;
    transition: transform .28s var(--ease-out), opacity .2s;
  }
  body.nav-open .nav { transform: none; opacity: 1; }
}
@media (max-width: 760px) {
  :root { --hdr-top: 10px; --hdr-bar: 60px; }
  .site-header, .site-header.is-stuck { width: calc(100% - 1.25rem); height: var(--hdr-bar); top: var(--hdr-top); }
  .site-header .wrap { padding-inline: .8rem .45rem; gap: .4rem; }
  .brand { padding-left: .1rem; }
  .brand img, .site-header.is-stuck .brand img { height: 34px; }
  .lang button { padding: .28rem .45rem; font-size: .7rem; min-height: 32px; }
  .burger { width: 42px; height: 42px; }
}
@media (max-width: 1080px) {
  .nav { padding: .6rem 1.4rem 1rem; }
  .nav-link { color: #eef3f8; }
  .nav > li:last-child .nav-link { border-bottom: 0; }
}

/* ========================= 26 · AUSKLAPPMENÜS LESBAR ===================== */
/* Rückmeldung: Text grau auf Schwarz, zu klein, Vorschaubilder winzig.
   Jetzt: reinweiße Titel, helle Unterzeilen, größere Schrift, Kacheln mit
   eigenem Grund und helle Vorschaufelder, damit die Roboter sichtbar sind. */
.mega {
  background: linear-gradient(180deg, #172131 0%, #111926 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 1.5rem;
}
.mega-grid { gap: .75rem; }
.mega-item {
  color: #fff;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  grid-template-columns: 88px 1fr; gap: 1.1rem;
}
.mega-item:hover {
  background: rgba(60,152,247,.14);
  border-color: rgba(60,152,247,.55);
  transform: translateY(-2px);
}
.mega-item strong {
  color: #ffffff;
  font-size: 1.14rem; font-weight: 700; line-height: 1.3;
  margin-bottom: .3rem;
}
.mega-item span { color: #d7e1ee; font-size: .95rem; line-height: 1.45; }
.mega-item strong span { color: inherit; font-size: inherit; }
.mega-item .thumb {
  width: 88px; height: 88px; border-radius: 14px;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #dfe7f1 60%, #c5d1df 100%);
  border: 0;
}
.mega-item .thumb img { width: 92%; height: 92%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.mega-item .thumb svg { color: #5b6b82; width: 26px; height: 26px; }
.mega-item[data-soon] .thumb { background: rgba(255,255,255,.07); }
.mega-item[data-soon] .thumb svg { color: #9fb0c6; }
.mega-item[data-soon] strong::after {
  color: #cfe3ff; border-color: rgba(140,196,255,.5); background: rgba(60,152,247,.15);
  font-size: .66rem;
}
.mega-foot { border-top-color: rgba(255,255,255,.12); font-size: 1rem; color: #c9d4e2; }
.mega-foot .link { color: #8cc4ff; font-weight: 700; }
.mega-foot .t-dim { color: #b7c4d4; }

/* Mobil: im aufgeklappten Menü ebenfalls groß und hell */
@media (max-width: 1080px) {
  .mega { background: transparent; border: 0; box-shadow: none; padding: .5rem 0 1rem; }
  .mega-grid { gap: .5rem; }
  .mega-item { padding: .8rem .9rem; grid-template-columns: 56px 1fr; gap: .9rem; border-radius: 14px; }
  .mega-item .thumb { width: 56px; height: 56px; border-radius: 12px; }
  .mega-item strong { font-size: 1.08rem; }
  .mega-item span { font-size: .92rem; }
  .mega-foot { font-size: .98rem; }
}
.mega-item[data-soon] strong::after { display: inline-block; white-space: nowrap; }

/* ========================= 27 · KOPFZEILE „BRÜCKE“ ======================= */
/* Eigenes Konzept statt Kopie: Das Logo bekommt eine eigene helle Platte,
   deren rechte Kante im Winkel des kursiven NIC-Schriftzugs abgeschrägt ist.
   Die Navigation läuft als dunkle Glasbrücke weiter — weiße Schrift auf
   dunklem Glas, passend zur Seite. Der Anfrage-Knopf greift die Schräge am
   anderen Ende wieder auf, eine blaue Lichtkante verbindet beides.        */

:root { --hdr-top: 14px; --hdr-bar: 74px; --slant: 26px; }

.site-header,
.site-header.is-stuck {
  width: min(100% - 2rem, 1480px);
  height: var(--hdr-bar);
  border-radius: 20px;
}
.site-header.is-stuck { top: 8px; height: 66px; }

/* dunkles Glas */
.site-header::before,
.site-header.is-stuck::before {
  background: linear-gradient(180deg, rgba(20,28,42,.78) 0%, rgba(10,15,24,.72) 100%);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 50px -14px rgba(0,0,0,.75);
}
.site-header.is-stuck::before { background: linear-gradient(180deg, rgba(20,28,42,.94), rgba(10,15,24,.92)); }

/* blaue Lichtkante unten */
.site-header::after {
  content: ''; position: absolute; left: 22%; right: 6%; bottom: -1px; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(60,152,247,.9) 35%, rgba(140,196,255,.9) 60%, transparent);
  box-shadow: 0 0 12px rgba(60,152,247,.8);
  pointer-events: none;
}

.site-header .wrap { padding: 0 .55rem 0 0; height: 100%; gap: 1.25rem; }

/* --- Logo-Platte ------------------------------------------------------- */
.brand {
  position: relative; align-self: stretch;
  display: flex; align-items: center;
  padding: 0 calc(var(--slant) + 1.6rem) 0 1.5rem;
  margin: 0;
  isolation: isolate;
}
.brand::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: 20px 0 0 20px;
  background: linear-gradient(135deg, #ffffff 0%, #eef3f9 55%, #dde6f1 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  box-shadow: inset 0 1px 0 #fff;
}
/* zwei blaue Schrägstreifen hinter der Platte — wie die Striche unter ROBOTICS */
.brand::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: -2;
  right: -16px; width: calc(var(--slant) + 16px);
  background:
    linear-gradient(var(--blue), var(--blue)) 0 0 / 7px 100% no-repeat,
    linear-gradient(rgba(60,152,247,.45), rgba(60,152,247,.45)) 12px 0 / 4px 100% no-repeat;
  transform: skewX(calc(-1 * atan(var(--slant) / var(--hdr-bar))));
  transform: skewX(-19deg);
  transform-origin: top right;
  right: -8px;
}
.brand img,
.site-header.is-stuck .brand img { height: 50px; width: auto; }
.site-header.is-stuck .brand img { height: 44px; }
.hdr-badge { display: none !important; }

/* --- Navigation: weiß auf dunklem Glas --------------------------------- */
@media (min-width: 1081px) {
  .site-header nav { margin-inline: auto; }
  .nav { gap: .2rem; }
  .nav-link,
  .nav-link:hover,
  .nav-link[aria-expanded='true'],
  .nav-link.is-active {
    position: relative;
    color: #ffffff;
    font-size: 1.05rem; font-weight: 600; letter-spacing: .005em;
    padding: .65rem 1.05rem;
    border-radius: 10px;
    background: transparent;
  }
  .nav-link .caret { opacity: .75; }
  .nav-link::after {
    content: ''; position: absolute; left: 1.05rem; right: 1.05rem; bottom: .25rem;
    height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--blue), #8cc4ff);
    box-shadow: 0 0 10px rgba(60,152,247,.9);
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s var(--ease-out);
  }
  .nav-link.is-active::after { width: auto; height: 2px; margin: 0; left: 1.05rem; border-radius: 2px; }
  .nav-link:hover::after,
  .nav-link[aria-expanded='true']::after,
  .nav-link.is-active::after { transform: scaleX(1); }
  .nav-link:hover, .nav-link[aria-expanded='true'] { background: rgba(255,255,255,.06); }
  .mega { top: calc(100% + .7rem); }
}

/* --- Sprache: dunkle Kapsel -------------------------------------------- */
.lang { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.lang button { color: #c9d4e2; }
.lang button[aria-pressed='true'] { background: var(--blue); color: #fff; box-shadow: 0 0 12px rgba(60,152,247,.6); }
.lang button:not([aria-pressed='true']):hover { background: rgba(255,255,255,.1); color: #fff; }

/* --- Anfrage-Knopf: Schräge spiegelt die Logo-Platte -------------------- */
.header-actions .btn {
  position: relative;
  height: calc(var(--hdr-bar) - 18px);
  padding: 0 1.5rem 0 calc(1.3rem + 12px);
  border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #4aa3ff 0%, var(--blue) 50%, #2a7fe0 100%);
  color: #fff; font-weight: 700; font-size: .98rem;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: none;
}
.site-header.is-stuck .header-actions .btn { height: calc(66px - 16px); }
.header-actions .btn:hover {
  background: linear-gradient(135deg, #6bb6ff 0%, #4aa3ff 50%, var(--blue) 100%);
  transform: none; box-shadow: none;
}
.header-actions .btn::after { content: '→'; margin-left: .55rem; }

/* --- Burger hell auf dunkel ------------------------------------------- */
.burger { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); border-radius: 12px; }
.burger span, .burger span::before, .burger span::after { background: #fff; }
body.nav-open .burger span { background: transparent; }

/* --- Mobil ------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --hdr-top: 10px; --hdr-bar: 62px; --slant: 18px; }
  .site-header, .site-header.is-stuck { width: calc(100% - 1.25rem); height: var(--hdr-bar); top: var(--hdr-top); border-radius: 16px; }
  .brand { padding: 0 calc(var(--slant) + 1rem) 0 1rem; }
  .brand::before { border-radius: 16px 0 0 16px; }
  .brand::after { transform: skewX(-16deg); }
  .brand img, .site-header.is-stuck .brand img { height: 36px; }
  .site-header .wrap { padding-right: .45rem; gap: .5rem; }
  .site-header::after { left: 30%; }
  .lang button { color: #dfe7f1; }
}
.brand::after {
  left: 100%; right: auto; margin-left: 5px; width: 22px; z-index: 1;
  transform: skewX(-19.4deg); transform-origin: top left;
  background:
    linear-gradient(var(--blue), var(--blue)) 0 0 / 6px 100% no-repeat,
    linear-gradient(rgba(60,152,247,.5), rgba(60,152,247,.5)) 11px 0 / 3px 100% no-repeat;
  filter: drop-shadow(0 0 6px rgba(60,152,247,.7));
}
.site-header.is-stuck .brand::after { transform: skewX(-21.5deg); }
@media (max-width: 760px) {
  .brand::after { transform: skewX(-16.2deg); width: 18px; margin-left: 4px;
    background:
      linear-gradient(var(--blue), var(--blue)) 0 0 / 5px 100% no-repeat,
      linear-gradient(rgba(60,152,247,.5), rgba(60,152,247,.5)) 9px 0 / 3px 100% no-repeat; }
  .site-header.is-stuck .brand::after { transform: skewX(-16.2deg); }
}
@media (min-width: 1081px) {
  .nav-link { line-height: 1.2; white-space: nowrap; }
}
@media (min-width: 1081px) and (max-width: 1360px) {
  .site-header .wrap { gap: .6rem; }
  .brand { padding-right: calc(var(--slant) + 1.1rem); padding-left: 1.1rem; }
  .brand img, .site-header.is-stuck .brand img { height: 42px; }
  .nav { gap: 0; }
  .nav-link, .nav-link:hover, .nav-link[aria-expanded='true'], .nav-link.is-active { padding: .6rem .62rem; font-size: .97rem; }
  .nav-link::after { left: .62rem; right: .62rem; }
  .lang button { padding: .28rem .45rem; }
  .header-actions .btn { padding: 0 1.05rem 0 calc(.9rem + 12px); font-size: .9rem; }
}
@media (min-width: 1081px) and (max-width: 1200px) {
  .header-actions .btn::after { display: none; }
  .nav-link .caret { display: none; }
}

/* ========================= 28 · PRODUKTFILM ============================== */
.film { position: relative; margin: 0 auto; max-width: 1180px; isolation: isolate; }
/* blaue Winkellinie rechts und unten, zur Ecke hin aufleuchtend */
.film__stage { position: relative; isolation: isolate; }
.film__stage::before {
  content: ''; position: absolute; z-index: -1;
  inset: 18px -16px -16px 18px;
  border-right: 3px solid var(--blue);
  border-bottom: 3px solid var(--blue);
  border-radius: 0 0 24px 0;
  filter: drop-shadow(0 0 10px rgba(60,152,247,.75));
  -webkit-mask-image: linear-gradient(135deg, transparent 38%, #000 78%);
          mask-image: linear-gradient(135deg, transparent 38%, #000 78%);
}
.film__frame {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 20px; overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.film.is-playing .film__video { object-fit: contain; }

.film__play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  background: radial-gradient(ellipse at center, rgba(7,9,13,.15) 0%, rgba(7,9,13,.55) 100%);
  color: #fff; cursor: pointer; border: 0;
  transition: background .3s var(--ease);
}
.film__play:hover { background: radial-gradient(ellipse at center, rgba(7,9,13,.05) 0%, rgba(7,9,13,.45) 100%); }
.film__btn {
  position: relative;
  width: 104px; height: 104px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #5aaeff 0%, var(--blue) 55%, #1f6fd0 100%);
  box-shadow: 0 0 0 10px rgba(60,152,247,.18), 0 18px 40px -10px rgba(60,152,247,.8);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.film__btn::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid rgba(140,196,255,.6);
  animation: filmRing 2.4s ease-out infinite;
}
@keyframes filmRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .film__btn::after { animation: none; } }
.film__btn svg { width: 40px; height: 40px; margin-left: 6px; }
.film__play:hover .film__btn { transform: scale(1.07); box-shadow: 0 0 0 14px rgba(60,152,247,.22), 0 22px 50px -10px rgba(60,152,247,.95); }
.film__label {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .01em;
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.film__tag {
  position: absolute; z-index: 3; top: 1rem; left: 1.1rem;
  padding: .3rem .65rem; border-radius: 6px;
  background: rgba(7,9,13,.55); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; color: #dbe6f3;
  pointer-events: none; transition: opacity .3s;
}
.film.is-playing .film__play,
.film.is-playing .film__tag { opacity: 0; visibility: hidden; pointer-events: none; }
.film figcaption {
  margin-top: 1.9rem; padding-left: .2rem;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; color: #aebccd;
}
html[lang='zh'] .film figcaption { font-family: inherit; letter-spacing: .02em; font-size: .9rem; }

@media (max-width: 760px) {
  .film__stage::before { inset: 10px -8px -8px 10px; border-width: 0 2px 2px 0; border-radius: 0 0 16px 0; }
  .film__frame { border-radius: 14px; }
  .film__btn { width: 72px; height: 72px; }
  .film__btn svg { width: 28px; height: 28px; }
  .film__label { font-size: .98rem; }
  .film__tag { top: .6rem; left: .7rem; font-size: .58rem; }
}

/* Film 2: blaue Wiege — Linie unten, beide Seiten steigen auf und verlöschen */
.film--cradle .film__stage::before {
  inset: 26px -16px -16px -16px;
  border: 3px solid var(--blue); border-top: 0;
  border-radius: 0 0 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 85%);
          mask-image: linear-gradient(180deg, transparent 30%, #000 85%);
}
/* zweite, feinere Parallellinie unten — technische Doppelkante */
.film--cradle .film__stage::after {
  content: ''; position: absolute; z-index: -1;
  left: 12%; right: 12%; bottom: -26px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140,196,255,.9) 30%, rgba(140,196,255,.9) 70%, transparent);
  box-shadow: 0 0 8px rgba(60,152,247,.8);
}
@media (max-width: 760px) {
  .film--cradle .film__stage::before { inset: 14px -8px -8px -8px; border-width: 0 2px 2px 2px; border-radius: 0 0 16px 16px; }
  .film--cradle .film__stage::after { bottom: -16px; }
}
/* Das NIC-Logo sitzt im Film oben links — Etikett nach rechts */
.film__tag { left: auto; right: 1.1rem; }
@media (max-width: 760px) { .film__tag { left: auto; right: .7rem; } }

/* v12: eigener Schnitt mit Einblendungen unten rechts — Unterkante nicht mehr abdunkeln */
.hero__media img, .hero__media video { object-position: center center; }
.hero__media::after {
  background:
    linear-gradient(90deg, rgba(7,9,13,.55) 0%, rgba(7,9,13,.18) 36%, transparent 58%),
    linear-gradient(180deg, transparent 88%, rgba(7,9,13,.6) 97%, var(--ink-900) 100%);
}
@media (max-width: 760px) {
  .hero__media::after {
    background: linear-gradient(180deg, transparent 45%, rgba(7,9,13,.55) 70%, rgba(7,9,13,.9) 92%, var(--ink-900) 100%);
  }
}

/* ========================= 29 · ANFRAGELISTE & LIVE-CHAT ================= */

/* --- 29.1 Kopf: Anfrage-Knopf ----------------------------------------- */
.inq-btn {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  height: 42px; padding: 0 .85rem 0 .7rem; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-weight: 600; font-size: .92rem; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.inq-btn:hover { background: rgba(60,152,247,.16); border-color: rgba(60,152,247,.6); }
.inq-btn svg { width: 21px; height: 21px; }
.inq-count {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #dfe7f1; font-size: .72rem; font-weight: 700;
}
.inq-count:not([data-count='0']) { background: var(--blue); color: #fff; box-shadow: 0 0 10px rgba(60,152,247,.7); }
.inq-count.bump { animation: inqBump .5s var(--ease-out); }
@keyframes inqBump { 40% { transform: scale(1.45); } }
@media (min-width: 1081px) and (max-width: 1360px) { .inq-btn__label { display: none; } .inq-btn { padding: 0 .6rem; } }
@media (max-width: 760px) {
  .inq-btn { height: 40px; padding: 0 .5rem; }
  .inq-btn__label { display: none; }
}

/* Navigation hat jetzt sechs Punkte — engere Abstände */
@media (min-width: 1081px) {
  .nav-link, .nav-link:hover, .nav-link[aria-expanded='true'], .nav-link.is-active { padding: .65rem .82rem; }
  .nav-link::after { left: .82rem; right: .82rem; }
}
@media (min-width: 1081px) and (max-width: 1360px) {
  .nav-link, .nav-link:hover, .nav-link[aria-expanded='true'], .nav-link.is-active { padding: .6rem .5rem; font-size: .93rem; }
  .nav-link::after { left: .5rem; right: .5rem; }
  .header-actions .btn { display: none; }
}

/* --- 29.2 Anfrage-Knöpfe an Produkten --------------------------------- */
.btn--inq svg { width: 1.05em; height: 1.05em; margin-right: .35rem; }
.pcard__actions .btn--inq { border-color: rgba(60,152,247,.55); color: #cfe3ff; }
.pcard__actions .btn--inq:hover { background: rgba(60,152,247,.16); color: #fff; }

/* --- 29.3 Schublade --------------------------------------------------- */
.inq { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.inq__scrim { position: absolute; inset: 0; background: rgba(4,6,10,.6); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.inq__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #151e2c, #0d131d);
  border-left: 1px solid rgba(255,255,255,.12);
  box-shadow: -30px 0 80px -20px rgba(0,0,0,.8);
  transform: translateX(100%); transition: transform .38s var(--ease-out);
}
.inq__panel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--blue) 30%, #8cc4ff 60%, transparent);
  box-shadow: 0 0 12px rgba(60,152,247,.8);
}
.inq.is-open { pointer-events: auto; }
.inq.is-open .inq__scrim { opacity: 1; }
.inq.is-open .inq__panel { transform: none; }
.inq__head { display: flex; justify-content: space-between; align-items: flex-start; padding: 1.5rem 1.5rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.inq__kicker { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: #8cc4ff; margin: 0 0 .3rem; }
html[lang='zh'] .inq__kicker { font-family: inherit; letter-spacing: .06em; font-size: .78rem; }
.inq__head h2 { font-size: 1.5rem; margin: 0; color: #fff; }
.inq__x, .nchat__x {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; cursor: pointer;
}
.inq__x svg, .nchat__x svg { width: 18px; height: 18px; }
.inq__x:hover, .nchat__x:hover { background: rgba(255,255,255,.12); }
.inq__items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: grid; gap: .75rem; align-content: start; }
.inq__item {
  display: grid; grid-template-columns: 76px 1fr auto; gap: .9rem; align-items: center;
  padding: .75rem; border-radius: 16px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
}
.inq__thumb { width: 76px; height: 76px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #fff, #dfe7f1 60%, #c5d1df); overflow: hidden; }
.inq__thumb img { width: 90%; height: 90%; object-fit: contain; }
.inq__info strong { display: block; color: #fff; font-size: 1.02rem; line-height: 1.25; }
.inq__info small { display: block; color: #b7c4d4; font-size: .82rem; margin: .2rem 0 .5rem; }
.inq__qty { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; overflow: hidden; }
.inq__qty button { width: 32px; height: 32px; background: rgba(255,255,255,.06); color: #fff; border: 0; font-size: 1.1rem; cursor: pointer; }
.inq__qty button:hover { background: rgba(60,152,247,.25); }
.inq__qty input { width: 44px; height: 32px; text-align: center; background: transparent; border: 0; color: #fff; font-weight: 700; font-size: .95rem; -moz-appearance: textfield; }
.inq__qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.inq__rm { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: transparent; border: 0; color: #93a3b8; cursor: pointer; }
.inq__rm:hover { color: #ff8a8a; background: rgba(255,90,90,.1); }
.inq__rm svg { width: 19px; height: 19px; }
.inq__empty { text-align: center; padding: 3rem 1rem; color: #dbe5f1; display: grid; gap: .7rem; justify-items: center; }
.inq__foot { padding: 1.1rem 1.5rem 1.5rem; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: .8rem; }
.inq__foot:empty { display: none; }
.inq__note { display: grid; gap: .35rem; font-size: .85rem; color: #c3d0df; }
.inq__note textarea { resize: vertical; min-height: 54px; padding: .6rem .75rem; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: #fff; font: inherit; font-size: 16px; }
.inq__sum { display: flex; justify-content: space-between; align-items: baseline; color: #c3d0df; font-size: .9rem; }
.inq__sum b { color: #fff; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.02em; }
.inq__hint { margin: 0; font-size: .8rem; color: #93a3b8; line-height: 1.45; }
.inq__go svg, .inq__alt svg { width: 1.15em; height: 1.15em; margin-right: .4rem; }
.inq__alt { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inq__wa { border-color: rgba(37,211,102,.5) !important; color: #bff3d2 !important; }
.inq__wa:hover { background: rgba(37,211,102,.14) !important; }
.inq__clear { margin-left: auto; background: none; border: 0; color: #93a3b8; font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.inq-toast {
  position: fixed; z-index: 420; left: 50%; bottom: 1.5rem; transform: translate(-50%, 140%);
  display: flex; align-items: center; gap: .8rem;
  padding: .75rem .8rem .75rem 1.1rem; border-radius: 14px;
  background: #fff; color: #0b1220; font-weight: 600; font-size: .95rem;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.6);
  transition: transform .35s var(--ease-out); max-width: calc(100% - 2rem);
}
.inq-toast.is-on { transform: translate(-50%, 0); }
.inq-toast button { background: var(--blue); color: #fff; border: 0; border-radius: 10px; padding: .45rem .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }

/* --- 29.4 Chat-Knopf -------------------------------------------------- */
.nchat-launcher {
  position: fixed; z-index: 380; right: 1.25rem; bottom: 1.25rem;
  display: inline-flex; align-items: center; gap: .6rem;
  height: 58px; padding: 0 1.3rem 0 .45rem; border-radius: 99px;
  background: linear-gradient(135deg, #4aa3ff 0%, var(--blue) 50%, #2a7fe0 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.25); cursor: pointer;
  font-weight: 700; font-size: 1rem;
  box-shadow: 0 16px 40px -10px rgba(60,152,247,.75), 0 4px 12px rgba(0,0,0,.35);
  transition: transform .25s var(--ease-out), box-shadow .25s;
}
.nchat-launcher:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -10px rgba(60,152,247,.9), 0 4px 12px rgba(0,0,0,.35); }
.nchat-launcher__icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(7,9,13,.25); }
.nchat-launcher__icon svg { width: 24px; height: 24px; }
.nchat-dot { position: absolute; top: 8px; left: 40px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #2a7fe0; }
.nchat-launcher.has-unread .nchat-dot { background: #ff5a5a; animation: hdrPulse 1.6s infinite; }
html.nchat-open .nchat-launcher { opacity: 0; pointer-events: none; transform: scale(.9); }
html.inq-open .nchat-launcher { opacity: 0; pointer-events: none; }

/* --- 29.5 Chatfenster ------------------------------------------------- */
.nchat {
  position: fixed; z-index: 390; right: 1.25rem; bottom: 1.25rem;
  width: min(390px, calc(100vw - 2rem)); height: min(600px, calc(100svh - 7rem));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, #172131 0%, #0e141f 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(60,152,247,.15);
  animation: nchatIn .32s var(--ease-out);
}
.nchat[hidden] { display: none; }
@keyframes nchatIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.nchat::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--blue), #8cc4ff, transparent);
  box-shadow: 0 0 12px rgba(60,152,247,.8);
}
.nchat__head {
  display: flex; align-items: center; gap: .8rem; padding: .95rem 1rem;
  background: linear-gradient(135deg, rgba(60,152,247,.22), rgba(60,152,247,.04));
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nchat__avatar { width: 50px; height: 50px; flex: none; border-radius: 14px; display: grid; place-items: center; background: #0b1220; border: 1px solid rgba(255,255,255,.16); }
.nchat__avatar img { width: 40px; height: auto; }
.nchat__who { flex: 1; min-width: 0; }
.nchat__who strong { display: block; color: #fff; font-size: 1.02rem; }
.nchat__who small { display: flex; align-items: center; gap: .4rem; color: #c3d0df; font-size: .8rem; margin-top: .15rem; }
.nchat__who small i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex: none; box-shadow: 0 0 6px #22c55e; }
.nchat__body { flex: 1; overflow-y: auto; padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.nb { max-width: 86%; padding: .7rem .9rem; border-radius: 16px; font-size: .95rem; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.nb--op { align-self: flex-start; background: rgba(255,255,255,.08); color: #eef3f8; border-bottom-left-radius: 5px; }
.nb--me { align-self: flex-end; background: linear-gradient(135deg, #4aa3ff, var(--blue)); color: #fff; border-bottom-right-radius: 5px; }
.nb--typing { display: flex; gap: 4px; padding: .8rem .9rem; }
.nb--typing i { width: 7px; height: 7px; border-radius: 50%; background: #aebccd; animation: nbDot 1.2s infinite; }
.nb--typing i:nth-child(2) { animation-delay: .15s; } .nb--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes nbDot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.nb--mail div { display: flex; gap: .4rem; margin-top: .5rem; }
.nb--mail input { flex: 1; min-width: 0; padding: .45rem .6rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: #fff; font-size: 16px; }
.nb--mail button { padding: 0 .8rem; border-radius: 8px; border: 0; background: var(--blue); color: #fff; font-weight: 700; }
.nchat__quick { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .2rem; }
.nchat__quick button {
  padding: .5rem .8rem; border-radius: 99px; cursor: pointer;
  background: rgba(60,152,247,.1); border: 1px solid rgba(60,152,247,.45); color: #d7e8ff;
  font-size: .86rem; font-weight: 600; transition: background .2s;
}
.nchat__quick button:hover { background: rgba(60,152,247,.25); color: #fff; }
.nchat__foot { display: flex; gap: .5rem; align-items: flex-end; padding: .8rem 1rem .6rem; border-top: 1px solid rgba(255,255,255,.1); }
.nchat__foot textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 140px; padding: .65rem .85rem; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 16px; line-height: 1.4;
}
.nchat__foot textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(60,152,247,.25); }
.nchat__send { width: 46px; height: 46px; flex: none; border-radius: 14px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: linear-gradient(135deg, #4aa3ff, var(--blue)); color: #fff; box-shadow: 0 6px 16px -6px rgba(60,152,247,.9); }
.nchat__send svg { width: 20px; height: 20px; }
.nchat__alt { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0 1rem .95rem; font-size: .78rem; color: #93a3b8; }
.nchat__mode[data-mode-live] { display: none; }
html.crisp-ready .nchat__mode[data-mode-live] { display: inline; }
html.crisp-ready .nchat__mode[data-mode-wa] { display: none; }
.nchat__wa {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  padding: .4rem .7rem; border-radius: 99px; text-decoration: none;
  background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.5); color: #bff3d2; font-weight: 700; font-size: .8rem;
}
.nchat__wa:hover { background: rgba(37,211,102,.22); color: #fff; }
.nchat__wa svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .nchat-launcher { right: .9rem; bottom: .9rem; height: 54px; padding: 0 .45rem; }
  .nchat-launcher__label { display: none; }
  .nchat-launcher__icon { width: 44px; height: 44px; background: transparent; }
  .nchat { right: 0; left: 0; bottom: 0; width: 100%; height: min(86svh, 640px); border-radius: 22px 22px 0 0; }
  .inq-toast { bottom: 5.2rem; }
}

/* --- 29.6 Service-Seite ---------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.svc {
  position: relative; padding: 1.7rem 1.6rem 1.6rem; border-radius: 20px; scroll-margin-top: calc(var(--header-h) + 1.5rem);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.1);
  transition: border-color .25s, transform .25s var(--ease-out);
}
.svc:hover, .svc:target { border-color: rgba(60,152,247,.6); transform: translateY(-3px); }
.svc:target { box-shadow: 0 0 0 1px var(--blue), 0 20px 50px -20px rgba(60,152,247,.6); }
.svc__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.1rem;
  background: rgba(60,152,247,.14); color: #8cc4ff; border: 1px solid rgba(60,152,247,.4); }
.svc__icon svg { width: 26px; height: 26px; }
.svc h2 { font-size: 1.4rem; color: #fff; margin: 0 0 .45rem; }
.svc__lead { color: #d7e1ee; margin: 0 0 1rem; font-size: 1rem; }
.svc .ticks li { color: #c9d4e2; font-size: .95rem; }
.svc__link { display: inline-flex; margin-top: 1.1rem; font-weight: 700; }
.svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.svc-cta h3 { font-size: var(--step-1); margin: 0 0 .35rem; }
.page-hero h1 em { font-style: normal; background: linear-gradient(92deg, #fff, #9fd0ff 45%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }
.inq { z-index: 1200; } .inq-toast { z-index: 1210; }
.nchat { z-index: 1100; } .nchat-launcher { z-index: 1090; }
.inq-toast { visibility: hidden; opacity: 0; transition: transform .35s var(--ease-out), opacity .25s, visibility 0s .35s; }
.inq-toast.is-on { visibility: visible; opacity: 1; transition: transform .35s var(--ease-out), opacity .25s; }
@media (max-width: 760px) {
  .inq-btn { position: relative; width: 40px; padding: 0; justify-content: center; }
  .inq-btn svg { width: 20px; height: 20px; }
  .inq-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; font-size: .66rem; }
  .inq-count[data-count='0'] { display: none; }
  .lang { padding: 2px; }
  .lang button { padding: .25rem .38rem; font-size: .68rem; min-height: 30px; }
  .site-header .wrap { gap: .35rem; }
  .header-actions { gap: .35rem; }
}
@media (max-width: 380px) { .brand img, .site-header.is-stuck .brand img { height: 30px; } }
@media (max-width: 380px) {
  .brand { padding: 0 calc(var(--slant) + .55rem) 0 .7rem; }
  .site-header .wrap, .header-actions { gap: .25rem; }
  .lang button { padding: .25rem .3rem; }
  .inq-btn, .burger { width: 38px; height: 38px; }
}
@media (min-width: 1081px) and (max-width: 1460px) {
  .header-actions .btn { display: none; }
  .inq-btn__label { display: inline; }
  .inq-btn { padding: 0 .85rem 0 .7rem; }
}
@media (min-width: 1461px) {
  .nav-link, .nav-link:hover, .nav-link[aria-expanded='true'], .nav-link.is-active { padding: .65rem .7rem; }
  .nav-link::after { left: .7rem; right: .7rem; }
  .site-header .wrap { gap: .9rem; }
}

/* ========================= 30 · ANWENDUNGEN: PROBLEM → LÖSUNG → NACHWEIS == */
.ucd {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 0;
  margin-top: 1.1rem;
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, #141c29, #0f1520);
  border: 1px solid rgba(255,255,255,.1);
}
.ucd::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue) 25%, #8cc4ff 60%, transparent);
  box-shadow: 0 0 10px rgba(60,152,247,.7);
}
.ucd__col { padding: 1.6rem 1.6rem 1.5rem; }
.ucd__col + .ucd__col { border-left: 1px solid rgba(255,255,255,.08); }
.ucd__col--sol { background: rgba(60,152,247,.06); }
.ucd__h {
  display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem;
  font-size: 1.12rem; font-weight: 700; color: #fff;
}
.ucd__h span {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  padding: .2rem .45rem; border-radius: 6px;
  color: #8cc4ff; border: 1px solid rgba(60,152,247,.5);
}
.ucd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ucd li { position: relative; padding-left: 1.2rem; color: #d7e1ee; font-size: .97rem; line-height: 1.55; }
.ucd li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; }
.ucd__col--pain li::before { background: #f59e8b; }
.ucd__col--sol li::before { background: var(--blue); box-shadow: 0 0 6px var(--blue); }
.ucd__col--proof li::before { background: #34d399; }
.ucd__col--proof li { color: #eef3f8; font-weight: 500; }
.ucd__soon {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
  padding: 1rem 1.6rem; border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025); color: #c9d4e2; font-size: .92rem;
}
.ucd__badge {
  padding: .25rem .65rem; border-radius: 99px; font-size: .74rem; font-weight: 700;
  color: #cfe3ff; background: rgba(60,152,247,.18); border: 1px solid rgba(60,152,247,.55);
}
.ucd__soon > span:not(.ucd__badge) { position: relative; padding-left: .9rem; }
.ucd__soon > span:not(.ucd__badge)::before { content: '›'; position: absolute; left: 0; color: #8cc4ff; }
@media (max-width: 980px) {
  .ucd { grid-template-columns: 1fr; }
  .ucd__col + .ucd__col { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); }
  .ucd__col { padding: 1.3rem 1.25rem; }
  .ucd__soon { padding: 1rem 1.25rem; }
}
.facts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; max-width: none; }
@media (max-width: 760px) { .facts { grid-auto-flow: row; grid-template-columns: repeat(3, auto); grid-auto-columns: auto; justify-content: start; } .facts dd { font-size: 1.45rem; } }
.ucd__h span { all: unset; }
.ucd__n {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  padding: .2rem .45rem; border-radius: 6px; color: #8cc4ff; border: 1px solid rgba(60,152,247,.5);
}
@media (max-width: 760px) {
  .facts { display: flex; flex-wrap: wrap; row-gap: .9rem; }
  .facts > div { max-width: 50%; }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts dt { white-space: normal; }
}

/* ========================= 31 · HERSTELLERPARTNER, REFERENZEN ============ */
/* --- 31.1 Partnerband Startseite --- */
.partner { position: relative; overflow: hidden; }
.partner::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 80% 0%, rgba(60,152,247,.16), transparent 70%),
              radial-gradient(40% 40% at 0% 100%, rgba(60,152,247,.10), transparent 70%);
}
.partner__head { max-width: 880px; margin-bottom: 2.2rem; }
.partner__head h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.03em; }
html[lang='zh'] .partner__head h2 { line-height: 1.2; letter-spacing: 0; }
.partner__head h2 em { font-style: normal; background: linear-gradient(92deg, #fff, #9fd0ff 45%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.partner__ranks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.prank {
  position: relative; padding: 1.6rem 1.6rem 1.5rem; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, rgba(60,152,247,.20), rgba(60,152,247,.04) 60%);
  border: 1px solid rgba(60,152,247,.45);
}
.prank:first-child { background: linear-gradient(160deg, rgba(60,152,247,.38), rgba(60,152,247,.08) 65%); border-color: rgba(140,196,255,.8); box-shadow: 0 20px 60px -20px rgba(60,152,247,.7); }
.prank b {
  display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.2rem, 2rem + 4vw, 5.6rem);
  line-height: .9; letter-spacing: -.05em;
  background: linear-gradient(180deg, #fff 20%, #8cc4ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.prank span { display: block; margin-top: .7rem; color: #eaf2fb; font-size: 1.08rem; font-weight: 600; line-height: 1.35; }
.partner__src { margin: .8rem 0 0; font-size: .78rem; color: #8797ab; }
.partner__nums { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin: 2.2rem 0 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.partner__nums > div { padding: 1.3rem 1rem; display: flex; flex-direction: column-reverse; }
.partner__nums > div + div { border-left: 1px solid rgba(255,255,255,.1); }
.partner__nums dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.7rem); letter-spacing: -.03em; color: #fff; }
.partner__nums dt { margin-top: .35rem; color: #b9c7d8; font-size: .86rem; }
.partner__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; margin-top: 1.6rem; }
.partner__firsts, .partner__std { padding: 1.6rem; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.partner__firsts h3, .partner__std h3 { font-size: 1.2rem; margin: 0 0 1.1rem; color: #fff; }
.partner__firsts ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.partner__firsts li { display: grid; grid-template-columns: 64px 1fr; gap: .9rem; align-items: baseline; color: #e2eaf4; font-size: 1rem; line-height: 1.45; }
.partner__firsts time { font-family: var(--font-mono); font-weight: 700; color: #8cc4ff; font-size: .95rem; }
.partner__std ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .7rem; }
.partner__std li { position: relative; padding-left: 1.2rem; color: #d7e1ee; font-size: .97rem; }
.partner__std li::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 6px var(--blue); }
@media (max-width: 980px) {
  .partner__ranks { grid-template-columns: 1fr; }
  .partner__nums { grid-template-columns: repeat(3, 1fr); }
  .partner__nums > div:nth-child(4) { border-left: 0; }
  .partner__nums > div:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.1); }
  .partner__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .partner__nums { grid-template-columns: repeat(2, 1fr); } .partner__nums > div:nth-child(odd) { border-left: 0; } .partner__nums > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); } .partner__nums > div:nth-child(4) { border-left: 1px solid rgba(255,255,255,.1); } }

/* --- 31.2 Teaser --- */
.case-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ctile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 380px; padding: 1.4rem; border-radius: 20px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; border: 1px solid rgba(255,255,255,.12); }
.ctile picture, .ctile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease-out); }
.ctile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(7,9,13,.92)); }
.ctile:hover img { transform: scale(1.05); }
.ctile__place { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #8cc4ff; }
html[lang='zh'] .ctile__place { font-family: inherit; letter-spacing: .04em; font-size: .85rem; }
.ctile strong { font-size: 1.3rem; line-height: 1.25; margin: .35rem 0 .7rem; }
.ctile__kpi { color: #dbe5f1; font-size: .9rem; }
.ctile__kpi b { font-family: var(--font-display); font-size: 1.6rem; color: #fff; margin-right: .3rem; }
@media (max-width: 900px) { .case-teaser { grid-template-columns: 1fr; } .ctile { min-height: 300px; } }

/* --- 31.3 Referenzen-Seite --- */
.page-hero h1 em { font-style: normal; background: linear-gradient(92deg, #fff, #9fd0ff 45%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case-stats { display: flex; gap: 2.4rem; margin: 1.6rem 0 0; flex-wrap: wrap; }
.case-stats > div { display: flex; flex-direction: column-reverse; }
.case-stats dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -.03em; color: #fff; }
.case-stats dt { color: #c3d0df; font-size: .88rem; }
.case-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; position: sticky; top: calc(var(--header-h) + 10px); z-index: 20; padding: .6rem; border-radius: 16px; background: rgba(13,19,29,.85); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.08); }
.case-filter .chip { cursor: pointer; font-size: .9rem; padding: .5rem .9rem; color: #dbe5f1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; }
.case-filter .chip.is-on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 12px rgba(60,152,247,.6); }
.case-group { margin-top: 2.4rem; }
.case-group > .kicker { margin-bottom: 1.2rem; }
.case {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 1.2rem;
  border-radius: 22px; overflow: hidden; scroll-margin-top: calc(var(--header-h) + 90px);
  background: linear-gradient(180deg, #141c29, #0f1520); border: 1px solid rgba(255,255,255,.1);
}
.case--big { grid-template-columns: 1.15fr 1fr; }
.case--flip .case__media { order: 2; }
.case:target { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 30px 70px -30px rgba(60,152,247,.7); }
.case__media { position: relative; min-height: 320px; }
.case__media picture, .case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case__ind { position: absolute; top: 1rem; left: 1rem; padding: .3rem .7rem; border-radius: 99px; background: rgba(7,9,13,.7); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(6px); color: #fff; font-size: .78rem; font-weight: 600; }
.case__body { padding: 1.9rem 2rem; display: flex; flex-direction: column; }
.case__place { margin: 0; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #8cc4ff; }
html[lang='zh'] .case__place { font-family: inherit; letter-spacing: .04em; font-size: .88rem; }
.case__client { margin: .3rem 0 .6rem; color: #c9d4e2; font-weight: 600; }
.case h2 { font-size: clamp(1.35rem, 1.05rem + .9vw, 1.9rem); line-height: 1.2; color: #fff; margin: 0 0 1.2rem; }
.case__kpis { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 1.3rem; }
.case__kpis > div { display: flex; flex-direction: column-reverse; padding: 0 1.2rem 0 0; margin-right: 1.2rem; border-right: 1px solid rgba(255,255,255,.14); }
.case__kpis > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.case__kpis dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.1vw, 2.3rem); letter-spacing: -.03em; white-space: nowrap;
  background: linear-gradient(180deg, #fff 25%, #8cc4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.case__kpis dt { margin-top: .25rem; font-size: .8rem; color: #b9c7d8; max-width: 16ch; }
.case__text p { margin: 0 0 .8rem; color: #d7e1ee; font-size: .97rem; line-height: 1.6; }
.case__text b { display: inline-block; margin-right: .5rem; padding: .05rem .45rem; border-radius: 5px; font-size: .74rem; vertical-align: .1em; color: #8cc4ff; border: 1px solid rgba(60,152,247,.5); }
.case__prod { margin: auto 0 0; padding-top: .8rem; display: flex; align-items: center; gap: .7rem; font-size: .85rem; color: #93a3b8; }
.cgal { margin-bottom: 2rem; }
.cgal h3 { font-size: 1.15rem; color: #fff; margin: 0 0 .9rem; }
.cgal h3 small { font-size: .78rem; color: #8cc4ff; margin-left: .4rem; }
.cgal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.cgal figure { margin: 0; position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid rgba(255,255,255,.08); }
.cgal img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.cgal figure:hover img { transform: scale(1.05); }
.cgal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .6rem; background: linear-gradient(180deg, transparent, rgba(7,9,13,.88)); color: #fff; font-size: .86rem; font-weight: 600; }
.case-note { margin: 2rem 0 0; padding: 1rem 1.2rem; border-left: 2px solid var(--blue); background: rgba(60,152,247,.06); color: #b9c7d8; font-size: .86rem; line-height: 1.55; border-radius: 0 10px 10px 0; }
@media (max-width: 900px) {
  .case, .case--big { grid-template-columns: 1fr; }
  .case--flip .case__media { order: 0; }
  .case__media { min-height: 0; aspect-ratio: 16 / 10; }
  .case__body { padding: 1.4rem 1.25rem; }
  .cgal__grid { grid-template-columns: repeat(2, 1fr); }
  .case-filter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .case-filter .chip { flex: none; }
}

/* --- 31.4 Produktkarte mit Foto statt Freisteller --- */
.pcard--photo .pcard__media img { padding: 0 !important; object-fit: cover; }
.pcard--photo .pcard__media::after { display: none; }

/* --- 31.5 Navigation mit sieben Punkten --- */
@media (min-width: 1081px) and (max-width: 1500px) {
  .nav-link, .nav-link:hover, .nav-link[aria-expanded='true'], .nav-link.is-active { padding: .6rem .45rem; font-size: .92rem; }
  .nav-link::after { left: .45rem; right: .45rem; }
  .nav-link .caret { display: none; }
  .site-header .wrap { gap: .5rem; }
}
@media (min-width: 1081px) and (max-width: 1240px) {
  .inq-btn__label { display: none; }
  .inq-btn { padding: 0 .55rem; }
  .brand { padding-right: calc(var(--slant) + .8rem); padding-left: .9rem; }
  .brand img, .site-header.is-stuck .brand img { height: 38px; }
}
@media (min-width: 1081px) and (max-width: 1999px) { .header-actions .btn { display: none; } }

/* ========================= 32 · LÄNDER-BADGES (v16) ======================= */
.geo {
  --cc: 60,152,247;
  display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .7rem; padding: .38rem .9rem .38rem .4rem;
  border-radius: 99px; width: fit-content; max-width: 100%;
  background: linear-gradient(90deg, rgba(var(--cc), .30), rgba(var(--cc), .10));
  border: 1px solid rgba(var(--cc), .55);
  box-shadow: 0 6px 22px -10px rgba(var(--cc), .8), inset 0 1px 0 rgba(255,255,255,.12);
}
.geo__flag { flex: none; width: 34px; height: 23px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85), 0 2px 6px rgba(0,0,0,.4); display: grid; place-items: center; }
.geo__flag svg { width: 100%; height: 100%; display: block; }
.geo__flag--globe { background: rgba(var(--cc), .9); color: #fff; }
.geo__flag--globe svg { width: 17px; height: 17px; }
.geo__country { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: .02em; color: #fff; text-transform: uppercase; line-height: 1; }
html[lang='zh'] .geo__country { text-transform: none; letter-spacing: .06em; font-size: 1.15rem; }
.geo__city { position: relative; padding-left: .7rem; color: #e2eaf4; font-size: .9rem; font-weight: 500; line-height: 1.2; }
.geo__city::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 1em; transform: translateY(-50%); background: rgba(255,255,255,.4); }
.geo--sm { padding: .28rem .75rem .28rem .32rem; gap: .5rem; margin: 0 0 .5rem; backdrop-filter: blur(8px); background: linear-gradient(90deg, rgba(var(--cc), .55), rgba(7,9,13,.5)); }
.geo--sm .geo__flag { width: 28px; height: 19px; }
.geo--sm .geo__country { font-size: .95rem; }
.geo--sm .geo__city { font-size: .8rem; }

.geo-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin: 0 0 1.8rem; }
.geo-card {
  --cc: 60,152,247;
  position: relative; padding: 1rem 1.1rem 1.05rem; border-radius: 16px; overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--cc), .22), rgba(var(--cc), .04) 70%), #111925;
  border: 1px solid rgba(var(--cc), .45);
}
.geo-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgb(var(--cc)); }
.geo-card__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.geo-card__head b { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
html[lang='zh'] .geo-card__head b { text-transform: none; letter-spacing: .05em; }
.geo-card__n { margin-left: auto; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 99px; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(var(--cc), .65); }
.geo-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.geo-card a { color: #d7e1ee; font-size: .88rem; text-decoration: none; line-height: 1.35; display: inline-block; }
.geo-card a::before { content: '→ '; color: rgb(var(--cc)); filter: brightness(1.5); }
.geo-card a:hover { color: #fff; }
@media (max-width: 560px) { .geo-index { grid-template-columns: 1fr 1fr; } .geo-card { padding: .85rem; } .geo__country { font-size: 1rem; } }
.geo-card__head b { white-space: nowrap; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .geo-card__head b { font-size: .92rem; } .geo-card .geo__flag { width: 28px; height: 19px; } }
.geo-card__head b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.1; font-size: .98rem; }
.geo-card__head { align-items: center; min-height: 2.3rem; }
@media (max-width: 560px) { .geo-index { grid-template-columns: 1fr; } }

/* 32.1 v17: Länder-Badge einheitlich in Hellblau, Gruppentitel größer */
.geo, .geo--sm {
  background: linear-gradient(90deg, rgba(60,152,247,.20), rgba(60,152,247,.06));
  border: 1px solid rgba(140,196,255,.75);
  box-shadow: 0 0 14px -4px rgba(60,152,247,.55), inset 0 1px 0 rgba(255,255,255,.10);
}
.geo--sm { background: linear-gradient(90deg, rgba(20,40,70,.75), rgba(7,9,13,.45)); }
.geo__flag--globe { background: rgba(60,152,247,.9); }
.case-group > .kicker { font-size: 1rem; letter-spacing: .22em; color: #8cc4ff; margin-bottom: 1.4rem; }
.case-group > .kicker::before { width: 2.4rem; }
html[lang='zh'] .case-group > .kicker { font-size: 1.1rem; letter-spacing: .12em; }
.case-group > .kicker { font-size: 1.2rem !important; font-weight: 600; } html[lang='zh'] .case-group > .kicker { font-size: 1.25rem !important; }

/* v19: mehr Luft zwischen den Referenzen */
.case { margin-bottom: clamp(2.6rem, 2rem + 2.5vw, 4.5rem); }
.case-group + .case-group { margin-top: clamp(4rem, 3rem + 3vw, 6.5rem); }
@media (max-width: 900px) { .case { margin-bottom: 2.4rem; } }

/* ========================= 33 · HEIMROBOTER (v22) ======================== */
.price--ask { font-size: 1.05rem !important; color: #8cc4ff !important; letter-spacing: 0 !important; }
.vtable .upd { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .76rem; color: #ffd28a; border: 1px solid rgba(255,190,90,.5); background: rgba(255,170,60,.08); white-space: nowrap; }
.hm-hero .page-hero__media img { object-position: center 40%; }
.hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
@media (max-width: 760px) { .hm-grid { grid-template-columns: 1fr; } }
.hm-cmp { max-width: 980px; }
.hm-cmp thead a { color: #fff; text-decoration: none; font-family: var(--font-display); font-size: 1.15rem; }
.hm-cmp thead a:hover { color: #8cc4ff; }
.hm-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 1rem + 1vw, 2rem); }
.hm { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #141c29, #0f1520); border: 1px solid rgba(255,255,255,.1); }
.hm--wide { grid-column: span 3; flex-direction: row; }
.hm--wide .hm__media { flex: 1.4; aspect-ratio: auto; min-height: 380px; }
.hm--wide .hm__body { flex: 1; align-self: center; padding: 2rem 2.2rem; }
.hm--wide h3 { font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); }
.hm__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.hm__media picture, .hm__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.hm:hover .hm__media img { transform: scale(1.04); }
.hm__models { position: absolute; left: .8rem; top: .8rem; padding: .28rem .7rem; border-radius: 99px; font-size: .78rem; font-weight: 700; color: #fff; background: rgba(10,16,26,.72); border: 1px solid rgba(140,196,255,.7); backdrop-filter: blur(6px); }
.hm__ota { position: absolute; right: .8rem; top: .8rem; padding: .28rem .7rem; border-radius: 99px; font-size: .74rem; font-weight: 600; color: #ffd28a; background: rgba(30,20,6,.75); border: 1px solid rgba(255,190,90,.6); }
.hm__body { padding: 1.3rem 1.4rem 1.5rem; }
.hm h3 { font-size: 1.2rem; color: #fff; margin: 0 0 .6rem; line-height: 1.3; }
.hm p { margin: 0; color: #c9d4e2; font-size: .95rem; line-height: 1.6; }
@media (max-width: 1000px) { .hm-list { grid-template-columns: 1fr 1fr; } .hm--wide { grid-column: span 2; } }
@media (max-width: 680px) { .hm-list { grid-template-columns: 1fr; } .hm--wide { grid-column: auto; flex-direction: column; } .hm--wide .hm__media { min-height: 0; aspect-ratio: 16 / 10; } .hm--wide .hm__body { padding: 1.3rem 1.4rem 1.5rem; } }
.hm-limits { display: grid; grid-template-columns: 1fr 1.3fr; gap: 2rem; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border-radius: 22px; background: linear-gradient(150deg, rgba(255,170,60,.10), rgba(255,170,60,.02) 60%), #121923; border: 1px solid rgba(255,190,90,.35); }
.hm-limits h2 { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); margin: .3rem 0 .8rem; }
.hm-limits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.hm-limits li { position: relative; padding-left: 1.6rem; color: #e2eaf4; line-height: 1.55; }
.hm-limits li::before { content: '!'; position: absolute; left: 0; top: .1rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #1a1206; background: #ffbe5a; }
@media (max-width: 860px) { .hm-limits { grid-template-columns: 1fr; } }
.vtable-wrap:has(.hm-cmp) { max-width: 980px; }

/* 33.1 v23: Heimroboter-Hero als Bild-Text-Split, Bild unverdeckt */
.hm-hero { padding: calc(var(--header-h) + 2.5rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem); background: radial-gradient(70% 60% at 85% 30%, rgba(60,152,247,.14), transparent 70%); }
.hm-hero__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: clamp(1.6rem, 1rem + 3vw, 4rem); align-items: center; }
.hm-hero__text h1 { max-width: 12ch; }
.hm-hero__text .t-lead { max-width: 46ch; margin-top: 1.1rem; }
.hm-hero__img { margin: 0; position: relative; aspect-ratio: 2 / 1; border-radius: 26px; overflow: hidden; border: 1px solid rgba(140,196,255,.35); box-shadow: 0 30px 80px -30px rgba(60,152,247,.55), 0 0 0 6px rgba(255,255,255,.03); }
.hm-hero__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 980px) { .hm-hero__grid { grid-template-columns: 1fr; } .hm-hero__img { order: -1; } .hm-hero__text h1 { max-width: none; } }
.hm-hero h1 em { font-style: normal; background: linear-gradient(92deg, #fff, #9fd0ff 45%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ========================= 34 · REINIGUNGSROBOTER (v24) =================== */
.cl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; }
.cl-facts > div { display: flex; flex-direction: column-reverse; padding: 1.4rem 1.4rem 1.3rem; border-radius: 18px; background: linear-gradient(160deg, rgba(60,152,247,.18), rgba(60,152,247,.03) 65%); border: 1px solid rgba(140,196,255,.35); }
.cl-facts dd { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); letter-spacing: -.03em; background: linear-gradient(180deg, #fff 25%, #8cc4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-facts dt { margin-top: .4rem; color: #c3d0df; font-size: .86rem; line-height: 1.4; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.cs { display: flex; flex-direction: column; padding: 1.5rem; border-radius: 20px; background: linear-gradient(180deg, #141c29, #0f1520); border: 1px solid rgba(255,255,255,.1); }
.cs__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #8cc4ff; background: rgba(60,152,247,.14); border: 1px solid rgba(140,196,255,.4); margin-bottom: 1rem; }
.cs__ic svg { width: 26px; height: 26px; }
.cs h3 { font-size: 1.2rem; color: #fff; margin: 0 0 .8rem; }
.cs p { margin: 0 0 .7rem; color: #c9d4e2; font-size: .93rem; line-height: 1.6; }
.cs p b { display: block; margin-bottom: .2rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #8cc4ff; }
html[lang='zh'] .cs p b { letter-spacing: .02em; font-size: .8rem; }
.cs__k { margin-top: auto; padding-top: .6rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.cs__k span { padding: .3rem .7rem; border-radius: 99px; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(60,152,247,.16); border: 1px solid rgba(140,196,255,.45); }
@media (max-width: 1000px) { .cs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cs-grid, .cl-facts { grid-template-columns: 1fr; } }
.prank small { display: block; margin-top: .6rem; color: #b9c7d8; font-size: .84rem; line-height: 1.5; font-weight: 400; }
.cs--img { padding-top: 0; overflow: hidden; }
.cs__media { margin: 0 -1.5rem 1.2rem; aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.cs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.cs--img:hover .cs__media img { transform: scale(1.04); }
.cs--img .cs__ic { margin-top: -2.9rem; position: relative; background: #121a27; }

/* ========================= 35 · LIGHTBOX (v25) =========================== */
.gallery__stage img, .scene-grid img, .cs__media img, .hm__media img, .hm-hero__img img, .case__media img, .cgal img, .ucd img, .scenario__media img { cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 1400; display: grid; place-items: center; background: rgba(4,7,12,.94); backdrop-filter: blur(6px); padding: 3.5rem 4.5rem; }
.lb[hidden] { display: none; }
html.lb-open { overflow: hidden; }
.lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.lb__fig img { max-width: min(1800px, 100%); max-height: calc(100vh - 9rem); object-fit: contain; border-radius: 12px; background: radial-gradient(circle at 50% 40%, #1b2537, #0b111a); box-shadow: 0 30px 80px rgba(0,0,0,.6); cursor: default; }
.lb__fig figcaption { color: #c9d4e2; font-size: .9rem; text-align: center; }
.lb__x { position: absolute; top: 1rem; right: 1.2rem; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(140,196,255,.5); background: rgba(60,152,247,.18); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.lb__prev { left: 1rem; } .lb__next { right: 1rem; }
.lb--single .lb__nav { display: none; }
.lb__cnt { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: #93a3b8; font-size: .85rem; font-family: var(--font-mono); }
@media (max-width: 640px) { .lb { padding: 3.5rem .6rem; } .lb__nav { width: 42px; height: 42px; top: auto; bottom: 1rem; transform: none; } .lb__fig img { max-height: calc(100vh - 10rem); } }

/* ========================= 36 · STARTSEITE v27 (Audit V1.0, Batch 1) ===== */
/* Hero: Video heller, nur lokaler Verlauf hinter dem Text */
.hero--v27 .hero__media::after {
  background:
    radial-gradient(ellipse 62% 70% at 12% 78%, rgba(7,9,13,.72) 0%, rgba(7,9,13,.38) 45%, transparent 75%),
    linear-gradient(180deg, transparent 78%, var(--ink-900) 100%);
}
.hero--v27 h1.t-hero { font-size: clamp(2.5rem, 1.3rem + 4vw, 5rem); }
html[lang='zh'] .hero--v27 h1.t-hero { font-size: clamp(2.2rem, 1.1rem + 3.4vw, 4.3rem); }
.hero--v27 .t-lead { max-width: 48ch; color: #e6ecf3; text-shadow: 0 1px 14px rgba(0,0,0,.55); }
@media (max-width: 760px) {
  .hero--v27 .hero__media::after {
    background: linear-gradient(180deg, rgba(7,9,13,.25) 0%, rgba(7,9,13,.15) 30%, rgba(7,9,13,.78) 62%, var(--ink-900) 100%);
  }
}

/* Helle Abschnitte */
.sec-light { background: #f4f6f9; color: #121822; --fg: #121822; --fg-muted: #4d5868; --fg-dim: #6a7586; --hair: #e1e6ee; --hair-strong: #c9d1dd; }
.sec-light--alt { background: #fff; }
.sec-light .kicker { color: var(--blue-600); }
.sec-light h2, .sec-light h3 { color: #0e131b; }
.sec-light .t-lead { color: #4d5868; }
.sec-light .btn--ghost { --btn-fg: #121822; --btn-bd: #c3ccd8; }
.sec-light .btn--ghost:hover { --btn-fg: var(--blue-600); --btn-bd: var(--blue-600); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .kicker { justify-content: center; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); max-width: none; flex-wrap: wrap; }
.section-head--split > div { max-width: 56ch; }

/* Kategorien: 5 gleichwertige Karten, ganze Karte klickbar */
.hcat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.hcat {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #e1e6ee; border-radius: 18px; overflow: hidden;
  transition: transform .3s var(--ease-out), box-shadow .3s, border-color .25s;
}
.hcat:hover { transform: translateY(-4px); border-color: rgba(31,122,217,.45); box-shadow: 0 18px 40px -22px rgba(20,40,70,.35); }
.hcat__art { position: relative; aspect-ratio: 5 / 4; display: block; overflow: hidden; }
.hcat__art img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 1rem; box-sizing: border-box; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(40,55,80,.3)); transition: transform .45s var(--ease-out); }
.hcat:hover .hcat__art img { transform: scale(1.05); }
.hcat__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.15rem; }
.hcat h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: .35rem; }
.hcat p { font-size: .88rem; line-height: 1.45; color: #4d5868; }
.hcat__go { margin-top: auto; padding-top: .9rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; color: var(--blue-600); }
.hcat__go svg { width: 1em; height: 1em; transition: transform .25s; }
.hcat:hover .hcat__go svg { transform: translateX(3px); }
@media (max-width: 1100px) { .hcat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .hcat-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .hcat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hcat:last-child:nth-child(odd) .hcat__art { aspect-ratio: 16 / 7; }
  .hcat__body { padding: .8rem .85rem 1rem; }
  .hcat h3 { font-size: 1rem; }
  .hcat p { font-size: .8rem; }
}

/* Top-Modelle auf hellem Grund */
.sec-light .pcard { background: #fff; border-color: #e1e6ee; }
.sec-light .pcard:hover { border-color: rgba(31,122,217,.45); box-shadow: 0 18px 40px -22px rgba(20,40,70,.35); }
.sec-light .pcard__name, .sec-light .pcard__name a { color: #0e131b; }
.sec-light .pcard__tag { color: #4d5868; }
.sec-light .chip { color: #2a3443; background: #f1f4f8; border-color: #dfe5ed; }
.sec-light .price--ask { color: var(--blue-600) !important; }
.hcard__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .55rem; }
.hcard__tags span { font-size: .7rem; font-weight: 600; letter-spacing: .02em; padding: .2rem .55rem; border-radius: 999px; color: var(--blue-700); background: rgba(60,152,247,.1); }

/* Warum NIC: drei Säulen + kompakte Rangzeile */
.why3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.why3__item { background: #fff; border: 1px solid #e1e6ee; border-radius: 18px; padding: 1.5rem 1.4rem; }
.why3__ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(60,152,247,.12); color: var(--blue-600); margin-bottom: 1rem; }
.why3__ic svg { width: 24px; height: 24px; }
.why3 h3 { font-size: 1.2rem; margin-bottom: .45rem; }
.why3 p { color: #4d5868; font-size: .95rem; line-height: 1.5; }
.rankline { margin-top: 1.5rem; padding: 1rem 1.3rem; border-radius: 14px; background: #fff; border: 1px solid #e1e6ee; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; }
.rankline__lead { font-weight: 600; font-size: .9rem; color: #121822; }
.rankline ul { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: 0; padding: 0; font-size: .9rem; color: #2a3443; }
.rankline b { font-family: var(--font-display); color: var(--blue-600); margin-right: .2rem; }
.rankline__src { flex-basis: 100%; font-size: .74rem; color: #6a7586; }
@media (max-width: 860px) { .why3 { grid-template-columns: 1fr; } .rankline ul { flex-direction: column; } }


.section-head--center { max-width: 760px; }
.sec-light .btn--inq { --btn-fg: #121822; --btn-bd: #c3ccd8; color: #121822; border-color: #c3ccd8; background: #fff; }
.sec-light .btn--inq:hover { color: var(--blue-600); border-color: var(--blue-600); }
#referenzen p.mt { display: flex; justify-content: center; }
/* v28 · Startseite: Kicker größer, weniger Luft über den Kategorien */
.home .kicker { font-size: .9rem; font-weight: 600; letter-spacing: .14em; margin-bottom: 1rem; }
html[lang='zh'] .home .kicker { font-size: 1rem; letter-spacing: .12em; }
.home .kicker::before { width: 32px; height: 2px; }
.home #kategorien { padding-top: calc(var(--section) * .55); }
/* v30 · Startseite: beide Filme gleich — ~850px breit; rechts/unten die
   ursprüngliche blaue Winkellinie, oben/links eine feine helle Gegenlinie */
.home .film { max-width: 850px; }
.home .film .film__stage::before {
  content: ''; position: absolute; z-index: -1;
  inset: 18px -16px -16px 18px;
  border: 0; border-right: 3px solid var(--blue); border-bottom: 3px solid var(--blue);
  border-radius: 0 0 24px 0;
  background: none;
  filter: drop-shadow(0 0 10px rgba(60,152,247,.75));
  -webkit-mask-image: linear-gradient(135deg, transparent 38%, #000 78%);
          mask-image: linear-gradient(135deg, transparent 38%, #000 78%);
}
.home .film .film__stage::after {
  content: ''; position: absolute; z-index: -1;
  inset: -16px 18px 18px -16px; left: -16px; right: 18px; bottom: 18px; height: auto;
  border-top: 1px solid rgba(190, 222, 255, .55); border-left: 1px solid rgba(190, 222, 255, .55);
  border-radius: 24px 0 0 0;
  background: none; box-shadow: none;
  -webkit-mask-image: linear-gradient(135deg, #000 22%, transparent 62%);
          mask-image: linear-gradient(135deg, #000 22%, transparent 62%);
}
@media (max-width: 760px) {
  .home .film .film__stage::before { inset: 12px -9px -9px 12px; border-width: 0 2px 2px 0; border-radius: 0 0 16px 0; }
  .home .film .film__stage::after { inset: -9px 12px 12px -9px; border-radius: 16px 0 0 0; }
}

/* ========================= 37 · PRODUKTÜBERSICHT v31 (Review V1.0) ======== */
.cat-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.cat-hero h1 { font-size: clamp(2.3rem, 1.6rem + 2vw, 3rem); margin-top: .2rem; }
.cat-hero .t-lead { max-width: 60ch; margin-top: .7rem; }
.cat-hero .crumbs { opacity: .6; font-size: .8rem; }
.catalog .kicker { font-size: .85rem; font-weight: 600; letter-spacing: .14em; margin-top: 1.2rem; }
.cat-list { padding-top: clamp(2rem, 4vw, 3rem); }

/* Filterleiste */
.cfilter { margin-bottom: 1.6rem; }
.cfilter__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cfilter__count { font-size: .95rem; color: #64748B; }
.cfilter__count b { color: #111827; font-weight: 600; }
.cfilter__tools { display: flex; gap: .6rem; flex-wrap: wrap; }
.cfilter__search { position: relative; display: flex; align-items: center; }
.cfilter__search svg { position: absolute; left: .8rem; width: 16px; height: 16px; color: #64748B; pointer-events: none; }
.cfilter input, .cfilter select {
  font: inherit; font-size: .9rem; color: #111827; background: #fff;
  border: 1px solid #dfe5ed; border-radius: 10px; height: 42px; padding: 0 .9rem;
}
.cfilter input { padding-left: 2.3rem; width: 240px; }
.cfilter select { padding-right: 2rem; cursor: pointer; }
.cfilter input:focus, .cfilter select:focus { outline: 2px solid rgba(50,139,232,.35); border-color: #328BE8; }
.cfilter__cats { display: flex; flex-wrap: wrap; gap: .5rem; }
.catalog .filter-btn {
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
  padding: .55rem 1.05rem; border-radius: 999px; border: 1px solid #dfe5ed; background: #fff; color: #334155;
  transition: background .18s, color .18s, border-color .18s;
}
.catalog .filter-btn:hover { border-color: #328BE8; color: #328BE8; }
.catalog .filter-btn[aria-pressed='true'] { background: #111827; border-color: #111827; color: #fff; }

/* Karten */
.ccard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ccard {
  display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e9f0; border-radius: 16px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ccard[hidden] { display: none; }
.ccard:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -20px rgba(17,24,39,.28); border-color: #d3dbe6; }
.ccard__media { position: relative; display: block; aspect-ratio: 4 / 3; background: #F2F4F7; overflow: hidden; }
.ccard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 7% 8%; box-sizing: border-box; filter: drop-shadow(0 14px 16px rgba(30,41,59,.18)); transition: transform .3s ease; }
.ccard--photo .ccard__media img { object-fit: cover; padding: 0; filter: none; }
.ccard:hover .ccard__media img { transform: scale(1.03); }
.ccard__badge { position: absolute; top: .9rem; left: .9rem; z-index: 1; font-size: .72rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; background: #fff; color: #328BE8; box-shadow: 0 2px 8px rgba(17,24,39,.08); }
.ccard__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.ccard__type { font-size: .8rem; color: #64748B; margin-bottom: .3rem; }
.ccard__name { font-size: 1.5rem; line-height: 1.2; margin-bottom: .45rem; }
.ccard__name a { color: #111827; text-decoration: none; }
.ccard__name a:hover { color: #328BE8; }
.ccard__desc { font-size: .95rem; line-height: 1.5; color: #475569; min-height: 3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccard__specs { display: flex; gap: .4rem; margin: .9rem 0 0; }
.ccard__specs span { font-size: .8rem; font-weight: 500; color: #334155; background: #F2F4F7; border-radius: 6px; padding: .3rem .6rem; }
.ccard__foot { margin-top: auto; padding-top: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.ccard__go { background: #328BE8; }
.ccard__inq { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .85rem; font-weight: 500; color: #334155; background: none; border: 0; padding: .4rem 0; cursor: pointer; }
.ccard__inq svg { width: 16px; height: 16px; }
.ccard__inq:hover { color: #328BE8; }
.ccard__inq.is-added, .ccard__inq[aria-pressed='true'] { color: #16a34a; }
.ccard__price { font-size: .78rem; color: #64748B; margin-top: .7rem; }
.cf-empty { text-align: center; padding: 3rem 1rem; color: #475569; }
.cf-empty p { margin-bottom: 1rem; }
@media (max-width: 1080px) { .ccard-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 680px) {
  .ccard-grid { grid-template-columns: 1fr; }
  .cfilter__tools, .cfilter__search, .cfilter input { width: 100%; }
  .cfilter select { flex: 1; }
  .cfilter__cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: none; }
  .catalog .filter-btn { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .ccard, .ccard__media img { transition: none; } .ccard:hover { transform: none; } }

/* Auswahlberatung */
.cat-help { margin-top: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; padding: 1.8rem 2rem; background: #fff; border: 1px solid #e5e9f0; border-radius: 16px; }
.cat-help h3 { font-size: 1.35rem; color: #111827; margin-bottom: .35rem; }
.cat-help p { color: #475569; max-width: 56ch; }
/* v31 · Kopfbereich hell, damit Titel und Katalog eine ruhige Fläche bilden */
.catalog .cat-hero { background: #f4f6f9; color: #111827; padding-top: calc(var(--header-h, 96px) + 2.6rem); }
.catalog .cat-hero::before, .catalog .cat-hero::after { display: none; }
.catalog .cat-hero h1 { color: #0e131b; }
.catalog .cat-hero .t-lead { color: #64748B; }
.catalog .cat-hero .crumbs, .catalog .cat-hero .crumbs a { color: #64748B; }
.catalog .cat-hero .kicker { color: #328BE8; }
.catalog .cat-list { padding-top: .4rem; }

/* ========================= 38 · NEUES LOGO (v32) ========================== */
/* Kopfzeile: Logo ist breiter (≈ 5,9 : 1) — flacher setzen, Anfrage-Knopf entfällt */
.brand { padding: 0 calc(var(--slant) + 1.5rem) 0 1.35rem; }
.brand img, .site-header.is-stuck .brand img { height: 40px; width: auto; }
.site-header.is-stuck .brand img { height: 35px; }
@media (min-width: 1081px) and (max-width: 1360px) {
  .brand img, .site-header.is-stuck .brand img { height: 34px; }
}
@media (max-width: 760px) {
  .brand { padding: 0 calc(var(--slant) + .8rem) 0 .85rem; }
  .brand img, .site-header.is-stuck .brand img { height: 25px; }
}
@media (max-width: 380px) { .brand img, .site-header.is-stuck .brand img { height: 21px; } }
.footer-brand img { height: 46px; width: auto; }
@media (max-width: 760px) { .footer-brand img { height: 38px; } }

/* Chatfenster hell, Logo im Kopf */
.nchat { background: #fff; border: 1px solid #e3e8ef; box-shadow: 0 30px 70px -20px rgba(15,23,42,.45); color: #111827; }
.nchat__head { background: linear-gradient(180deg, #f6f8fb, #fff); border-bottom: 1px solid #e8edf3; padding: 1rem 1.1rem; }
.nchat__logo { display: block; height: 28px; width: auto; margin-bottom: .45rem; }
.nchat__who strong { color: #111827; font-size: .95rem; }
.nchat__who small { color: #64748B; }
.nchat__x { color: #475569; }
.nchat__x:hover { background: #eef2f7; }
.nb--op { background: #f1f4f8; color: #1e293b; }
.nb--typing i { background: #94a3b8; }
.nchat__quick button { background: #eef6ff; border-color: #c7defa; color: #1d6fd1; }
.nchat__quick button:hover { background: #dcebff; color: #135cb3; }
.nchat__foot { border-top: 1px solid #e8edf3; }
.nchat__foot textarea { background: #f6f8fb; border-color: #dfe5ed; color: #111827; }
.nchat__alt { color: #64748B; }
.nchat__wa { background: #ecfdf3; border-color: #a7e9c3; color: #15803d; }
.nchat__wa:hover { background: #d9f8e6; color: #166534; }
.nb--mail input { background: #fff; border-color: #dfe5ed; color: #111827; }
@media (min-width: 1600px) { .brand img { height: 44px; } .site-header.is-stuck .brand img { height: 38px; } }

/* ========================= 39 · KOPFZEILE v33: Globus + Balance ============ */
/* Logo-Platte enger, blaue Striche näher am Logo */
.brand { padding-right: calc(var(--slant) + .55rem); }
@media (max-width: 760px) { .brand { padding-right: calc(var(--slant) + .35rem); } }

/* Navigation: im Raum zwischen Logo und Globus mittig, leicht nach rechts */
@media (min-width: 1081px) {
  .site-header nav { margin-left: auto; margin-right: auto; transform: translateX(1.5rem); }
}

/* Sprachwahl hinter einem Globus */
.lang-pick { position: relative; flex: none; }
.lang-globe {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #e6edf6;
  transition: background .18s, color .18s, border-color .18s;
}
.lang-globe svg { width: 22px; height: 22px; }
.lang-globe:hover, .lang-pick.is-open .lang-globe { background: rgba(60,152,247,.18); border-color: rgba(60,152,247,.6); color: #fff; }
.lang-pick .lang {
  position: absolute; right: 0; top: calc(100% + .7rem); z-index: 60;
  display: flex; flex-direction: column; gap: 2px; min-width: 150px; padding: .4rem;
  background: #fff; border: 1px solid #e3e8ef; border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(15,23,42,.45);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.lang-pick.is-open .lang { opacity: 1; visibility: visible; transform: none; }
.lang-pick .lang button {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: .6rem .8rem; border: 0; border-radius: 9px; background: none; box-shadow: none;
  font: inherit; font-size: .92rem; font-weight: 500; color: #1e293b; text-align: left; cursor: pointer;
}
.lang-pick .lang button:hover { background: #f1f5fa; color: #111827; }
.lang-pick .lang button[aria-pressed='true'] { background: #eef6ff; color: #1d6fd1; font-weight: 600; box-shadow: none; }
.lang-pick .lang button[aria-pressed='true']::after { content: '✓'; font-size: .85rem; }
@media (max-width: 760px) {
  .lang-globe { width: 40px; height: 40px; }
}
/* Ohne Sprachkapsel und Anfrage-Knopf ist Platz frei: Menü wieder in voller Größe */
@media (min-width: 1361px) {
  .nav-link, .nav-link:hover, .nav-link[aria-expanded='true'], .nav-link.is-active { padding: .65rem .8rem; font-size: 1.04rem; }
  .nav-link::after { left: .8rem; right: .8rem; }
  .nav-link .caret { display: inline-block; }
}
@media (min-width: 1081px) and (max-width: 1360px) {
  .nav-link, .nav-link:hover, .nav-link[aria-expanded='true'], .nav-link.is-active { padding: .6rem .62rem; font-size: .98rem; }
  .nav-link::after { left: .62rem; right: .62rem; }
  .site-header nav { transform: translateX(.8rem); }
}
@media (max-width: 760px) { .brand img, .site-header.is-stuck .brand img { height: 30px; } }
@media (max-width: 380px) { .brand img, .site-header.is-stuck .brand img { height: 26px; } }

/* ========================= 40 · PRODUKT-MEGAMENÜ v34 ====================== */
@media (min-width: 1081px) {
  .mega.mega--prod {
    left: 0; right: 0; width: auto; transform: translateY(-6px);
    padding: 2rem 2.2rem 1.2rem;
    background: #fff; border: 1px solid #e5e9f0; border-radius: 20px;
    box-shadow: 0 30px 70px -24px rgba(10,18,32,.55);
    max-height: calc(100vh - var(--hdr-bar, 74px) - 3rem); overflow-y: auto;
  }
  .nav > li.is-open .mega.mega--prod { transform: none; }
  /* unsichtbare Brücke, damit die Maus vom Menüpunkt ins Panel kommt */
  .mega.mega--prod::before { content: ''; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
  .pm-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.6rem; }
  .pm-col { min-width: 0; }
  .pm-cat {
    display: block; padding-bottom: .75rem; margin-bottom: .6rem; border-bottom: 1px solid #edf1f6;
    font-size: 1.12rem; font-weight: 700; letter-spacing: .005em; color: #0e131b; text-decoration: none;
  }
  .pm-cat:hover { color: #328BE8; }
  .pm-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
  .pm-item {
    display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: .85rem;
    padding: .4rem; margin: 0 -.4rem; border-radius: 14px; text-decoration: none; color: #111827;
    transition: background .16s;
  }
  .pm-item:hover { background: #f3f6fa; }
  .pm-thumb { width: 84px; height: 84px; border-radius: 12px; background: #f2f4f7; overflow: hidden; display: grid; place-items: center; }
  .pm-thumb img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(30,41,59,.18)); transition: transform .25s ease; }
  .pm-thumb--photo img { width: 100%; height: 100%; object-fit: cover; filter: none; }
  .pm-item:hover .pm-thumb img { transform: scale(1.06); }
  .pm-txt { min-width: 0; display: grid; gap: .15rem; }
  .pm-txt strong { font-size: 1rem; font-weight: 600; line-height: 1.25; color: #111827; }
  .pm-txt small { font-size: .8rem; line-height: 1.3; color: #64748B; }
  .pm-item:hover .pm-txt strong { color: #328BE8; }
  .pm-foot { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #edf1f6; }
  .pm-all { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: #328BE8; text-decoration: none; }
  .pm-all svg { width: 1em; height: 1em; }
}
@media (min-width: 1081px) and (max-width: 1360px) {
  .mega.mega--prod { padding: 1.6rem 1.5rem 1rem; }
  .pm-grid { gap: 0 1rem; }
  .pm-item { grid-template-columns: 68px 1fr; gap: .65rem; }
  .pm-thumb { width: 68px; height: 68px; }
  .pm-txt strong { font-size: .93rem; }
  .pm-txt small { font-size: .74rem; }
}
@media (max-width: 1080px) {
  .mega--prod .pm-grid { display: grid; gap: 1.1rem; }
  .pm-cat { display: block; font-weight: 700; font-size: 1.02rem; color: #fff; text-decoration: none; padding: .2rem 0 .5rem; }
  .pm-col ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  .pm-item { display: flex; align-items: center; gap: .6rem; padding: .4rem; border-radius: 12px; background: rgba(255,255,255,.05); text-decoration: none; }
  .pm-thumb { width: 48px; height: 48px; flex: none; border-radius: 10px; background: #f2f4f7; overflow: hidden; display: grid; place-items: center; }
  .pm-thumb img { width: 90%; height: 90%; object-fit: contain; }
  .pm-thumb--photo img { width: 100%; height: 100%; object-fit: cover; }
  .pm-txt strong { display: block; color: #fff; font-size: .9rem; font-weight: 600; }
  .pm-txt small { display: none; }
  .pm-foot { margin-top: 1rem; }
  .pm-all { color: #8cc4ff; font-weight: 700; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
  .pm-all svg { width: 1em; height: 1em; }
}
/* Megamenü: Navigation ohne transform verschieben (transform würde das Panel einsperren) */
@media (min-width: 1081px) {
  .site-header nav { transform: none !important; padding-left: 3rem; }
  .pm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pm-col--wide { grid-column: span 2; }
  .pm-col--wide ul { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
}
@media (min-width: 1081px) and (max-width: 1360px) { .site-header nav { padding-left: 1.6rem; } }
@media (max-width: 1080px) {
  .mega--prod, .mega--prod .pm-grid, .pm-col { min-width: 0; max-width: 100%; }
  .pm-col ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pm-item { min-width: 0; }
  .pm-txt { min-width: 0; }
  .pm-txt strong { font-size: .84rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}

/* ========================= 41 · MENÜS ANWENDUNGEN & SERVICE v35 =========== */
@media (min-width: 1081px) {
  .mega.mega--wide {
    left: 0; right: 0; width: auto; transform: translateY(-6px);
    padding: 1.8rem 2.2rem 1.2rem;
    background: #fff; border: 1px solid #e5e9f0; border-radius: 20px;
    box-shadow: 0 30px 70px -24px rgba(10,18,32,.55);
  }
  .nav > li.is-open .mega.mega--wide { transform: none; }
  .mega.mega--wide::before { content: ''; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
  .mi-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem 1.4rem; }
  .mi-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mi-item {
    display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 1rem;
    padding: .75rem; border-radius: 16px; text-decoration: none; color: #111827; transition: background .16s;
  }
  .mi-item:hover { background: #f3f6fa; }
  .mi-ic {
    width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(145deg, #eef6ff, #dcecff); color: #328BE8;
    transition: background .2s, color .2s, transform .2s;
  }
  .mi-ic svg { width: 32px; height: 32px; }
  .mi-item:hover .mi-ic { background: #328BE8; color: #fff; transform: translateY(-1px); }
  .mi-txt { min-width: 0; display: grid; gap: .2rem; }
  .mi-txt strong { font-size: 1.05rem; font-weight: 700; color: #0e131b; line-height: 1.3; }
  .mi-txt > span { font-size: .85rem; color: #64748B; line-height: 1.45; }
  .mi-item:hover .mi-txt strong { color: #328BE8; }
  .mega--wide .pm-foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #edf1f6; }
}
@media (min-width: 1081px) and (max-width: 1360px) {
  .mega.mega--wide { padding: 1.5rem 1.5rem 1rem; }
  .mi-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mi-item { grid-template-columns: 52px 1fr; gap: .8rem; }
  .mi-ic { width: 52px; height: 52px; border-radius: 14px; }
  .mi-ic svg { width: 28px; height: 28px; }
}
@media (max-width: 1080px) {
  .mi-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
  .mi-item { display: flex; align-items: center; gap: .8rem; padding: .55rem .6rem; border-radius: 12px; background: rgba(255,255,255,.05); text-decoration: none; }
  .mi-ic { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(60,152,247,.16); color: #6db3ff; }
  .mi-ic svg { width: 24px; height: 24px; }
  .mi-txt strong { display: block; color: #fff; font-size: .95rem; font-weight: 600; }
  .mi-txt > span { display: block; color: #aebcd0; font-size: .8rem; line-height: 1.4; }
  .mega--wide .pm-foot { margin-top: 1rem; }
}

/* ========================= 42 · MENÜ-FLÄCHE v36: Frostglas statt Reinweiß ==== */
@media (min-width: 1081px) {
  .mega.mega--prod, .mega.mega--wide {
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(60,152,247,.10) 0%, transparent 55%),
      linear-gradient(180deg, rgba(250,252,255,.97) 0%, rgba(238,243,250,.97) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 34px 80px -26px rgba(6,14,28,.65), inset 0 1px 0 #fff;
  }
  /* feine blaue Lichtkante oben */
  .mega.mega--prod::after, .mega.mega--wide::after {
    content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #3c98f7 30%, #7cc4ff 50%, #3c98f7 70%, transparent);
    opacity: .85;
  }
  .pm-cat { border-bottom-color: rgba(15,35,65,.09); }
  .pm-thumb { background: #fff; box-shadow: 0 0 0 1px rgba(15,35,65,.07), 0 6px 14px -8px rgba(15,35,65,.25); }
  .pm-item:hover, .mi-item:hover { background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(15,35,65,.06), 0 10px 24px -14px rgba(15,35,65,.3); }
  .mi-ic { background: #fff; box-shadow: 0 0 0 1px rgba(60,152,247,.18), 0 6px 14px -8px rgba(60,152,247,.45); }
  .pm-foot, .mega--wide .pm-foot { border-top-color: rgba(15,35,65,.09); }
}

/* ========================= 43 · REFERENZEN v37: helle Bänder im Wechsel ===== */
.cases { background: #f5f5f7; color: #1d1d1f; padding-top: 1.6rem; }
.wrap--case { width: min(100% - 2.5rem, 1480px); }
.cases .case-filter { background: rgba(255,255,255,.86); border: 1px solid #e3e6eb; box-shadow: 0 10px 30px -18px rgba(20,30,50,.3); margin-bottom: 0; }
.cases .case-filter .chip { color: #1d1d1f; background: #f1f3f6; border-color: #e1e5ea; }
.cases .case-filter .chip:hover { border-color: #328BE8; color: #328BE8; }
.cases .case-filter .chip.is-on { background: #1d1d1f; border-color: #1d1d1f; color: #fff; box-shadow: none; }
.cases .case-group { margin-top: 0; }
.cases .case-group > .wrap > .kicker { margin: 0; padding: 3.2rem 0 0; font-size: .95rem; font-weight: 600; letter-spacing: .14em; color: #328BE8; }
.case-band { padding: clamp(2.2rem, 4.5vw, 4.2rem) 0; }
.case-band:nth-child(odd) { background: #fff; }
.case-band:nth-child(even) { background: #f5f5f7; }
.case-band:has(.case[hidden]) { display: none; }
.cases .case {
  margin: 0; grid-template-columns: 1.08fr 1fr; background: none; border: 0; border-radius: 0; overflow: visible;
  gap: clamp(1.6rem, 4vw, 4rem); align-items: center;
}
.cases .case--big { grid-template-columns: 1.2fr 1fr; }
.cases .case__media { min-height: 0; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(20,30,50,.45); }
.cases .case__body { padding: 0; }
.cases .case h2 { color: #1d1d1f; font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.5rem); letter-spacing: -.02em; }
.cases .case__client { color: #6e6e73; font-weight: 500; }
.cases .case__place { color: #328BE8; }
.cases .case__kpis > div { border-right-color: #d9dde3; }
.cases .case__kpis dd { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #1d1d1f; }
.cases .case__kpis dt { color: #6e6e73; }
.cases .case__text p { color: #424245; font-size: 1.02rem; line-height: 1.65; }
.cases .case__text b { color: #1d6fd1; border-color: rgba(50,139,232,.45); background: rgba(50,139,232,.06); }
.cases .case__prod { color: #6e6e73; }
.cases .case:target { box-shadow: none; }
.cases .case:target .case__media { box-shadow: 0 0 0 3px #328BE8, 0 30px 60px -34px rgba(20,30,50,.45); }
.cases .geo { background: #eef6ff; border-color: #cfe3fb; }
.cases .geo__country { color: #1d1d1f; }
.cases .geo__city { color: #424245; }
.cases .geo__city::before { background: #b9c4d2; }
.cases .geo small, .cases .geo__note { color: #6e6e73; }
.cases-more { background: #fff; padding: 1rem 0 clamp(3rem, 6vw, 5rem); }
.cases-more .case-group > .kicker { padding-top: 2.6rem; margin-bottom: 1.4rem; font-size: .95rem; font-weight: 600; color: #328BE8; }
.cases .cgal h3 { color: #1d1d1f; }
.cases .cgal h3 small { color: #328BE8; }
.cases .cgal figure { border-color: #e3e6eb; border-radius: 16px; }
.cases .case-note { background: #f5f5f7; color: #424245; border-left-color: #328BE8; }
.cases .panel--glow { background: #0e131b; }
@media (max-width: 860px) {
  .cases .case, .cases .case--big { grid-template-columns: 1fr; }
  .cases .case--flip .case__media { order: 0; }
  .cases .case__media { aspect-ratio: 16 / 11; border-radius: 20px; }
}

/* ========================= 44 · EINSATZBEREICHE v37: helle Abschnitte im Wechsel */
.usepage > section.section { background: #f5f5f7; color: #1d1d1f; padding-block: clamp(3rem, 6vw, 5.5rem); }
.usepage > section.section:nth-of-type(odd) { background: #fff; }
.usepage > section.section > .wrap { width: min(100% - 2.5rem, 1400px); }
.usepage .scenario { box-shadow: 0 34px 70px -38px rgba(20,30,50,.5); }
.usepage .ucd { background: #fff; border: 1px solid #e3e6eb; box-shadow: 0 18px 44px -30px rgba(20,30,50,.3); }
.usepage > section.section:nth-of-type(odd) .ucd { background: #f5f5f7; border-color: #ebedf0; box-shadow: none; }
.usepage .ucd::before { display: none; }
.usepage .ucd__col + .ucd__col { border-left-color: #e3e6eb; }
.usepage .ucd__col--sol { background: rgba(50,139,232,.06); }
.usepage .ucd__h { color: #1d1d1f; }
.usepage .ucd li { color: #424245; }
.usepage .ucd__col--proof li { color: #1d1d1f; }
.usepage .ucd__soon { color: #424245; border-top-color: #e3e6eb; background: none; }
.usepage .ucd__soon > span:not(.ucd__badge)::before { color: #328BE8; }
.usepage .t-muted, .usepage .t-dim { color: #6e6e73; }
.usepage .ucd__badge { color: #1d6fd1; background: rgba(50,139,232,.1); border-color: rgba(50,139,232,.4); }
.usepage .scene-tile h3, .usepage .scene-tile p { color: #fff; }
.usepage .scene-tile p { color: #d7e1ee; }
.usepage .scenario, .usepage .scenario h2, .usepage .scenario h3 { color: #fff; }
.usepage .panel--glow, .cases .panel--glow { background: #0e131b; color: #e6edf6; }
.usepage .panel--glow h2, .cases .panel--glow h2 { color: #fff; }
.usepage .panel--glow .t-muted { color: #b9c7d8; }
.cases .case .chip--blue { color: #1d6fd1; background: rgba(50,139,232,.1); border-color: rgba(50,139,232,.4); }

/* v38 · Einsatzbereiche: Kopfbild höher und heller, Motiv bleibt sichtbar */
.page-hero--tall { min-height: clamp(460px, 68vh, 720px); display: flex; align-items: flex-end; padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-hero--tall > .wrap { width: min(100% - 2.5rem, var(--wrap)); }
.page-hero--tall .page-hero__media img { object-position: 50% 35%; }
.page-hero--tall .page-hero__media::after {
  background:
    linear-gradient(90deg, rgba(7,9,13,.72) 0%, rgba(7,9,13,.35) 45%, transparent 75%),
    linear-gradient(180deg, rgba(7,9,13,.45) 0%, transparent 30%, transparent 60%, rgba(7,9,13,.6) 100%);
}
.page-hero--tall h1 { text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.page-hero--tall .t-lead { color: #eef3f8; text-shadow: 0 1px 14px rgba(0,0,0,.55); }

/* ========================= 45 · MOBIL-FEINSCHLIFF v39 ===================== */
.form-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--gap-l); align-items: start; }
@media (max-width: 900px) { .form-layout { grid-template-columns: minmax(0, 1fr); } }
.pdp { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .pdp { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.pdp > * { min-width: 0; }
.buybox, .buybox * { overflow-wrap: break-word; }
@media (max-width: 560px) {
  /* Einsatzbereiche: Kacheln zweispaltig statt langer Einzelspalte */
  .usepage .scene-tiles { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .usepage .scene-tile { min-height: 150px; padding: .8rem; border-radius: 14px; }
  .usepage .scene-tile h3 { font-size: 1rem; line-height: 1.25; }
  .usepage .scene-tile p { font-size: .78rem; line-height: 1.35; }
  .page-hero--tall { min-height: 440px; }
  /* Top-Modelle: beide Knöpfe in einer Zeile */
  .home .hcard .pcard__foot { gap: .7rem; }
  .home .hcard .pcard__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; width: 100%; }
  .home .hcard .pcard__actions .btn { width: 100%; justify-content: center; }
  .film__tag { font-size: .68rem; }
  .usepage .kicker { font-size: .74rem; }
  /* Referenzen */
  .case-band { padding: 2rem 0; }
  .cases .case h2 { font-size: 1.45rem; }
  .cases .case__kpis { gap: .8rem 0; }
  .cases .cgal__grid { grid-template-columns: 1fr 1fr; }
}
.site-footer { padding-top: clamp(1.2rem, 3vw, 2.4rem); }

/* v41 · Logo in der Kopfzeile ~14 % kleiner: Logohöhe ≈ halbe Leistenhöhe,
   „Robotics“-Schriftzug nähert sich der Größe der Menüpunkte */
@media (min-width: 1081px) {
  .brand { padding: 0 calc(var(--slant) + .7rem) 0 1.5rem; }
  .brand img { height: 35px; }
  .site-header.is-stuck .brand img { height: 32px; }
}
@media (min-width: 1600px) { .brand img { height: 38px; } .site-header.is-stuck .brand img { height: 34px; } }
@media (min-width: 1081px) and (max-width: 1360px) { .brand img, .site-header.is-stuck .brand img { height: 31px; } }