/* ============================================================================
   Neotel DE site — Design System v3 component overrides
   Loaded site-wide via the neotel-de-design-system mu-plugin AFTER each page's
   inline <style> block, so these rules win without !important on most things.

   GOLDEN RULE: change ONLY visual properties (color, background, border,
   border-radius, box-shadow, font-family, font-weight, font-size on text
   elements). NEVER change layout properties (display, grid, flex, position,
   width, height, padding/margin EXCEPT where padding is purely visual on a
   button/card).
   ============================================================================ */


/* ────────────────────────────────────────────────────────────────────────────
   1.  Typographic baseline — apply Inter on the whole site body
   ──────────────────────────────────────────────────────────────────────────── */

body,
body input,
body button,
body select,
body textarea,
body .neotel-header,
body .neotel-footer {
  font-family: var(--font-sans);
}

/* ────────────────────────────────────────────────────────────────────────────
   2.  Color migration — old teal #0A7D8C palette → Neotel Blue family
   The DE site used a teal (#0A7D8C) primary with hex literals hardcoded into
   inline <style> blocks. The overrides below retarget the common usages.
   ──────────────────────────────────────────────────────────────────────────── */

/* Page-generic component family (nt-pg-*) */
body .nt-pg-hero {
  background: var(--brand-gradient);
}
body .nt-pg-hero__cta a {
  color: var(--neotel-blue);
}
body .nt-pg-body h2 {
  color: var(--neotel-blue);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-pg-body h3 {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-pg-card {
  border-color: var(--line);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
body .nt-pg-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}
body .nt-pg-card h3 {
  color: var(--neotel-blue);
}
body .nt-pg-step {
  border-left-color: var(--neotel-blue);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
body .nt-pg-step__num {
  background: var(--neotel-blue);
}
body .nt-pg-form-block {
  background: var(--bg-subtle);
  border-color: var(--line);
  border-radius: var(--r-lg);
}
body .nt-pg-cta-final {
  background: var(--bg-subtle);
  border-radius: var(--r-lg);
}
body .nt-pg-cta-final h2 {
  color: var(--neotel-blue);
}
body .nt-pg-cta-final a {
  background: var(--neotel-blue);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  transition: background .16s;
}
body .nt-pg-cta-final a:hover {
  background: var(--neotel-blue-deep);
  color: #fff;
}

/* FAQ accordions */
body .nt-pg-faq details {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--r-md);
}
body .nt-pg-faq summary {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-pg-faq details p {
  color: var(--ink-500);
}


/* ────────────────────────────────────────────────────────────────────────────
   3.  Family-page components (SMD BOX, NEO LIGHT, NEO COUNTER)
   ──────────────────────────────────────────────────────────────────────────── */

body .nt-sbf-hero,
body .nt-nlf-hero,
body .nt-ncf-hero {
  background: var(--brand-gradient);
}
body .nt-sbf-section h2,
body .nt-nlf-section h2,
body .nt-ncf-section h2 {
  color: var(--neotel-blue);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-sbf-section h3,
body .nt-nlf-section h3,
body .nt-ncf-section h3 {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-sbf-overline,
body .nt-nlf-overline,
body .nt-ncf-overline {
  color: var(--neotel-blue);
  font-family: var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Family CTA buttons */
body .nt-sbf-btn--primary,
body .nt-nlf-btn--primary,
body .nt-ncf-btn--primary {
  background: var(--neotel-blue);
  color: #fff;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  transition: background .16s;
}
body .nt-sbf-btn--primary:hover,
body .nt-nlf-btn--primary:hover,
body .nt-ncf-btn--primary:hover {
  background: var(--neotel-blue-deep);
  color: #fff;
}
body .nt-sbf-btn--outline,
body .nt-nlf-btn--outline,
body .nt-ncf-btn--outline {
  background: #fff;
  color: var(--neotel-blue);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  transition: background .16s, border-color .16s;
}
body .nt-sbf-btn--outline:hover,
body .nt-nlf-btn--outline:hover,
body .nt-ncf-btn--outline:hover {
  background: var(--info-bg);
  border-color: var(--neotel-blue);
  color: var(--neotel-blue);
}

/* Product cards used on NEO LIGHT model grid */
body .nt-nlf-product-card,
body .nt-sbf-product-card,
body .nt-ncf-product-card {
  background: #fff;
  border-color: var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .18s, border-color .18s;
}
body .nt-nlf-product-card:hover,
body .nt-sbf-product-card:hover,
body .nt-ncf-product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--neotel-blue-bright);
}
body .nt-nlf-product-card__model,
body .nt-sbf-product-card__model,
body .nt-ncf-product-card__model {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-nlf-product-card__keyword,
body .nt-sbf-product-card__keyword,
body .nt-ncf-product-card__keyword {
  color: var(--neotel-blue);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body .nt-nlf-product-card__link,
body .nt-sbf-product-card__link,
body .nt-ncf-product-card__link {
  color: var(--neotel-blue);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}


/* ────────────────────────────────────────────────────────────────────────────
   4.  Stat banner — mono numbers + tabular nums
   ──────────────────────────────────────────────────────────────────────────── */

body .nt-stat-banner {
  background: var(--brand-gradient);
}
body .nt-stat-banner__num {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
body .nt-stat-banner__label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .9;
}


/* ────────────────────────────────────────────────────────────────────────────
   5.  RFQ form (used on /request-quote/, /demonstration/, /contact/)
   ──────────────────────────────────────────────────────────────────────────── */

body .nt-rfq {
  --a: var(--neotel-blue-bright);
  --a1: var(--info-bg);
  --or: var(--neotel-green);
  --nv: var(--ink-900);
  --tx: var(--ink-700);
  --mu: var(--ink-400);
  --lb: var(--ink-500);
  --bd: var(--line);
  --bd2: var(--line-strong);
  --bg: #fff;
  --bg2: var(--surface);
  --bg3: var(--bg-subtle);
  --fn: var(--font-sans);
  --mo: var(--font-mono);
  --r: var(--r-md);
}
body .nt-rfq .fi:focus,
body .nt-rfq .fs:focus,
body .nt-rfq .fta:focus {
  border-color: var(--neotel-blue-bright);
  box-shadow: var(--shadow-focus);
}
body .nt-rfq .sec-h {
  color: var(--neotel-blue);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
body .nt-rfq .rfq-submit {
  background: var(--neotel-blue);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  transition: background .16s;
}
body .nt-rfq .rfq-submit:hover {
  background: var(--neotel-blue-deep);
}
body .nt-rfq .alert-ok {
  background: var(--success-bg);
  color: #1C6E36;
  border: 1px solid var(--success);
  border-radius: var(--r-md);
}
body .nt-rfq .alert-err {
  background: var(--danger-bg);
  color: #A82F2F;
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
}


/* ────────────────────────────────────────────────────────────────────────────
   6.  Header CTAs — keep existing layout, retarget colors only
   ──────────────────────────────────────────────────────────────────────────── */

body .neotel-header {
  --nt-primary: var(--neotel-blue);
  --nt-text:    var(--ink-700);
  --nt-text-dim: var(--ink-400);
  --nt-border:  var(--line);
}
body .neotel-header .nt-rfq-btn {
  border-color: var(--neotel-blue);
  color: var(--neotel-blue);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
}
body .neotel-header .nt-rfq-btn:hover {
  background: var(--neotel-blue);
  color: #fff;
}
body .neotel-header .nt-demo-btn {
  background: var(--neotel-blue);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  transition: background .16s;
}
body .neotel-header .nt-demo-btn:hover {
  background: var(--neotel-blue-deep);
}
body .neotel-header .nt-nav-link {
  color: var(--ink-700);
  font-family: var(--font-sans);
}
body .neotel-header .nt-nav-link:hover,
body .neotel-header .nt-nav-link.active {
  color: var(--neotel-blue);
  background: var(--info-bg);
}


/* ────────────────────────────────────────────────────────────────────────────
   7.  Service-Support hub cards + Kundenportal cards
   ──────────────────────────────────────────────────────────────────────────── */

body .nt-ss-card {
  background: #fff;
  border-color: var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
body .nt-ss-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--neotel-blue-bright);
}
body .nt-ss-card h3 {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-ss-card p {
  color: var(--ink-500);
}
body .nt-ss-card .card-link {
  color: var(--neotel-blue);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body .nt-ss-card .card-icon.teal,
body .nt-ss-card .card-icon.blue {
  background: var(--info-bg);
  color: var(--neotel-blue);
}
body .nt-ss-card .card-icon.green {
  background: var(--success-bg);
  color: var(--success);
}
body .nt-ss-card .card-icon.orange {
  background: var(--warning-bg);
  color: var(--warning);
}
body .nt-ss-card .card-icon.red {
  background: var(--danger-bg);
  color: var(--danger);
}
body .nt-ss-card .card-icon.purple {
  background: var(--info-bg);
  color: var(--neotel-blue-deep);
}

/* Kundenportal cards */
body .nt-portal-hero {
  background: var(--brand-gradient);
}
body .nt-portal-card {
  background: #fff;
  border-color: var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
body .nt-portal-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--neotel-blue);
}
body .nt-portal-card__icon {
  color: var(--neotel-blue);
}
body .nt-portal-card__title {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-portal-card__desc {
  color: var(--ink-500);
}
body .nt-portal-btn {
  background: var(--neotel-blue);
  color: #fff;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  transition: background .16s;
}
body .nt-portal-btn:hover {
  background: var(--neotel-blue-deep);
  color: #fff;
}
body .nt-portal-btn--outline {
  background: transparent;
  color: var(--neotel-blue);
  border: 2px solid var(--neotel-blue);
  border-radius: var(--r-md);
}
body .nt-portal-btn--outline:hover {
  background: var(--neotel-blue);
  color: #fff;
}
body .nt-portal-step {
  background: #fff;
  border-left-color: var(--neotel-blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: var(--shadow-xs);
}
body .nt-portal-section h2 {
  color: var(--neotel-blue);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-portal-advantage-card__icon {
  color: var(--neotel-blue);
}
body .nt-portal-advantage-card {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--r-md);
}


/* ────────────────────────────────────────────────────────────────────────────
   8.  Products hub + Solutions hub buttons
   ──────────────────────────────────────────────────────────────────────────── */

body .nt-prod-btn--primary {
  background: var(--neotel-blue);
  color: #fff;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-prod-btn--primary:hover {
  background: var(--neotel-blue-deep);
  color: #fff;
}
body .nt-prod-btn--outline {
  background: #fff;
  color: var(--neotel-blue);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .nt-prod-btn--outline:hover {
  background: var(--info-bg);
  border-color: var(--neotel-blue);
}

/* Solutions hub uses .btn-brand / .btn-outline */
body .btn-brand,
body .btn.btn-brand {
  background: var(--neotel-blue);
  color: #fff;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  border: 0;
  transition: background .16s;
}
body .btn-brand:hover {
  background: var(--neotel-blue-deep);
  color: #fff;
}
body .btn-outline,
body .btn.btn-outline {
  background: #fff;
  color: var(--neotel-blue);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-weight: 600;
  transition: background .16s, border-color .16s;
}
body .btn-outline:hover {
  background: var(--info-bg);
  border-color: var(--neotel-blue);
  color: var(--neotel-blue);
}


/* ────────────────────────────────────────────────────────────────────────────
   9.  Wissen cluster (educational pages) — keep colors consistent
   ──────────────────────────────────────────────────────────────────────────── */

body .nt-pg-card h3,
body .nt-pg-step strong,
body .nt-wissen-card h3 {
  color: var(--neotel-blue);
}


/* ────────────────────────────────────────────────────────────────────────────
   10.  Footer (wp_block 24819)
   ──────────────────────────────────────────────────────────────────────────── */

body .neotel-footer {
  background: var(--surface);
  color: var(--ink-500);
  font-family: var(--font-sans);
  border-top: 1px solid var(--line);
}
body .neotel-footer h4 {
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-weight: 600;
}
body .neotel-footer a {
  color: var(--ink-500);
}
body .neotel-footer a:hover {
  color: var(--neotel-blue);
}


/* ────────────────────────────────────────────────────────────────────────────
   11.  Body text + links + selection
   ──────────────────────────────────────────────────────────────────────────── */

body {
  color: var(--ink-500);
}
body ::selection {
  background: var(--neotel-blue);
  color: #fff;
}
body a {
  color: var(--neotel-blue);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}
body a:hover {
  color: var(--neotel-blue-deep);
}