/* ==========================================================================
   CEx — THE HERO
   --------------------------------------------------------------------------
   One hero, every page. This file is the only place hero geometry, type,
   media and form are declared; it loads last on every template so nothing
   else can quietly win.

   The rules were spread across four stylesheets before this — styles.css owned
   the homepage hero, cx-template.css and polish.css owned a second, different
   hero for the 32 service pages, and hub-quality.css nudged both. That is why
   no two heroes on this site looked alike. The service-page variants are gone;
   what is left is the variant-2 study, verbatim.

   What every hero holds:
     - the same video plate, lit by --hero-img-filter, under --hero-overlay
     - the same white contact card, two form columns wide
     - the same copy stack: eyebrow, H1, lead, two CTAs

   What a page may change: the words. Eyebrow, H1, lead and CTA labels are
   page-specific. Nothing else is.

   Height is deliberate: min-height 66vh, so the hero takes the top two thirds
   of the viewport and the band beneath it always shows above the fold. That
   budget is what forces the compact two-column form below — a stacked
   seven-row form does not fit in two thirds of a screen, and the old hero
   grew to fill the whole one rather than admit it.
   ========================================================================== */

.hero {
  position: relative;
  /* The hero owns the top two thirds of the viewport and no more, so the band
     below it always peeks above the fold and gives a reason to scroll. The
     560px floor keeps it usable on short laptop screens. Every page inherits
     this — there is one hero geometry on this site. */
  min-height: 66vh;
  background: var(--acn-black);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  padding-top: clamp(120px, 14vh, 168px);
  padding-bottom: clamp(96px, 12vh, 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__video-shell {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  filter: var(--hero-img-filter);
  /* Full opacity, as in the variant-2 study. The filter alone does the
     lightening; dropping the film to .68 over a charcoal plate was what made
     the footage read grey and washed instead of bright daylight. */
  opacity: 1;
}
.hero__video-overlay {
  position: absolute;
  inset: 0;
  /* The scrim, and nothing else. An orange radial tint used to sit on top of
     it; over the charcoal it composited to a brown cast the study does not
     have. Value lives in cx-design-system.css. */
  background: var(--hero-overlay);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: clamp(48px, 6vw, 112px);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--container-px);
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 44px);
  max-width: 760px;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  width: fit-content;
}
.hero__eyebrow-dot {
  width: 8px;
  height: 8px;
  background: var(--acn-purple);
  border-radius:0;
  box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.18);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(255, 122, 0, 0.05); }
}
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.7vw, 4.2rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__title-line {
  display: block;
}
.hero__title-line--accent {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  flex-wrap: wrap;
}
.hero__title-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 7vw, 84px);
  height: clamp(40px, 7vw, 84px);
  color: var(--acn-purple);
  flex-shrink: 0;
}
.hero__title-glyph svg { width: 100%; height: 100%; }
@media (min-width: 769px) {
.hero__title-text--right { white-space: nowrap; }
}
.hero__lead-wrap {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 640px;
}
.hero__lead-bar {
  display: block;
  width: 42px;
  height: 5px;
  background: var(--acn-purple);
  flex-shrink: 0;
  margin-top: 14px;
}
.hero__lead {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.005em;
}
.hero__shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero__shape {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(8px);
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  padding: 6px 0;
  width: fit-content;
}
.hero__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--cx-yellow);
  color: var(--cx-charcoal);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hero__cta-icon svg { width: 16px; height: 16px; }
.hero__cta:hover .hero__cta-icon { background: var(--cx-surface); transform: translateX(4px); }
.hero__form-wrap {
  display: flex;
  align-items: stretch;
}
.hero__card {
  width: 100%;
  /* White, per the study. --cx-warm-2 is the card fill for cards sitting ON
     the light surface; this one sits on a photograph and needs to read as
     paper laid over it. */
  background: var(--form-bg);
  color: var(--acn-ink);
  padding: clamp(24px, 2.4vw, 34px) clamp(24px, 2.6vw, 38px);
  border: none;
  position: relative;
  align-self: center;
  box-shadow: 0 40px 96px -28px rgba(0, 0, 0, 0.6);
}
.hero__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--acn-purple);
}
.form__kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acn-ink);
  margin-bottom: 8px;
}
.form__kicker-bar {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--acn-purple);
}
.form__sub {
  margin: 0 0 14px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}
.form { display: flex; flex-direction: column; gap: 12px; }
.form__label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--acn-ink-2);
}
.form__input,
.form__textarea {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-transform: none;
  padding: 11px 13px;
  background: var(--cx-surface);
  border: 1px solid var(--line);
  color: var(--acn-ink);
  width: 100%;
  border-radius:0;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.form__textarea { min-height: 64px; resize: vertical; }
.form__input::placeholder,
.form__textarea::placeholder { color: var(--acn-gray-2); }
.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--acn-purple);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.15);
}
.form__consent {
  display: flex;
  gap: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.form__checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--acn-purple);
}
.form__consent a {
  color: var(--acn-ink);
  text-decoration: underline;
  text-decoration-color: var(--acn-purple);
  text-underline-offset: 3px;
}
.form__privacy {
  margin: 0;
  font-size: 0.71875rem;
  line-height: 1.5;
  color: var(--acn-gray-2);
}
.form__optional {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--acn-gray-1);
  margin-left: 4px;
}
.form__submit {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
}
.form__status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.8125rem;
  color: var(--acn-purple-2);
}
@media (min-width: 981px) {
.hero {
    padding-top: 96px;
    padding-bottom: 34px;
  }.hero__grid {
    gap: clamp(40px, 5vw, 76px);
  }.hero__copy {
    gap: 26px;
  }.hero__title {
    font-size: clamp(2.4rem, 4.15vw, 3.55rem);
    line-height: 1.02;
  }.hero__title-glyph {
    width: clamp(38px, 5.4vw, 62px);
    height: clamp(38px, 5.4vw, 62px);
  }.hero__lead {
    font-size: 1rem;
    line-height: 1.45;
  }.hero__lead-wrap {
    max-width: 600px;
  }.hero__card {
    padding: 20px 26px;
  }.hero__card .form__privacy {
    display: none;
  }.hero__card .cex-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
  }.hero__card .form__status:empty {
    display: none;
  }.hero__card .form__sub {
    margin-bottom: 10px;
    font-size: 0.8125rem;
  }.hero__card .form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 8px 14px;
  }.hero__card .form__label {
    gap: 5px;
    font-size: 0.75rem;
  }.hero__card .form__label:nth-of-type(1) { grid-area: 1 / 1; }.hero__card .form__label:nth-of-type(3) { grid-area: 1 / 2; }.hero__card .form__label:nth-of-type(2) { grid-area: 2 / 1 / auto / -1; }.hero__card .form__label:nth-of-type(4) { grid-area: 3 / 1 / auto / -1; }.hero__card .form__consent,
  .hero__card .form__privacy,
  .hero__card .form__submit,
  .hero__card .form__status {
    grid-column: 1 / -1;
  }.hero__card .form__input,
  .hero__card .form__textarea {
    padding: 9px 11px;
    font-size: 0.875rem;
  }.hero__card .form__textarea {
    min-height: 40px;
  }.hero__card .form__consent {
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.35;
  }.hero__card .form__submit {
    min-height: 44px;
    padding: 12px 16px;
  }
}
@media (min-width: 981px) and (max-height: 800px) {
.hero__copy,
  .hero__form-wrap,
  .hero__lead-wrap,
  .hero__lead-bar,
  .hero__cta,
  .hero__title-text,
  .hero__title-glyph {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.hero__scroll-cue {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1;
  color: rgba(255, 255, 255, 0.6);
}
.hero__scroll-cue-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__scroll-cue-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--acn-purple) 40%, var(--acn-purple));
  position: relative;
  overflow: hidden;
}
@media (max-width: 980px) {
.hero { min-height: auto; padding-top: 92px; padding-bottom: 56px; }.hero__grid { grid-template-columns: 1fr; gap: 40px; }.hero__scroll-cue { display: none; }.hero__copy,
  .hero__form-wrap,
  .hero__lead-wrap,
  .hero__lead-bar,
  .hero__cta,
  .hero__title-text,
  .hero__title-glyph {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@keyframes acn-hero-bg-fade {
  /* Lands on 1, matching .hero__video. It used to end at .55 while the rule
     said .68, so the film popped a step brighter the moment the fade ended. */
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes acn-hero-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes acn-hero-headline-base {
  0%   { opacity: 0; transform: translateY(20%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes acn-hero-body {
  0%   { opacity: 0; transform: translateY(20%); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero__video {
  animation: acn-hero-bg-fade 1550ms var(--acn-ease-hero-1) var(--acn-delay-1) backwards;
}
.hero__video-overlay {
  animation: acn-hero-overlay-fade 1550ms var(--acn-ease-hero-1) var(--acn-delay-1) backwards;
}
.hero__eyebrow {
  animation: acn-deco-fade-in 1100ms var(--acn-ease) var(--acn-delay-1) backwards;
}
.hero__eyebrow-dot {
  animation:
    acn-pulse-purple 2.4s ease-in-out infinite,
    acn-deco-fade-in 1100ms var(--acn-ease) var(--acn-delay-1) backwards;
}
.hero__title {
  animation: acn-hero-headline-base 750ms var(--acn-ease-hero-2) var(--acn-delay-1) backwards;
  /* parent .hero already has overflow:hidden, so no clipping needed here */
}
.hero__title-line {
  display: block;
  padding-bottom: 0.04em; /* prevent descender clip */
}
.hero__title-text {
  display: inline-block;
  will-change: transform;
}
.hero__title-text--left {
  animation: acn-headline-text-left 750ms var(--acn-ease-hero-2) var(--acn-delay-2) backwards;
}
.hero__title-text--right {
  animation: acn-headline-text-right 750ms var(--acn-ease-hero-2) var(--acn-delay-2) backwards;
}
.hero__title-glyph {
  display: inline-flex;
  transform-origin: 50% 50%;
  animation: acn-headline-V 750ms var(--acn-ease-hero-2) calc(var(--acn-delay-2) * 2) backwards;
}
.hero__lead-wrap {
  animation: acn-hero-body 1250ms var(--acn-ease-hero-2) var(--acn-delay-2) backwards;
}
.hero__lead-bar {
  animation: acn-deco-line-in 1250ms var(--acn-ease) calc(var(--acn-delay-2) + 200ms) backwards;
}
.hero__shapes {
  animation: acn-hero-body 1250ms var(--acn-ease-hero-2) calc(var(--acn-delay-2) + 200ms) backwards;
}
.hero__cta {
  animation: acn-hero-body 1250ms var(--acn-ease-hero-2) calc(var(--acn-delay-2) + 350ms) backwards;
}
.hero__form-wrap {
  animation: acn-content-reveal 900ms var(--acn-ease) calc(var(--acn-delay-2) + 100ms) backwards;
}
.hero__scroll-cue {
  animation: acn-deco-fade-in 1100ms var(--acn-ease) calc(var(--acn-delay-2) + 600ms) backwards;
}
.hero__scroll-cue-line {
  position: relative;
  overflow: hidden;
}
.hero__scroll-cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--acn-purple);
  animation: acn-scroll-cue 1.8s var(--acn-ease) infinite;
}
.btn:hover .btn__icon,
.link-arrow:hover .link-arrow__icon,
.hero__cta:hover .hero__cta-icon {
  animation: acn-arrow-bounce 550ms var(--acn-ease);
}
@media (prefers-reduced-motion: reduce) {
.nav,
  .hero__video,
  .hero__video-overlay,
  .hero__eyebrow,
  .hero__eyebrow-dot,
  .hero__title,
  .hero__title-text--left,
  .hero__title-text--right,
  .hero__title-glyph,
  .hero__lead-wrap,
  .hero__lead-bar,
  .hero__shapes,
  .hero__cta,
  .hero__form-wrap,
  .hero__scroll-cue,
  .hero__scroll-cue-line::after,
  .final-cta__inner.is-visible .final-cta__headline-glyph,
  .outcomes__tab.is-active::after {
    animation: none !important;
  }.hero__video { opacity: 1; }.hero__video-overlay { opacity: 1; }.hero__title-glyph { transform: rotate(0deg) scale(0.95); }
}
.hero {
  view-timeline-name: --hero-scroll;
  view-timeline-axis: block;
}
@supports (animation-timeline: scroll()) {
.hero__video-shell,
  .hero__copy,
  .hero__form-wrap {
    animation-timeline: scroll(root block);
    animation-range: 0 66vh;
    animation-timing-function: linear;
    animation-fill-mode: both;
  }.hero__video-shell { animation-name: acn-parallax-scale; }.hero__copy        { animation-name: acn-hero-copy-out; }.hero__form-wrap   { animation-name: acn-hero-form-out; }
}
@keyframes acn-parallax-scale {
  0%   { transform: scale(1)    translateY(0);   }
  100% { transform: scale(1.12) translateY(-8%); }
}
@keyframes acn-hero-copy-out {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0.05; transform: translateY(-60px); }
}
@keyframes acn-hero-form-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0.1; transform: translateY(-40px) scale(0.96); }
}
@media (max-width: 768px) {
.hero__copy { align-items: center; text-align: center; max-width: 100%; }.hero__eyebrow { justify-content: center; }.hero__title { text-align: center; }.hero__title-line--accent { justify-content: center; }.hero__lead-wrap { flex-direction: column; align-items: center; text-align: center; gap: 16px; }.hero__lead-bar { margin-top: 0; }.hero__lead { text-align: center; }.hero__shapes { justify-content: center; }.hero__cta { margin-inline: auto; }.hero__card { text-align: left; }.form__kicker { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.hero__video-shell,
  .hero__copy,
  .hero__form-wrap,
  .cap-card,
  .cap-card__video,
  .h-section,
  .h-lead,
  .journey-step,
  .benefit,
  .faq-item,
  .final-cta__headline-glyph,
  .final-cta__headline,
  .outcomes__panel-inner,
  .footer__brand-wrap,
  .footer__col,
  .trustband__inner.has-marquee .trustband__items,
  .motion-pending {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
@media (max-width: 768px) {
.form__input,
  .form__textarea { font-size: 1rem; padding: 13px 14px; }.form__submit { min-height: 48px; }
}
/* Umbruch in Überschriften auf schmalen Schirmen.
   overflow-wrap:anywhere ist hier am 2026-08-14 rausgeflogen (QA M5, gleicher
   Fehler wie in polish.css, nur an der teureren Stelle): die Regel bricht ein
   deutsches Kompositum an einer beliebigen Stelle um, ohne Trennstrich. Genau
   das ist auf einer deutschen Seite verboten — und Überschriften sind der Ort,
   an dem die langen Komposita stehen.
   Übrig bleibt, was die Aufgabe richtig erledigt: hyphens:auto trennt nach den
   Regeln der Sprache und setzt den Trennstrich; word-break:normal hält den
   Browser davon ab, es doch wieder auf eigene Faust zu tun. */
@media (max-width: 820px) {
h1,
  h2,
  h3,
  .h-section,
  .cx-proof__h,
  .hero__title,
  .section__head {
    max-width: 100%;
    word-break: normal;
    hyphens: auto;
  }
}

/* --------------------------------------------------------------------------
   H1 length
   The homepage headline is three words. A service-page headline carries the
   page's search term and runs two to three times longer — set in the same
   uppercase display face at the same size it would break out of its column.
   Same type, same case, same weight; the scale steps down as the string grows.
   The class is stamped at build time from the character count, so a copy edit
   that lengthens a headline needs the class checked with it.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .hero__title--long  { font-size: clamp(1.9rem, 3.1vw, 2.7rem); }
  .hero__title--xlong { font-size: clamp(1.6rem, 2.5vw, 2.15rem); }
}
@media (max-width: 980px) {
  .hero__title--long  { font-size: clamp(1.75rem, 5.6vw, 2.4rem); }
  .hero__title--xlong { font-size: clamp(1.55rem, 4.8vw, 2rem); }
}

/* --------------------------------------------------------------------------
   Pieces the hero used to borrow from other stylesheets
   The homepage looked right only because styles.css and polish.css happened to
   be loaded behind it. Service pages load neither, so the same markup came out
   with a flat CTA row and an orange submit where the homepage has a charcoal
   one. Everything the hero depends on is declared here now.
   -------------------------------------------------------------------------- */

/* The arrow and the words after it are one line, always. `nowrap` on the
   right-hand text meant a long headline could not break inside itself, so the
   flex line wrapped instead — dropping the arrow onto a line of its own with
   the text stranded beneath it. Let the text wrap; keep the arrow beside it. */
.hero__title-line--accent {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.hero__title-text--right {
  white-space: normal;
  min-width: 0;
  overflow-wrap: break-word;
}
.hero__title-text {
  min-width: 0;
}

/* Two CTAs, one of them primary. Without this both read as the same quiet
   text-and-arrow link and the enquiry stops being the obvious next move. */
.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.hero__cta-group .hero__cta {
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 0;
}
.hero__cta-group .hero__cta--primary {
  color: var(--cx-charcoal);
  background: var(--cx-accent);
  border-color: var(--cx-accent);
  font-weight: 700;
}
.hero__cta-group .hero__cta--primary .hero__cta-icon {
  color: #fff;
  background: var(--cx-charcoal);
}

/* The card's submit. Charcoal, with the accent reserved for the arrow chip —
   the orange is already spent on the primary CTA to its left, and two orange
   blocks in one hero cancel each other out. */
.hero__card .form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--cx-charcoal);
  color: var(--cx-surface);
  border: 1px solid var(--cx-charcoal);
  border-radius: 0;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--dur, 220ms) ease, color var(--dur, 220ms) ease;
}
.hero__card .form__submit:hover {
  background: var(--cx-charcoal-2);
  border-color: var(--cx-charcoal-2);
  color: var(--cx-surface);
}
.hero__card .form__submit .btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--cx-accent);
  color: var(--cx-accent-on);
  flex-shrink: 0;
}
.hero__card .form__submit .btn__icon svg { width: 12px; height: 12px; }

@media (max-width: 980px) {
  .hero__cta-group {
    flex-direction: column;
    width: 100%;
  }
  .hero__cta-group .hero__cta {
    width: min(100%, 320px);
    justify-content: center;
    margin-inline: auto;
  }
}

/* The accent line is a flex row of arrow + words. Left to itself it takes the
   full column width, so when mobile centres the headline the words centre
   inside that full-width box and the arrow is left stranded at the far edge.
   Shrink the row to its contents and centre the row — arrow and words travel
   together. */
.hero__title-line--accent {
  width: fit-content;
  max-width: 100%;
}
@media (max-width: 980px) {
  .hero__title-line--accent { margin-inline: auto; }
}

/* ==========================================================================
   QA FINAL-QA-20260814 — Nachtrag vom 2026-08-14 · H3, M4
   Steht am Ende der Datei, weil diese Regeln die Blöcke darüber korrigieren.
   Die Handy-Regeln stehen zuletzt — Hausordnung dieses Projekts.
   ========================================================================== */

/* H3 · Der Winkel gehört zu den Wörtern, nicht zur Spalte.
   Die Akzentzeile ist eine Flex-Reihe aus zwei Kästen: Winkel und Wortgruppe.
   Passt die Wortgruppe nicht in eine Zeile, schrumpft ihr Kasten auf die
   Restbreite und bricht in sich um. Der Winkel bleibt dabei, was er ist — ein
   eigenes Flex-Element ganz links in der Spalte — während die Wörter mittig
   in ihrem eigenen, nach rechts versetzten Kasten sitzen. Gemessen bei 390
   Pixeln: Winkel bei x=21, Wörter bei x=73, dazwischen nichts. Das liest sich
   als abgerutschtes Zeichen neben der Überschrift.
   Bis 820 Pixel läuft die Zeile deshalb als gewöhnlicher Textfluss. Winkel und
   Wörter liegen dann in derselben Zeilenbox, brechen gemeinsam um und werden
   gemeinsam zentriert — der Winkel klebt an "klare", bei jeder Breite und bei
   jeder Überschriftenlänge. 820 ist die Grenze, ab der die Überschrift ohnehin
   zentriert steht; darüber passt die Wortgruppe auf eine Zeile und die
   Flex-Reihe bleibt unangetastet.
   display:inline kostet hier nichts: unterhalb von 981 Pixeln sind die
   Einblend-Animationen des Hero ohnehin abgeschaltet (Block bei max-width:980
   weiter oben), und Transformationen greifen auf Inline-Kästen nicht. */
@media (max-width: 820px) {
  .hero__title-line--accent {
    display: block;
    width: auto;
    max-width: 100%;
    margin-inline: 0;
  }
  .hero__title-text--right {
    display: inline;
  }
  .hero__title-glyph {
    /* Der Winkel sitzt jetzt auf der Schriftlinie statt in einer eigenen
       Flex-Zelle. Der Versatz hebt ihn auf die optische Mitte der Versalien,
       der Abstand ersetzt das weggefallene gap der Flex-Reihe. */
    vertical-align: -0.14em;
    margin-right: 0.1em;
    /* Das Mass kommt jetzt aus der Überschrift, nicht aus dem Fenster.
       Die Grundregel setzt clamp(40px, 7vw, 84px) — auf dem Handy immer die
       40 Pixel der Untergrenze. Das passt zur Startseite, deren Überschrift
       drei Wörter hat und in 38 Pixel steht. Eine Leistungsseite trägt ihren
       Suchbegriff in der Überschrift, bekommt dafür die Stufe --xlong und
       steht in 25 Pixel: gemessen am 2026-08-14 bei 390 Pixeln stand dort ein
       40er Winkel neben 25er Versalien, also anderthalbmal so hoch wie die
       Schrift daneben. In der eigenen Flex-Zelle fiel das nicht auf; im
       Textfluss zieht derselbe Kasten die Zeilenbox auf 40 Pixel auf und
       drückt den Rest der Überschrift nach unten — auf der Leistungsseite
       gemessene 93 statt 76 Pixel für dieselben drei Zeilen.
       1em bindet den Winkel an den Schriftgrad. Weil die Zeichnung im
       Ansichtsfeld ringsum Luft hat, steht der sichtbare Haken damit rund
       ein Zehntel über der Versalhöhe — auf beiden Seitentypen gleich
       betont. Der Desktop behält seine feste Staffelung. */
    width: 1em;
    height: 1em;
  }
}

/* M4 · Der Hero nimmt auf dem Handy die ersten zwei Drittel — nicht mehr.
   Stand 2026-08-14, zweiter Anlauf. Alle 33 Seiten bei 390x844 gemessen.
   ---------------------------------------------------------------------------
   Der erste Anlauf holte die Höhe nur aus Polsterung und Abständen — rund
   115 Pixel, auf jeder Seite dieselben. Nachgemessen kamen damit 3 von 33
   Seiten auf das Hausmass, die anderen 30 lagen zwischen 73 und 96 Prozent,
   im Mittel bei 83. Der Grund, und das ist die eigentliche Lehre: die Höhe
   kommt nicht aus der Polsterung, sie kommt aus dem Inhalt. Auf der höchsten
   Seite (Geschäftsprozessmanagement, 811 Pixel) standen 96 Pixel Polsterung
   gegen 268 Pixel Vorspann, 118 Pixel Überschrift und 60 Pixel Pfad. Ein
   flacher Abzug an der Polsterung kann das nicht einholen.
   Also wird die Höhe dort geholt, wo sie entsteht — am Schriftgrad auf
   schmalen Schirmen:
     Überschrift  --long  28 -> 25 Pixel, --xlong 24,8 -> 22 Pixel
     Vorspann     16,8 -> 15 Pixel, Durchschuss 1,45 -> 1,4
   Beides über clamp() an die Fensterbreite gebunden: der kleinere Wert ist
   nur die Untergrenze und greift unterhalb von rund 450 (Überschrift) bzw.
   670 Pixeln (Vorspann). Darüber gelten wieder die alten Werte — das Tablet
   sieht keinen Unterschied.
   Ergebnis, gemessen im Browser über alle 33 Seiten:
     vorher   Median 83,4 %   Spanne 62,0 – 96,1 %   20 Seiten über 80 %
     nachher  Median 67,2 %   Spanne 62,0 – 76,7 %    0 Seiten über 80 %
     27 von 33 Seiten bei 70 % oder darunter, 29 bei 72 % oder darunter.
   Die vier Seiten darüber (73,0 / 74,2 / 76,2 / 76,7 %) sind alle Kinder von
   /prozessoptimierung-beratung/. Sie tragen 416 bis 499 Zeichen Vorspann, den
   längsten auf der Seite, dazu einen zweizeiligen Pfad. Weiter zu kommen hiesse
   den Vorspann verstecken oder abschneiden — beides ist verboten, und es ist
   auch nicht nötig: auf jeder der 33 Seiten sind mindestens 106 Pixel des
   nächsten Abschnitts ohne Scrollen sichtbar.
   Was NICHT angetastet wird:
     - die Grundgrösse der Überschrift (Startseite). Sie liegt bei 62 Prozent
       und trägt die Marke; drei Wörter in 38 Pixeln bleiben 38 Pixel.
     - der Vorspann verschwindet nicht und wird nicht abgeschnitten. Er sagt
       dem Besucher, dass er richtig ist. Kein max-height, kein overflow.
     - die Knöpfe behalten ihre 48 Pixel Trefferfläche (M2).
     - der Pfad behält seine 14 Pixel (M1, Mindestschriftgrad).
     - hyphens:auto und hyphenate-limit-chars bleiben, wie sie sind. Der
       kleinere Grad hilft der Trennung sogar: mehr Zeichen pro Zeile.
   Verhältnis Überschrift zu Vorspann bleibt bei 1,47 — die Überschrift ist
   nach wie vor das dominante Element, sie ist nur nicht mehr das höchste.
   Der Desktop-Hero (69 Prozent) wird nicht berührt: alles hier steht in
   max-width:900, und bei 1440x900 sind vorher und nachher auf allen 33 Seiten
   auf das Pixel identisch. */
@media (max-width: 900px) {
  .hero {
    /* Die Polsterung oben muss die feste Navigationsleiste freihalten — und
       zwar nicht nur den Text, sondern die Trefferfläche des ersten Elements.
       Der Pfad trägt seit M2 padding-block:13px bei margin-block:-10px; sein
       Kasten beginnt also 10 Pixel ÜBER dem, was man sieht. Gemessen ist die
       Leiste 53 Pixel hoch bis rund 700 Pixel Fensterbreite und 57 Pixel
       darüber. 66 unten, 72 oben — dann liegt der Kasten des ersten Links auf
       beiden Stufen unter der Leiste statt darunter zu verschwinden. */
    padding-top: clamp(66px, 9vw, 72px);
    padding-bottom: clamp(16px, 3vw, 28px);
  }
  .hero__copy {
    gap: clamp(12px, 2.6vw, 18px);
  }
  /* Der Pfad bringt seinen eigenen Aussenabstand von 12 Pixeln mit
     (cx-components.css). In einer Flex-Spalte mit gap addiert sich das zum
     Abstand — zwei Abstände an derselben Fuge. Hier zählt der gap. */
  .hero__copy .cx-crumbs {
    margin-bottom: 0;
  }
  .hero__eyebrow {
    line-height: 1.3;
  }
  .hero__title {
    line-height: 1.02;
  }
  .hero__title--long {
    font-size: clamp(1.5625rem, 5.6vw, 2.4rem);
  }
  .hero__title--xlong {
    font-size: clamp(1.375rem, 4.8vw, 2rem);
  }
  .hero__lead-wrap {
    gap: 8px;
  }
  .hero__lead-bar {
    width: 36px;
    height: 4px;
  }
  .hero__lead {
    font-size: clamp(0.9375rem, 2.5vw, 1.05rem);
    line-height: 1.4;
  }
  /* Der Pfad bricht auf dem Handy auf zwei Zeilen. 8 Pixel zwischen den
     Zeilen sind der Wert einer waagerechten Reihe; untereinander reichen 4. */
  .hero__copy .cx-crumbs__list {
    row-gap: 4px;
  }
  .hero__cta-group {
    gap: 8px;
  }
}