/* ==========================================================================
   cx-components.css — the components that must look the same on every page

   Anything that appears on more than one page and kept drifting between the
   homepage and the 32 service pages lives here, declared once. It loads LAST
   on all 36 public pages, so it is the last word on these three things:

     1. FAQ            — one question style AND one heading wording, everywhere
     2. Card grids     — the last row fills the width; no orphan gaps
     3. Long words     — German compounds break instead of escaping their column

   Wording that must be identical on every page is listed in INHALTS-STANDARDS.md
   next to this file. CSS cannot enforce a sentence, so the standard lives there
   and is cross-referenced from the component it belongs to.

   The reason the site had two of everything: styles.css only reaches the
   homepage and the legal pages, cx-template.css only reaches the service
   pages, so the same component was written twice and then edited once. Adding
   a rule to either of those files fixes half the site. Add it here instead.
   ========================================================================== */


/* ==========================================================================
   1. FAQ — the homepage list is the blueprint
   --------------------------------------------------------------------------
   Two FAQ components existed. The homepage (.faq-item / .faq-icon /
   .faq-item__body, in styles.css) is a flat list: hairline rules, no boxes, a
   square accent chip that turns from + to − when the answer opens. The service
   pages (.faq__item / .faq__answer, in cx-template.css) were bordered cards in
   two columns with a plain "+" character.

   The service markup has no element for the chip, so it is drawn here on
   summary::after — a coloured box with the two bars painted as background
   layers. Open state drops the vertical bar and inverts, which is the same
   plus-to-minus flip the homepage does by hiding .faq-icon__bar--v.

   DIE UEBERSCHRIFT IST FESTGELEGT. Das H2 in <section id="faq"> lautet auf
   allen 33 Seiten wortgleich:

       Diese Fragen hören wir häufiger

   Vorher standen dort 30 verschiedene Formulierungen ("Fragen, die in den
   ersten Gesprächen immer kommen.", "Häufige Fragen zur …", "Fragen aus
   Produktion, Qualität und Instandhaltung." …). Der Abschnitt ist auf jeder
   Seite derselbe Baustein und liest sich nur dann als einer, wenn er auch
   gleich heisst. Neue Seiten uebernehmen den Satz unveraendert — die
   Seitenspezifik gehoert in die Fragen, nicht in die Ueberschrift.
   Quelle: INHALTS-STANDARDS.md
   ========================================================================== */

.faq {
  /* min() so the mobile rules that force this to 100% still get their way. */
  max-width: min(920px, 100%);
  /* Flush left by default: service pages set their section heads left, and a
     centred 920px list under a left-aligned heading reads as a mistake. */
  margin: 56px 0 0;
  display: block;
  gap: 0;
  border-top: 1px solid var(--line);
}
/* The homepage centres its FAQ heading, so the list follows it. */
#faq:has(.section__intro--center) .faq,
#faq:has(.h-section--center) .faq { margin-inline: auto; }

.faq__item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur) var(--ease-out);
}
.faq__item[open] { background: var(--cx-warm-2); border-color: var(--line); }

.faq__item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(24px, 2.4vw, 32px) clamp(16px, 1.6vw, 24px);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--acn-ink);
  cursor: pointer;
  transition: padding-left var(--dur) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { padding-left: 24px; }

/* The chip. 28px square, accent fill, a 12px plus drawn from two background
   layers so no extra markup is needed. */
.faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background-color: var(--cx-yellow);
  background-image:
    linear-gradient(var(--cx-charcoal), var(--cx-charcoal)),
    linear-gradient(var(--cx-charcoal), var(--cx-charcoal));
  background-size: 12px 1.5px, 1.5px 12px;
  background-position: center center, center center;
  background-repeat: no-repeat;
  transition:
    background-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
/* Open: only the horizontal bar survives, so the plus reads as a minus. */
.faq__item[open] summary::after {
  content: "";
  background-color: var(--cx-charcoal);
  background-image: linear-gradient(var(--cx-yellow), var(--cx-yellow));
  background-size: 12px 1.5px;
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0 clamp(16px, 1.6vw, 24px) clamp(28px, 3vw, 36px);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 820px;
}


/* ==========================================================================
   2. Card grids — the last row fills the width
   --------------------------------------------------------------------------
   Five industry cards in a three-across grid left a hole where a sixth card
   would have been. Same for five service cards, six cross-links, thirty topic
   tiles. The rule now is: whatever is left over on the final row grows to fill
   it, so two cards under three are each half the row, not two thirds of it.

   These were all `repeat(auto-fit, minmax(Npx, 1fr))` grids, where the column
   count changes with the viewport — so an nth-child rule can't know which item
   starts the last row. Wrapping flex does know: give every card the same
   flex-basis the minmax had and let flex-grow settle the remainder. Same
   breakpoints, same card widths on full rows, and it self-corrects at every
   width instead of at the three we happened to test.
   ========================================================================== */

.services-grid,
.uses-grid,
.industries,
.cross-links,
.topic-grid,
.sm-grid,
.pm-practice__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* min-width:0 so a long word inside a card can't veto the shrink.

   height:auto matters as much. A flex item only stretches to the height of its
   line when its cross size is `auto` — a card carrying height:100%, which is
   what these all had from their days as grid items, opts out of the stretch and
   falls back to its own content height. That is how the BPMN card ended up 26px
   shorter than the Lean card beside it. align-self says the same thing the
   container's align-items already says, and survives a card that sets its own. */
.services-grid > *,
.uses-grid > *,
.industries > *,
.cross-links > *,
.topic-grid > *,
.sm-grid > *,
.pm-practice__grid > * { min-width: 0; height: auto; align-self: stretch; }

/* Basis per grid = the minmax() floor it used to carry, so full rows keep the
   card count and width they already had. */
.services-grid   > * { flex: 1 1 280px; }
.uses-grid       > * { flex: 1 1 280px; }
.industries      > * { flex: 1 1 300px; }
.cross-links     > * { flex: 1 1 220px; }
.topic-grid      > * { flex: 1 1 240px; }
.sm-grid         > * { flex: 1 1 290px; }
.pm-practice__grid > * { flex: 1 1 320px; }

/* Thirty topic tiles is a directory, not a feature row. Letting the last two
   double in width would make the tail of the list shout louder than the head,
   so they fill the row but stop at the width of two normal tiles. */
.topic-grid > * { max-width: 100%; }
@media (min-width: 981px) {
  .topic-grid > * { max-width: calc(50% - 6px); }
}


/* ==========================================================================
   3. Long words stay inside their column
   --------------------------------------------------------------------------
   "Vier Leistungsfelder — von der Standortbestimmung bis zur Übergabe in den
   Alltag." at 52px in a 440px column: "Standortbestimmung" alone measures
   518px, so the line ran 21px past the column and under the cards next to it.

   Two fixes, because it is two problems. The heading was also simply too big
   for the column it sits in — a container query ties .h-section to the width
   it actually gets rather than to the viewport, so the two-column sections
   scale down and the full-width ones are untouched. Then hyphenation as the
   safety net for every other compound noun on a German site.
   ========================================================================== */

.section__head { container-type: inline-size; }

@supports (font-size: 1cqi) {
  .section__head > .h-section {
    /* 8.5cqi: 37px in a 440px column, and past ~610px the 3.25rem ceiling
       takes over — which is where the full-width headings already were. */
    font-size: clamp(1.75rem, 8.5cqi, 3.25rem);
  }
}

/* --------------------------------------------------------------------------
   Deutsche Silbentrennung — die eine Stelle, an der sie geregelt wird
   --------------------------------------------------------------------------
   Bricht ein langes Kompositum um, gehoert ein Trennstrich ans Zeilenende.
   Vorher stand hier `hyphens: none` neben `overflow-wrap: break-word`: das
   trennte "Digitalisierungsberatung" ohne jedes Zeichen mitten im Wort.

   `hyphens: auto` allein war schon einmal drin und wurde zurueckgenommen,
   weil Chromes deutsches Woerterbuch in einer 357px-Kartenspalte an fast
   jedem Zeilenende trennte und die Komposita an der falschen Fuge aufmachte
   ("Medi-enbrueche", "ab-tippfrei"). Genau dagegen steht jetzt
   `hyphenate-limit-chars: 12 5 4`:

     12  Woerter unter 12 Zeichen werden gar nicht getrennt
          -> "abtippfrei" (10) bleibt ganz, der alte Fehlbruch entfaellt
      5  mindestens 5 Zeichen vor dem Strich
          -> "Medienbrueche" kann nur noch "Medien-brueche" werden
      4  mindestens 4 Zeichen auf der naechsten Zeile
          -> keine ein- und zweibuchstabigen Zeilenanfaenge

   `overflow-wrap: break-word` bleibt als letzte Instanz stehen, fuer Woerter,
   die auch getrennt nicht in die Spalte passen. Voraussetzung fuer die
   Trennung ist `lang="de"` am <html> — steht auf allen ausgelieferten Seiten.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h-section, .h-lead, .hero__title, .final-cta__headline,
p, li, dt, dd, figcaption, summary, blockquote {
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-lines: 2;
  hyphenate-limit-chars: 12 5 4;
  hyphenate-limit-lines: 2;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Mobil ist die Spalte am schmalsten, dort wird die Trennung am dringendsten
   gebraucht. cx-template.css und cx-hero.css setzen hier `overflow-wrap:
   anywhere`, was ein Wort an jedem beliebigen Zeichen aufbricht — mit aktiver
   Trennung ist das nicht mehr noetig und nimmt der Trennung nur die Arbeit ab.
   Zurueck auf break-word, Trennung an, gleiche Grenzwerte wie oben. */
@media (max-width: 820px) {
  h1, h2, h3, h4, h5, h6,
  .h-section, .h-lead, .cx-proof__h, .hero__title, .section__head {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 12 5 4;
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* hub-quality.css setzt dieselben Ueberschriften mobil auf
   `hyphens: none !important` — das gewinnt sonst gegen die Regel oben, obwohl
   diese Datei spaeter laedt. Gleiche Selektoren, gleiche Spezifitaet, hier
   entschieden. */
@media (max-width: 820px) {
  body.cex-migrated-page h1,
  body.cex-migrated-page h2,
  body.cex-migrated-page h3,
  body.cex-migrated-page .h-section,
  body.cex-migrated-page .hero__title,
  body.cex-migrated-page .cx-proof__h {
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
    hyphenate-limit-chars: 12 5 4;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* Kurze Beschriftungen und Kennzahlen, die anderswo auf `overflow-wrap:
   anywhere` stehen. Auch sie sollen an der Silbe trennen statt am Zeichen. */
.cx-trust__creds li,
.cx-trust__creds b,
.tree-major-summary b,
.tree-branch-summary b,
.cross-link__tag,
.trust-item__num,
.trust-item__label {
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 12 5 4;
  overflow-wrap: break-word;
  word-break: normal;
}


/* ==========================================================================
   4. Mobile alignment — section heads centred, cards flush left
   --------------------------------------------------------------------------
   cx-template.css centres everything below 820px, cards included, so a
   four-line paragraph in a card sat as a centred block with both edges ragged.
   That is the hardest shape to read on a narrow screen: the eye has to hunt for
   the start of every line.

   The house rule is centred section heads and intros, left-aligned body and
   cards, so the split is drawn at the card edge. Section heads keep their
   centring; anything inside a card, a step or a list item goes flush left.
   Equal specificity to the rules it replaces, and this file loads last.
   ========================================================================== */

@media (max-width: 820px) {
  [class*="card"],
  [class*="card"] p,
  [class*="card"] li,
  [class*="card"] h2,
  [class*="card"] h3,
  [class*="card"] h4,
  .method-step,
  .method-step__title,
  .method-step__body,
  .method-step__when,
  .faq__item summary,
  .faq__answer { text-align: left; }

  .bv-phase,
  .method-steps > * { text-align: left; }

  /* The homepage capability cards are flex columns that centre their children,
     so text-align alone leaves the tag and the divider floating in the middle. */
  .cap-card__body { align-items: flex-start; text-align: left; }
  .cap-card__tag,
  .cap-card__list li { justify-content: flex-start; }

  /* The number chips and tags at the top of a card are centred by a family of
     `margin-inline: auto !important` rules in cx-template.css. With the text now
     flush left, a centred chip floating above it reads as a second, competing
     column. margin-right:auto keeps the fit-content width and pins it left.
     Section-level .eyebrow is deliberately left out — section heads stay centred. */
  .method-step__num,
  .method-step__when,
  .service-card__num,
  .problem-card__num,
  .diff-item__num,
  .use-card__tag,
  .bv-phase-num,
  .bv-phase-range,
  .ph-tag,
  .svc-tag,
  .ws-tag,
  [class*="card"] .eyebrow,
  [class*="card"] [class*="__eyebrow"] {
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Exception: on the two pages that draw the process as a vertical timeline the
     number sits ON the axis, so it stays centred — the axis line runs through it. */
  .process-timeline .method-step__num {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Forms. A centred label above a full-width input leaves the two out of line
     with each other; the eye reads the field, not the label. Buttons keep their
     own centring — centred text in a button is right. */
  form, form p, form label,
  .form__label, .form__consent, .form__optional, .form__hint,
  .cx-form, .cx-form__eyebrow, .cx-form__h, .cx-form__row,
  .cx-form__hint, .cx-form__consent { text-align: left; }
}


/* ==========================================================================
   5. Contact form — Telefon is never optional
   --------------------------------------------------------------------------
   Every contact form on the site carries the same four fields, and the phone
   number is one we always want. The label used to read "Telefon optional"; the
   marker is gone from the markup on all 33 pages and the field now carries
   `required`, the same way E-Mail does.

   This rule is the guard, not the fix: an attribute cannot be set from CSS, so
   if a new page is built from an older template the marker is at least never
   shown next to a telephone field. Scoped to type="tel" so a genuinely optional
   field somewhere else can still say so.
   ========================================================================== */

.form__label:has(input[type="tel"]) .form__optional,
.cx-form__row:has(input[type="tel"]) .form__optional,
label:has(input[name="phone"]) .form__optional { display: none; }


/* ==========================================================================
   6. "Aus der Praxis" — a named consultant answering a real question
   --------------------------------------------------------------------------
   The Enterprise-Architecture hub used to close with four rhetorical questions
   in the cx-proof grid. They were questions nobody had actually asked, and they
   had no answers underneath them — so the block promised evidence and delivered
   a restatement of the service. Hannes replaced them with three questions he is
   genuinely asked in first meetings, each with the answer he gives, including
   the numbers.

   That content is long-form, so it cannot live in a 260px card. Each item is a
   two-column row instead: the question holds the left column and stays readable
   as a standalone line for skimmers, the answer runs down the right at a normal
   measure. Numbers worth remembering are lifted out into chips below the answer.

   Shared, not page-local: the same shape fits any hub page where a founder can
   answer a real question with real figures.
   ========================================================================== */

.cx-practice { display:grid; gap:20px }

.cx-practice__item {
  background:#fff;
  border:1px solid var(--line);
  padding:clamp(24px,3vw,38px);
  display:grid;
  grid-template-columns:minmax(230px,300px) 1fr;
  gap:clamp(20px,3vw,44px);
  align-items:start;
}

.cx-practice__label {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cx-charcoal-3);
  margin-bottom:12px;
}
.cx-practice__label::before {
  content:"";
  display:inline-block;
  width:18px;
  height:3px;
  background:var(--cx-accent);
}

.cx-practice__q {
  margin:0;
  font-size:clamp(1.12rem,1.7vw,1.38rem);
  line-height:1.28;
  letter-spacing:-0.01em;
  color:var(--cx-charcoal);
}

.cx-practice__a {
  margin:0;
  font-size:1rem;
  line-height:1.72;
  color:var(--muted);
}
.cx-practice__a + .cx-practice__a { margin-top:14px }
.cx-practice__cases + .cx-practice__a { margin-top:18px }

/* The three mandate types inside the third answer. A rule on the left, not a
   bullet: these are named cases with a duration each, not a list of equals. */
.cx-practice__cases { list-style:none; margin:18px 0 0; padding:0; display:grid; gap:16px }
.cx-practice__case { border-left:3px solid var(--cx-warm-4); padding-left:16px }
.cx-practice__case strong { display:block; margin-bottom:4px; font-size:0.98rem; color:var(--cx-charcoal) }
.cx-practice__case span { display:block; font-size:0.95rem; line-height:1.65; color:var(--muted) }
.cx-practice__case em {
  display:block;
  margin-top:6px;
  font-style:normal;
  font-size:0.82rem;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--cx-charcoal-2);
}

/* Numbers lifted out of the prose so a skimmer gets the answer without reading it. */
.cx-practice__facts { list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.cx-practice__fact {
  background:var(--cx-warm-2);
  border:1px solid var(--cx-warm-4);
  padding:8px 12px;
  font-size:0.82rem;
  line-height:1.35;
  color:var(--cx-charcoal-2);
}
.cx-practice__fact b { color:var(--cx-charcoal); font-weight:800 }

/* Who "wir" and "ich" are. Sits above the questions so the voice is anchored
   before the first answer is read. */
.cx-practice__by {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:22px 0 34px;
}
.cx-practice__by img { width:46px; height:46px; object-fit:cover; border:1px solid var(--line) }
.cx-practice__by span { font-size:0.9rem; line-height:1.45; color:var(--muted); text-align:left }
.cx-practice__by b { display:block; color:var(--cx-charcoal) }

@media (max-width:860px) {
  .cx-practice__item { grid-template-columns:1fr; gap:16px; text-align:left }
  .cx-practice__q, .cx-practice__a, .cx-practice__case, .cx-practice__label { text-align:left }
  .cx-practice__by { justify-content:flex-start; margin:20px 0 26px }
}

/* ---------------------------------------------------------------------------
   ZAHLEN-PLAKETTEN — die Ziffer sitzt mittig im Kasten
   ---------------------------------------------------------------------------
   1. MOBIL, der sichtbare Fehler. Weiter oben in dieser Datei (und noch einmal
      in styles.css) werden unter 820 px alle Kicker, Marken und Nummern nach
      links gerückt — richtig für Textmarken, falsch für die Nummern. Die
      Nummern stehen in einem farbigen Quadrat fester Größe; `justify-content:
      flex-start` klebt die Ziffer dort an den linken Rand. Gemessen: 14 px
      Versatz im 46er Quadrat, 7 px im 32er und im 28er. Die Regel dort ist mit
      !important gesetzt, also braucht die Rücknahme hier auch eines.

      Der Kasten selbst bleibt linksbündig — `margin-left:0; margin-right:auto`
      aus der Regel oben gilt weiter. Nur sein Inhalt wird wieder zentriert.

   2. WAAGERECHT, überall. Bei gesperrter Schrift zählt hinter der letzten
      Ziffer noch ein Sperrabstand zur Textbreite. Zentriert wird also eine Box,
      die rechts breiter ist als die sichtbare Ziffernfolge — die Ziffern sitzen
      um die halbe Sperrung zu weit links. Innenabstand links in Höhe der
      Sperrung verschiebt den Inhalt um genau die Hälfte davon zurück und hebt
      das auf. Bei fester Größe und box-sizing:border-box wächst der Kasten
      dadurch nicht (geprüft: 46x46 vorher wie nachher).

      Der Wert muss zur Sperrung der jeweiligen Plakette passen. Er steht
      deshalb nicht hier, sondern jeweils direkt neben der letter-spacing-Zeile,
      die ihn nötig macht — in cx-template.css und hub-quality.css. Nur die
      beiden Plaketten mit seitenweit einheitlicher Sperrung stehen unten.

   Senkrecht bleibt es, wie es ist: dort liegt der Rest bei rund 0,3 px und
   wechselt je nach Schriftgröße das Vorzeichen. Das ist Rundung, kein Fehler —
   dagegen anzurechnen würde es an anderer Stelle schlechter machen.
--------------------------------------------------------------------------- */
.cx-drawer__num  { padding-left: .04em }
.link-group__num { padding-left: .08em }

/* Diese beiden haben bereits Innenabstand. Der Ausgleich wird deshalb zwischen
   links und rechts umgeschichtet, statt hinzugefügt — sonst wandert die Ziffer
   um die vollen 10 bzw. 8 px. Umgeschichtet zählt der Ausgleich doppelt (links
   plus, rechts minus), also je die Hälfte der Sperrung. */
.cap-card__index   { padding-left: calc(10px + .01em); padding-right: calc(10px - .01em) }
.outcomes__tab-num { padding-left: calc(8px  + .01em); padding-right: calc(8px  - .01em) }

@media (max-width: 820px) {
  .service-card__num,
  .problem-card__num,
  .method-step__num {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =========================================================================
   Breadcrumb — der sichtbare Pfad zur Breadcrumb-Auszeichnung
   -------------------------------------------------------------------------
   Die BreadcrumbList stand seit jeher im Markup, auf der Seite war sie nicht
   zu sehen. Google verlangt, dass die Auszeichnung abbildet, was die Seite
   zeigt; ohne den sichtbaren Pfad ist die Auszeichnung eine Behauptung.
   Sitzt im Hero über der Augenbraue, damit die Hero-Geometrie bleibt: der
   Pfad ist zwei Zeilen hoch und schiebt nichts unter die Falz.
   ========================================================================= */
.cx-crumbs {
  margin: 0 0 14px;
  animation: acn-deco-fade-in 1100ms var(--acn-ease) var(--acn-delay-1) backwards;
}
.cx-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.cx-crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
/* Das Trennzeichen gehört zur Darstellung, nicht zum Text — sonst liest ein
   Screenreader "Startseite Schrägstrich KI-Beratung" vor. */
.cx-crumbs__item + .cx-crumbs__item::before {
  content: "/";
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.75rem;
}
.cx-crumbs__item a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 2px 0;
}
.cx-crumbs__item a:hover,
.cx-crumbs__item a:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.55);
}
.cx-crumbs__item [aria-current="page"] {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}
@media (max-width: 900px) {
  .cx-crumbs { margin-bottom: 12px; }
  .cx-crumbs__list { justify-content: center; }
}

/* -------------------------------------------------------------------------
   Zwei Nachbesserungen aus dem Rendercheck vom 4. August 2026.

   1. Das Tippziel im Breadcrumb war 22 Pixel hoch. Die Regel für die Grösse
      eines Tippziels nimmt Links aus, die mitten im Satz stehen — ein Pfad
      oben auf der Seite ist keiner. Ein Pixel Polsterung oben und unten
      bringt ihn über die Grenze, ohne die Zeile zu verschieben.
   2. Auf dem Handy stand Fliesstext in Karten bei 13 bis 15 Pixel und der
      Datenschutzhinweis am Formular bei 11,5. Gelesen wird das mit
      zusammengekniffenen Augen. Untergrenze ist jetzt 16 Pixel für Fliesstext
      und 14 für den rechtlichen Kleingedruckten.
   ------------------------------------------------------------------------- */
.cx-crumbs__item a,
.cx-crumbs__item [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

@media (max-width: 900px) {
  .ki-case-flow__step,
  .cx-proof__card p,
  .compliance-item,
  .cx-trust__creds,
  .cx-ig__lead,
  .ki-funnel p,
  .ki-foundation-card p,
  .form__sub {
    font-size: 1rem;
    line-height: 1.6;
  }
  .form__privacy {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

/* -------------------------------------------------------------------------
   Untergrenze für Fliesstext auf dem Handy.

   Die Karten und Blöcke setzen ihren Text seitenweise auf 0,90 bis 0,95 rem.
   Am Schreibtisch geht das durch, auf dem Handy landet man bei 13 bis 15
   Pixel — darunter wird gekniffen statt gelesen. Auf Bildschirmen bis 900
   Pixel gilt deshalb 16 Pixel als Boden. Am Desktop bleibt die Typo, wie sie
   ist; das hier greift ausschliesslich mobil.

   Das "body" davor ist kein Zierrat: die Regeln stehen in <style>-Blöcken je
   Seite und damit NACH dieser Datei. Bei gleicher Gewichtung gewinnt die
   spätere. Ein zusätzliches Element hebt die Gewichtung gerade so an —
   billiger als !important, das die nächste Änderung blockieren würde.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body #leistungen .service-card p,
  body #vorteile.delivery-principles .delivery-principles__item p,
  body .cx-prose ul li,
  body .data-block p,
  body .deep-section__block p,
  body .deep-section__block ul,
  body .digital-practice__principle p,
  body .evidence-panel__head p,
  body .h-lead,
  body .impact-card p,
  body .ki-case-card ul,
  body .ki-case-flow__step p,
  body .ki-foundation-card p,
  body .ki-funnel p,
  body .ki-question p,
  body .mandate-principle p,
  body .modifier-cases-signals.modifier-  body p,
  body .modifier-context.container > p,
  body .modifier-diag-appr.modifier-  body p,
  body .pm-choice__card p,
  body .pm-contrast__row>p,
  body .pm-governance__layer p,
  body .pm-visual__head p,
  body .practice-card p,
  body .practice-market p,
  body .practice-scale p,
  body .related-services__head p,
  body .support-choice p {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Nachzügler: dieselben zwei Bausteine stehen ebenfalls in Seiten-<style>-
   Blöcken und brauchen deshalb dieselbe Gewichtungsanhebung. */
@media (max-width: 900px) {
  body .compliance-item,
  body .cx-trust__creds {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* -------------------------------------------------------------------------
   Nachtrag zur Untergrenze — zwei Lücken, im Browser bei 390 Pixel gemessen,
   nicht im Quelltext gesucht.

   1. Die beiden Regeln oben treffen den BEHÄLTER. Der kleine Text sitzt aber
      im Kind: .compliance-item hat ein <p> darin, .cx-trust__creds ein <li>.
      Das Kind bringt seine eigene, kleinere Grösse mit und war deshalb
      unverändert bei 15 Pixel — auf 39 beziehungsweise 66 Fundstellen.
      Wer den Behälter setzt, hat das Kind noch nicht gesetzt.

   2. Vierzehn weitere Bausteine standen nie auf der Liste. Am deutlichsten
      die Zeile mit den Ansprechpartnern und die Fussnote unter den
      Projektzahlen: beide bei 12 Pixel.

   Zwei Böden, weil zwei Sorten Text: ganze Sätze werden gelesen und bekommen
   16 Pixel. Bildunterschriften und Kennzahlen-Etiketten werden überflogen und
   bekommen 14. Nach oben wird nichts angefasst — was schon grösser ist,
   bleibt grösser.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body .compliance-item p,
  body .cx-trust__creds li,
  body .cap-card__copy,
  body .cap-card__list li,
  body .journey-step__copy,
  body .journey__figure-copy,
  body .benefit__copy,
  body .outcomes__principle-copy,
  body .faq-followup__copy,
  body .dmaic-cycle__outcome,
  body .method-step__body,
  body .final-cta__reassurance,
  body .support-choice__note,
  body .practice-case__note,
  body .process-sequence__note {
    font-size: 1rem;
    line-height: 1.6;
  }

  body .faq-followup__byline,
  body .practice-scale__note,
  body .cx-practice__fact {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

/* -------------------------------------------------------------------------
   Drei Bausteine haben den Boden oben ignoriert. Nachgesehen statt geraten —
   im Browser die gewinnende Regel abgefragt, nicht im Quelltext gesucht:

     .practice-scale__note   Seiten-<style>   0,75rem !important
     .method-step__body      Seiten-<style>   0,9rem  !important
     .cx-trust__creds li     founders.css     0,9375rem !important

   Gegen ein !important hilft Gewichtung nicht; da gewinnt nur ein zweites.
   Sonst gilt hier weiter das Gegenteil — !important ist die Ausnahme und
   steht nur da, wo die andere Seite schon eins gesetzt hat.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body .cx-trust .cx-trust__col .cx-trust__creds li,
  body .cx-trust__creds li,
  body .process-sequence__note {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* .method-step__body verliert gegen body.change-management-page
     .method-step__body (0,2,0). Das [class] hebt die eigene Gewichtung auf
     0,2,1 — greift auf jeder Seite, ohne den Seitennamen zu kennen. */
  body[class] .method-step__body {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  body .practice-scale__note {
    font-size: 0.875rem !important;
  }
}

/* -------------------------------------------------------------------------
   Kontrast. Drei Bausteine lagen unter dem Mindestwert von 4,5:1 für
   Fliesstext — gemessen im Browser, nicht geschätzt:
     .form__privacy    #8A8F94 auf Weiss = 3,26
     .ki-case-card__label und .cross-link__tag  #D96800 = 3,1 bis 3,5
   Grau und Orange bleiben Grau und Orange, nur dunkler. Betroffen ist
   ausschliesslich Text, der ohnehin klein gesetzt ist; Flächen und Rahmen
   in Markenorange bleiben unangetastet.
   ------------------------------------------------------------------------- */
body .form__privacy,
body .form__privacy a {
  color: #676c71;
}
body .ki-case-card__label,
body .cross-link__tag {
  color: #8f4400;
}

/* Zwei Nachzügler aus dem Kontrast-Durchgang über mehrere Seitentypen:
   .caps__pillar-num auf der Startseite (3,43:1) und .mining-step__num auf
   der Prozessoptimierung (3,95:1). Beide sind Ziffern bei 10 bis 11 Pixel —
   genau die Grösse, bei der ein schwaches Grau verschwindet. */
body .caps__pillar-num,
body .mining-step__num {
  color: #4a5158;
}

/* Kartenüberschriften in dunklen Bändern.
   Die Karten selbst sind hell gefüllt (--cx-warm-2), das Band setzt aber
   color:#F5F3F1 für alles darin. Der Fliesstext der Karte hat eine eigene
   Farbe und war deshalb lesbar — die Überschrift hatte keine und erbte das
   Bandweiss. Ergebnis: helle Schrift auf heller Karte, Kontrast 1,03:1,
   praktisch unsichtbar. Betroffen waren 17 Seiten mit je drei Überschriften.
   Die Karte ist hell, also gehört ihr die dunkle Schrift — unabhängig davon,
   in welchem Band sie steht. */
body :is(.service-card, .problem-card, .use-card, .industry-card) :is(h2, h3, h4) {
  color: var(--cx-charcoal);
}

/* Die drei Marken auf der Fallkarte der Prozessoptimierung ("Ausgangslage",
   "Veränderung", "Wirkung") standen im Markenorange auf dunklem Grund: 3,95:1
   bei 10 Pixel. Für Schrift dieser Größe verlangt die Norm 4,5:1. Dieselbe
   Farbe, nur so weit aufgehellt, dass sie die Grenze nimmt (4,6:1). Das Orange
   auf Flächen, Rahmen und größerer Schrift bleibt unberührt. */
body .practice-case__step span {
  color: #ff9530;
}

/* Einwilligungsbanner: alle drei Schaltflächen gleich gewichtet.
   "Alle akzeptieren" war orange gefüllt, "Nur notwendige" und "Auswahl
   speichern" nur umrandet. Grösse, Schriftgrad und Ebene waren schon gleich —
   nur die Füllung zog das Auge auf das Zustimmen. Genau dieses Muster nennen
   die Aufsichtsbehörden als Anstupsen. Die Füllung fällt weg, alle drei
   Schaltflächen sind jetzt identisch: gleiche Grösse, gleicher Rahmen,
   gleiche Farbe. Das Markenorange hat auf einem Einwilligungsbanner nichts
   zu suchen. */
/* Zwei Stylesheets setzen die Füllung mit !important, eines davon über
   .cex-migrated-page. Deshalb hier dieselbe Kettenlänge plus body — sonst
   gewinnt das ältere Blatt. (Die bekannte polish.css-Falle.) */
body.cex-migrated-page .privacy-consent__primary,
body .privacy-consent__primary {
  background: #fff !important;
  color: var(--cx-charcoal) !important;
  border-color: var(--cx-charcoal) !important;
}
body.cex-migrated-page .privacy-consent__primary:hover,
body.cex-migrated-page .privacy-consent__secondary:hover,
body .privacy-consent__primary:hover,
body .privacy-consent__secondary:hover {
  background: var(--cx-charcoal) !important;
  border-color: var(--cx-charcoal) !important;
  color: #fff !important;
}

/* Honigfalle fuer Kontaktformulare: unsichtbar fuer Menschen, fuer
   Screenreader nicht erreichbar (aria-hidden im HTML), aber technisch
   vorhanden fuer Bots. Gilt sitesweit, weil dieses Blatt auf jeder Seite
   mit Formular zuletzt laedt (siehe Kopfkommentar dieser Datei). */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* --- Handy: der Hero traegt nicht das ganze Formular ----------------------
   Gemessen am 2026-08-04 bei 390x844 Pixeln: der Hero war 1553 Pixel hoch,
   also 184 Prozent der Bildschirmhoehe — davon 888 Pixel allein das
   Formular. Wer die Seite auf dem Handy oeffnet, scrollt zwei volle
   Bildschirme, bevor der erste Inhalt kommt. Die Regel verlangt rund zwei
   Drittel der Bildschirmhoehe und niemals mehr als eine ganze.
   Auf dem Handy gibt es ohnehin keine zwei Spalten. Der Hero zeigt dort
   Text und Handlungsaufruf; das Formular am Seitenende bleibt unveraendert
   stehen und traegt die Sprungmarke, auf die der Knopf zeigt. */
/* 2026-08-14, QA M4: die Grenze war 900 und passte damit zu keiner anderen.
   Der Hero wird erst ab 981 Pixeln zweispaltig. Zwischen 901 und 980 stand das
   Formular deshalb UNTER dem Text, in einer Spalte, und der Hero war gemessene
   158 Prozent der Bildschirmhöhe — anderthalb Bildschirme, bevor der erste
   Inhalt kommt. Die Grenze liegt jetzt dort, wo die zweite Spalte beginnt:
   solange es nur eine Spalte gibt, trägt der Hero kein Formular. */
@media (max-width: 980px) {
  body .hero .hero__form-wrap { display: none; }
  body .hero { min-height: 62vh; }
}

/* FAQ-Fragen sind jetzt echte Zwischenüberschriften.
   Grund: eine FAQ-Sektion trägt 600 bis 850 Wörter am Stück. Ohne
   Zwischenüberschrift liest jede Analyse — Yoast wie Suchmaschine — das als
   einen einzigen, unstrukturierten Block. Die Frage IST die Überschrift ihrer
   Antwort, also steht sie ab jetzt als <h3> im <summary>.
   Die Regeln hier nehmen dem h3 jede eigene Optik: Aussehen und Abstände
   bleiben exakt so, wie sie vorher waren. Das ist Struktur, keine Kosmetik. */
.faq__item summary > h3,
.cx-faq-block__item summary > h3,
.faq-item summary > h3 {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: none;
  text-wrap: inherit;
}

/* ==========================================================================
   QA FINAL-QA-20260814 — Nachtrag vom 2026-08-14 · M2, M3
   Warum hier und nicht in polish.css: die Ladereihenfolge ist styles.css,
   cx-design-system.css, cx-template.css, die <style>-Blöcke der Seite,
   polish.css, cx-hero.css, hub-quality.css, cx-components.css. Alles, was
   gegen cx-hero.css oder gegen einen Seitenblock ankommen muss, kann nur in
   diesem Blatt stehen. Deshalb liegen die Formularregeln hier und nicht bei
   den anderen Nachträgen. Kein !important nötig — die Reihenfolge reicht.
   ========================================================================== */

/* M3 · 14 Pixel sind die Untergrenze, auch für das Kleingedruckte.
   Gemessen am 2026-08-14: Einwilligungszeile 12 Pixel, Datenschutzhinweis
   11,5, Vorspann der Hero-Karte 13, Formular-Kicker 12, Kontextlabel im
   Themenraster 11,2. Das ist die Grösse, bei der man zusammenkneift statt zu
   lesen — und ausgerechnet die Zeile, mit der jemand einer Datenverarbeitung
   zustimmt, war die kleinste Schrift der Seite. Eine Einwilligung, die man
   nicht mühelos lesen kann, ist rechtlich das schwächste Stück der Seite.
   Alle gehen auf 14 Pixel; die Zeilenhöhe wandert mit, sonst kleben die
   Zeilen aneinander.
   Nicht angefasst: der Basiswert von .form__sub. Der steht schon auf 14
   Pixeln und wird auf dem Handy weiter oben in dieser Datei auf 16 gehoben —
   ein pauschaler Wert hier würde diese Anhebung wieder einkassieren.
   Korrigiert wird nur die Hero-Karte, die ihn auf 13 herunterzieht.
   Nicht hier, sondern in polish.css (Zeile ~135): die Einwilligungszeile
   selbst. Sie wird dort mit !important gesetzt und lässt sich von hier aus
   nicht erreichen — die bekannte polish.css-Falle. Wer die Grösse ändern
   will, ändert sie dort. */
body .form__privacy {
  font-size: 0.875rem;
  line-height: 1.55;
}
body .hero__card .form__sub {
  font-size: 0.875rem;
}
body .form__kicker,
body .cx-form__hint {
  font-size: 0.875rem;
}
body .topic-grid__context-label {
  font-size: 0.875rem;
}

/* Nachtrag nach dem Rendern der Leistungsseite. Der QA-Bericht nennt als
   kleinste Schrift das Kontextlabel des Themenrasters mit 11 Pixeln — das
   steht aber auf den Hub-Seiten. Auf der Leistungsseite, der Vorlage von 32
   der 33 Seiten, sitzt derselbe Fehler an zwei anderen Stellen, und eine
   davon ist noch kleiner:
     .cross-link__tag      11,0 Pixel — die Marke auf den Querverweis-Karten
     .cx-crumbs__item a    12,0 Pixel — der Pfad über der Überschrift
     .form__label          13,0 Pixel — die Feldnamen im Formular
   Eine Untergrenze, die nur dort gilt, wo jemand nachgesehen hat, ist keine.
   Alle drei gehen auf 14.
   Zur Marke: ihre Farbe wurde in polish.css eigens auf #7d3a00 abgedunkelt,
   weil 11 Pixel als Fliesstext zählen und 4,5:1 brauchen. Bei 14 Pixeln gilt
   dieselbe Schwelle, der Wert bleibt also richtig und bleibt unangetastet.
   Zu den Feldnamen: der Basiswert steigt, die Hero-Karte nicht. Deren eigene
   Regel ab 981 Pixeln wiegt schwerer (zwei Klassen gegen Element plus Klasse)
   und behält ihre 12 Pixel — der Desktop-Hero wächst dadurch um nichts. Auf
   dem Handy ist die Karte ohnehin ausgeblendet. */
body .cross-link__tag {
  font-size: 0.875rem;
}
body .cx-crumbs__item a,
body .cx-crumbs__item [aria-current="page"] {
  font-size: 0.875rem;
}
body .form__label {
  font-size: 0.875rem;
}

/* Gegenrechnung für die Hero-Karte am Desktop.
   Die grössere Einwilligungszeile, der grössere Kicker und der grössere
   Vorspann machen die Karte rund 28 Pixel höher, und die Karte bestimmt die
   Höhe des Hero. Der Desktop-Hero lag bei 69 Prozent der Bildschirmhöhe und
   soll dort bleiben — die Zeilen werden also nicht kleiner, die Karte wird
   enger gepackt. Gleiche Schrift, weniger Luft. */
@media (min-width: 981px) {
  body .hero__card {
    /* Nachgemessen gegen den Stand vor diesen Änderungen: beide Seitentypen
       lagen bei exakt 619 Pixeln Hero, also den 69 Prozent aus dem Bericht,
       und die Karte trug mit 489 Pixeln die Höhe — nicht die Textspalte
       daneben. Was die Karte höher macht, macht den Hero höher.
       Mit 14 statt 12 Pixeln wächst die Einwilligungszeile um 9 Pixel, und
       auf der Leistungsseite kam der Hero damit auf 632. Die 14 Pixel Polster
       von vorhin fingen das auf der Startseite auf, auf der Leistungsseite
       nicht. 10 Pixel fangen beide auf.
       Geholt wird die Höhe aus dem Polster, nicht aus der Zeilenhöhe: eine
       Einwilligung enger zu setzen, um sie grösser setzen zu können, hebt
       den Gewinn wieder auf. */
    padding: 10px 26px;
  }
  body .hero__card .form {
    gap: 6px 14px;
  }
  body .hero__card .form__sub {
    margin-bottom: 6px;
  }
}

/* M2 · Tippziele auf dem Handy: 44 mal 44 Pixel Trefferfläche.
   Gemessen wurden 25 Ziele darunter. Die beiden schlimmsten: das Häkchen der
   Einwilligung mit 18 mal 18 und der Link "Datenschutzerklärung" mit 125 mal
   15. Ein Daumen trifft ein 18er-Kästchen nicht zuverlässig, und wer eine
   Einwilligung nicht setzen kann, schickt das Formular nicht ab.
   Grundsatz dabei: die Trefferfläche wächst, das Bild bleibt. Ein 44er
   Häkchen sähe auf einer Seite ohne runde Ecken wie ein Klotz aus. */
@media (max-width: 900px) {

  /* Eigenständige Links und Schaltflächen bekommen schlicht die volle Höhe.
     Sie stehen alle für sich, nicht mitten im Satz — da kostet Höhe nichts
     ausser etwas Luft.
     46 und nicht 44: gestapelte Kästen im Fussbereich überlappen sich um
     Bruchteile eines Pixels, weil ihre Höhen krumm sind. Wer danach misst,
     bekommt bei glatten 44 Pixeln 42,9 zurück — der Nachbar darunter liegt
     obenauf und frisst den letzten Pixel. Zwei Pixel Reserve, und die Zahl
     stimmt auch im Messprotokoll. */
  body .nav__brand,
  body .link-arrow,
  body .footer__col a,
  body .footer__link-button {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
  }

  /* Der Pfad oben auf der Seite stand auf 24 Pixeln — dem Mindestmass der
     Norm, aber nicht dem Hausmass.
     Die 24 kommen aus einem min-height weiter oben in dieser Datei, und weil
     die Seite durchgehend border-box rechnet, zählt Polsterung dort mit:
     min-height:24 plus Polsterung ergibt nicht 44, sondern nur die Zeilenhöhe
     plus Polsterung. Gemessen sind das 18 Pixel Zeile — also 13 oben und
     unten, das macht 46,6.

     Zum negativen Aussenabstand, und warum er nicht -10 sein darf:
     auf dem Handy bricht der Pfad um. "Startseite / Change-Management-
     Beratung / Organisationsentwicklung" passt nicht in 390 Pixel, er läuft
     über zwei Zeilen. Mit -10 wird der Zeilenabstand wieder auf 24 gestaucht,
     die 46,6 Pixel hohen Kästen der beiden Zeilen schieben sich also 12 Pixel
     ineinander — und der untere liegt obenauf. Nachgemessen blieben von der
     Trefferfläche der oberen Zeile 34,5 Pixel übrig. Eine Polsterung, die der
     Nachbar wieder auffrisst, ist keine.
     -3 ist der Wert, bei dem sich die Zeilen gerade nicht mehr berühren:
     Kastenhöhe 46,6, Zeilenabstand 40,6 plus 8 Pixel Lücke aus der Liste,
     macht 48,6 — zwei Pixel Luft. Der Pfad wird dadurch pro Zeile rund 15
     Pixel höher. Die Hälfte davon kommt aus dem Abstand nach unten zurück,
     der Rest ist der Preis für ein Ziel, das der Daumen trifft. */
  body .cx-crumbs__item a,
  body .cx-crumbs__item [aria-current="page"] {
    padding-block: 13px;
    margin-block: -3px;
  }
  body .cx-crumbs {
    margin-bottom: 4px;
  }

  /* Das Häkchen der Einwilligung: 18 Pixel sichtbar, 44 Pixel treffbar.
     Ein <input type="checkbox"> lässt sich nicht vergrössern, ohne dass das
     Kästchen selbst mitwächst — es ist ein ersetztes Element und hat kein
     ::before. Das Kästchen steckt aber in seinem <label>, und ein Klick auf
     irgendeinen Punkt des Labels setzt das Häkchen. Also legt das Label eine
     44er Fläche über die Stelle, an der das Kästchen sitzt: unsichtbar, ohne
     Fläche, ohne Rahmen — reine Trefferfläche.
     Die Zahlen: das Kästchen steht bei x 0 bis 18 und y 2 bis 20, seine Mitte
     also bei (9|11). Ein 44er Quadrat um diese Mitte beginnt bei -13 und -11.
     flex-start ist Bedingung, nicht Kosmetik: die Handy-Zentrierregeln setzen
     diese Labels auf justify-content:center, und dann wandert das Kästchen
     aus der Fläche heraus, sobald der Text kurz genug ist. */
  body .form__consent,
  body .cx-form__consent {
    position: relative;
    justify-content: flex-start;
    align-items: flex-start;
  }
  body .form__consent::before,
  body .cx-form__consent::before {
    content: "";
    position: absolute;
    left: -13px;
    top: -11px;
    width: 44px;
    height: 44px;
  }

  /* Die Links im Kleingedruckten stehen mitten im Satz. Höhe über eine eigene
     Zeilenhöhe zu holen, würde den Absatz auseinanderziehen; Polsterung an
     einem Inline-Kasten dagegen vergrössert die Trefferfläche, ohne die
     Zeilenbox anzufassen. 15 Pixel Text plus zweimal 15 Polsterung ergeben 45.
     In jedem dieser drei Absätze steht genau ein Link, die Flächen können
     einander also nicht in die Quere kommen. */
  body .form__consent a,
  body .form__privacy a,
  body .cx-form__consent a {
    padding-block: 15px;
  }

  /* ------------------------------------------------------------------
     Nachtrag 2026-08-14, zweiter Durchgang.
     Der erste Durchgang hat zwei Seitenvorlagen gemessen und daraus auf 33
     Seiten geschlossen. Der zweite hat alle 36 ausgelieferten Seiten im
     Browser bei 390 mal 844 Pixeln vermessen und jedes bedienbare Element
     einzeln angetippt — nicht die Kastenmasse gelesen, sondern mit
     elementFromPoint geprüft, wohin ein Daumen tatsächlich trifft.
     Dabei kamen 191 Ziele heraus, die der erste Durchgang nicht hatte.
     ------------------------------------------------------------------ */

  /* Das Inhaltsverzeichnis auf Impressum und Datenschutz.
     Ein eigenständiger Navigationsblock, neun beziehungsweise fünf Links
     untereinander, jeder 34,4 Pixel hoch — das war der Befund, an dem der
     erste Durchgang gescheitert ist. Die Liste ist eine Flexspalte mit 8
     Pixeln Lücke, ein min-height greift dort sauber und nichts überlappt:
     Zeilenabstand 46 plus 8. Der Block wächst um 10 Pixel je Eintrag, auf
     der Datenschutzseite also um rund 100. Das ist der ehrliche Preis; ein
     Rechtsdokument, dessen Sprungmarken man nicht trifft, ist schlimmer. */
  body .legal-toc a {
    display: flex;
    align-items: center;
    min-height: 46px;
  }

  /* Die Sitemap. Drei verschiedene Grössen, drei verschiedene Ursachen:
     die Überschrift eines Blocks ist ein Link mitten in einer Zeile (23),
     die Fusszeile darunter ebenso (17), und die Liste dazwischen sass mit
     43,3 Pixeln knapp unter der Grenze — nah genug, dass ein strengeres
     Messverfahren sie zu Recht anstreicht.
     Bei den beiden Zeilenlinks wächst nur die Trefferfläche: Polsterung an
     einem Inline-Kasten lässt die Zeilenhöhe unberührt. Über und unter der
     Blocküberschrift liegen 14 Pixel eigene Polsterung und 14 Pixel Abstand,
     die 12 Pixel stossen also an nichts an. */
  body .sm-group__hub > a {
    padding-block: 12px;
  }
  body .sm-meta > a {
    padding-block: 15px;
  }
  body .sm-list a {
    padding-block: 13px;
  }

  /* Links mitten im Satz.
     Rund hundert Stück, verteilt über 32 Seiten: Quellenangaben in den
     Karten ("BSI", "Scrum.org", "OECD"), Belege in den FAQ-Antworten, die
     Verweise in Impressum und Datenschutz. Alle 20 Pixel hoch, weil sie die
     Zeilenhöhe des Fliesstexts erben.
     Die Norm nimmt solche Links ausdrücklich aus — sie sind in ihrer Grösse
     durch den Text um sie herum bestimmt. Ausgenommen heisst aber nicht
     getroffen. Polsterung oben und unten an einem Inline-Kasten vergrössert
     die Trefferfläche auf 46 und lässt den Absatz, wo er ist: eine
     Zeilenbox rechnet Polsterung nicht mit.
     Zwei Wege wurden gemessen, einer davon fällt durch:

     Polsterung oben und unten. Macht den Kasten 46 Pixel hoch, ankommen tun
     36. Grund ist die Malreihenfolge: der Text der Zeile darunter gehört dem
     Absatz und steht im Dokument nach dem Link, liegt bei der Trefferprüfung
     also obenauf und schneidet die untere Polsterung ab. Nach oben klappt es,
     nach unten nicht. Und quer hilft Polsterung ohnehin nicht: "BSI" ist 25
     Pixel breit, seitliche Polsterung würde die Nachbarwörter wegschieben.

     Eine aufgelegte Fläche. Absolut gesetzt, 46 mal mindestens 46 Pixel, um
     die Mitte des Links zentriert. Absolut gesetzte Kinder werden nach dem
     Fliesstext gemalt — die Fläche liegt damit über der Zeile darunter statt
     darunter, und sie darf breiter sein als das Wort, ohne dass sich im Satz
     irgendetwas verschiebt. Das Layout bleibt auf den Pixel gleich.

     Der Preis, offen gesagt: um kurze Wörter wie "BSI" reicht die Fläche in
     die Nachbarwörter hinein. Wer knapp daneben tippt, landet auf dem Link
     statt auf totem Text. Bei einer Quellenangabe ist das der bessere Fehler.

     :not([class]) ist die Grenze, nicht Kosmetik. Ohne sie fasst die Regel
     auch .btn, .link-arrow und die Karten-Links an — und die sind Blöcke mit
     eigener Höhe. Nachgesehen auf allen 36 Seiten: jeder Treffer dieser
     Regel steht auf display:inline. */
  body p > a:not([class]),
  body .faq__answer > a:not([class]) {
    position: relative;
    padding-block: 13px;
  }
  body p > a:not([class])::before,
  body .faq__answer > a:not([class])::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    min-width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
  }

  /* Der Einwilligungsdialog. Er wird von script.js in jede Seite gehängt,
     liegt über allem und ist auf dem ersten Besuch das Erste, was ein Daumen
     berührt — gemessen wird er trotzdem selten, weil er nach dem ersten
     Klick im localStorage verschwindet.
     Die beiden Rechtslinks darin sind Flexkinder, kein Fliesstext; dort ist
     min-height richtig und Polsterung falsch. */
  body .privacy-consent__links a {
    display: flex;
    align-items: center;
    min-height: 46px;
  }
}

/* FINAL PUBLISHED-PAGE QA — 2026-08-18
   Keep mobile micro-labels centred while card paragraphs remain left-aligned,
   and give five-step desktop methods enough width for comfortable reading. */
@media (max-width: 820px) {
  body .use-card__tag,
  body .cap-card__tag,
  body .pm-practice__tag,
  body .digital-practice__tag {
    display: flex !important;
    width: fit-content;
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (min-width: 821px) {
  body.cex-migrated-page .method:has(> .method-step:nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  body.cex-migrated-page .method:has(> .method-step:nth-child(5):last-child) > .method-step {
    grid-column: span 2 !important;
  }
  body.cex-migrated-page .method:has(> .method-step:nth-child(5):last-child) > .method-step:nth-child(4) {
    grid-column: 1 / span 3 !important;
  }
  body.cex-migrated-page .method:has(> .method-step:nth-child(5):last-child) > .method-step:nth-child(5) {
    grid-column: 4 / span 3 !important;
  }
}