/* CEx WordPress final visual-system layer — loaded after all migrated page CSS. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-800-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

body.cex-migrated-page {
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", "Inter Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --container: 1280px;
  --container-px: clamp(24px, 5vw, 72px);
  --section-py: clamp(88px, 8vw, 112px);
  min-width: 320px;
  font-family: var(--font-sans);
  font-size: 16px !important;
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

/* Dark sections use one accessible heading/lead treatment on every page. */
.cex-migrated-page .section--dark .eyebrow {
  color: #fff !important;
}
.cex-migrated-page .section--dark .h-lead {
  color: rgba(255, 255, 255, 0.86) !important;
}

.cex-migrated-page .h-section,
.cex-migrated-page .cx-trust__h {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.65vw, 3.25rem) !important;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 30ch;
  text-wrap: pretty;
}
.cex-migrated-page .h-lead,
.cex-migrated-page .cx-trust__lead {
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.cex-migrated-page :is(.service-card, .problem-card, .use-card, .industry-card, .diff-item, .method-step) h3 {
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.cex-migrated-page :is(.service-card, .problem-card, .use-card, .industry-card, .diff-item, .method-step) p,
.cex-migrated-page .legal-card p,
.cex-migrated-page .legal-card li {
  font-size: 1rem;
  line-height: 1.65;
}
.cex-migrated-page .section__head {
  max-width: 960px;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.cex-migrated-page main figure img {
  border-radius:0 !important;
}
.cex-migrated-page .cex-page-visual {
  width: 100%;
  max-width: var(--container);
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding-inline: var(--container-px);
}
.cex-migrated-page .cex-page-visual img {
  width: 100%;
  max-width: 100%;
  height: clamp(300px, 34vw, 520px);
  object-fit: cover;
  object-position: center;
  box-shadow: 0 24px 60px -32px rgba(30, 35, 39, 0.4);
}
body.cex-migrated-page.home > main > .cex-page-visual {
  max-width: none;
  margin-top: 0;
  padding-inline: 0;
}
body.cex-migrated-page.home > main > .cex-page-visual img {
  height: clamp(260px, 32vw, 460px);
  border-radius:0 !important;
}

.cex-migrated-page :is(.btn, .cx-form__submit, .cx-hero-form button[type="submit"]) {
  min-height: 48px;
  border-radius:0 !important;
  font-size: 0.9375rem;
  font-weight: 700;
}
.cex-migrated-page form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) {
  min-height: 48px;
  font-family: var(--font-sans);
  font-size: 1rem;
}
.cex-migrated-page form textarea {
  min-height: 96px;
  font-family: var(--font-sans);
  font-size: 1rem;
}
/* 2026-08-14, QA M3: war 0,75rem — 12 Pixel. Diese Deklaration ist mit
   !important gesetzt und schlägt damit jede andere Angabe zur Einwilligungs-
   zeile auf der ganzen Seite, auch die der Hero-Karte. Sie ist deshalb die
   einzige Stelle, an der sich diese Schriftgrösse ändern lässt; ein Nachtrag
   in einem später geladenen Blatt läuft ins Leere.
   14 Pixel sind die Untergrenze des Hauses. Ausgerechnet die Zeile, mit der
   jemand einer Datenverarbeitung zustimmt, war die kleinste Schrift der
   Seite — eine Einwilligung, die man zusammengekniffen lesen muss, ist die
   schwächste Stelle des Formulars. */
.cex-migrated-page :is(.form__consent, .cx-form__consent, .cx-hero-form label) {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}
.cex-migrated-page :is(input, textarea, select, button, a):focus-visible {
  outline: 3px solid var(--cx-accent);
  outline-offset: 3px;
}
.cex-migrated-page .cex-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.cex-migrated-page .cex-form-status {
  min-height: 1.5em;
  margin: 10px 0 0;
  color: currentColor;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Final accessibility overrides shared by static HTML and WordPress. */
.cex-migrated-page .cx-form__eyebrow {
  /* Was #08704f — a green that existed nowhere else on the site and read as a
     success state where there is none. It was there for contrast, and the
     accent cannot replace it: #D96800 on the light form fill is 2.7:1 and
     fails. --muted is 7.3:1 and is already the site's secondary ink. */
  color: var(--muted) !important;
}

.cex-migrated-page .cross-link__tag {
  /* War var(--cx-accent-3), also #D96800. Auf der Kartenfüllung #F3F0ED sind
     das 3,12:1 bei 11 Pixel Schriftgrösse — unter dem Mindestwert von 4,5:1
     für Fliesstext. Dieselbe Farbfamilie, nur so weit abgedunkelt, dass sie
     die Grenze nimmt. Das Orange auf Flächen und Rahmen bleibt unberührt. */
  color: #7d3a00 !important;
}
.cex-migrated-page button.footer__cookie {
  /* Waren 44. Nachgemessen im Browser bei 390 Pixeln Breite kamen davon
     42,9 an: der Link direkt darunter steht später im Dokument, überlappt
     die Unterkante um einen knappen Pixel und liegt bei der Trefferprüfung
     obenauf. Zwei Pixel Reserve, und die Schaltfläche misst sich sauber. */
  min-height: 46px !important;
}
.cex-migrated-page button.footer__cookie {
  padding-block: 7px !important;
}

/* Service-page hero: one gutter, one type scale, compact enough for a laptop. */
@media (min-width: 921px) {
  
  
  
  
  
  
  
  
  
  
  
  body.cex-migrated-page:not(.home) .cx-hero-form :is(input:not([type="checkbox"]), textarea, button) {
    min-height: 44px !important;
  }
  
  
}



@media (min-width: 921px) and (max-width: 1599px) {
  .cex-migrated-page .method {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .cex-migrated-page .method .method-step {
    min-width: 0;
    padding: 28px 24px;
  }
}

/* Homepage hero actions: the enquiry action is primary on every screen. */





/* Legal/support pages use the same scale and readable body size. */
.cex-migrated-page .legal-hero {
  padding: clamp(88px, 10vw, 128px) 0 clamp(48px, 6vw, 72px);
}
.cex-migrated-page .legal-hero__title {
  font-size: clamp(2.75rem, 4.5vw, 3.625rem);
  font-weight: 800;
}
.cex-migrated-page .legal-hero__lead {
  font-size: 1.0625rem;
  line-height: 1.6;
}
.cex-migrated-page .legal-inline-button {
  min-height: 44px;
  padding: 10px 14px;
  border-radius:0;
}

/* Static service pages do not load the homepage stylesheet. Keep the shared
   consent dialog fully functional and out of the document flow here too. */
.cex-migrated-page .privacy-consent {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
}
.cex-migrated-page .privacy-consent[hidden] {
  display: none !important;
}
body.cex-migrated-page.has-privacy-dialog {
  overflow: hidden;
}
.cex-migrated-page .privacy-consent__panel {
  position: relative;
  width: min(100%, 640px);
  max-height: 90dvh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 40px);
  background: var(--cx-surface, var(--cx-surface));
  color: var(--cx-charcoal);
  border: 1px solid var(--line);
  box-shadow: 0 28px 80px -30px rgba(0, 0, 0, 0.72);
  scrollbar-gutter: stable;
}
.cex-migrated-page .privacy-consent__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--cx-yellow);
}
.cex-migrated-page .privacy-consent__close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.5rem;
  cursor: pointer;
}
.cex-migrated-page .privacy-consent__close:hover {
  background: var(--cx-yellow);
  color: var(--cx-charcoal);
}
.cex-migrated-page .privacy-consent__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--cx-charcoal);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.cex-migrated-page .privacy-consent__eyebrow::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--cx-yellow);
}
.cex-migrated-page .privacy-consent__content h2 {
  margin: 0 0 12px;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.cex-migrated-page .privacy-consent__content p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.cex-migrated-page .privacy-consent__links {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  font-size: 0.8125rem;
}
.cex-migrated-page .privacy-consent__links a {
  color: var(--cx-charcoal);
  text-decoration: underline;
  text-decoration-color: var(--cx-yellow);
  text-underline-offset: 3px;
}
.cex-migrated-page .privacy-consent__options {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  border-top: 1px solid var(--line);
}
.cex-migrated-page .privacy-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  /* für die Trefferfläche des Häkchens, siehe unten */
  position: relative;
}
/* Die drei Kategorie-Häkchen im Einwilligungsdialog: 20 mal 20 Pixel sichtbar.
   Das ganze <label> ist zwar anklickbar und über 44 Pixel hoch, aber das
   Kästchen sitzt bündig am rechten Rand — ein 44er Quadrat um seine Mitte
   ragt 12 Pixel über die Zeile hinaus, und diese Ecke trifft nichts mehr.
   Gemessen: Kreuz 53 mal 80, Ecken daneben.
   Also legt das Label selbst eine 44er Fläche über die Stelle. Sie liegt
   absolut, ist damit kein Flexkind und verschiebt die Zeile nicht; die 12
   Pixel nach rechts fallen in die Innenpolsterung des Dialogfensters, dort
   wird nichts abgeschnitten. Unsichtbar, ohne Fläche, ohne Rahmen. */
.cex-migrated-page .privacy-option::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
}
.cex-migrated-page .privacy-option strong,
.cex-migrated-page .privacy-option small {
  display: block;
}
.cex-migrated-page .privacy-option strong {
  color: var(--cx-charcoal);
  font-size: 0.9375rem;
}
.cex-migrated-page .privacy-option small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.cex-migrated-page .privacy-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: var(--cx-yellow);
}
.cex-migrated-page .privacy-option--locked input[type="checkbox"] {
  opacity: 0.6;
}
.cex-migrated-page .privacy-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cex-migrated-page .privacy-consent__actions button {
  flex: 1 1 160px;
  padding: 12px 16px;
  border: 1px solid var(--cx-charcoal);
  background: #fff;
  color: var(--cx-charcoal);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.cex-migrated-page .privacy-consent__secondary:hover {
  background: var(--cx-charcoal);
  color: #fff;
}
.cex-migrated-page .privacy-consent__primary {
  background: var(--cx-yellow) !important;
  border-color: var(--cx-yellow) !important;
  color: var(--cx-charcoal) !important;
}
.cex-migrated-page .privacy-consent__close,
.cex-migrated-page .privacy-consent__actions button {
  min-width: 44px;
  min-height: 44px;
  border-radius:0;
}

@media (max-width: 920px) {
  body.cex-migrated-page {
    --container-px: clamp(20px, 5.5vw, 28px);
    --section-py: 64px;
    font-size: 16px !important;
  }
  .cex-migrated-page .h-section,
  .cex-migrated-page .cx-trust__h {
    font-size: clamp(1.875rem, 8vw, 2.25rem) !important;
    line-height: 1.1;
  }
  .cex-migrated-page .h-lead,
  .cex-migrated-page .cx-trust__lead {
    font-size: 1rem;
  }
  
  
  
  
  
  .cex-migrated-page .cex-page-visual {
    margin-top: 28px;
    padding-inline: var(--container-px);
  }
  .cex-migrated-page .cex-page-visual img,
  body.cex-migrated-page.home > main > .cex-page-visual img {
    height: clamp(240px, 72vw, 360px);
  }

  
  
  
  
  
  
  
  
  
  
  
  .cex-migrated-page .trust-item__num,
  .cex-migrated-page .trust-item__label,
  .cex-migrated-page .cross-link__tag,
  .cex-migrated-page .mining-step__num {
    margin-inline: auto;
    text-align: center !important;
  }
  /* Kein overflow-wrap:anywhere mehr (QA 2026-08-14, M5). Die Regel hat den
     Wert mitten im Wort umbrochen, ohne Trennstrich — auf einer deutschen
     Seite ist genau das verboten. Der Inhalt ist eine kurze Kennzahl; sie
     passt bei jeder Breite in ihre Spalte. Wo im Ausnahmefall doch getrennt
     werden muss, macht das die hyphens:auto-Regel der Seite mit Trennstrich. */
  body.cex-migrated-page:not(.home) .trust-item__num {
    font-size: clamp(0.875rem, 4vw, 1.125rem);
  }
  body.cex-migrated-page:not(.home) .trust-item__label {
    display: none;
  }

  
  

  .cex-migrated-page .legal-hero {
    padding: 72px 0 52px;
    text-align: center;
  }
  .cex-migrated-page .legal-hero__eyebrow {
    margin-inline: auto;
  }
  .cex-migrated-page .legal-hero__title,
  .cex-migrated-page .legal-hero__lead {
    margin-inline: auto;
    text-align: center;
  }
  .cex-migrated-page .legal-hero__title {
    font-size: clamp(2.125rem, 10vw, 2.75rem);
  }

  .cex-migrated-page .privacy-consent {
    align-items: flex-start;
    padding: 12px;
  }
  .cex-migrated-page .privacy-consent__panel {
    max-height: calc(100dvh - 24px);
    padding: 24px 18px 18px;
  }
  .cex-migrated-page .privacy-consent__content {
    padding-top: 8px;
    text-align: left;
  }
  .cex-migrated-page .privacy-consent__eyebrow {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .cex-migrated-page .privacy-consent__actions {
    flex-direction: column;
  }
  .cex-migrated-page .privacy-consent__actions button {
    width: 100%;
    flex: 0 0 auto;
  }
}



@media (prefers-reduced-motion: reduce) {
  .cex-migrated-page *,
  .cex-migrated-page *::before,
  .cex-migrated-page *::after {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   CEX TOPBAR v2 — kanonisch, 2026-07-28
   Gilt für alle 36 öffentlichen Seiten. Ersetzt jede frühere Nav-Regel.
   Mittel-Slot ist dauerhaft freigehalten (temporäre LIVE-Pill des
   Client-Overview-Widgets liegt dort, position:fixed, z-index 99998).
   ENTFERNUNG DER PILL: siehe Block "NACH ENTFERNUNG DER PILL" am Ende.
   ========================================================================== */

:root {
  --cx-nav-h: 64px;
  --cx-nav-slot: 300px;   /* Mindestbreite des freigehaltenen Mittelfelds */
  --cx-nav-gap: 24px;
}

html { scroll-padding-top: calc(var(--cx-nav-h) + 16px); }

/* ---- Bar-Rahmen ---------------------------------------------------------- */
.cex-migrated-page .nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--cx-surface, var(--cx-surface));
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  color: var(--cx-charcoal);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  transition: box-shadow 280ms cubic-bezier(0.85, 0, 0, 1);
}
.cex-migrated-page .nav.is-scrolled {
  box-shadow: 0 1px 0 rgba(30, 35, 39, 0.04), 0 12px 28px -18px rgba(30, 35, 39, 0.18);
}
/* Scroll-Fortschritt: einziger Indikator, an der Unterkante der Bar */
.cex-migrated-page .nav::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--cx-yellow);
  transform-origin: left;
  transform: scaleX(var(--scroll-progress, 0));
}

/* ---- Drei-Zonen-Raster --------------------------------------------------- */
.cex-migrated-page .nav__inner {
  display: grid;
  grid-template-columns: auto minmax(var(--cx-nav-slot), 1fr) auto;
  align-items: center;
  gap: var(--cx-nav-gap);
  width: 100%;
  max-width: var(--container);
  min-height: var(--cx-nav-h);
  height: var(--cx-nav-h);
  margin-inline: auto;
  padding-inline: var(--container-px);
  padding-block: 0;
}
.cex-migrated-page .nav__lead {
  display: flex;
  align-items: center;
  gap: var(--cx-nav-gap);
  min-width: 0;
}
.cex-migrated-page .nav__slot { min-width: var(--cx-nav-slot); height: 1px; }
.cex-migrated-page .nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ---- Marke --------------------------------------------------------------- */
.cex-migrated-page .nav__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.cex-migrated-page .nav__brand img {
  width: 120px !important;
  height: 48px !important;
  object-fit: contain;
  display: block;
}

/* ---- In-Page-Anker ------------------------------------------------------- */
.cex-migrated-page .nav__primary {
  display: none;              /* erst ab 1200px sichtbar */
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cex-migrated-page .nav__primary li { margin: 0; }
.cex-migrated-page .nav__primary a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--cx-charcoal-3);
  transition: color 280ms cubic-bezier(0.85, 0, 0, 1);
}
.cex-migrated-page .nav__primary a:hover { color: var(--cx-charcoal); }
.cex-migrated-page .nav__primary a.is-active { color: var(--cx-charcoal); }
.cex-migrated-page .nav__primary a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--cx-yellow);
}

/* ---- CTA ----------------------------------------------------------------- */
.cex-migrated-page .nav .nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--cx-charcoal) !important;
  border: 1px solid var(--cx-charcoal) !important;
  color: var(--cx-surface) !important;
  border-radius:0;
  text-decoration: none;
  transition: background-color 280ms cubic-bezier(0.85, 0, 0, 1),
              border-color 280ms cubic-bezier(0.85, 0, 0, 1),
              color 280ms cubic-bezier(0.85, 0, 0, 1);
}
.cex-migrated-page .nav .nav__cta:hover,
.cex-migrated-page .nav .nav__cta:focus-visible {
  background: var(--cx-yellow) !important;
  border-color: var(--cx-yellow) !important;
  color: var(--cx-charcoal) !important;
}
.cex-migrated-page .nav .nav__cta .btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  background: var(--cx-yellow);
  color: var(--cx-charcoal);
  transition: transform 280ms cubic-bezier(0.85, 0, 0, 1), background 280ms, color 280ms;
}
.cex-migrated-page .nav .nav__cta:hover .btn__icon { background: var(--cx-charcoal); color: var(--cx-yellow); transform: translateX(3px); }
.cex-migrated-page .nav .nav__cta .btn__icon svg { width: 12px; height: 12px; }

/* ---- Menü-Button --------------------------------------------------------- */
.cex-migrated-page .nav .cx-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px 10px 11px;
  background: rgba(30, 35, 39, 0.04);
  border: 1px solid var(--line);
  color: var(--cx-charcoal);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  border-radius:0;
}
.cex-migrated-page .nav .cx-menu-btn:hover,
.cex-migrated-page .nav .cx-menu-btn[aria-expanded="true"] {
  background: var(--cx-charcoal);
  border-color: var(--cx-charcoal);
  color: #fff;
}
.cex-migrated-page .nav .cx-menu-btn__icon { width: 18px; height: 14px; gap: 3px; }
.cex-migrated-page .nav .cx-menu-btn__icon span { height: 1.5px; }
.cex-migrated-page .nav .cx-menu-btn:hover .cx-menu-btn__icon span,
.cex-migrated-page .nav .cx-menu-btn[aria-expanded="true"] .cx-menu-btn__icon span { background: var(--cx-yellow); }

/* ---- Fokus --------------------------------------------------------------- */
.cex-migrated-page .nav a:focus-visible,
.cex-migrated-page .nav button:focus-visible,
.cex-migrated-page .cx-drawer a:focus-visible {
  outline: 2px solid var(--cx-yellow);
  outline-offset: 3px;
}

/* ---- Drawer-Anpassungen -------------------------------------------------- */
.cex-migrated-page .cx-drawer { padding-top: var(--cx-nav-h); }
/* "Springen zu" ist die einzige Quelle der In-Page-Anker, sobald die
   Bar-Links weg sind — also überall ausser auf grossem Desktop sichtbar. */
.cex-migrated-page .cx-drawer__section--mobile { display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 1200px) {
  .cex-migrated-page .cx-drawer__section--mobile { display: none; }
}

/* ---- Hero-Freiraum (AGENTS.md: fixe Nav darf Hero nie verdecken) --------- */


/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* ≥1200px — volle Bar: Marke + 3 Anker | Slot | CTA mit Label | Menü mit Label */
@media (min-width: 1200px) {
  .cex-migrated-page .nav__primary { display: flex; }
}
@media (min-width: 1440px) {
  :root { --cx-nav-slot: 340px; }
}

/* ≤1199px — Anker wandern in den Drawer, Menü-Button wird Icon-only */
@media (max-width: 1199px) {
  :root { --cx-nav-slot: 260px; }
  .cex-migrated-page .nav .cx-menu-btn__label { display: none; }
  .cex-migrated-page .nav .cx-menu-btn { width: 44px; padding: 0; gap: 0; }
}

/* ≤920px — kompakte Bar; CTA wird Icon-only, sonst kollidiert sie mit der Pill */
@media (max-width: 920px) {
  :root { --cx-nav-h: 56px; --cx-nav-gap: 12px; }
  .cex-migrated-page .nav__inner { min-height: 56px; height: 56px; }
  .cex-migrated-page .nav__brand img { width: 100px !important; height: 40px !important; }
  .cex-migrated-page .nav .nav__cta-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cex-migrated-page .nav .nav__cta { width: 44px; padding: 0; gap: 0; justify-content: center; }
  .cex-migrated-page .nav .nav__cta .btn__icon { width: 100%; height: 100%; background: transparent; color: var(--cx-surface); }
  .cex-migrated-page .nav .nav__cta:hover .btn__icon { background: transparent; color: var(--cx-charcoal); }
  .cex-migrated-page .nav .nav__cta .btn__icon svg { width: 15px; height: 15px; }
  /* AGENTS.md: Mikro-Labels auf Mobile zentrieren */
  .cex-migrated-page .cx-drawer__label { text-align: center; }
}

/* ≤620px — Pill verliert ihr Textlabel, Slot darf schrumpfen */
@media (max-width: 620px) {
  :root { --cx-nav-h: 52px; --cx-nav-slot: 100px; }
  .cex-migrated-page .nav__inner { min-height: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .cex-migrated-page .nav,
  .cex-migrated-page .nav *,
  .cex-migrated-page .cx-drawer,
  .cex-migrated-page .cx-drawer * { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ==========================================================================
   NACH ENTFERNUNG DER PILL  (overview-widget.js gelöscht)
   Genau drei Änderungen, sonst nichts:
     1. :root { --cx-nav-slot: 0px; }  in allen vier Breakpoint-Blöcken
     2. @media (min-width:1200px) → @media (min-width:980px) für .nav__primary
        und @media (max-width:1199px) → (max-width:979px)
     3. Den ≤920px-Block "nav__cta-text visually hidden" streichen; stattdessen
        @media (max-width:520px) { … } — das CTA-Label bleibt bis 520px sichtbar.
   Die Bar bleibt sonst identisch.
   ========================================================================== */

/* ==========================================================================
   CEx DESIGN SYSTEM — shared surface palette (single source of truth)
   Loaded on every CEx page after the page's own CSS, so these win. Editing
   the tokens here retires a colour everywhere at once; do not re-declare
   these values in a page's own <style> block.
   ========================================================================== */
:root {

  /* Highlight/badge wash. Was rgba(255,122,0,.12), which composited over the
     var(--cx-warm-2) card fill to #EBDBCC — a tan that read as the retired cream even
     though nothing in the source was cream. At .30 it reads unambiguously as
     the brand orange on both the surface and the card fill. */
}

/* Ersatzschrift mit angeglichenen Massen.
   Die fünf Inter-Schnitte laden mit font-display:swap. Bis sie da sind, setzt
   der Browser die Systemschrift — die hat andere Zeilen- und Zeichenmasse, und
   beim Umschalten springt das Layout. Diese Ersatzschrift ist die lokale
   Arial, per Override auf Inters Masse gezogen. Sie rendert nichts Neues, sie
   nimmt dem Umschalten nur den Sprung. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.12%;
  ascent-override: 90.20%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

/* ==========================================================================
   QA FINAL-QA-20260814 — Nachtrag vom 2026-08-14 · M1
   Diese Datei laedt vor cx-hero.css und cx-components.css. Alles, was gegen
   jene beiden Blaetter ankommen muss, steht deshalb dort und nicht hier.
   Hier steht nur, was styles.css korrigiert — das laedt davor.
   ========================================================================== */

/* M1 · "Im Fokus": eine Reihe, nicht sechs halbe.
   Das Band ist eine Laufschrift. Die Spur (.trustband__items) bekommt von
   styles.css flex:1 und darf deshalb nicht ueber die Spaltenbreite hinaus —
   die sechs Begriffe darin sind aber normale Flex-Elemente und schrumpfen
   mit. Sobald die Summe der Begriffe breiter ist als die Spur, wird jeder
   einzelne Begriff so schmal gequetscht, dass er in sich umbricht:
   "Enterprise" ueber "Architecture", "Change" ueber "Management". Gemessen
   bei 1440 und 1280 Pixeln — drei der sechs Begriffe zweizeilig.
   Ein Begriff des Bandes ist eine Marke, kein Fliesstext: er steht auf einer
   Zeile oder gar nicht. Mit flex:0 0 auto behaelt jeder seine natuerliche
   Breite — und genau das ist der Zustand, den die Laufschrift erwartet: sie
   schiebt die Reihe durch, der Rahmen (.trustband__inner, overflow:hidden)
   schneidet sie an den Kanten ab.
   Nachgemessen am 2026-08-14 gegen den Stand davor, bei 1440 und 1280:
   vorher zwei Reihen, und drei der sechs Begriffe 30 statt 15 Pixel hoch,
   also mitten im Wort umbrochen. Nachher eine Reihe, kein Begriff zweizeilig.
   Faellt das Skript aus, greift der Umbruchmodus von styles.css und die
   Begriffe verteilen sich sauber auf zwei Reihen — auch dann bricht keiner
   mehr in sich um. */
.trustband__items span {
  flex: 0 0 auto;
  white-space: nowrap;
}