/* Rexity vibe layer — pass 1 (typography + accents).
   Appended last so it wins the cascade over the 51 generated style blocks.
   Deliberately conservative: display type and accent colours only. Headings inherit
   their existing per-section colours, so dark panels keep light text. Remove this one
   file to restore the old look. */

@font-face {
  font-family: RxAnton;
  src: url('/assets/3d-hero/fonts/anton-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: RxAnton;
  src: url('/assets/3d-hero/fonts/anton-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Pass 2 — retone the page's OWN token set for a white ground. Flipping the tokens
     keeps every existing rule that already consumes them, instead of chasing elements.

     Correction from pass 1: --rx-ink is the page's text colour (#10233F), not a free
     name. Redefining it to violet put violet headings on the blue band at poor
     contrast. It is restored, and our accent now has its own name. */
  --rx-blue: #ffffff;       /* page ground, was #1560BD */
  --rx-blue-deep: #f5f6fa;  /* secondary bands, was #0E479B */
  --rx-card: #ffffff;       /* cards, was beige #F7F3EA */
  --rx-text: #1b2b4d;       /* was #F4F8FF — light text for a blue ground would vanish */
  --rx-ink: #10233F;        /* restored to the page's own text navy */

  --rxv-accent: #7c3aed;
  --rxv-accent-deep: #4c1d95;
}

/* Display headings pick up the hero's face but keep their own colour per section. */
h1.ct-headline, h2.ct-headline {
  font-family: RxAnton, 'Arial Black', Impact, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
  text-transform: none;
}

/* The green accent family -> violet. These are the literal rules found in the page. */
.phone-header:hover { background: var(--rxv-accent) !important; }
i.orbit-icon.fa.fa-wifi { background: var(--rxv-accent) !important; }
li.orbit-center { background: var(--rxv-accent) !important; }
.wpcf7-spinner::after { background-color: var(--rxv-accent) !important; }

/* Form submit + generic Oxygen buttons follow the hero ink. */
.frm_button_submit.frm_final_submit,
.wpcf7-form-control.wpcf7-submit,
.ct-link-button {
  background-color: var(--rxv-accent) !important;
  border-color: var(--rxv-accent) !important;
  color: #fff !important;
  transition: background-color .16s ease, transform .2s ease;
}
.frm_button_submit.frm_final_submit:hover,
.wpcf7-form-control.wpcf7-submit:hover,
.ct-link-button:hover {
  background-color: var(--rxv-accent-deep) !important;
  border-color: var(--rxv-accent-deep) !important;
}

/* Text links on light ground. */
.ct-link:not(.ct-link-button):hover { color: var(--rxv-accent) !important; }

/* Pass 1b — found by inspecting the live page. */

/* The service CTAs are a.ct-link.green-button, missed in pass 1. */
.ct-link.green-button {
  background-color: var(--rxv-accent) !important;
  border-color: var(--rxv-accent) !important;
  color: #fff !important;
}
.ct-link.green-button:hover { background-color: var(--rxv-accent-deep) !important; }
.ct-link.green-button * { color: #fff !important; }

/* Headings computed RxAnton but still looked like a rounded sans: an ID-level
   font-weight:700 outranks our 400, and the browser then fake-bolds Anton (only a 400
   face exists), smearing the letterforms. Disabling synthesis stops the fake bold no
   matter which weight rule wins. */
h1.ct-headline, h2.ct-headline {
  font-synthesis: none !important;
  font-synthesis-weight: none !important;
}


/* Cards were beige on blue; now white on white, so they need their own definition. */
.port-item,
.ct-div-block.port-item {
  border: 1px solid rgba(16, 35, 63, .10);
  box-shadow: 0 18px 44px rgba(16, 35, 63, .06);
}

/* Four blocks hardcode the beige rather than reading --rx-card, so they survived the
   token retone. Targeted by id, since .ct-div-block is used 93 times. */
html body #div_block-4804-10,
html body #div_block-5075-10,
html body #div_block-9-1569,
html body #div_block-64-1569 {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ── Pass 3: the Leistungen rail ─────────────────────────────────────────────
   The six services already live in a horizontal drag/scroll rail
   (.h-scroll-section, a flex row of 500px cards) driven by the GSAP on this page.
   That mechanic is kept and restyled — a vertical sticky stack would have fought it. */

.ct-div-block.port-item {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1),
              box-shadow .3s ease,
              background-color .35s ease !important;
}

/* Case numbering, drawn rather than added to the DOM so the markup is untouched. */
.ct-div-block.port-item::after {
  content: "01";
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 4;
  font-family: RxAnton, 'Arial Black', Impact, sans-serif;
  font-size: 15px;
  letter-spacing: .12em;
  color: rgba(16, 35, 63, .30);
  pointer-events: none;
  transition: color .35s ease;
}
#div_block-1252-10::after { content: "02"; }
#div_block-1730-10::after { content: "03"; }
#div_block-5662-10::after { content: "04"; }
#div_block-1270-10::after { content: "05"; }
#div_block-1264-10::after { content: "06"; }

/* One accent per service, as a top rule — the reference's "one ink per case" idea,
   in our own violet-led family. */
.ct-div-block.port-item::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 4;
  background: var(--rxv-accent);
}
#div_block-1252-10::before { background: #4c1d95; }
#div_block-1730-10::before { background: #2f5fb5; }
#div_block-5662-10::before { background: #0e7c86; }
#div_block-1270-10::before { background: #a63a5a; }
#div_block-1264-10::before { background: #c05e3c; }

/* Hover: the stock rule fills the card deep blue (#0E479B) with white text, which was
   built for the old palette. Same idea, our ink. */
html body .ct-div-block.port-item:hover,
html body .ct-div-block.port-item.port-item-bottom:hover {
  background-color: var(--rxv-accent) !important;
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(76, 29, 149, .22);
}
html body .ct-div-block.port-item:hover :is(h1, h2, h3, h4, h5, h6, p, span, div) {
  color: #ffffff !important;
}
.ct-div-block.port-item:hover::after { color: rgba(255, 255, 255, .55); }

/* The CTA inside a hovered (violet) card needs to invert to stay visible. */
html body .ct-div-block.port-item:hover .ct-link.green-button {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}
html body .ct-div-block.port-item:hover .ct-link.green-button * {
  color: var(--rxv-accent) !important;
}