/*
 * ContacT A2 V6 — dedicated subpage system
 *
 * A quiet, operational visual language: clear blue rules, legible evidence,
 * complete media and strong hierarchy without turning every block into the
 * same generic card. This stylesheet is loaded only outside the front page.
 */

.cta2v6-subpage {
  --cta2v6-night: #102335;
  --cta2v6-steel: #36536d;
  --cta2v6-sky: #dceaf7;
  --cta2v6-mist: #edf3f8;
  --cta2v6-white: #ffffff;
  /* 6.3.1 – blue rules and shadows instead of grey ones (blue-white scheme). */
  --cta2v6-rule: rgba(46, 111, 176, .18);
  --cta2v6-rule-strong: rgba(46, 111, 176, .32);
  --cta2v6-shadow: 0 24px 65px rgba(33, 73, 111, .12);
  min-width: 0;
  overflow: clip;
  overflow-x: clip;
  color: var(--cta2-ink);
}

.cta2v6-subpage *,
.cta2v6-subpage *::before,
.cta2v6-subpage *::after {
  box-sizing: border-box;
}

.cta2v6-subpage :where(section, div, article, aside, nav, figure) {
  min-width: 0;
}

.cta2v6-subpage :where(h1, h2, h3, p, ul, dl, figure) {
  margin-top: 0;
}

.cta2v6-subpage :where(h1, h2, h3) {
  overflow-wrap: break-word;
  color: var(--cta2-ink);
  font-family: "ContacT Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.cta2v6-subpage h1 {
  --cta2v6-h1: clamp(46px, 6.15vw, 82px);
  /* Never narrower than the widest word (see inc/typography.php). */
  max-width: max(12.5ch, calc(var(--cta2v6-fit-now, 0) * 1em));
  margin-bottom: clamp(22px, 3vw, 32px);
  font-size: var(--cta2v6-h1);
  line-height: .96;
  /* Last resort only: a word wider than its column breaks instead of
     running into the neighbouring column. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.cta2v6-subpage h2 {
  margin-bottom: 18px;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.02;
}

.cta2v6-subpage h3 {
  margin-bottom: 10px;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.12;
}

.cta2v6-subpage p {
  color: var(--cta2-muted);
  line-height: 1.68;
}

/* 6.3.1 – line breaks.
   Fitted headings: --cta2v6-fit is the widest unbreakable run in em
   (inc/typography.php). From 600 px up the kept last word pair
   (.cta2v6-keep, --cta2v6-fit-keep) counts as well, so a heading never ends
   with a single word there. --cta2v6-fill leaves air at the column edge
   (card titles no longer run from edge to edge). */
.cta2v6-subpage {
  --cta2v6-fill: .94;
}

/* Card titles sit between visible card edges: keep clearly more air. */
.cta2v6-subpage .cta2v6-service-card h2 {
  --cta2v6-fill: .88;
}

.cta2v6-subpage :where(h1, h2, h3) {
  --cta2v6-fit-now: var(--cta2v6-fit, 1);
}

@media (min-width: 600px) {
  .cta2v6-subpage :where(h1, h2, h3) {
    --cta2v6-fit-now: var(--cta2v6-fit-keep, var(--cta2v6-fit, 1));
  }
}

/* Running text, lists, small print and the contents entries of the
   service pages avoid a lone last word where the browser can (for the
   two-line contents entries "pretty" also reads better than "balance");
   labels and roles balance their lines. */
.cta2v6-subpage :where(p, li, dt, dd, small, address, figcaption, td, th, blockquote, .cta2v6-toc a) {
  text-wrap: pretty;
}

.cta2v6-subpage :where(.cta2v6-kicker, .cta2v6-directory__label, .cta2v6-team-grid p, .cta2v6-hero-facts > span, .cta2v6-case-grid strong) {
  text-wrap: balance;
}

.cta2v6-subpage a {
  text-underline-offset: .2em;
}

/* Dark blue on light surfaces; blue bands and the switchboard card use white. */
.cta2v6-subpage a:focus-visible,
.cta2v6-subpage button:focus-visible {
  outline: 3px solid var(--cta2-blue-deep);
  outline-offset: 4px;
}

.cta2v6-kicker {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
  color: var(--cta2-blue-deep);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.cta2v6-kicker::before {
  content: "";
  width: 38px;
  height: 2px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, var(--cta2-blue), var(--cta2-blue-light));
}

/* "Leistung / Veranstaltungsschutz" does not fit one line on narrow phones;
   there the kicker shows only the service name instead of ending a line
   with "/". */
@media (max-width: 374px) {
  .cta2v6-kicker__trail {
    display: none;
  }
}

/* Subpage opening — the only automatic entrance on inner pages. */
.cta2v6-subhero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(82px, 9vw, 136px) clamp(68px, 8vw, 112px);
  overflow: hidden;
  border-bottom: 1px solid var(--cta2-surface-rule);
  /* 6.3.1 – the page opening uses the blue-white surface as well (it was
     almost white on the left). */
  background:
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(46, 111, 176, .045) 90px 91px),
    var(--cta2-surface-a);
}

.cta2v6-subhero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22%;
  right: -8%;
  width: min(52vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(46, 111, 176, .16);
  border-radius: 50%;
  box-shadow:
    0 0 0 64px rgba(111, 168, 222, .045),
    0 0 0 128px rgba(111, 168, 222, .025);
  pointer-events: none;
}

.cta2v6-subhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(300px, .72fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: center;
}

.cta2v6-subhero--media .cta2v6-subhero__grid {
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  gap: clamp(42px, 6vw, 82px);
}

/* Hero headlines scale down only as far as their widest word requires.
   Without container units (Chrome < 105, Safari < 16, Firefox < 110) the h1
   keeps var(--cta2v6-h1) and hyphenates. The @supports guard is required: a
   declaration with var() and an unknown unit is not dropped while parsing,
   it turns "unset" at runtime (inherited body size) instead of falling back
   to the previous declaration. */
.cta2v6-subhero__copy {
  container-type: inline-size;
}

@supports (width: 1cqi) {
  .cta2v6-subpage .cta2v6-subhero__copy h1 {
    font-size: min(var(--cta2v6-h1), calc(var(--cta2v6-fill) * 100cqi / var(--cta2v6-fit-now, 1)));
  }
}

@supports not (width: 1cqi) {
  .cta2v6-subpage h1,
  .cta2v6-subpage h2 {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

.cta2v6-subhero__copy > p {
  max-width: 62ch;
  margin-bottom: 18px;
  font-size: clamp(17px, 1.5vw, 20px);
}

.cta2v6-subhero__copy > p:last-of-type {
  margin-bottom: 30px;
}

.cta2v6-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cta2v6-subpage .cta2v6-button {
  gap: 12px;
  max-width: 100%;
  border: 1px solid var(--cta2-blue);
  box-shadow: 0 12px 30px rgba(46, 111, 176, .19);
  line-height: 1.25;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.cta2v6-subpage .cta2v6-button:hover {
  border-color: var(--cta2-blue-deep);
  box-shadow: 0 15px 34px rgba(33, 73, 111, .24);
  transform: translateY(-2px);
}

.cta2v6-subpage .cta2v6-button--ghost {
  border-color: rgba(33, 73, 111, .3);
  background: rgba(255, 255, 255, .66);
  color: var(--cta2-blue-deep) !important;
  box-shadow: none;
}

.cta2v6-subpage .cta2v6-button--ghost:hover {
  border-color: var(--cta2-blue);
  background: var(--cta2v6-white);
}

.cta2v6-hero-facts {
  position: relative;
  padding: clamp(30px, 4vw, 46px) 0 clamp(4px, 1vw, 12px) clamp(28px, 4vw, 52px);
  border-left: 1px solid var(--cta2v6-rule-strong);
}

.cta2v6-hero-facts::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 4px;
  height: 74px;
  background: var(--cta2-blue);
}

.cta2v6-hero-facts strong {
  display: block;
  color: var(--cta2-blue-deep);
  font-family: "ContacT Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  font-size: clamp(76px, 10vw, 132px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .72;
}

.cta2v6-hero-facts > span {
  display: block;
  margin-top: 22px;
  color: var(--cta2-ink);
  font-size: 17px;
  font-weight: 850;
}

.cta2v6-hero-facts p {
  max-width: 34ch;
  margin: 14px 0 0;
  font-size: 15px;
}

/* Full-image treatment for detail and portrait media. Catalogue thumbnails
   intentionally override it below with focus-aware cover. */
.cta2v6-full-media,
.cta2v6-service-card__media,
.cta2v6-portrait {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cta2v6-night);
}

.cta2v6-full-media {
  width: 100%;
  aspect-ratio: 16 / 11;
  margin: 0;
  border: 1px solid rgba(46, 111, 176, .24);
  border-radius: 8px 36px 8px 8px;
  box-shadow: var(--cta2v6-shadow);
}

/* 6.3.2 – the backdrop is a blurred preview of the photo (--cta2v6-media:
   a 32 px picture inlined by the template, functions.php). It fills the
   frame while the photo loads – no dark or grey box when scrolling fast –
   and any letterbox space of an uncropped picture. */
.cta2v6-full-media__backdrop,
.cta2v6-service-card__media > span {
  position: absolute;
  z-index: -1;
  inset: -16px;
  display: block;
  background: var(--cta2v6-media, none) var(--cta2v6-focus-d, 50% 50%) / cover no-repeat;
  filter: blur(12px);
  transform: scale(1.04);
}

.cta2v6-full-media > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  padding: clamp(5px, .7vw, 10px);
  object-fit: contain;
  object-position: center;
}

.cta2v6-full-media--cover > img {
  padding: 0;
  object-fit: cover;
  object-position: var(--cta2v6-focus-d, center);
}

/* 6.3.1 – uncropped photos (team, events: 16:9) take the frame from their
   own width/height attributes, so the picture fills it completely instead of
   sitting between dark blurred bands. A very tall picture stays capped and is
   letterboxed over the blurred backdrop rather than stretching the hero. */
.cta2v6-full-media:not(.cta2v6-full-media--cover) {
  aspect-ratio: auto;
}

.cta2v6-full-media:not(.cta2v6-full-media--cover) > img {
  height: auto;
  max-height: min(78vh, 760px);
  padding: 0;
  object-fit: contain;
}

/* General section rhythm. 6.3.1: no white sections any more. The templates
   alternate plain and tinted sections, so plain ones take the lighter
   surface b and tinted ones surface a (the /ueber-uns team section, the
   reference of the scheme); a blue rule separates them. */
.cta2v6-section {
  position: relative;
  padding-block: clamp(74px, 9vw, 124px);
  background: var(--cta2-surface-b);
}

.cta2v6-section--tint {
  border-block: 1px solid var(--cta2-surface-rule);
  background: var(--cta2-surface-a);
}

.cta2v6-section--blue {
  overflow: hidden;
  border: 0;
  background:
    radial-gradient(circle at 84% 20%, rgba(111, 168, 222, .32), transparent 28%),
    linear-gradient(118deg, #173956, #214f78 62%, #28659c);
  color: var(--cta2v6-white);
}

.cta2v6-section--blue::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -270px;
  width: 520px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(255, 255, 255, .025);
  pointer-events: none;
}

.cta2v6-section--blue :where(h2, p, .cta2v6-kicker) {
  color: var(--cta2v6-white);
}

.cta2v6-section--blue .cta2v6-kicker::before {
  background: linear-gradient(90deg, #b8daf7, rgba(184, 218, 247, .12));
}

.cta2v6-section--blue .cta2v6-button {
  border-color: var(--cta2v6-white);
  background: var(--cta2v6-white);
  color: var(--cta2v6-night) !important;
  box-shadow: 0 16px 38px rgba(6, 20, 32, .25);
}

.cta2v6-section--blue .cta2v6-button:hover {
  border-color: var(--cta2v6-sky);
  background: var(--cta2v6-sky);
}

/* White keeps more than 4:1 anywhere on the band (gradient, highlight, ring
   lines); the former light blue dropped below 2:1 on its bright parts. */
.cta2v6-section--blue :is(a, button):focus-visible {
  outline-color: #fff;
}

.cta2v6-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .62fr);
  gap: clamp(38px, 7vw, 96px);
  align-items: end;
  margin-bottom: clamp(42px, 6vw, 74px);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--cta2v6-rule);
}

.cta2v6-section-head h2 {
  max-width: max(22ch, calc(var(--cta2v6-fit-now, 0) * 1em));
  margin-bottom: 0;
}

.cta2v6-section-head > p {
  max-width: 52ch;
  margin-bottom: 4px;
}

/* A link closing the intro text starts its own line ("Direkte Durchwahlen"). */
.cta2v6-section-head p > .cta2v6-text-link {
  display: flex;
  width: fit-content;
  margin-top: 4px;
}

/* Service catalogue. The thirteenth item becomes a deliberate full-width
   closing entry on wide screens instead of an accidental orphan. */
.cta2v6-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 34px);
}

.cta2v6-service-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--cta2-card-border);
  border-radius: 5px 27px 5px 5px;
  background: var(--cta2-card);
  box-shadow: var(--cta2-card-shadow);
}

.cta2v6-service-card__media {
  aspect-ratio: 3 / 2;
  display: block;
  border-bottom: 1px solid var(--cta2-card-border);
}

.cta2v6-service-card__media img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: var(--cta2v6-focus-d, 50% 50%);
}

@media (max-width: 700px) {
  .cta2v6-service-card__media img {
    object-position: var(--cta2v6-focus-m, var(--cta2v6-focus-d, 50% 50%));
  }

  .cta2v6-service-card__media > span {
    background-position: var(--cta2v6-focus-m, var(--cta2v6-focus-d, 50% 50%));
  }
}

.cta2v6-service-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 34px);
}

.cta2v6-card-index {
  display: inline-block;
  margin-bottom: 26px;
  color: var(--cta2-blue-text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.cta2v6-service-card__body {
  container-type: inline-size;
}

/* Two classes, so a site-wide h2 rule loaded later (Elementor kit:
   .elementor-kit-12 h2) cannot override size and line height of the titles. */
.cta2v6-subpage .cta2v6-service-card h2 {
  margin-bottom: 14px;
  font-size: clamp(25px, 2.3vw, 32px);
  max-width: 100%;
  line-height: 1.05;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

@supports (width: 1cqi) {
  .cta2v6-subpage .cta2v6-service-card h2 {
    font-size: min(clamp(25px, 2.3vw, 32px), calc(var(--cta2v6-fill) * 100cqi / var(--cta2v6-fit-now, 1)));
  }
}

.cta2v6-service-card h2 a {
  text-decoration: none;
}

.cta2v6-service-card p {
  margin-bottom: 24px;
  font-size: 15.5px;
  line-height: 1.62;
}

.cta2v6-text-link {
  display: inline-flex;
  min-height: 44px;
  gap: 9px;
  align-items: center;
  margin-top: auto;
  color: var(--cta2-blue-deep) !important;
  font-size: 14px;
  font-weight: 850;
  text-decoration: none;
}

.cta2v6-text-link:hover {
  text-decoration: underline;
}

.cta2v6-service-card:last-child:nth-child(3n + 1) {
  grid-column: 1 / -1;
  grid-template-columns: minmax(280px, .86fr) minmax(0, 1.14fr);
  grid-template-rows: none;
}

.cta2v6-service-card:last-child:nth-child(3n + 1) .cta2v6-service-card__media {
  aspect-ratio: auto;
  min-height: 330px;
  border-right: 1px solid var(--cta2-card-border);
  border-bottom: 0;
}

.cta2v6-service-card:last-child:nth-child(3n + 1) .cta2v6-service-card__body {
  justify-content: center;
  padding-inline: clamp(32px, 6vw, 76px);
}

/* Ordered processes and operating principles use rules, not floating cards. */
.cta2v6-step-grid,
.cta2v6-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--cta2v6-rule-strong);
}

.cta2v6-step-grid article,
.cta2v6-value-grid article {
  position: relative;
  min-width: 0;
  padding: clamp(28px, 4vw, 46px) clamp(18px, 3vw, 32px) 8px 0;
}

.cta2v6-step-grid article:not(:last-child),
.cta2v6-value-grid article:not(:last-child) {
  margin-right: clamp(18px, 3vw, 32px);
  border-right: 1px solid var(--cta2v6-rule);
}

.cta2v6-step-grid article > span,
.cta2v6-value-grid article > span,
.cta2v6-case-grid article > span,
.cta2v6-number-list article > span {
  display: block;
  margin-bottom: 32px;
  color: var(--cta2-blue-text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.cta2v6-step-grid p,
.cta2v6-value-grid p {
  margin-bottom: 0;
  font-size: 15px;
}

/* 6.3.1 – the four step titles are two-word phrases ("Anforderung
   aufnehmen"); this size keeps each on one line in a quarter column. */
.cta2v6-subpage .cta2v6-step-grid h3 {
  font-size: clamp(20px, 1.7vw, 24px);
}

/* Team — full portraits on a shared baseline. */
.cta2v6-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
}

.cta2v6-team-grid article {
  min-width: 0;
}

/* 6.3.1 – the photo always fills its frame (4:5 in the four-column grid,
   square in the one- and two-column layouts, see the 1080 px query). The
   current portraits are landscape (1500 × 1000): "contain" left the upper
   40 % of the frame empty. "cover" crops the sides instead; the anchor sits
   near the top, so taller portraits (e.g. 2:3 or 9:16) lose their lower part
   first and heads keep their headroom. A single photo can move the anchor
   with --cta2v6-portrait-focus (x y). */
.cta2v6-portrait {
  aspect-ratio: 4 / 5;
  margin-bottom: 22px;
  border: 1px solid var(--cta2-card-border);
  border-radius: 4px 24px 4px 4px;
  background: #d9e3ec;
  box-shadow: var(--cta2-card-shadow);
}

/* 6.3.2 – blurred preview (--cta2v6-media) until the portrait has loaded,
   instead of an empty frame. */
.cta2v6-portrait::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16px;
  background: var(--cta2v6-media, none) var(--cta2v6-portrait-focus, 50% 12%) / cover no-repeat;
  filter: blur(12px);
}

.cta2v6-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: var(--cta2v6-portrait-focus, 50% 12%);
}

.cta2v6-team-grid h3 {
  margin-bottom: 5px;
}

.cta2v6-team-grid p {
  margin-bottom: 0;
  font-size: 14px;
}

/* 6.4.0 – a short voice quote under name/role (page-karriere.php). Same
   14 px measure as the role line; only italic and a rule mark it as a
   quotation. */
.cta2v6-team-grid blockquote {
  margin: 10px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--cta2-blue-light);
  color: var(--cta2-ink);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
}

/* Two-column editorial passages and their ordered counterpart. */
.cta2v6-split-copy {
  display: grid;
  /* 6.3.1 – a wider heading column: the kept last word pair ("laufenden
     Abstimmung") fits without shrinking the heading far below the others. */
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.1fr);
  gap: clamp(44px, 7vw, 110px);
  align-items: start;
}

.cta2v6-split-copy > div:first-child {
  position: sticky;
  top: 126px;
}

.cta2v6-split-copy > div:first-child {
  container-type: inline-size;
}

/* The fitted size keeps "Einsatzabstimmung." whole in the 404 px column at
   1440 px and above. Line height and size come from this selector, so a
   foreign h2 line height (Elementor kit: 2.4rem) never pairs with the larger
   size and overlaps the lines. */
.cta2v6-split-copy > div:first-child h2 {
  max-width: max(18ch, calc(var(--cta2v6-fit-now, 0) * 1em));
  line-height: 1.02;
}

@supports (width: 1cqi) {
  .cta2v6-split-copy > div:first-child h2 {
    font-size: min(clamp(32px, 4vw, 54px), calc(var(--cta2v6-fill) * 100cqi / var(--cta2v6-fit-now, 1)));
  }
}

.cta2v6-number-list {
  border-top: 1px solid var(--cta2v6-rule-strong);
}

.cta2v6-number-list article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 22px;
  padding-block: clamp(26px, 4vw, 40px);
  border-bottom: 1px solid var(--cta2v6-rule);
}

.cta2v6-number-list article > span {
  margin: 5px 0 0;
}

.cta2v6-number-list h3 {
  margin-bottom: 8px;
}

.cta2v6-number-list p {
  margin-bottom: 0;
}

/* Certificates: each document has room to remain fully readable. */
.cta2v6-certificate-grid {
  display: grid;
  gap: clamp(42px, 7vw, 82px);
}

.cta2v6-certificate-card {
  display: grid;
  grid-template-columns: minmax(320px, .86fr) minmax(0, 1.14fr);
  gap: clamp(38px, 7vw, 94px);
  align-items: center;
  padding-block: clamp(24px, 4vw, 50px);
  border-block: 1px solid var(--cta2v6-rule);
}

.cta2v6-certificate-card:nth-child(even) {
  grid-template-columns: minmax(0, 1.14fr) minmax(320px, .86fr);
}

.cta2v6-certificate-card:nth-child(even) .cta2v6-document {
  order: 2;
}

.cta2v6-document {
  aspect-ratio: 210 / 297;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(46, 111, 176, .2);
  border-radius: 4px 24px 4px 4px;
  background:
    linear-gradient(145deg, rgba(111, 168, 222, .18), transparent 45%),
    #e5edf4;
  box-shadow: var(--cta2v6-shadow);
}

.cta2v6-document img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  /* 6.3.2 – preview of the document until the file has loaded. */
  background: var(--cta2v6-media, none) center / contain no-repeat;
  box-shadow: 0 10px 28px rgba(16, 35, 53, .15);
}

.cta2v6-certificate-card h2 {
  margin-bottom: 30px;
}

.cta2v6-certificate-card dl {
  margin-bottom: 26px;
  border-top: 1px solid var(--cta2v6-rule-strong);
}

.cta2v6-certificate-card dl > div {
  display: grid;
  grid-template-columns: minmax(135px, .8fr) minmax(0, 1.2fr);
  gap: 22px;
  padding-block: 14px;
  border-bottom: 1px solid var(--cta2v6-rule);
}

.cta2v6-certificate-card dt {
  color: var(--cta2-muted);
  font-size: 13px;
}

.cta2v6-certificate-card dd {
  margin: 0;
  color: var(--cta2-ink);
  font-weight: 850;
}

/* References use concrete cases as a dossier-like two-column field. */
.cta2v6-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--cta2-card-border);
  background: var(--cta2-card-border);
  box-shadow: var(--cta2-card-shadow);
}

.cta2v6-case-grid article {
  min-width: 0;
  padding: clamp(30px, 5vw, 52px);
  background: var(--cta2-card);
  box-shadow: inset 4px 0 0 transparent;
}

.cta2v6-case-grid article:hover {
  box-shadow: inset 4px 0 0 var(--cta2-blue);
}

.cta2v6-case-grid article > span {
  margin-bottom: 38px;
}

.cta2v6-case-grid article p {
  margin-bottom: 28px;
}

.cta2v6-case-grid article strong {
  display: block;
  color: var(--cta2-blue-deep);
  font-size: 13px;
  line-height: 1.45;
}

.cta2v6-footnote {
  max-width: 74ch;
  margin: 28px 0 0;
  padding-left: 18px;
  border-left: 3px solid var(--cta2-blue-light);
  font-size: 14px;
}

/* Career fields are orientation, not a promise of current vacancies. */
.cta2v6-career-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--cta2v6-rule-strong);
}

.cta2v6-career-fields article {
  min-width: 0;
  padding: clamp(30px, 4vw, 48px) clamp(20px, 3.4vw, 40px) 8px 0;
}

.cta2v6-career-fields article:not(:last-child) {
  margin-right: clamp(20px, 3.4vw, 40px);
  border-right: 1px solid var(--cta2v6-rule);
}

.cta2v6-career-fields h3 {
  max-width: max(14ch, calc(var(--cta2v6-fit-now, 0) * 1em));
}

.cta2v6-career-fields p {
  margin-bottom: 0;
  font-size: 15px;
}

/* 6.3.1 – titles in narrow grid columns: the kept last word pair never runs
   out of its column; the size is fitted like the hero headings. */
.cta2v6-case-grid article,
.cta2v6-career-fields article,
.cta2v6-resource-card {
  container-type: inline-size;
}

@supports (width: 1cqi) {
  .cta2v6-subpage :is(.cta2v6-case-grid article, .cta2v6-career-fields article, .cta2v6-resource-card) > h3 {
    font-size: min(clamp(21px, 2vw, 27px), calc(var(--cta2v6-fill) * 100cqi / var(--cta2v6-fit-now, 1)));
  }
}

/* 6.4.0 – FAQ as a native disclosure list (page-karriere.php), the same
   pattern the mobile menu already uses (template-parts/site-header.php):
   no extra JS, <details>/<summary> carry the open state and keyboard/AT
   operability on their own. */
.cta2v6-faq {
  border-top: 1px solid var(--cta2v6-rule-strong);
}

.cta2v6-faq__item {
  border-bottom: 1px solid var(--cta2v6-rule);
}

.cta2v6-faq__item > summary {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 46px 20px 2px;
  color: var(--cta2-ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  text-wrap: pretty;
}

.cta2v6-faq__item > summary::-webkit-details-marker {
  display: none;
}

.cta2v6-faq__item > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transform: translateY(-50%);
  border: 1px solid var(--cta2-blue);
  border-radius: 50%;
  color: var(--cta2-blue-deep);
  font-size: 16px;
  font-weight: 700;
  transition: transform .2s ease;
}

.cta2v6-faq__item[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.cta2v6-faq__item > p {
  margin: 0 0 24px;
  padding-right: 46px;
  color: var(--cta2-muted);
}

/* Contact: the form inherits the existing editorial system while direct
   channels remain visible as a resilient alternative. */
.cta2v6-contact-direct {
  display: grid;
  gap: 10px;
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--cta2-card-border);
  border-radius: 5px 28px 5px 5px;
  background: var(--cta2-card);
  box-shadow: var(--cta2-card-shadow);
}

.cta2v6-contact-direct > span {
  margin-bottom: 12px;
  color: var(--cta2-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
}

/* Company name and "24-h-Service-Hotline" as two lines of one label. */
.cta2v6-contact-direct__label > span {
  display: block;
}

/* 6.3.2 – phone number and e-mail address are 44 px high touch targets
   (they were 20–25 px). */
.cta2v6-contact-direct > a:not(.cta2v6-text-link) {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--cta2-blue-deep);
  font-family: "ContacT Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  font-size: clamp(23px, 2.3vw, 30px);
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.cta2v6-contact-direct > a:not(.cta2v6-text-link):hover {
  text-decoration: underline;
}

/* The e-mail address is the longest entry: this size keeps it on one line
   in the narrow hero column instead of splitting it. */
.cta2v6-contact-direct > a[href^="mailto:"] {
  font-size: clamp(17px, 1.6vw, 21px);
}

.cta2v6-contact-direct address {
  margin-block: 14px 12px;
  padding-top: 22px;
  border-top: 1px solid var(--cta2v6-rule);
  color: var(--cta2v6-steel);
  font-style: normal;
  line-height: 1.65;
}

.cta2v6-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, .74fr) minmax(440px, 1.26fr);
  gap: clamp(50px, 9vw, 126px);
  align-items: start;
}

.cta2v6-contact-guide h2 {
  max-width: max(18ch, calc(var(--cta2v6-fit-now, 0) * 1em));
}

.cta2v6-contact-guide .cta2v6-check-list {
  grid-template-columns: minmax(0, 1fr);
  margin-block: 34px 26px;
}

.cta2v6-contact-guide > p:last-child {
  margin-bottom: 0;
  padding-left: 18px;
  border-left: 3px solid var(--cta2-blue-light);
  font-size: 14px;
}

.cta2v6-form-shell {
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid var(--cta2-card-border);
  border-radius: 6px 34px 6px 6px;
  background: var(--cta2-card);
  box-shadow: var(--cta2-card-shadow);
}

.cta2v6-form-shell h2 {
  max-width: max(18ch, calc(var(--cta2v6-fit-now, 0) * 1em));
  font-size: clamp(30px, 3.6vw, 46px);
}

.cta2v6-form-note {
  margin-bottom: 30px;
}

.cta2v6-contact-form form {
  position: relative;
  display: grid;
  gap: 24px;
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--cta2v6-rule-strong);
}

.cta2v6-contact-form form[hidden],
.cta2v6-contact-form__status[hidden],
.cta2v6-contact-form__unavailable[hidden] {
  display: none !important;
}

.cta2v6-contact-form__required {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  color: var(--cta2-muted);
  font-size: 12px;
  font-weight: 700;
}

.cta2v6-contact-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
}

.cta2v6-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.cta2v6-field > label {
  color: var(--cta2v6-steel);
  font-size: 13px;
  font-weight: 800;
}

.cta2v6-field > label > span:not([aria-hidden]) {
  color: var(--cta2-muted);
  font-weight: 500;
}

.cta2v6-contact-form :where(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgba(54, 83, 109, .34);
  border-radius: 7px;
  background: #fff;
  color: var(--cta2v6-night);
  font: inherit;
  line-height: 1.4;
  resize: vertical;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.cta2v6-contact-form textarea {
  min-height: 160px;
}

.cta2v6-contact-form :where(input, select, textarea):hover {
  border-color: rgba(46, 111, 176, .64);
}

.cta2v6-contact-form :where(input, select, textarea):focus {
  border-color: var(--cta2-blue);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(111, 168, 222, .2);
}

.cta2v6-contact-form :where(input, select, textarea)[aria-invalid="true"] {
  border-color: #a32f3d;
  background: #fff8f8;
  box-shadow: 0 0 0 3px rgba(163, 47, 61, .12);
}

.cta2v6-field small {
  color: var(--cta2-muted);
  font-size: 12px;
  line-height: 1.5;
}

.cta2v6-field-wide {
  grid-column: 1 / -1;
}

/* 6.3.2 – privacy consent: a 24 px checkbox, and the whole framed row is
   its label (the label's ::before covers the row), so a tap anywhere on it
   toggles the box. Checkbox and privacy link stay above that area. */
.cta2v6-contact-form__privacy {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid rgba(46, 111, 176, .24);
  border-radius: 8px;
  background: #f6f9fd;
}

.cta2v6-contact-form__privacy:focus-within {
  border-color: var(--cta2-blue);
}

.cta2v6-contact-form__privacy:has(input[aria-invalid="true"]) {
  border-color: #a32f3d;
  background: #fff8f8;
}

.cta2v6-contact-form__privacy input {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--cta2-blue);
  cursor: pointer;
}

.cta2v6-contact-form__privacy label {
  color: var(--cta2v6-steel);
  font-size: 14px;
  line-height: 1.55;
  cursor: pointer;
}

.cta2v6-contact-form__privacy label::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.cta2v6-contact-form__privacy a {
  position: relative;
  z-index: 1;
  color: var(--cta2-blue-deep);
  font-weight: 750;
}

.cta2v6-contact-form__submit {
  justify-self: start;
  min-width: 190px;
}

.cta2v6-contact-form__submit:disabled {
  border-color: #8798a8;
  background: #8798a8;
  box-shadow: none;
  cursor: not-allowed;
  opacity: .72;
  transform: none;
}

.cta2v6-contact-form form[aria-busy="true"] .cta2v6-contact-form__submit:disabled {
  cursor: wait;
}

.cta2v6-contact-form__status {
  margin: 0 0 24px;
  padding: 15px 17px;
  border: 1px solid rgba(46, 111, 176, .4);
  border-left-width: 4px;
  border-radius: 6px;
  background: #fff;
  color: var(--cta2v6-night);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.cta2v6-contact-form__status--success {
  border-color: #2f7c5b;
  background: #f2fbf6;
  color: #1d5e43;
}

.cta2v6-contact-form__status--error {
  border-color: #a32f3d;
  background: #fff7f7;
  color: #76222d;
}

.cta2v6-contact-form__unavailable {
  padding: 22px;
  border: 1px solid rgba(46, 111, 176, .32);
  border-radius: 6px 22px 6px 6px;
  background: #fff;
}

.cta2v6-contact-form__unavailable strong {
  display: block;
  color: var(--cta2v6-night);
  font-size: 17px;
}

.cta2v6-contact-form__unavailable p {
  margin: 8px 0 0;
  font-size: 14px;
}

.cta2v6-contact-form__trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.cta2v6-contact-form__fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--cta2v6-rule);
  font-size: 13px;
}

.cta2v6-contact-form__fallback > span {
  width: 100%;
  color: var(--cta2-muted);
  font-weight: 750;
}

/* 6.3.2 – 44 px touch targets (were 21 px). */
.cta2v6-contact-form__fallback a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cta2-blue-deep);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.cta2v6-form-privacy {
  margin: 22px 0 0;
  font-size: 12.5px;
}

.cta2v6-form-privacy a {
  color: var(--cta2-blue-deep);
}

.cta2v6-direct-options {
  display: grid;
  gap: 12px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--cta2v6-rule-strong);
}

.cta2v6-direct-options > a {
  display: grid;
  gap: 3px;
  min-height: 88px;
  padding: 17px 18px;
  border: 1px solid rgba(46, 111, 176, .24);
  border-radius: 5px 18px 5px 5px;
  background: rgba(255, 255, 255, .82);
  color: var(--cta2v6-night);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cta2v6-direct-options > a:hover {
  border-color: var(--cta2-blue);
  box-shadow: 0 12px 28px rgba(33, 73, 111, .1);
  transform: translateY(-2px);
}

.cta2v6-direct-options span,
.cta2v6-resource-feature > span,
.cta2v6-resource-card > span {
  color: var(--cta2-blue-text);
  /* 6.3.2 – at least 12 px (was 11 px). */
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cta2v6-direct-options strong {
  font-size: clamp(17px, 2vw, 22px);
  overflow-wrap: anywhere;
}

.cta2v6-direct-options small { color: var(--cta2-muted); font-size: 12px; }

/* 6.4.0 (I1c) – mehrstufiges Bewerbungsformular: Fortschritt, Schritt-
   Fieldsets, Auswahl-Kacheln (Radio/Checkbox-Karten statt Standardfelder,
   damit die Quiz-Optionen wie Kartenauswahl wirken) und Datei-Felder.
   Additiv zu den bestehenden .cta2v6-contact-form*/.cta2v6-field*-Regeln
   oben, keine davon wird verändert. */

.cta2v6-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.cta2v6-steps__progress {
  height: 6px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: var(--cta2v6-mist, #edf3f8);
  overflow: hidden;
}

.cta2v6-steps__meter {
  height: 100%;
}

.cta2v6-steps__meter span {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--cta2-blue);
  border-radius: 999px;
  transition: width .25s ease;
}

.cta2v6-steps__label {
  margin: 0 0 22px;
  color: var(--cta2v6-steel);
  font-size: 13px;
  font-weight: 800;
}

.cta2v6-step {
  display: grid;
  gap: 19px;
  margin: 0;
  padding: 0;
  border: 0;
}

.cta2v6-step[hidden] {
  display: none;
}

.cta2v6-field__legend {
  display: block;
  margin-bottom: 8px;
  color: var(--cta2v6-steel);
  font-size: 13px;
  font-weight: 800;
}

.cta2v6-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.cta2v6-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(54, 83, 109, .34);
  border-radius: 7px;
  background: #fff;
  color: var(--cta2v6-night);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.cta2v6-choice:hover {
  border-color: rgba(46, 111, 176, .64);
}

.cta2v6-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.cta2v6-choice:has(input:focus-visible) {
  outline: 3px solid rgba(111, 168, 222, .5);
  outline-offset: 2px;
}

.cta2v6-choice:has(input:checked) {
  border-color: var(--cta2-blue);
  background: #f0f6fc;
  box-shadow: 0 0 0 3px rgba(111, 168, 222, .2);
}

.cta2v6-choice:has(input[aria-invalid="true"]) {
  border-color: #a32f3d;
}

.cta2v6-field input[type="file"] {
  min-height: 0;
  padding: 10px 12px;
  cursor: pointer;
}

.cta2v6-field input[type="file"][aria-invalid="true"] {
  border-color: #a32f3d;
}

.cta2v6-field [data-cta2v6-frage-error] {
  display: block;
  min-height: 1em;
  color: #a32f3d;
  font-size: 12.5px;
  font-weight: 700;
}

.cta2v6-steps__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cta2v6-steps__nav [data-cta2v6-step-back] {
  margin-right: auto;
}

/* Preserved WordPress content receives the same readable measure and visual
   hierarchy as the bespoke pages. Existing copy stays intact; only its shell
   and inherited Elementor spacing are normalized. */
.cta2v6-subhero--compact .cta2v6-subhero__grid { grid-template-columns: minmax(0, 1fr); }
.cta2v6-subhero--compact .cta2v6-subhero__copy { max-width: 880px; }

.cta2v6-legacy-copy {
  width: min(100%, 940px);
  margin-inline: auto;
  padding: clamp(26px, 5vw, 62px);
  border: 1px solid var(--cta2-card-border);
  border-radius: 6px 32px 6px 6px;
  background: var(--cta2-card);
  box-shadow: var(--cta2-card-shadow);
  color: var(--cta2-muted);
}

.cta2v6-legacy-copy :where(h1) { display: none !important; }
.cta2v6-legacy-copy :where(h2, h3, h4) { max-width: 36ch; color: var(--cta2-ink) !important; }
.cta2v6-legacy-copy h2 { margin: 1.7em 0 .55em; font-size: clamp(27px, 3.5vw, 42px); }
.cta2v6-legacy-copy h3 { margin: 1.55em 0 .5em; font-size: clamp(21px, 2.4vw, 29px); }
.cta2v6-legacy-copy :where(p, li) {
  max-width: 72ch;
  color: #3e5266 !important;
  line-height: 1.72;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cta2v6-legacy-copy :where(a) {
  color: var(--cta2-blue-deep) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 6.3.1 – on narrow phones long compounds in legal texts
   ("Verbraucherstreitbeilegungsgesetz") are hyphenated (lang="de") instead
   of breaking after an arbitrary letter. */
@media (max-width: 480px) {
  .cta2v6-legacy-copy :where(p, li) {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}
.cta2v6-legacy-copy :where(img, iframe, video) { max-width: 100%; height: auto; }
.cta2v6-legacy-copy :where(table) { width: 100%; border-collapse: collapse; }
.cta2v6-legacy-copy :where(th, td) { padding: 12px; border: 1px solid var(--cta2v6-rule); text-align: left; vertical-align: top; }
.cta2v6-legacy-copy > :first-child,
.cta2v6-legacy-copy .elementor > :first-child { margin-top: 0 !important; }
.cta2v6-legacy-copy .elementor-section,
.cta2v6-legacy-copy .elementor-container,
.cta2v6-legacy-copy .elementor-column,
.cta2v6-legacy-copy .elementor-widget-wrap {
  width: 100% !important;
  max-width: none !important;
}
.cta2v6-legal-page .elementor-widget-spacer { display: none !important; }

.cta2v6-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.cta2v6-table-scroll:focus-visible { outline: 3px solid var(--cta2-blue-deep); outline-offset: 3px; }
.cta2v6-table-scroll .raci-table { min-width: 620px; }

/* WordPress preserved the guide's leaf content but flattened away every
   authored wrapper/class. This theme-owned shell keeps that real content
   readable without pretending the missing brochure grid still exists. */
.cta2v6-guide-flat {
  display: flow-root;
  width: 100%;
  min-width: 0;
  padding: clamp(20px, 4vw, 42px);
  border: 1px solid var(--cta2-card-border);
  border-radius: 5px 24px 5px 5px;
  background: var(--cta2-card);
  color: #3e5266;
}

.cta2v6-guide-flat > :first-child { margin-top: 0 !important; }
.cta2v6-guide-flat > :last-child { margin-bottom: 0 !important; }
.cta2v6-guide-flat > br { display: none; }
.cta2v6-guide-flat svg {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.15em;
}

.cta2v6-guide-logo {
  display: block;
  width: min(100%, 330px);
  margin: 18px auto;
}

.cta2v6-guide-logo img {
  display: block;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain;
}

.cta2v6-guide-figure {
  display: grid;
  width: 100%;
  min-width: 0;
  margin: 24px 0;
  overflow: hidden;
  border: 1px solid rgba(46, 111, 176, .2);
  border-radius: 4px 20px 4px 4px;
  background: #0e2132;
  box-shadow: 0 16px 34px rgba(33, 73, 111, .12);
}

.cta2v6-guide-figure img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 620px;
  margin: 0 !important;
  object-fit: contain;
  object-position: center;
  /* 6.3.2 – preview of the picture (--cta2v6-media) until it has loaded. */
  background: var(--cta2v6-media, none) center / contain no-repeat, #0e2132;
}

.cta2v6-guide-caption {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 11px 14px 13px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: #0e2132;
  color: #f4f8fc;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cta2v6-guide-page .cta2v6-table-scroll {
  margin: 24px 0;
  border: 1px solid var(--cta2v6-rule);
  border-radius: 4px 14px 4px 4px;
  background: #fff;
}

.cta2v6-guide-page .cta2v6-table-scroll table {
  width: 100%;
  min-width: 620px;
  margin: 0;
}

/* The recovered guide checklist is informational. Its original onclick
   handler was missing, so do not keep a deceptive pointer/hover affordance. */
.cta2v6-guide-page #ct-jl li.cta2v6-static-check,
.cta2v6-guide-page #ct-jl li.cta2v6-static-check .checklist-box {
  cursor: default !important;
}
.cta2v6-guide-page #ct-jl li.cta2v6-static-check:hover {
  background: transparent !important;
}

/* 6.3.2 – the guide's own entrance classes stay visible from the start, as
   its authored "failsafe" rule intends. That rule was cut apart when the
   content was re-imported (WordPress wrapped it in paragraph tags), and
   late fades left empty areas while scrolling fast. */
.cta2v6-guide-page #ct-jl :is(.fade-in, .fade-in-left, .fade-in-right, .scale-in) {
  opacity: 1;
  transform: none;
}

/* 6.3.2 – "A · B" in the guide (template-parts/legacy-content-page.php): on
   phones the dot becomes a line break, so no line starts or ends with it. */
@media (max-width: 480px) {
  .cta2v6-guide-page .cta2v6-sep {
    display: block;
    font-size: 0;
    letter-spacing: 0;
    line-height: 0;
  }
}

/* The long Jugendhilfe guide contains its own A4-oriented stylesheet. These
   later, higher-specificity guards turn its document pages into a genuine
   small-screen reading flow instead of clipping the second column. */
@media (max-width: 700px) {
  .cta2v6-guide-page .cta2v6-legacy-copy {
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .cta2v6-guide-flat {
    padding: 18px 16px 22px;
    border-radius: 4px 18px 4px 4px;
  }
  .cta2v6-guide-figure { margin-block: 20px; border-radius: 3px 15px 3px 3px; }
  .cta2v6-guide-caption { padding: 10px 12px 12px; font-size: 12px; }
  .cta2v6-guide-page #ct-jl,
  .cta2v6-guide-page #ct-jl .page,
  .cta2v6-guide-page #ct-jl .page-inner,
  .cta2v6-guide-page #ct-jl .cover-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  .cta2v6-guide-page #ct-jl { overflow: visible !important; }
  .cta2v6-guide-page #ct-jl .page { margin: 0 0 16px !important; overflow: hidden !important; }
  .cta2v6-guide-page #ct-jl .page-inner { min-height: auto !important; padding: 28px 18px !important; }
  .cta2v6-guide-page #ct-jl .cover { min-height: min(700px, calc(100svh - 70px)) !important; }
  .cta2v6-guide-page #ct-jl .cover-content { padding: 28px 18px !important; }
  /* Captions authored as wide desktop overlays cropped on narrow screens.
     Keep them inside the fixed image frame, but give them the full usable
     width and wrapping instead of translating a nowrap pill off-canvas. */
  .cta2v6-guide-page #ct-jl .cover-hero-tag,
  .cta2v6-guide-page #ct-jl .hero-image-caption {
    position: absolute !important;
    transform: none !important;
    top: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: hidden !important;
  }
  .cta2v6-guide-page #ct-jl .cover-hero-tag {
    display: block !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    width: auto !important;
    padding: 10px 12px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }
  .cta2v6-guide-page #ct-jl .hero-image-caption {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 12px 14px !important;
    text-align: left !important;
    background: linear-gradient(180deg, rgba(15,29,51,.2), rgba(15,29,51,.96)) !important;
  }
  .cta2v6-guide-page #ct-jl .hero-image-caption .caption-tag { width: fit-content !important; }
  .cta2v6-guide-page #ct-jl :where(.caption-tag, .caption-text) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
  .cta2v6-guide-page #ct-jl :where(.six-grid, .stat-grid, .doku-flow, .pillars, .compare-row, .compare-header) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cta2v6-guide-page #ct-jl :where(.six-grid, .stat-grid, .doku-flow, .pillars, .compare-row, .compare-header) > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .cta2v6-guide-page #ct-jl :where(.six-card, .stat-box, .pillar, .compare-warn, .compare-good, .info-card, .info-card-light) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .cta2v6-guide-page #ct-jl .logo-container { width: 100% !important; max-width: 280px !important; padding-inline: 8px !important; }
  .cta2v6-guide-page #ct-jl .logo-container::before { width: 120% !important; max-width: 320px !important; }
  .cta2v6-guide-page #ct-jl .logo-real { width: 100% !important; max-width: 260px !important; }
  .cta2v6-guide-page #ct-jl .export-fab { display: none !important; }
  .cta2v6-guide-page .cta2v6-table-scroll { margin-block: 20px; }
  .cta2v6-guide-page #ct-jl .cta2v6-table-scroll .raci-table {
    width: 620px !important;
    min-width: 620px !important;
    margin: 0 !important;
  }
}

.cta2v6-resource-feature {
  max-width: none;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--cta2-card-border);
  border-left: 4px solid var(--cta2-blue);
  background: var(--cta2-card);
  box-shadow: var(--cta2-card-shadow);
}
.cta2v6-resource-feature h3 { max-width: 20ch; margin-top: 12px; font-size: clamp(28px, 4vw, 48px); }
.cta2v6-resource-feature p { max-width: 68ch; }
.cta2v6-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
/* 6.3.1 – each article is its own card: with one or two posts the former
   1 px grid on a tinted background showed an empty tinted block. */
.cta2v6-resource-card { min-width: 0; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--cta2-card-border); border-radius: 5px 22px 5px 5px; background: var(--cta2-card); box-shadow: var(--cta2-card-shadow); }
.cta2v6-resource-card h3 { margin-top: 14px; }
.cta2v6-resource-card h3 a { text-decoration: none; }

/* Service detail — anchored contents beside a calm editorial stack. */
.cta2v6-detail-layout {
  display: grid;
  grid-template-columns: minmax(210px, .3fr) minmax(0, 1fr);
  gap: clamp(50px, 9vw, 130px);
  align-items: start;
}

.cta2v6-toc {
  position: sticky;
  top: 122px;
  display: grid;
  gap: 2px;
  padding: 22px 0 22px 24px;
  border-left: 3px solid var(--cta2-blue);
}

.cta2v6-toc strong {
  margin-bottom: 10px;
  color: var(--cta2-ink);
  font-size: 14px;
}

.cta2v6-toc a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 7px 4px;
  color: var(--cta2-muted);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}

.cta2v6-toc a:hover {
  color: var(--cta2-blue);
}

.cta2v6-detail-stack {
  border-top: 1px solid var(--cta2v6-rule-strong);
}

.cta2v6-content-card {
  scroll-margin-top: 118px;
  padding-block: clamp(40px, 6vw, 70px);
  border-bottom: 1px solid var(--cta2v6-rule);
}

.cta2v6-content-card .cta2v6-card-index {
  margin-bottom: 20px;
}

.cta2v6-content-card h2 {
  max-width: max(24ch, calc(var(--cta2v6-fit-now, 0) * 1em));
  overflow-wrap: break-word;
}

.cta2v6-content-card > p {
  max-width: 72ch;
  margin-bottom: 28px;
}

.cta2v6-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--cta2v6-rule);
  list-style: none;
}

.cta2v6-check-list li {
  position: relative;
  min-width: 0;
  padding: 15px 0 15px 25px;
  border-bottom: 1px solid var(--cta2v6-rule);
  color: var(--cta2v6-steel);
  font-size: 15px;
  line-height: 1.5;
}

.cta2v6-check-list li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--cta2-blue);
  border-radius: 50%;
}

#anfrage {
  scroll-margin-top: 100px;
}

.cta2v6-band-cta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(34px, 8vw, 110px);
  align-items: end;
}

/* Never narrower than the widest word (--cta2v6-fit, inc/typography.php). */
.cta2v6-band-cta h2 {
  max-width: max(22ch, calc(var(--cta2v6-fit-now, 0) * 1em));
}

.cta2v6-band-cta p {
  max-width: 62ch;
  margin-bottom: 0;
  color: rgba(255, 255, 255, .8);
}

/* One measured entrance, instead of repeated section-by-section reveals.
   6.3.2 – shorter and subtler: the opening is readable from the first frame
   (no empty hero while the page builds or after jumping back up). */
@media (prefers-reduced-motion: no-preference) {
  .cta2v6-subhero__copy {
    animation: cta2v6-subpage-copy-in .42s cubic-bezier(.2, .72, .2, 1) both;
  }

  .cta2v6-subhero :is(.cta2v6-full-media, .cta2v6-hero-facts) {
    animation: cta2v6-subpage-media-in .48s cubic-bezier(.2, .72, .2, 1) .03s both;
  }

  @keyframes cta2v6-subpage-copy-in {
    from { opacity: .4; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes cta2v6-subpage-media-in {
    from { opacity: .55; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* Tablet: preserve hierarchy while reducing density. */
@media (max-width: 1080px) {
  .cta2v6-subhero__grid,
  .cta2v6-subhero--media .cta2v6-subhero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .85fr);
    gap: 42px;
  }

  .cta2v6-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta2v6-resource-grid { grid-template-columns: minmax(0, 1fr); }

  .cta2v6-service-card:last-child:nth-child(3n + 1) {
    grid-column: auto;
    grid-template-columns: none;
    grid-template-rows: auto 1fr;
  }

  .cta2v6-service-card:last-child:nth-child(3n + 1) .cta2v6-service-card__media {
    aspect-ratio: 3 / 2;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--cta2-card-border);
  }

  .cta2v6-service-card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    grid-template-rows: none;
  }

  .cta2v6-service-card:last-child:nth-child(2n + 1) .cta2v6-service-card__media {
    aspect-ratio: auto;
    min-height: 310px;
    border-right: 1px solid var(--cta2-card-border);
    border-bottom: 0;
  }

  .cta2v6-step-grid,
  .cta2v6-value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cta2v6-step-grid article:nth-child(2),
  .cta2v6-value-grid article:nth-child(2) {
    margin-right: 0;
    border-right: 0;
  }

  .cta2v6-step-grid article:nth-child(n + 3),
  .cta2v6-value-grid article:nth-child(n + 3) {
    border-top: 1px solid var(--cta2v6-rule);
  }

  .cta2v6-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 26px;
  }

  /* Two columns (and one on phones) are much wider than the desktop
     quarter: a square frame keeps the portraits from growing to 570 px. */
  .cta2v6-portrait {
    aspect-ratio: 1;
  }
}

@media (max-width: 880px) {
  .cta2v6-subhero__grid,
  .cta2v6-subhero--media .cta2v6-subhero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .cta2v6-subhero__copy {
    max-width: 700px;
  }

  .cta2v6-subhero__copy h1 {
    max-width: max(13ch, calc(var(--cta2v6-fit-now, 0) * 1em));
  }

  .cta2v6-full-media {
    max-width: 760px;
  }

  .cta2v6-hero-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 28px;
    align-items: center;
    padding: 18px 0 18px 28px;
  }

  .cta2v6-hero-facts::before {
    height: 100%;
  }

  .cta2v6-hero-facts strong {
    grid-row: 1 / 3;
    font-size: 88px;
  }

  .cta2v6-hero-facts > span {
    align-self: end;
    margin-top: 0;
  }

  .cta2v6-hero-facts p {
    align-self: start;
    max-width: 56ch;
    margin-top: 5px;
  }

  .cta2v6-section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .cta2v6-section-head h2 {
    max-width: max(22ch, calc(var(--cta2v6-fit-now, 0) * 1em));
  }

  .cta2v6-split-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .cta2v6-split-copy > div:first-child {
    position: static;
  }

  .cta2v6-certificate-card,
  .cta2v6-certificate-card:nth-child(even) {
    grid-template-columns: minmax(270px, .82fr) minmax(0, 1.18fr);
    gap: 40px;
  }

  .cta2v6-certificate-card:nth-child(even) .cta2v6-document {
    order: 0;
  }

  .cta2v6-detail-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 42px;
  }

  .cta2v6-toc {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 20px;
  }

  .cta2v6-toc strong {
    grid-column: 1 / -1;
  }

  .cta2v6-band-cta {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .cta2v6-band-cta .cta2v6-button {
    justify-self: start;
  }

  .cta2v6-contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 54px;
  }
}

@media (max-width: 680px) {
  .cta2v6-subhero {
    padding-block: 58px 66px;
  }

  .cta2v6-subhero::before {
    top: -90px;
    right: -150px;
    width: 420px;
  }

  .cta2v6-subpage h1 {
    --cta2v6-h1: clamp(36px, 10.4vw, 52px);
    max-width: 100%;
    line-height: .99;
  }

  .cta2v6-full-media--cover > img { object-position: var(--cta2v6-focus-m, center); }
  .cta2v6-full-media--cover .cta2v6-full-media__backdrop { background-position: var(--cta2v6-focus-m, center); }

  .cta2v6-subpage h2 {
    font-size: clamp(30px, 8vw, 42px);
  }

  .cta2v6-kicker {
    gap: 10px;
    letter-spacing: .12em;
  }

  .cta2v6-kicker::before {
    width: 28px;
  }

  .cta2v6-full-media {
    aspect-ratio: 4 / 3;
    border-radius: 5px 24px 5px 5px;
  }

  .cta2v6-service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta2v6-service-card:last-child:nth-child(2n + 1) {
    grid-column: auto;
    grid-template-columns: none;
    grid-template-rows: auto 1fr;
  }

  .cta2v6-service-card:last-child:nth-child(2n + 1) .cta2v6-service-card__media {
    aspect-ratio: 3 / 2;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--cta2-card-border);
  }

  .cta2v6-step-grid,
  .cta2v6-value-grid,
  .cta2v6-team-grid,
  .cta2v6-case-grid,
  .cta2v6-career-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta2v6-step-grid article,
  .cta2v6-value-grid article {
    margin-right: 0 !important;
    border-top: 1px solid var(--cta2v6-rule);
    border-right: 0 !important;
  }

  .cta2v6-step-grid article:first-child,
  .cta2v6-value-grid article:first-child {
    border-top: 0;
  }

  .cta2v6-team-grid {
    gap: 42px;
  }

  .cta2v6-career-fields article {
    margin-right: 0 !important;
    padding-block: 28px;
    padding-right: 0;
    border-right: 0 !important;
    border-bottom: 1px solid var(--cta2v6-rule);
  }

  /* One column: the compact measure of the three-column layout would split
     two-word titles ("Stationäre / Sicherheit") for no reason. */
  .cta2v6-career-fields h3 {
    max-width: none;
  }

  .cta2v6-certificate-card,
  .cta2v6-certificate-card:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .cta2v6-document {
    width: min(100%, 430px);
    margin-inline: auto;
  }

  .cta2v6-case-grid {
    gap: 1px;
  }

  .cta2v6-check-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta2v6-toc {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta2v6-toc strong {
    grid-column: auto;
  }

  .cta2v6-contact-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta2v6-field-wide {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .cta2v6-subhero__grid,
  .cta2v6-subhero--media .cta2v6-subhero__grid {
    gap: 36px;
  }

  /* 6.3.1 – balanced like on larger screens (was "wrap": greedy lines left
     "Jugendschutzes" or "einem Ort." alone on the last line). */
  .cta2v6-subpage h1 {
    --cta2v6-h1: clamp(31px, 9.8vw, 43px);
    letter-spacing: -.035em;
  }

  /* Keep the customer's exact line intact: never split “Vertrauenssache”. */
  .cta2v6-about-page .cta2v6-subhero__copy h1 {
    --cta2v6-h1: clamp(29px, 9.1vw, 40px);
    white-space: normal;
  }

  .cta2v6-subhero__copy > p {
    font-size: 16px;
  }

  .cta2v6-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .cta2v6-subpage .cta2v6-button,
  .cta2v6-band-cta .cta2v6-button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .cta2v6-hero-facts {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 18px;
    padding-left: 20px;
  }

  .cta2v6-hero-facts strong {
    font-size: 70px;
  }

  .cta2v6-section {
    padding-block: 66px;
  }

  .cta2v6-section-head {
    margin-bottom: 36px;
    padding-bottom: 22px;
  }

  .cta2v6-service-card__body,
  .cta2v6-case-grid article {
    padding: 24px 20px 28px;
  }

  .cta2v6-subpage .cta2v6-service-card h2 {
    font-size: 25px;
    overflow-wrap: anywhere;
  }

  .cta2v6-number-list article {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
  }

  .cta2v6-certificate-card dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .cta2v6-content-card h2 {
    overflow-wrap: anywhere;
  }

  .cta2v6-contact-direct,
  .cta2v6-form-shell {
    padding: 24px 20px 28px;
  }

  .cta2v6-contact-direct > a[href^="tel:"] {
    font-size: 21px;
  }

  .cta2v6-contact-form__submit {
    width: 100%;
    min-width: 0;
  }
}

/* Smallest phones: long compounds in section and card headings are
   hyphenated (lang="de") instead of breaking without a hyphen. */
@media (max-width: 380px) {
  .cta2v6-subpage :where(h2, h3) {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media (max-width: 350px) {
  .cta2v6-subpage h1 {
    --cta2v6-h1: 30px;
  }

  .cta2v6-about-page .cta2v6-subhero__copy h1 {
    --cta2v6-h1: 28px;
    letter-spacing: -.045em;
  }

  /* 6.3.2 – 12 px (was 10.5 px); tighter spacing keeps
     "Sicherungsdienstleistungen" on one line at 320 px. */
  .cta2v6-kicker {
    font-size: 12px;
    letter-spacing: .08em;
  }

  .cta2v6-hero-facts {
    grid-template-columns: 62px minmax(0, 1fr);
    padding-left: 16px;
  }

  .cta2v6-hero-facts strong {
    font-size: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta2v6-subpage *,
  .cta2v6-subpage *::before,
  .cta2v6-subpage *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 6.3.0 — general "weitere Dienstleistungen" section on /leistungen/. */
.cta2v6-more-services__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 7vw, 96px);
  align-items: start;
}

.cta2v6-more-services__grid h2 {
  max-width: max(14ch, calc(var(--cta2v6-fit-now, 0) * 1em));
  margin-bottom: 0;
}

.cta2v6-more-services__grid p {
  max-width: 62ch;
  margin-bottom: 26px;
  font-size: 17px;
}

/* 6.3.0 — direct contacts on /kontakt/ (template-parts/contact-directory.php). */
.cta2v6-contact-direct__fax {
  margin: 4px 0 0;
  color: var(--cta2-muted);
  font-size: 15px;
}

.cta2v6-directory {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--cta2-card-border);
  background: var(--cta2-card-border);
  box-shadow: var(--cta2-card-shadow);
}

.cta2v6-directory__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: clamp(22px, 3vw, 34px);
  background: var(--cta2-card);
}

.cta2v6-directory__label {
  color: var(--cta2-blue-deep);
  /* 6.3.2 – 12 px (was 11 px); at .06em "Einsatzleiter & Qualitätsmanagement"
     (300 px) stays on one line in a third of the full container (318 px),
     which is why three columns start at 1228 px. */
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.cta2v6-subpage .cta2v6-directory__card h3 {
  margin: 4px 0 4px;
  font-size: clamp(21px, 2vw, 26px);
}

.cta2v6-directory__card p {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.55;
}

/* Prefixed with .cta2v6-site: its "a { color: inherit }" would otherwise
   print the links in text colour. Both link types keep a 44 px target. */
.cta2v6-site .cta2v6-directory__number {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cta2-blue-deep);
  font-family: "ContacT Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.cta2v6-directory__number:hover,
.cta2v6-directory__mail:hover {
  text-decoration: underline;
}

.cta2v6-site .cta2v6-directory__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cta2-blue-text);
  /* One line from 390 px up: at 17 px the longest address wrapped before
     the "@" in every three-column card. */
  font-size: 15px;
  font-weight: 750;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.cta2v6-directory__plain {
  color: var(--cta2-muted);
}

.cta2v6-directory__card--main {
  background:
    radial-gradient(circle at 88% 12%, rgba(111, 168, 222, .3), transparent 32%),
    linear-gradient(118deg, #173956, #214f78 62%, #28659c);
}

.cta2v6-subpage .cta2v6-directory__card--main :is(h3, p, .cta2v6-directory__label, .cta2v6-directory__number) {
  color: #fff;
}

.cta2v6-directory__card--main p {
  color: rgba(255, 255, 255, .82);
}

.cta2v6-directory__card--main a:focus-visible {
  outline-color: #fff;
}

.cta2v6-directory__card--quiet {
  background: var(--cta2-surface-2);
}

/* 6.3.1 – two columns below the full container width (6.3.2: up to
   1227 px, was 1180 px): in a third of a narrower container the roles
   ("ppa. stellv. Geschäftsführerin", "Einsatzleiter &
   Qualitätsmanagement") and the e-mail address had to wrap. */
@media (max-width: 1227px) {
  .cta2v6-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .cta2v6-more-services__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}

@media (max-width: 620px) {
  .cta2v6-directory {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Smallest phones: "ppa. stellv. Geschäftsführerin" never breaks, so the
   label gets a little more room. */
@media (max-width: 380px) {
  .cta2v6-directory__card {
    padding-inline: 18px;
  }

  .cta2v6-directory__label {
    letter-spacing: .03em;
  }
}

/* 6.4.3 — seals and membership as one picture in the certificate sections
   (Stefan's layout). White card like the former tiles, never wider than the
   image itself so the seals keep their print sharpness. */
.cta2v6-trust-image {
  margin: 30px 0 0;
  max-width: 560px;
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(24, 38, 52, .08);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(24, 38, 52, .06);
}
.cta2v6-trust-image img { display: block; width: 100%; height: auto; }
@media (max-width: 620px) {
  .cta2v6-trust-image { padding: 14px; border-radius: 14px; }
}