/* Ported for the idsystems.ch prototype: TYPO3 host rules and TTF font-faces removed, the shell serves Rajdhani. */
/* ID-DIGITIZER product page — scoped to avoid conflicts with the existing website */
.ids-logistikapp-page {
  --ids-magenta: #ab005e;
  --ids-magenta-dark: #85004a;
  --ids-magenta-light: #e94ba2;
  --ids-magenta-tint: #f5e0ec;
  --ids-magenta-pale: #fbf2f7;
  --ids-ink: #111214;
  --ids-charcoal: #2c2c2b;
  --ids-panel: #1b1c20;
  --ids-grey: #585857;
  --ids-muted: #6f7075;
  --ids-line: #e0d0d8;
  /* Fixed local base for all sizing below — deliberately NOT "1rem".
     rem is relative to the SITE'S root <html> font-size, which on
     idsystems.ch computes to 10px (a 62.5% root-scaling reset), not
     the 16px this page was designed and tested against. Every size
     below is written as calc(N * var(--ids-rem)) instead of "Nrem" so
     it renders correctly regardless of what the rest of the site sets
     the root font-size to. */
  --ids-rem: 16px;
  --ids-soft: #f2f2f2;
  --ids-white: #ffffff;
  --ids-ui-text: calc(1 * var(--ids-rem));
  --ids-ui-line: 1.28;
  --ids-note-text: calc(1 * var(--ids-rem));
  --ids-note-line: 1.38;
  --ids-faq-question: calc(1.05 * var(--ids-rem));
  --ids-faq-answer: calc(.98 * var(--ids-rem));
  color: var(--ids-ink) !important;
  background: var(--ids-white) !important;
  font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow: hidden;
}
/* ROOT-CAUSE FIX — do not remove.
   idsystems.ch's global stylesheet contains a bare universal rule:
       * { color: rgb(77,77,77); font-family: "Rajdhani", sans-serif; }
   A universal selector matches every descendant DIRECTLY. A directly-set
   value always beats an INHERITED one, regardless of how specific or
   !important the ancestor's rule is — inheritance simply isn't in that
   competition. That is why hardening the section/hero/card wrappers had
   no effect: each child was being painted #4d4d4d by `*` independently.
   Re-asserting `color: inherit` here restores the normal inheritance
   chain for everything inside the component. This selector (one class +
   universal) outranks the site's bare `*`, so it wins cleanly, and it
   deliberately does NOT use !important so the component's own explicit
   colour rules below still apply as normal. */
.ids-logistikapp-page *,
.ids-logistikapp-page *::before,
.ids-logistikapp-page *::after { box-sizing: border-box; color: inherit; }
/* The site also sets font-family on the same bare `*` rule, and has
   element-level rules (e.g. `.content-area span`, `.content-area li`)
   that hit descendants DIRECTLY and therefore beat inheritance from the
   component's wrappers — same mechanism as the colour problem above.
   Re-assert inheritance for the text-bearing elements the component uses. */
.ids-logistikapp-page span,
.ids-logistikapp-page li,
.ids-logistikapp-page p,
.ids-logistikapp-page strong,
.ids-logistikapp-page b,
.ids-logistikapp-page em,
.ids-logistikapp-page td,
.ids-logistikapp-page th,
.ids-logistikapp-page summary,
.ids-logistikapp-page figcaption { color: inherit; }
.ids-logistikapp-page,
.ids-logistikapp-page * { font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif; }
/* ...except the deliberately monospaced phone-demo step numbers. */
.ids-logistikapp-page .ids-phone-step-num { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
.ids-logistikapp-page img { display: block; max-width: 100%; height: auto; }
/* The site sets link colour at two levels (`a` and `.MainContent a`), both
   of which hit anchors directly and outrank a plain `color: inherit` here.
   Links inside this component should take their surrounding text colour;
   the few that are meant to look like links style themselves explicitly. */
.ids-logistikapp-page a { color: inherit !important; }
.ids-logistikapp-page .ids-deployment-link { color: var(--ids-magenta) !important; }
.ids-logistikapp-page .ids-deployment-card--local .ids-deployment-link { color: var(--ids-magenta-light) !important; }
.ids-logistikapp-page button,
.ids-logistikapp-page input,
.ids-logistikapp-page textarea,
.ids-logistikapp-page select { font: inherit; }
.ids-logistikapp-page .ids-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.ids-logistikapp-page .ids-section { padding: 64px 0; }
.ids-logistikapp-page .ids-section--soft { background: var(--ids-soft) !important; }
.ids-logistikapp-page .ids-section--dark { color: var(--ids-white) !important; background: var(--ids-charcoal) !important; }
.ids-logistikapp-page .ids-eyebrow {
  margin: 0 0 9.6px;
  color: var(--ids-magenta) !important;
  font-size: calc(.68 * var(--ids-rem));
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ids-logistikapp-page .ids-eyebrow::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  margin-right: 8px;
  margin-bottom: 3px;
  background: var(--ids-magenta) !important;
  vertical-align: middle;
}
.ids-logistikapp-page h1,
.ids-logistikapp-page h2,
.ids-logistikapp-page h3 { margin-top: 0; line-height: 1.12; color: var(--ids-ink) !important; }
.ids-logistikapp-page h1 { margin-bottom: 22px; font-size: clamp(calc(2.2 * var(--ids-rem)), 5vw, calc(3.6 * var(--ids-rem))); letter-spacing: -.018em; }
.ids-logistikapp-page h2 { margin-bottom: 16px; font-size: clamp(calc(1.5 * var(--ids-rem)), 2.8vw, calc(2.1 * var(--ids-rem))); letter-spacing: -.012em; }
.ids-logistikapp-page h3 { margin-bottom: 11px; font-size: calc(1.2 * var(--ids-rem)); }
/* Dark-surface headings: a bare heading only INHERITS color from its dark
   wrapper, and inheritance can never win against a direct h1/h2/h3 rule
   elsewhere on the host site — even a weak one, even against !important on
   the wrapper — because inherited values aren't in that competition at all.
   Every heading on a dark background needs its own direct, explicit rule. */
.ids-logistikapp-page .ids-hero h1,
.ids-logistikapp-page .ids-hero h2,
.ids-logistikapp-page .ids-hero h3,
.ids-logistikapp-page .ids-section--dark h1,
.ids-logistikapp-page .ids-section--dark h2,
.ids-logistikapp-page .ids-section--dark h3,
.ids-logistikapp-page .ids-deployment-card--local h1,
.ids-logistikapp-page .ids-deployment-card--local h2,
.ids-logistikapp-page .ids-deployment-card--local h3,
.ids-logistikapp-page .ids-industries h1,
.ids-logistikapp-page .ids-industries h2,
.ids-logistikapp-page .ids-industries h3,
.ids-logistikapp-page .ids-cta h1,
.ids-logistikapp-page .ids-cta h2,
.ids-logistikapp-page .ids-cta h3 { color: var(--ids-white) !important; }
.ids-logistikapp-page p { margin-top: 0; }
.ids-logistikapp-page .ids-lead { max-width: 790px; margin-bottom: 0; color: #55575d !important; font-size: calc(1.05 * var(--ids-rem)); line-height: 1.5; }
.ids-logistikapp-page .ids-section--dark .ids-lead { color: #c9c9cf !important; }
.ids-logistikapp-page .ids-highlight { color: var(--ids-magenta) !important; }
.ids-logistikapp-page .ids-button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.ids-logistikapp-page .ids-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 14px 26px;
  border: 1px solid var(--ids-magenta);
  border-radius: 0;
  background: var(--ids-magenta) !important;
  color: var(--ids-white) !important;
  font-size: var(--ids-ui-text);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ids-logistikapp-page .ids-button:hover { transform: translateY(-2px); background: var(--ids-magenta-dark) !important; border-color: var(--ids-magenta-dark) !important; }
.ids-logistikapp-page .ids-button--secondary { background: transparent !important; color: rgba(255,255,255,.8) !important; border-width: 1.5px; border-color: rgba(255,255,255,.3) !important; }
.ids-logistikapp-page .ids-button--secondary:hover { background: rgba(255,255,255,.05) !important; color: var(--ids-white) !important; border-color: var(--ids-white) !important; }
.ids-logistikapp-page .ids-button--light { background: var(--ids-white) !important; color: var(--ids-ink) !important; border-color: var(--ids-white) !important; }
.ids-logistikapp-page .ids-button--light:hover { background: #f2f2f5 !important; color: var(--ids-ink) !important; border-color: #f2f2f5 !important; }
.ids-logistikapp-page .ids-button svg { width: 18px; height: 18px; margin-left: 10px; }

/* Hero */
.ids-logistikapp-page .ids-hero {
  position: relative;
  min-height: 690px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: var(--ids-white) !important;
  background: var(--ids-charcoal) !important;
}
.ids-logistikapp-page .ids-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(171,0,94,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(171,0,94,.06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ids-logistikapp-page .ids-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ids-magenta) !important;
}
.ids-logistikapp-page .ids-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr);
  align-items: center;
  gap: clamp(42px, 6vw, 86px);
  padding: 70px 0 62px;
}
.ids-logistikapp-page .ids-hero__content { min-width: 0; }
.ids-logistikapp-page .ids-hero h1 { max-width: 650px; color: var(--ids-white) !important; }
.ids-logistikapp-page .ids-hero__product { display: inline-flex; gap: 7px; align-items: baseline; margin-bottom: 25px; font-size: calc(1 * var(--ids-rem)); font-weight: 700; letter-spacing: .08em; color: var(--ids-white) !important; }
.ids-logistikapp-page .ids-hero__product span:last-child { color: var(--ids-magenta-light) !important; }
.ids-logistikapp-page .ids-hero .ids-lead { max-width: 650px; color: #e4e4e7 !important; font-size: calc(1.1 * var(--ids-rem)); }
.ids-logistikapp-page .ids-hero .ids-hero__trial-note { margin: 14px 0 0; color: #b8b8bf !important; font-size: calc(.95 * var(--ids-rem)); line-height: 1.5; }
.ids-logistikapp-page .ids-hero .ids-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 22px; color: #d0d0d5 !important; font-size: calc(.95 * var(--ids-rem)); line-height: 1.35; }
.ids-logistikapp-page .ids-hero__facts span { display: inline-flex; align-items: center; gap: 8px; color: #d0d0d5 !important; }
.ids-logistikapp-page .ids-hero__facts span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ids-magenta-light); box-shadow: 0 0 14px rgba(233,75,162,.75); }
.ids-logistikapp-page .ids-hero__visual { min-width: 0; margin: 0; }
.ids-logistikapp-page .ids-hero .ids-hero__visual figcaption { margin-top: 10px; color: #bfc0c6 !important; font-size: calc(.95 * var(--ids-rem)); line-height: var(--ids-note-line); text-align: center; }

/* Intro strip */
.ids-logistikapp-page .ids-proof-strip { background: var(--ids-white) !important; border-bottom: 1px solid var(--ids-line); }
.ids-logistikapp-page .ids-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ids-logistikapp-page .ids-proof-item { padding: 22px 24px; border-right: 1px solid var(--ids-line); }
.ids-logistikapp-page .ids-proof-item:first-child { padding-left: 0; }
.ids-logistikapp-page .ids-proof-item:last-child { border-right: 0; }
.ids-logistikapp-page .ids-proof-item strong { display: block; margin-bottom: 2px; font-size: calc(1.05 * var(--ids-rem)); line-height: 1.25; }
.ids-logistikapp-page .ids-proof-item span { color: var(--ids-muted) !important; font-size: var(--ids-note-text); line-height: var(--ids-note-line); }

/* Two-column content */
.ids-logistikapp-page .ids-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 54px; }
.ids-logistikapp-page .ids-copy p { color: #55575d !important; font-size: calc(1.02 * var(--ids-rem)); }
.ids-logistikapp-page .ids-check-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ids-logistikapp-page .ids-check-list li { position: relative; padding-left: 34px; color: var(--ids-ink) !important; }
.ids-logistikapp-page .ids-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: rgba(171,0,94,.1) !important;
  color: var(--ids-magenta) !important;
  font-size: calc(.88 * var(--ids-rem));
  font-weight: 700;
}
.ids-logistikapp-page .ids-interface-frame { position: relative; padding: 14px; border: 1px solid #d7d7db; background: #fff !important; box-shadow: 0 24px 70px rgba(17,18,20,.13); }
.ids-logistikapp-page .ids-interface-frame::before { content: "IDS LOGISTIK-APP INTERFACE"; display: block; padding: 2px 0 12px; color: var(--ids-magenta) !important; font-size: calc(.8 * var(--ids-rem)); line-height: var(--ids-ui-line); font-weight: 700; letter-spacing: .14em; }
.ids-logistikapp-page:lang(de) .ids-interface-frame::before { content: "IDS LOGISTIK-APP OBERFLÄCHE"; }
.ids-logistikapp-page:lang(fr) .ids-interface-frame::before { content: "INTERFACE IDS LOGISTIK-APP"; }
.ids-logistikapp-page .ids-interface-frame img { border: 1px solid #ececef; }

/* Workflow */
.ids-logistikapp-page .ids-workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; }
.ids-logistikapp-page .ids-workflow-step { position: relative; padding: 28px 20px 24px; border: 1px solid rgba(255,255,255,.1); border-top: 3px solid var(--ids-magenta); background: rgba(255,255,255,.04) !important; }
.ids-logistikapp-page .ids-workflow-step__icon { width: 72px; height: 72px; display: block; margin-bottom: 14px; }
.ids-logistikapp-page .ids-workflow-step__number { position: absolute; top: 26px; right: 22px; font-weight: 700; color: var(--ids-magenta-light) !important; font-size: calc(1.3 * var(--ids-rem)); letter-spacing: .04em; }
.ids-logistikapp-page .ids-workflow-step h3 { color: var(--ids-white) !important; margin-bottom: 6px; font-size: calc(1.05 * var(--ids-rem)); }
.ids-logistikapp-page .ids-workflow-step p { margin-bottom: 0; color: #c4c5ca !important; font-size: calc(1 * var(--ids-rem)); line-height: var(--ids-note-line); }

/* Feature cards */
.ids-logistikapp-page .ids-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.ids-logistikapp-page .ids-card { min-height: 220px; padding: 26px; border: 1px solid var(--ids-line); border-top: 3px solid var(--ids-magenta); background: var(--ids-white) !important; transition: transform .18s ease, box-shadow .18s ease; }
.ids-logistikapp-page .ids-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(171,0,94,.14); }
.ids-logistikapp-page .ids-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; background: rgba(171,0,94,.09) !important; color: var(--ids-magenta) !important; }
.ids-logistikapp-page .ids-card__icon svg { width: 27px; height: 27px; }
.ids-logistikapp-page .ids-card p { margin-bottom: 0; color: var(--ids-muted) !important; font-size: calc(1.02 * var(--ids-rem)); line-height: 1.55; }


/* Deployment options */
.ids-logistikapp-page .ids-deployment-section { border-top: 1px solid var(--ids-line); border-bottom: 1px solid var(--ids-line); }
.ids-logistikapp-page .ids-deployment-intro { max-width: 920px; }
.ids-logistikapp-page .ids-deployment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
.ids-logistikapp-page .ids-deployment-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  min-height: 100%;
  padding: 31px;
  border: 1px solid var(--ids-line);
  border-top: 3px solid var(--ids-magenta);
  background: var(--ids-white) !important;
  box-shadow: 0 16px 44px rgba(17,18,20,.07);
}
.ids-logistikapp-page .ids-deployment-card--local { border-color: #3a3b41; border-top-color: var(--ids-magenta); background: var(--ids-charcoal) !important; color: var(--ids-white) !important; box-shadow: 0 22px 58px rgba(17,18,20,.18); }
.ids-logistikapp-page .ids-deployment-card__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(171,0,94,.28);
  border-radius: 50%;
  background: rgba(171,0,94,.08) !important;
  color: var(--ids-magenta) !important;
}
.ids-logistikapp-page .ids-deployment-card--local .ids-deployment-card__icon { border-color: rgba(233,75,162,.42); background: rgba(171,0,94,.18) !important; color: var(--ids-magenta-light) !important; }
.ids-logistikapp-page .ids-deployment-card__icon svg { width: 34px; height: 34px; }
.ids-logistikapp-page .ids-deployment-card__label { margin: 0 0 6px; color: var(--ids-magenta) !important; font-size: calc(.8 * var(--ids-rem)); font-weight: 700; line-height: var(--ids-ui-line); letter-spacing: .1em; text-transform: uppercase; }
.ids-logistikapp-page .ids-deployment-badge { display: inline-block; margin: 0 0 10px; padding: 5px 13px; border-radius: 20px; background: var(--ids-magenta) !important; color: #fff !important; font-size: calc(.75 * var(--ids-rem)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ids-logistikapp-page .ids-deployment-card--local .ids-deployment-card__label { color: var(--ids-magenta-light) !important; }
.ids-logistikapp-page .ids-deployment-card h3 { margin-bottom: 12px; font-size: calc(1.4 * var(--ids-rem)); line-height: 1.18; }
.ids-logistikapp-page .ids-deployment-card p:not(.ids-deployment-card__label):not(.ids-deployment-badge) { margin-bottom: 18px; color: #55575d !important; font-size: calc(1.02 * var(--ids-rem)); line-height: 1.5; }
/* Escalated on purpose: the base rule above has TWO :not() clauses, which
   gives it higher specificity (0,0,4,1) than a simple two-class override
   like ".ids-deployment-card--local p:not(...)" (0,0,3,1) would have —
   even with matching !important, specificity still decides the tie, and
   the base rule was winning. Repeating the scope class here guarantees
   this override always outranks the base regardless of how many :not()
   exclusions either selector carries. */
.ids-logistikapp-page.ids-logistikapp-page .ids-deployment-card--local p:not(.ids-deployment-card__label) { color: #d1d1d6 !important; }
.ids-logistikapp-page .ids-deployment-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.ids-logistikapp-page .ids-deployment-tags span { padding: 7px 11px; border: 1px solid #d8d8dd; background: #f7f7f9 !important; color: #44454a !important; font-size: calc(.85 * var(--ids-rem)); font-weight: 600; line-height: 1.25; }
.ids-logistikapp-page .ids-deployment-card--local .ids-deployment-tags span { border-color: #3f4047; background: #202126 !important; color: #ededf0 !important; }
.ids-logistikapp-page .ids-deployment-link { display: inline-flex; align-items: center; gap: 9px; color: var(--ids-magenta) !important; font-size: calc(1 * var(--ids-rem)); font-weight: 700; line-height: 1.25; text-decoration: none; }
.ids-logistikapp-page .ids-deployment-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ids-logistikapp-page .ids-deployment-card--local .ids-deployment-link { color: var(--ids-magenta-light) !important; }

/* Use cases */
.ids-logistikapp-page .ids-usecase-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 52px; align-items: start; }
.ids-logistikapp-page .ids-document-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.ids-logistikapp-page .ids-document-list span { display: flex; align-items: center; min-height: 58px; padding: 13px 16px; border-left: 4px solid var(--ids-magenta); background: var(--ids-soft) !important; font-size: calc(.95 * var(--ids-rem)); font-weight: 700; color: var(--ids-ink) !important; }
.ids-logistikapp-page .ids-industries { padding: 34px; border-top: 3px solid var(--ids-magenta); background: var(--ids-charcoal) !important; color: var(--ids-white) !important; }
.ids-logistikapp-page .ids-industries h3 { font-size: calc(1.2 * var(--ids-rem)); }
.ids-logistikapp-page .ids-industries ul { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.ids-logistikapp-page .ids-industries li { padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); color: #dedee2 !important; font-size: calc(1.02 * var(--ids-rem)); }
.ids-logistikapp-page .ids-industries li:last-child { padding-bottom: 0; border-bottom: 0; }

/* Integration/code */
.ids-logistikapp-page .ids-integration-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: center; }
.ids-logistikapp-page .ids-code-card { overflow: hidden; border: 1px solid #33343a; background: #15161a !important; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.ids-logistikapp-page .ids-code-card__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #33343a; background: #202126 !important; color: #c8c9ce !important; font-size: calc(1 * var(--ids-rem)); line-height: var(--ids-ui-line); }
.ids-logistikapp-page .ids-code-card__bar span { color: #c8c9ce !important; }
.ids-logistikapp-page .ids-code-card pre span:not(.ids-code-key):not(.ids-code-number) { color: #d7d7db !important; }
.ids-logistikapp-page .ids-code-dots { display: flex; gap: 7px; }
.ids-logistikapp-page .ids-code-dots i { width: 8px; height: 8px; border-radius: 50%; background: #5b5c62; }
/* Both JSON/code areas on the page wrap their content in <pre><code>.
   This stylesheet previously styled `pre` but never `code` — and `code`
   is the innermost element, painted on top of everything. Browser
   defaults AND most CMS themes give code/pre their own light background
   and colour, which is what was covering the dark panels. Force both to
   be transparent so the panel behind them shows through, and let the
   syntax-highlight spans supply their own colours. */
.ids-logistikapp-page pre,
.ids-logistikapp-page code,
.ids-logistikapp-page .ids-code-card pre,
.ids-logistikapp-page .ids-code-card code {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ids-logistikapp-page.ids-logistikapp-page.ids-logistikapp-page pre,
.ids-logistikapp-page.ids-logistikapp-page.ids-logistikapp-page code { background: transparent !important; background-color: transparent !important; }
.ids-logistikapp-page .ids-code-card code { color: #e8e8eb !important; }
.ids-logistikapp-page pre { margin: 0; padding: 28px; overflow: auto; color: #e8e8eb !important; font: 500 17px/1.7 "Rajdhani", "Arial Narrow", Arial, sans-serif;
  letter-spacing: .015em; }
.ids-logistikapp-page .ids-code-key { color: #e94ba2 !important; }
.ids-logistikapp-page .ids-code-string { color: #d7d7db !important; }
.ids-logistikapp-page .ids-code-number { color: #ffb3d9 !important; }
.ids-logistikapp-page .ids-integration-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.ids-logistikapp-page .ids-integration-tags span { padding: 10px 15px; border: 1px solid #393a40; color: #d5d5da !important; font-size: calc(.85 * var(--ids-rem)); line-height: var(--ids-ui-line); }

/* Comparison */
.ids-logistikapp-page .ids-comparison { margin-top: 28px; border: 1px solid var(--ids-line); }
.ids-logistikapp-page .ids-comparison-row { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.ids-logistikapp-page .ids-comparison-row > div { padding: 20px 22px; border-right: 1px solid var(--ids-line); border-bottom: 1px solid var(--ids-line); font-size: calc(.95 * var(--ids-rem)); line-height: 1.48; }
.ids-logistikapp-page .ids-comparison-row > div:last-child { border-right: 0; }
.ids-logistikapp-page .ids-comparison-row:last-child > div { border-bottom: 0; }
.ids-logistikapp-page .ids-comparison-row--head { background: var(--ids-charcoal) !important; color: var(--ids-white) !important; font-weight: 700; }
.ids-logistikapp-page .ids-comparison-row--head > div { border-right-color: rgba(255,255,255,.08); text-transform: uppercase; letter-spacing: .06em; font-size: calc(.8 * var(--ids-rem)); }
.ids-logistikapp-page .ids-comparison-row--head > div:nth-child(3) { color: #ff9dc9 !important; }
.ids-logistikapp-page .ids-comparison-row:nth-child(even) > div:not(:nth-child(3)) { background: var(--ids-soft) !important; }
.ids-logistikapp-page .ids-comparison-row > div:first-child { font-weight: 700; }
.ids-logistikapp-page .ids-comparison-row > div:nth-child(2) { color: var(--ids-muted) !important; }
.ids-logistikapp-page .ids-comparison-row > div:nth-child(3) { background: var(--ids-magenta-tint) !important; color: var(--ids-magenta-dark) !important; font-weight: 700; }

/* FAQ */
.ids-logistikapp-page .ids-faq { max-width: 1060px; margin: 26px auto 0; border-top: 1px solid var(--ids-line); }
.ids-logistikapp-page .ids-faq details { border-bottom: 1px solid var(--ids-line); }
.ids-logistikapp-page .ids-faq summary { position: relative; padding: 22px 58px 22px 0; cursor: pointer; font-size: var(--ids-faq-question); font-weight: 700; line-height: 1.3; list-style: none; transition: color .15s ease; }
.ids-logistikapp-page .ids-faq summary::-webkit-details-marker { display: none; }
.ids-logistikapp-page .ids-faq summary:hover { color: var(--ids-magenta) !important; }
.ids-logistikapp-page .ids-faq details[open] summary { color: var(--ids-magenta) !important; }
.ids-logistikapp-page .ids-faq summary::after { content: "+"; position: absolute; right: 5px; top: 13px; color: var(--ids-magenta) !important; font-size: calc(1.6 * var(--ids-rem)); font-weight: 400; line-height: 1; }
.ids-logistikapp-page .ids-faq details[open] summary::after { content: "\2212"; }
.ids-logistikapp-page .ids-faq details p { max-width: 980px; padding: 0 56px 24px 0; color: var(--ids-muted) !important; font-size: var(--ids-faq-answer); line-height: 1.45; }

/* CTA */
.ids-logistikapp-page .ids-cta { position: relative; padding: 58px 0; overflow: hidden; background: var(--ids-magenta) !important; color: var(--ids-white) !important; }
.ids-logistikapp-page .ids-cta::after { content: "{}"; position: absolute; right: 4%; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.09); font: 700 clamp(calc(10 * var(--ids-rem)), 28vw, calc(25 * var(--ids-rem)))/1 "Rajdhani", "Arial Narrow", Arial, sans-serif; }
.ids-logistikapp-page .ids-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; }
.ids-logistikapp-page .ids-cta h2 { max-width: 780px; margin-bottom: 12px; }
.ids-logistikapp-page .ids-cta p { max-width: 730px; margin-bottom: 0; color: #ffe6f4 !important; }
.ids-logistikapp-page .ids-cta__actions { display: grid; gap: 12px; min-width: min(100%, 330px); }
.ids-logistikapp-page .ids-button--light-outline { background: transparent !important; color: var(--ids-white) !important; border-color: rgba(255,255,255,.78); }
.ids-logistikapp-page .ids-button--light-outline:hover { background: rgba(255,255,255,.12) !important; border-color: var(--ids-white) !important; }

/* Standalone preview header/footer */
.ids-demo-header { position: sticky; top: 0; z-index: 50; border-bottom: 2.5px solid #ab005e; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); font-family: "Rajdhani", "Arial Narrow", Arial, sans-serif; }
.ids-demo-header__inner { width: min(1180px, calc(100% - 40px)); min-height: 68px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ids-demo-logo { font-size: calc(1.55 * var(--ids-rem)); font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: #585857; }
.ids-demo-logo span { color: #ab005e; }
.ids-demo-nav { display: flex; gap: 22px; align-items: center; font-size: calc(.9 * var(--ids-rem)); line-height: 1.25; }
.ids-demo-nav a { color: #585857; text-decoration: none; font-weight: 500; transition: color .15s ease; }
.ids-demo-nav a:hover { color: #ab005e; }
.ids-demo-nav a:last-child { padding: 7px 18px; background: #ab005e; color: #fff; font-weight: 600; transition: background .15s ease; }
.ids-demo-nav a:last-child:hover { background: #85004a; color: #fff; }
.ids-demo-footer { padding: 26px 20px; text-align: center; background: #2c2c2b; border-top: 3px solid #ab005e; color: #b9b9bf; font: 400 calc(.83 * var(--ids-rem))/1.38 "Rajdhani", "Arial Narrow", Arial, sans-serif; }

@media (max-width: 980px) {
  .ids-logistikapp-page .ids-section { padding: 52px 0; }
  .ids-logistikapp-page .ids-two-col,
  .ids-logistikapp-page .ids-usecase-grid,
  .ids-logistikapp-page .ids-integration-grid { grid-template-columns: 1fr; gap: 34px; }
  .ids-logistikapp-page .ids-card-grid { grid-template-columns: repeat(2, 1fr); }
  .ids-logistikapp-page .ids-deployment-grid { grid-template-columns: 1fr; }
  .ids-logistikapp-page .ids-proof-grid { grid-template-columns: repeat(2, 1fr); }
  .ids-logistikapp-page .ids-proof-item:nth-child(2) { border-right: 0; }
  .ids-logistikapp-page .ids-proof-item:nth-child(-n+2) { border-bottom: 1px solid var(--ids-line); }
  .ids-logistikapp-page .ids-cta__inner { grid-template-columns: 1fr; }
  .ids-logistikapp-page .ids-workflow-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .ids-logistikapp-page .ids-container { width: min(100% - 28px, 1180px); }
  .ids-logistikapp-page .ids-hero { min-height: 690px; align-items: end; }
  .ids-logistikapp-page .ids-hero__content { padding: 88px 0 55px; }
  .ids-logistikapp-page .ids-proof-grid { grid-template-columns: 1fr; }
  .ids-logistikapp-page .ids-proof-item,
  .ids-logistikapp-page .ids-proof-item:first-child { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--ids-line); }
  .ids-logistikapp-page .ids-proof-item:last-child { border-bottom: 0; }
  .ids-logistikapp-page .ids-card-grid { grid-template-columns: 1fr; }
  .ids-logistikapp-page .ids-card { min-height: 0; }
  .ids-logistikapp-page .ids-document-list { grid-template-columns: 1fr; }
  .ids-logistikapp-page .ids-deployment-card { grid-template-columns: 1fr; padding: 25px; }
  .ids-logistikapp-page .ids-deployment-card__icon { width: 56px; height: 56px; }
  .ids-logistikapp-page .ids-workflow-grid { grid-template-columns: 1fr; }
  .ids-logistikapp-page .ids-comparison { overflow-x: auto; }
  .ids-logistikapp-page .ids-comparison-row { min-width: 720px; }
  .ids-demo-nav a:not(:last-child) { display: none; }
  .ids-logistikapp-page .ids-button { width: 100%; padding: 14px 20px; }
  .ids-logistikapp-page .ids-faq summary { padding-right: 48px; }
  .ids-logistikapp-page .ids-faq details p { padding-right: 16px; }
  .ids-logistikapp-page .ids-cta__actions { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ids-logistikapp-page *, .ids-logistikapp-page *::before, .ids-logistikapp-page *::after { scroll-behavior: auto !important; transition: none !important; }
}



/* ===================================================================
   Generic hero responsive rules (kept from the shared hero component;
   the video-specific rules that used to live alongside these were
   dropped along with the video demo itself).
=================================================================== */
@media (max-width: 1040px) {
  .ids-logistikapp-page .ids-hero__grid { grid-template-columns: 1fr; gap: 34px; padding: 58px 0 50px; }
  .ids-logistikapp-page .ids-hero__content { max-width: 780px; }
  .ids-logistikapp-page .ids-hero__visual { width: min(460px, 100%); margin-inline: auto; }
}
@media (max-width: 720px) {
  .ids-logistikapp-page .ids-hero { min-height: 0; align-items: center; }
  .ids-logistikapp-page .ids-hero__grid { gap: 28px; padding: 48px 0 42px; }
  .ids-logistikapp-page .ids-hero__content { padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ids-logistikapp-page *, .ids-logistikapp-page *::before, .ids-logistikapp-page *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* ===================================================================
   IDS Logistik-App hero phone demo — replaces ID-DIGITIZER's document
   scan animation with a phone mockup cycling through real app
   screenshots (Wareneingang -> Einlagerung -> Kommissionierung ->
   Warenausgang). Same interaction spirit as the Digitizer demo
   (autoplay + pause, IntersectionObserver, reduced-motion aware,
   ARIA live status) but far simpler: a straight image crossfade
   instead of an animated canvas/DOM sequence.
=================================================================== */
.ids-logistikapp-page .ids-phone-demo { position: relative; width: 100%; max-width: 300px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ids-logistikapp-page .ids-phone-demo__steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; width: 100%; }
.ids-logistikapp-page .ids-phone-step {
  display: flex; align-items: center; gap: 7px; padding: 4px 2px; border: 0; background: transparent; cursor: pointer;
  color: #9aa0ad !important; font-family: inherit; font-size: calc(.82 * var(--ids-rem)); font-weight: 600; letter-spacing: .01em;
  transition: color .2s ease;
}
.ids-logistikapp-page .ids-phone-step-num {
  width: 21px; height: 21px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: inherit !important;
  font-size: calc(.72 * var(--ids-rem)); font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  transition: all .25s ease;
}
.ids-logistikapp-page .ids-phone-step-label { white-space: nowrap; }
.ids-logistikapp-page .ids-phone-step.active { color: #f8fafc !important; }
.ids-logistikapp-page .ids-phone-step.active .ids-phone-step-num { background: var(--ids-magenta) !important; border-color: var(--ids-magenta) !important; color: #fff !important; box-shadow: 0 0 12px rgba(171,0,94,.45); }
.ids-logistikapp-page .ids-phone-step:hover .ids-phone-step-num { border-color: var(--ids-magenta-light); }
.ids-logistikapp-page .ids-phone-frame {
  position: relative; width: 224px; padding: 14px 10px; border-radius: 34px;
  background: linear-gradient(155deg, #2a2b30, #0f1013);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 35px 90px rgba(0,0,0,.55), 0 0 60px rgba(171,0,94,.16);
}
.ids-logistikapp-page .ids-phone-frame::before {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); z-index: 2;
}
.ids-logistikapp-page .ids-phone-screen {
  position: relative; width: 100%; aspect-ratio: 495 / 677; overflow: hidden; border-radius: 22px;
  background: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.ids-logistikapp-page .ids-phone-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity .5s ease;
}
.ids-logistikapp-page .ids-phone-screen img.active { opacity: 1; }
.ids-logistikapp-page .ids-phone-demo__controls { display: flex; align-items: center; gap: 10px; }
.ids-logistikapp-page .ids-phone-btn {
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.16); color: #f1f1f3 !important;
  font-family: inherit; font-size: calc(.82 * var(--ids-rem)); font-weight: 700; padding: 7px 16px; border-radius: 20px;
  cursor: pointer; transition: all .2s ease; display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
}
.ids-logistikapp-page .ids-phone-btn:hover { background: rgba(255,255,255,.13) !important; }
.ids-logistikapp-page .ids-phone-demo__caption { min-height: 19px; color: #b8b8bf !important; font-size: calc(.85 * var(--ids-rem)); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .ids-logistikapp-page .ids-phone-screen img { transition: none; }
}

/* ===================================================================
   Tier grid (Standard / Konfiguriert / Individual) — a 3-column
   variant of the same deployment-card component used for
   ID-DIGITIZER's Online/Local pair. The "Individual" card reuses
   the existing dark --local treatment; the middle card gets the
   existing magenta badge to flag it as the most-chosen tier.
=================================================================== */
.ids-logistikapp-page .ids-deployment-grid--tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ids-logistikapp-page .ids-deployment-grid--tiers .ids-deployment-card { grid-template-columns: 1fr; }
@media (max-width: 980px) {
  .ids-logistikapp-page .ids-deployment-grid--tiers { grid-template-columns: 1fr; }
}

/* CTA background glyph: a checkmark (error-free processes) instead of
   ID-DIGITIZER's "{}" (which signalled JSON/code, not relevant here). */
.ids-logistikapp-page .ids-cta::after { content: "\2713"; }


/* Brand rule: magenta text on dark grounds is #E94BA2 (#AB005E on charcoal measured 1.93:1). */
.ids-logistikapp-page :is(.ids-hero, .ids-section--dark, .ids-cta, .ids-industries) :is(.ids-eyebrow, .ids-highlight) { color: #E94BA2 !important; }