/* Service pages (tools/build-legal-pages.py): the homepage's hero, service tiles and contact band in a page-sized
   frame. Loaded after the homepage's own stylesheets; nothing here reaches the homepage (every rule is scoped). */
.svc-page {
  /* the tile tokens the homepage scopes to #leistungen.kd (leistungen.css), same values */
  --kd-g: clamp(24px, 5vw, 88px);
  --kd-ink: #0b1f3b;
  --kd-ink-2: #334d64;
  --kd-ink-3: #4f6479;
  --kd-line: rgba(11, 31, 59, 0.38);
  --kd-r: 14px;
  --svc-rule: rgba(11, 31, 59, 0.19); /* the rules between rows */
}
.svc-page main {
  background: #fff;
}

/* ---------- hero: one sky band of normal height; no scroll stage, nothing sticky ---------- */
body.cloud.refined .svc-hero {
  height: auto;
  background: var(--hero);
}
body.cloud.refined .svc-hero .hero {
  position: relative;
  top: auto;
  min-height: 0;
  max-height: none;
  padding-top: 40px;
  padding-bottom: 72px;
}
body.cloud.refined .svc-hero h1 {
  font-size: clamp(40px, 4.8vw, 76px);
  line-height: 1.04;
  max-width: 13em;
  text-wrap: balance;
}
@media (max-width: 850px) {
  body.cloud.refined .svc-hero .hero {
    padding-top: 28px;
    padding-bottom: 56px;
  }
  body.cloud.refined .svc-hero h1 {
    font-size: clamp(34px, 8vw, 56px);
  }
}
@media (max-width: 480px) {
  body.cloud.refined .svc-hero .hero {
    padding-bottom: 40px;
  }
  body.cloud.refined .svc-hero h1 {
    font-size: clamp(30px, 9.4vw, 40px);
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ---------- the page's logo morph (service-morph.js; plan 2026-10-07-dke-service-page-morphs F3) ----------
   One box, the same with and without JavaScript (no layout shift): the logo cloud at p = 0. The host is not .art,
   whose fixed heights the homepage sets. Hover and focus marks key on the engine's classes, never on CSS :hover:
   .is-hot (pointer hover or :focus-visible focus, cleared by a reverse), .is-done / .settled at the end; the
   transition delays sit only on the "on" state, and .no-tx (one frame as a reverse starts) stops every transition. */
.svc-art {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: auto;
  aspect-ratio: 460 / 350;
  margin-inline: auto;
  /* square corners: a rounded ring at this offset would cut into the art's own box */
  -webkit-tap-highlight-color: transparent;
  /* a picture, also while it plays: a double click selects no label text (as the homepage's .morph-toggle) */
  -webkit-user-select: none;
  user-select: none;
}
.svc-art[role="button"] {
  cursor: pointer;
}
.svc-art:focus {
  outline: none;
}
.svc-art:focus-visible {
  outline: 3px solid var(--accent, #2a7fff);
  outline-offset: 4px;
}
.svc-morph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.svc-art.no-tx * {
  transition: none !important;
}
/* Agenten M1: the release path re-traces and the approval seal closes */
.svc-art .h-trace {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.svc-art .h-ok {
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.svc-art .h-tick {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.svc-art.is-done.is-hot .h-trace {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.svc-art.is-done.is-hot .h-ok {
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s;
}
.svc-art.is-done.is-hot .h-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.7s;
}
/* Fragen: the answer is re-written and the control ring re-traced */
@media (prefers-reduced-motion: no-preference) {
  .svc-art.settled.is-hot .ans {
    animation: svc-retrace 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0.4s) both;
  }
  .svc-art.settled.is-hot .ring {
    animation: svc-retrace 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}
@keyframes svc-retrace {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-art .h-trace,
  .svc-art .h-ok,
  .svc-art .h-tick {
    transition: none !important;
  }
  .svc-art.is-done.is-hot .h-trace,
  .svc-art.is-done.is-hot .h-ok {
    opacity: 0;
  }
}
/* the #assistenten row's art: in the heading column below the h2 from 900px; between h2 and text on phones */
.svc-row-head .svc-art {
  max-width: 440px;
  margin: 28px 0 0;
}
@media (max-width: 899px) {
  .svc-row-head .svc-art {
    margin: 20px auto 4px;
  }
}
@media (max-width: 850px) {
  body.cloud.refined .svc-hero .svc-art {
    max-width: 510px;
  }
}

/* ---------- content rows: heading left, text right from 900px; stacked below; 1px rules ---------- */
.svc-body {
  padding-block: 72px 24px;
  font-feature-settings: "cv08";
}
.svc-row {
  padding-block: 36px 40px;
  border-top: 1px solid var(--svc-rule);
}
.svc-row:last-child {
  border-bottom: 1px solid var(--svc-rule);
}
.svc-row h2 {
  scroll-margin-top: 24px;
  font-size: clamp(26px, 2.5vw, 38px);
  line-height: 1.12;
  text-wrap: balance;
  overflow-wrap: break-word; /* a word wider than the column (enlarged text) breaks instead of overflowing */
  color: var(--kd-ink);
}
.svc-row-text {
  margin-top: 16px;
  max-width: 680px;
}
.svc-row-text :is(p, ul) {
  font-size: 18px;
  line-height: 1.65;
  color: var(--kd-ink-2);
}
.svc-row-text :is(p, ul) + p {
  margin-top: 16px;
}
.svc-row-text a {
  color: #00698f;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
/* who checks or decides: the closing sentence of a use-case row (plan 2026-10-12-dke-ki-im-bau-seo, D6 a) */
.svc-row-text strong {
  font-weight: 600;
  color: var(--kd-ink);
}
.svc-row-text ul {
  margin: 16px 0 0;
  padding-left: 1.2em;
}
.svc-row-text li + li {
  margin-top: 6px;
}
@media (min-width: 900px) {
  .svc-row:not(.svc-faq) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0 64px;
    align-items: start;
  }
  .svc-row:not(.svc-faq) .svc-row-text {
    margin-top: 4px;
  }
}
@media (max-width: 480px) {
  .svc-body {
    padding-block: 48px 8px;
  }
  .svc-row {
    padding-block: 28px 32px;
  }
  .svc-row-text :is(p, ul) {
    font-size: 17px;
  }
}

/* ---------- FAQ: each question a native <details>, with the tiles' open/close mark ---------- */
.svc-faq {
  padding-block: 0;
}
.svc-faq summary {
  position: relative;
  display: block;
  list-style: none;
  min-height: 44px;
  padding: 28px 48px 28px 0;
  cursor: pointer;
}
.svc-faq summary::-webkit-details-marker {
  display: none;
}
.svc-faq summary h2 {
  font-size: clamp(22px, 2vw, 30px);
  max-width: 34em;
}
/* the focus ring hugs the question, so it never covers the open answer */
.svc-faq summary:focus-visible {
  outline-offset: 0;
}
.svc-faq summary:hover h2 {
  color: var(--accent);
}
.svc-faq .kd-plus {
  top: 50%;
  right: 8px;
  margin-top: -8px;
}
.svc-faq[open] .kd-plus::after {
  transform: rotate(0deg);
}
.svc-faq .svc-row-text {
  margin-top: 0;
  padding: 0 48px 32px 0;
}

/* ---------- the homepage's four tiles as links; this page's tile marked current ---------- */
.svc-more {
  padding-block: 72px 96px;
  font-feature-settings: "cv08";
}
.svc-more > h2 {
  font-size: clamp(30px, 3.2vw, 48px);
  margin-bottom: 32px;
  text-wrap: balance;
}
.svc-tiles .kd-tile {
  display: block;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.svc-tiles .kd-gf {
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.svc-tiles .kd-tile:hover,
.svc-tiles .kd-tile:focus-visible {
  transform: translateY(-3px);
}
.svc-tiles .kd-tile:hover .kd-gf,
.svc-tiles .kd-tile:focus-visible .kd-gf {
  transform: translate(-10px, -12px);
}
.svc-tiles .kd-tile:hover::before,
.svc-tiles .kd-tile:focus-visible::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 color-mix(in oklab, var(--c2) 50%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6),
    0 1px 2px color-mix(in oklab, var(--c2) 26%, transparent),
    0 14px 24px -14px color-mix(in oklab, var(--c2) 80%, transparent);
}
.svc-tiles .kd-tile:focus-visible {
  outline: 3px solid var(--accent, #007ead);
  outline-offset: 4px;
}
.svc-tiles .kd-tile[aria-current="page"]::before {
  box-shadow:
    inset 0 0 0 1.5px color-mix(in oklab, var(--c2) 75%, transparent),
    0 10px 20px -14px color-mix(in oklab, var(--c2) 70%, transparent);
}
@media (max-width: 480px) {
  .svc-more {
    padding-block: 48px 64px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .svc-tiles .kd-tile,
  .svc-tiles .kd-gf,
  .svc-tiles .kd-tile:hover,
  .svc-tiles .kd-tile:focus-visible,
  .svc-tiles .kd-tile:hover .kd-gf,
  .svc-tiles .kd-tile:focus-visible .kd-gf {
    transform: none;
    transition: none;
  }
}

/* ---------- team quotes and the footer's team (plan 2026-10-08-dke-service-page-team-quotes, D1 to D6) ----------
   One round photo rule for all: the homepage's 320w portraits, the heads fully in frame at 4 % from the top (crop
   sheet, 8 Oct). Photo size: 56 px in rows, 64 px in the contact band and the footer, 48 px for all below 900px. */
.svc-page .svc-face {
  width: var(--face);
  height: var(--face);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 4%;
  flex-shrink: 0;
}
.svc-page .svc-quote {
  --face: 56px;
  margin: 28px 0 0;
}
.svc-page .svc-quote blockquote {
  margin: 0;
}
/* the quote's own paragraph, over .svc-row-text p and the band's .contact p (margin-top 26px, 18px, 500px);
   its text and the name take the ink of the page, white in the band */
.svc-page .svc-quote blockquote p {
  margin: 0;
  max-width: 34em;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 500;
  color: inherit;
}
.svc-page .svc-quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.svc-page .svc-quote-name,
.svc-page .svc-quote-role {
  display: block;
}
.svc-page .svc-quote-name {
  font-size: 15px;
  font-weight: 600;
}
.svc-page .svc-quote-role {
  font-size: 14px;
  color: #00729e;
}
/* the contact band: one quote in its right half, white on the band's ink */
.svc-page .svc-quote-band {
  --face: 64px;
}
.svc-page .svc-quote-band .svc-quote-role {
  color: rgba(255, 255, 255, 0.72);
}
.svc-page .svc-quote-band .svc-face {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}
/* the footer's team: its own row above credit and links, each face above the first name, linking to the team */
.svc-page .footer-team {
  --face: 64px;
  flex-basis: 100%;
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 16px 0 24px;
  list-style: none;
  border-bottom: 1px solid rgba(11, 31, 59, 0.12);
}
.svc-page .footer-team a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.svc-page .footer-team span {
  font-weight: 600;
}
.svc-page .footer-team a:hover span,
.svc-page .footer-team a:focus-visible span {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
@media (min-width: 900px) {
  .svc-page .contact-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: clamp(48px, 6vw, 96px);
    align-items: end;
  }
  .svc-page .svc-quote-band {
    margin: 0;
  }
}
@media (max-width: 899px) {
  .svc-page .svc-quote,
  .svc-page .svc-quote-band,
  .svc-page .footer-team {
    --face: 48px;
  }
  .svc-page .svc-quote {
    margin-top: 24px;
  }
  .svc-page .svc-quote blockquote p {
    font-size: 18px;
  }
  .svc-page .svc-quote-band {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  /* four equal columns; at 320px each is 68px, "Sebastian" about 65px at 13px */
  .svc-page .footer-team {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  .svc-page .footer-team span {
    font-size: 13px;
    line-height: 1.3;
    overflow-wrap: anywhere; /* enlarged text breaks inside its column instead of spilling over the next */
  }
}

/* ---------- KI im Bau as an overview (plan 2026-10-15-dke-ki-im-bau-b2, D3; from the design-lab option B) ----------
   Use-case rows (svc-case): heading, what KI prepares, who decides (bold navy), "So läuft das ab" on demand; pairs
   (svc-pair) on the rows' own 5fr/7fr grid; the steps of "So starten wir". Selectors keep the prototype's weight
   (two classes), so they override the base rows as they did there. */
/* ---------- the overview: five use-case rows, one pattern each ----------
   heading | what KI prepares | who decides (bold navy, the page's signature) | "So läuft das ab" on demand */
.svc-row.svc-case {
  padding-block: 28px 20px;
}

/* the use-case heading at the FAQ question size: a row of an overview, not a chapter */
.svc-row.svc-case h2 {
  font-size: clamp(22px, 2vw, 30px);
}

.svc-row.svc-case .svc-row-text > p + p {
  margin-top: 12px;
}

/* "So läuft das ab": a native disclosure, the FAQ's plus as its mark, a 44px target */
.svc-case .svc-how {
  margin-top: 8px;
}

.svc-case .svc-how summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: var(--kd-ink);
}

.svc-case .svc-how summary::-webkit-details-marker {
  display: none;
}

.svc-case .svc-how summary:hover {
  color: var(--accent);
}

.svc-case .svc-how summary:focus-visible {
  outline-offset: 2px;
}

.svc-case .svc-how .kd-plus {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
}

.svc-case .svc-how[open] .kd-plus::after {
  transform: rotate(0deg);
}

.svc-case .svc-how > p {
  padding-bottom: 8px;
}

/* the service names in running text stay whole ("KI-Assistenten" never breaks at its hyphen) */
.svc-row.svc-case .svc-row-text a[href^="/ki-"],
.svc-row.svc-pair .svc-row-text a[href^="/ki-"] {
  white-space: nowrap;
}

/* from 1280px the row reads across: heading, what KI prepares, who decides. Below that the two sentences stack in
   the text column (each column of prose stays at or above 280px: 293px at 1280, 326px at 1440). */
@media (min-width: 1280px) {
  .svc-row.svc-case .svc-row-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 48px;
    max-width: none;
  }

  .svc-row.svc-case .svc-row-text > p + p {
    margin-top: 0;
  }

  .svc-row.svc-case .svc-how {
    grid-column: 1 / -1;
    max-width: 680px;
  }
}

/* ---------- pairs: Für welche Betriebe | So starten wir, and the trust block Grenzen | Daten ----------
   Two halves on the rows' own 5fr/7fr grid from 900px, so every text column starts on the same line; stacked below. */
.svc-row.svc-pair > div + div {
  margin-top: 40px;
}

.svc-row.svc-pair .svc-row-text {
  margin-top: 16px;
}

@media (min-width: 900px) {
  .svc-row.svc-pair > div + div {
    margin-top: 0;
  }

  .svc-row.svc-pair .svc-row-text {
    margin-top: 16px;
  }
}

/* So starten wir: three steps between the jump list's one-pixel rules, the number in the heading ink */
.svc-pair .svc-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: b-step;
  border-top: 1px solid var(--svc-rule);
}

.svc-pair .svc-steps li {
  counter-increment: b-step;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0 12px;
  margin: 0;
  padding-block: 16px;
  border-bottom: 1px solid var(--svc-rule);
}

.svc-pair .svc-steps li::before {
  content: counter(b-step);
  grid-row: 1 / span 2;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--kd-ink);
  font-variant-numeric: tabular-nums;
}

.svc-pair .svc-steps h3 {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--kd-ink);
}

.svc-pair .svc-steps p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--kd-ink-2);
}

/* the trust block: the data list keeps the row list's type */
.svc-row.svc-pair .svc-row-text ul + p {
  margin-top: 16px;
}

/* ---------- Leitfäden: three lines, no lead sentence ---------- */
.svc-faq .svc-row-text .svc-guides {
  margin-top: 0;
}

.svc-faq .svc-guides li + li {
  margin-top: 12px;
}

@media (max-width: 480px) {
  .svc-row.svc-case {
    padding-block: 24px 16px;
  }

  .svc-pair .svc-steps p {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-case .svc-how .kd-plus::before,
  .svc-case .svc-how .kd-plus::after {
    transition: none;
  }
}

/* KI im Bau row photos (plan 2026-10-15-dke-ki-im-bau-b2, D3, D4): in the heading column under the h2, at most 440px
   wide from 900px, the place below. The CC credit lies over the photo like the Fachexperten credit (team.css): shown
   while the (c) button has opened it, on hover (hover devices) or while a credit link has focus; focus on the button
   alone only shows the button, so what is shown always follows aria-expanded. */
.svc-photo {
  margin: 20px 0 0;
}

@media (min-width: 900px) {
  .svc-photo {
    max-width: 440px;
  }
}

.svc-photo-frame {
  position: relative;
}

.svc-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; /* keep the box steady on load; 880x586 crops by 0.2% */
  object-fit: cover;
  border-radius: 4px;
  background: #eaf6ff; /* the sky tint while the photo loads */
}

.svc-photo figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--kd-ink-2);
}

.svc-credit {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 30px 10px 10px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(#0b1f3b00, #0b1f3be0 40%);
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.svc-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.svc-photo-frame.credit-open .svc-credit,
.svc-credit:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.svc-credit-toggle {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 0 2px #0b1f3b, 0 0 4px #0b1f3b99;
  cursor: pointer;
  transition: opacity 0.2s;
}

.svc-credit-toggle:focus-visible {
  outline-offset: 2px;
}

@media (hover: hover) {
  .svc-photo-frame:hover .svc-credit {
    opacity: 1;
    pointer-events: auto;
  }

  .svc-credit-toggle {
    opacity: 0;
  }

  .svc-photo-frame:hover .svc-credit-toggle,
  .svc-photo-frame.credit-open .svc-credit-toggle,
  .svc-credit-toggle:focus-visible {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-credit,
  .svc-credit-toggle {
    transition: none;
  }
}

/* ---------- KI im Bau: the use cases as tiles from 900px (plan 2026-10-15-dke-ki-im-bau-b2, D8) ----------
   Two columns, three from 1200px, the call card in the sixth slot. Each tile is a subgrid over five shared rows (photo
   with place, heading, what KI prepares, who decides, "So läuft das ab"), so these parts line up across a row of tiles
   and opening one "So läuft das ab" grows only that shared row. The call card is a photo's size and never stretches.
   /ki-beratung (W4) has four cases without photos: each heading takes the first row, the fifth stays empty, and the
   call card takes the fifth slot. Phones keep the rows; the call card is hidden there. */
.svc-case-cta {
  display: none;
}
@media (min-width: 900px) {
  .svc-cases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
    padding-top: 40px;
    border-top: 1px solid var(--svc-rule);
  }
  .svc-cases .svc-row.svc-case {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    border-top: 0;
  }
  .svc-cases .svc-row.svc-case :is(.svc-row-head, .svc-row-text) {
    display: contents;
  }
  .svc-cases .svc-case .svc-photo {
    grid-row: 1;
    max-width: none;
    margin: 0 0 20px;
  }
  /* the heading and the text follow the photo in order: row 2 on with a photo, row 1 without one (/ki-beratung, W4) */
  .svc-cases .svc-row.svc-case h2 {
    font-size: 24px;
  }
  .svc-cases .svc-row.svc-case .svc-row-text > p {
    margin-top: 12px;
    font-size: 17px;
  }
  .svc-cases .svc-row.svc-case .svc-how {
    align-self: start;
    margin: 8px 0 48px;
  }
  /* the call card: the brand accent to navy, white type and button, the DKE cloud bottom right (white on #007EAD
     4.6:1, more toward navy) */
  .svc-case-cta {
    grid-row: span 5;
    align-self: start;
    aspect-ratio: 3 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    padding: 28px 32px;
    border-radius: 4px;
    --svc-cta-gradient: linear-gradient(135deg, var(--dke-deep-cyan), var(--dke-navy));
    background: url(/assets/ki-im-bau/dke-cloud.svg?v=40458f53) no-repeat right 20px bottom 16px / 84px auto,
      var(--svc-cta-gradient);
  }
  .svc-case-cta h2 {
    font-size: 24px;
    line-height: 1.2;
    color: #fff;
  }
  .svc-case-cta p {
    font-size: 17px;
    line-height: 1.6;
    color: #fff;
  }
  .svc-case-cta .button {
    background: #fff;
    color: var(--dke-navy);
    border-color: #fff;
  }
  .svc-case-cta .button:hover {
    background: var(--dke-sky);
  }
  .svc-case-cta .button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }
  /* the card's button without the row button's arrow (the card the owner approved), so the cloud keeps its room */
  .svc-case-cta .button svg {
    display: none;
  }
}
@media (min-width: 1200px) {
  .svc-cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* three narrow tiles (333-363px at 1200-1319px): a smaller cloud, clear of the button */
@media (min-width: 1200px) and (max-width: 1319px) {
  .svc-case-cta {
    background-size: 48px auto, auto;
  }
}
/* BAU-05: up to 1339px the card's text needs more height than a 3:2 photo; smaller type keeps it a photo's size */
@media (min-width: 1200px) and (max-width: 1339px) {
  .svc-case-cta {
    padding: 20px 24px;
    gap: 12px;
  }
  .svc-case-cta h2 {
    font-size: 21px;
  }
  .svc-case-cta p {
    font-size: 16px;
    line-height: 1.5;
  }
}
/* W3.3: where the wider "Erstgespräch vereinbaren" button would leave the cloud less than 14px (12px plus 2px for font
   metrics; measured 900-1700px at 1px steps, without a scrollbar and with a 17px classic one, which narrows the layout
   but not the media width), the card keeps only its gradient */
@media (900px <= width < 924px), (1200px <= width < 1252px), (1320px <= width < 1399px) {
  .svc-case-cta {
    background: var(--svc-cta-gradient);
  }
}

/* D9: option C · Porträt only in pair halves from 900px; below, keep the existing row quote and 48px circle.
   The team's 320x400 WebPs are already 4:5; retain their shared focal point without a new crop or wrapper. */
@media (min-width: 900px) {
  .svc-row.svc-pair .svc-quote {
    margin: 28px 0 0;
    padding: 20px;
    border-radius: 4px;
    background: var(--dke-sky);
    color: var(--kd-ink);
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    /* BAU-01: the portrait spans both rows; the second row takes its extra height, so the name follows the quote */
    grid-template-rows: auto 1fr;
    gap: 16px;
    align-items: start;
  }
  .svc-row.svc-pair .svc-quote blockquote {
    grid-column: 2;
    grid-row: 1;
  }
  .svc-row.svc-pair .svc-quote blockquote p {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
  }
  .svc-row.svc-pair .svc-quote figcaption {
    display: contents;
  }
  .svc-row.svc-pair .svc-quote .svc-face {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 160px;
    height: 200px;
    border-radius: 4px;
    object-fit: cover;
    object-position: 50% 4%;
  }
  .svc-row.svc-pair .svc-quote figcaption > span {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    overflow-wrap: anywhere;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .svc-row.svc-pair .svc-quote {
    padding: 12px;
    gap: 12px;
  }
  .svc-row.svc-pair .svc-quote blockquote p {
    font-size: 18px;
  }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .svc-row.svc-pair .svc-quote {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .svc-row.svc-pair .svc-quote .svc-face {
    width: 120px;
    height: 150px;
  }
  .svc-row.svc-pair .svc-quote figcaption > span {
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}