/* Generated by tools/bundle-css.py: edit the sources, then re-run it. */
/* leistungen.css */
/* Leistungen: the service tiles (also copied onto the four service pages) and, at the end, the homepage section's
   cards and rows. The earlier cloud morph is kept in design-lab/leistungen-cloud-morph/. */
#leistungen.kd {
  --kd-ink: #0b1f3b;
  --kd-ink-2: #334d64;
  --kd-ink-3: #4f6479;
  --kd-line: rgba(11, 31, 59, 0.38);
  --kd-r: 14px;
  padding: 0;
  background: #fff;
  /* Inter's serifed capital I, so "KI" never reads as "Kl" */
  font-feature-settings: "cv08";
}
/* service tints (kept here rather than in style attributes, for a strict style-src policy) */
.kd-svc:nth-child(1) {
  --c0: #f0f6fa;
  --c1: #e5eff4;
  --c2: #91b4c8;
}
.kd-svc:nth-child(2) {
  --c0: #eff6f2;
  --c1: #e3eee9;
  --c2: #8dafa4;
}
.kd-svc:nth-child(3) {
  --c0: #f3f0f8;
  --c1: #ebe8f2;
  --c2: #aba3c4;
}
.kd-svc:nth-child(4) {
  --c0: #faf2ea;
  --c1: #f4e9de;
  --c2: #c9ac96;
}
.kd-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.kd-inner {
  padding-block: 96px;
}
.kd-head h2 {
  text-wrap: balance;
}
.kd-nw {
  white-space: nowrap;
}

/* ---------- the outline logo: four overlapping lobes, one filled ---------- */
.kd-glyph {
  display: block;
  width: 48px;
  height: auto;
  overflow: visible;
}
.kd-gl {
  fill: none;
  stroke: var(--kd-line);
  stroke-width: 1.25px;
}
.kd-gf {
  stroke: none;
}

/* ---------- tiles: one grid ---------- */
.kd-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 16px;
}
.kd-svc {
  display: contents;
}
.kd-tile {
  position: relative;
  min-height: 172px;
  padding: 24px 22px 22px;
  border-radius: var(--kd-r);
  isolation: isolate;
}
/* frosted glass, drawn in CSS so it is crisp at any pixel density */
.kd-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, color-mix(in oklab, var(--c0) 45%, #fff) 0%, color-mix(in oklab, var(--c1) 80%, var(--c0)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 color-mix(in oklab, var(--c2) 38%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 1px 2px color-mix(in oklab, var(--c2) 22%, transparent),
    0 10px 20px -14px color-mix(in oklab, var(--c2) 70%, transparent);
  transition: box-shadow 0.3s ease;
}
.kd-svc:nth-child(1) .kd-tile {
  grid-area: 1 / 1;
}
.kd-svc:nth-child(2) .kd-tile {
  grid-area: 1 / 2;
}
.kd-svc:nth-child(3) .kd-tile {
  grid-area: 1 / 3;
}
.kd-svc:nth-child(4) .kd-tile {
  grid-area: 1 / 4;
}
.kd-tile .kd-glyph {
  margin-bottom: 16px;
}
.kd-tile h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--kd-ink);
  padding-right: 22px;
}
.kd-tile h3 button {
  all: unset;
  cursor: pointer;
  font: inherit;
  font-feature-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.kd-tile h3 button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.kd-tile:has(button:focus-visible) {
  outline: 3px solid var(--accent, #007ead);
  outline-offset: 4px;
}
@supports not selector(:has(*)) {
  .kd-tile h3 button:focus-visible {
    outline: 3px solid var(--accent, #007ead);
    outline-offset: 4px;
  }
}
.kd-sub {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kd-ink-3);
  max-width: 17em;
}
.kd-plus {
  position: absolute;
  top: 22px;
  right: 18px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.kd-plus::before,
.kd-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  border-radius: 1px;
  background: var(--kd-ink);
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.kd-plus::after {
  transform: rotate(90deg);
}
.kd-svc.is-open .kd-plus::after {
  transform: rotate(0deg);
}

/* homepage without JavaScript: every detail stays open, there is nothing to toggle */
.kd:not(.kd-js) .kd-plus {
  display: none;
}
/* ---------- tablets and phones: the tiles 2 x 2 ---------- */
@media (max-width: 1023px) {
  .kd-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .kd-tile {
    margin-bottom: 14px;
  }
  .kd-svc:nth-child(3) .kd-tile {
    grid-area: 3 / 1;
  }
  .kd-svc:nth-child(4) .kd-tile {
    grid-area: 3 / 2;
  }
  .kd-tile {
    min-height: 150px;
  }
  .kd-sub {
    max-width: 24em;
  }
}
@media (max-width: 850px) {
  .kd-inner {
    padding-block: 64px;
  }
}
@media (max-width: 760px) {
  .kd-tiles {
    column-gap: 10px;
  }
  .kd-tile {
    min-height: 124px;
    margin-bottom: 10px;
    padding: 16px 14px 14px;
  }
  .kd-tile .kd-glyph {
    width: 42px;
    margin-bottom: 14px;
  }
  .kd-tile h3 {
    font-size: 18px;
    line-height: 1.2;
    padding-right: 14px;
  }
  .kd-gl {
    stroke: rgba(11, 31, 59, 0.45);
  }
  .kd-sub {
    /* visually hidden on the compact phone tiles, still read by screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .kd-plus {
    top: 16px;
    right: 12px;
    width: 14px;
    height: 14px;
  }
  .kd-plus::before,
  .kd-plus::after {
    width: 12px;
    margin-left: -6px;
  }
}
@media (max-width: 380px) {
  .kd-tile {
    padding-inline: 12px;
  }
  .kd-tile h3 {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kd-plus::before,
  .kd-plus::after,
  .kd-tile::before {
    transition: none;
  }
}

/* ==================== the homepage section: rows up to 760px, cards from 761px ====================
   One markup, one script; each service is .kd-svc > .kd-tile (glyph, h3 button, sub, page link, "+", footer)
   + .kd-detail.
   Every rule is scoped to #leistungen so it wins over the tile rules above, which still style .kd-tile on the
   service pages. From 761px a detail floats as a panel under its card and the cards never change size; up to 760px
   it opens inline under its row. The page itself never moves. Reduced motion: styles.css sets every transition to 0. */
#leistungen {
  --kd-link: #00698f;
  --kd-rule: rgba(11, 31, 59, 0.16);
  /* the site's UI easing (service-pages.css, the logo morph's "bezier") */
  --kd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- both layouts: no frosted panel ---------- */
#leistungen .kd-tile::before {
  content: none;
}
#leistungen .kd-glyph {
  margin: 0;
}
/* the detail holds its paragraph and the link directly */
#leistungen .kd-detail p {
  line-height: 1.6;
  color: var(--kd-ink-2);
}
#leistungen .kd-more a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* the detail links and the section intro's link to /ki-im-bau (plan 2026-10-12-dke-ki-im-bau-seo, D4) */
#leistungen .kd-more a,
#leistungen .kd-head p a {
  color: var(--kd-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
#leistungen .kd-more a:focus-visible,
#leistungen .kd-head p a:focus-visible {
  outline: 3px solid var(--accent, #007ead);
  outline-offset: 2px;
  border-radius: 2px;
}
/* a closed detail: plain hidden is the browser's display: none; hidden="until-found" stays findable with the
   browser's search but keeps its box, so it is taken out of the layout here */
#leistungen .kd-detail[hidden="until-found"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* =================== 761px and up: option 2, Klare Karten =================== */
@media (min-width: 761px) {
  #leistungen {
    --kd-pad: 24px;
  }

  /* grid: four columns; rows shared through subgrid so titles, subs, page links and footers line up */
  #leistungen .kd-tiles {
    grid-template-rows: repeat(5, auto);
    column-gap: 20px;
    row-gap: 0;
    align-items: start;
  }

  /* the card */
  #leistungen .kd-svc {
    --kd-edge: color-mix(in oklab, var(--c2) 42%, #fff);
    position: relative;
    display: grid;
    grid-row: 1 / span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
    background: #fff;
    border: 1px solid var(--kd-edge);
    border-top-color: var(--c2);
    border-radius: 12px;
    overflow: clip;
  }
  /* the tile wrapper (kept for the service-page build) lets its children sit in the card's rows */
  #leistungen .kd-svc .kd-tile {
    display: contents;
  }
  /* without JavaScript every card's drawer takes the footer's row; with it the cards always keep five rows, so
     opening a service never resizes a card */
  #leistungen:not(.kd-js) .kd-svc {
    grid-row: 1 / span 5;
  }
  /* the accent: a 4px bar in the service colour, inside the rounded edge */
  #leistungen .kd-svc::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--c2);
    pointer-events: none;
  }
  /* a card with its panel on screen stops clipping (the panel lies outside its box), so it paints the same bar as
     its background */
  #leistungen.kd-js .kd-svc.is-float {
    overflow: visible;
    background:
      linear-gradient(var(--c2), var(--c2)) top / 100% 4px no-repeat,
      #fff;
  }
  #leistungen.kd-js .kd-svc.is-float::before {
    content: none;
  }
  #leistungen .kd-tile > *,
  #leistungen .kd-detail {
    padding-inline: var(--kd-pad);
  }

  #leistungen .kd-glyph {
    width: 76px;
    padding-top: 32px;
    box-sizing: content-box;
  }
  #leistungen .kd-gl {
    stroke: rgba(11, 31, 59, 0.42);
  }
  #leistungen .kd-svc h3 {
    padding-top: 22px;
    padding-right: var(--kd-pad);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.022em;
  }
  /* the whole panel is the button's target; the drawer sits above it so its text and link stay their own */
  #leistungen .kd-svc h3 button::after {
    z-index: 0;
  }
  #leistungen .kd-sub {
    margin: 0;
    padding-top: 8px;
    padding-bottom: 24px;
    max-width: none;
    text-wrap: pretty;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--kd-ink-3);
  }
  #leistungen .kd-plus {
    display: none;
  }

  /* footer affordance */
  #leistungen .kd-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    border-top: 1px solid var(--kd-edge);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--kd-link);
    pointer-events: none;
  }
  #leistungen .kd-cta-less,
  #leistungen .kd-svc.is-open .kd-cta-more {
    display: none;
  }
  #leistungen .kd-svc.is-open .kd-cta-less {
    display: inline;
  }
  #leistungen .kd-cta-i {
    position: relative;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--kd-edge);
    border-radius: 999px;
    background: #fff;
  }
  /* chevron: down when closed, up when open */
  #leistungen .kd-cta-i::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -6px 0 0 -4.5px;
    border-right: 1.75px solid var(--kd-ink);
    border-bottom: 1.75px solid var(--kd-ink);
    transform: rotate(45deg);
  }
  #leistungen .kd-svc.is-open .kd-cta-i::before {
    margin-top: -2px;
    transform: rotate(-135deg);
  }
  /* it turns with the panel, as the tiles' "+" does */
  #leistungen.kd-js .kd-cta-i::before {
    transition:
      transform 0.35s cubic-bezier(0.3, 0.7, 0.2, 1),
      margin-top 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  /* without JavaScript every drawer is open and there is nothing to toggle */
  #leistungen:not(.kd-js) .kd-cta {
    display: none;
  }

  /* hover and focus: instant */
  #leistungen.kd-js .kd-svc:has(h3 button:hover) {
    border-color: color-mix(in oklab, var(--c2) 80%, #fff);
    border-top-color: var(--c2);
  }
  #leistungen.kd-js .kd-svc:has(h3 button:hover) .kd-cta-more,
  #leistungen.kd-js .kd-svc:has(h3 button:hover) .kd-cta-less {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  #leistungen.kd-js .kd-svc:has(h3 button:hover) .kd-cta-i {
    background: var(--c0);
    border-color: var(--c2);
  }
  #leistungen .kd-svc.is-open {
    border-color: var(--c2);
  }
  #leistungen .kd-svc:has(h3 button:focus-visible) {
    outline: 3px solid var(--accent, #007ead);
    outline-offset: 3px;
  }

  /* without JavaScript: the detail is a drawer in the card, on the service tint */
  #leistungen:not(.kd-js) .kd-detail {
    position: relative;
    z-index: 1;
    padding-top: 20px;
    padding-bottom: 8px;
    background: var(--c0);
    border-top: 1px solid var(--kd-edge);
  }

  /* with JavaScript: a panel on screen (opening, open or closing) lifts its card over the neighbours and #team */
  #leistungen.kd-js .kd-svc.is-float {
    z-index: 5;
  }
  #leistungen.kd-js .kd-svc.is-open {
    z-index: 6;
  }
  /* the panel: white, the card's edge, bar, radius and shadow, 8px under the card or above it; leistungen.js places it
     (--kd-px, --kd-pt, --kd-pw, --kd-ph: px against the card's padding box) */
  #leistungen.kd-js .kd-detail:not([hidden]) {
    position: absolute;
    z-index: 2;
    left: var(--kd-px, -1px);
    top: var(--kd-pt, calc(100% + 9px));
    width: var(--kd-pw, calc(100% + 2px));
    max-height: var(--kd-ph, none);
    overflow: auto;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 8px;
    border: 1px solid var(--kd-edge);
    border-top-color: var(--c2);
    border-radius: 12px;
    background:
      linear-gradient(var(--c2), var(--c2)) top / 100% 4px no-repeat,
      #fff;
    box-shadow:
      0 1px 2px color-mix(in oklab, var(--c2) 22%, transparent),
      0 10px 20px -14px color-mix(in oklab, var(--c2) 70%, transparent);
    /* closed: faded out, 8px short of its place, the far half clipped (the shadow stays inside the clip) */
    opacity: 0;
    transform: translateY(-8px);
    clip-path: inset(-24px -24px 45% -24px);
    pointer-events: none;
    /* closing: a fade; place and clip reset only once it is invisible */
    transition:
      opacity 0.2s var(--kd-ease),
      transform 0s linear 0.2s,
      clip-path 0s linear 0.2s;
  }
  /* above the card: it slides up into place and reveals from the card's side */
  #leistungen.kd-js .kd-detail.is-up:not([hidden]) {
    transform: translateY(8px);
    clip-path: inset(45% -24px -24px -24px);
  }
  #leistungen.kd-js .kd-svc.is-open .kd-detail:not([hidden]) {
    opacity: 1;
    transform: none;
    clip-path: inset(-24px);
    pointer-events: auto;
    transition:
      opacity 0.2s var(--kd-ease),
      transform 0.35s var(--kd-ease),
      clip-path 0.35s var(--kd-ease);
  }
  /* close: the footer's 32px circle in a 44px target, floated so the text wraps beside it; the circle sits 12px
     from the panel's top and right edges and from the text */
  #leistungen.kd-js .kd-x {
    position: relative;
    float: right;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -14px -18px 0 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--kd-ink);
    cursor: pointer;
  }
  #leistungen.kd-js .kd-x::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--kd-edge);
    border-radius: 999px;
    background: #fff;
  }
  #leistungen.kd-js .kd-x svg {
    position: relative;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75px;
    stroke-linecap: round;
  }
  #leistungen.kd-js .kd-x:hover::before {
    border-color: var(--c2);
    background: var(--c0);
  }
  #leistungen.kd-js .kd-x:focus-visible {
    outline: 3px solid var(--accent, #007ead);
    outline-offset: -3px;
  }

  #leistungen .kd-detail p {
    font-size: 15.5px;
  }
  #leistungen .kd-detail p.kd-more {
    margin-top: 6px;
  }
  #leistungen .kd-more a {
    padding-right: 1.4em;
    font-weight: 600;
  }
  /* the arrow, outside the underline, drawn in CSS (the Inter subset has no U+2192): a shaft and a chevron head */
  #leistungen .kd-more a::before,
  #leistungen .kd-more a::after {
    content: "";
    position: absolute;
    top: 50%;
  }
  #leistungen .kd-more a::before {
    right: 1px;
    width: 0.8em;
    height: 1.75px;
    margin-top: -0.875px;
    background: currentColor;
  }
  #leistungen .kd-more a::after {
    right: 2px;
    width: 0.4em;
    height: 0.4em;
    margin-top: -0.2em;
    box-sizing: border-box;
    border-top: 1.75px solid currentColor;
    border-right: 1.75px solid currentColor;
    transform: rotate(45deg);
  }
}

@media (min-width: 761px) and (max-width: 1439px) {
  #leistungen .kd-tiles {
    column-gap: 16px;
  }
  #leistungen .kd-svc h3 {
    font-size: 21px;
  }
}

/* tablet and small desktop: a 2 x 2 grid, a 20px spacer row between the pairs */
@media (min-width: 761px) and (max-width: 1199px) {
  #leistungen .kd-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto) 20px repeat(5, auto);
  }
  #leistungen .kd-svc:nth-child(n + 3) {
    grid-row: 7 / span 5;
  }
  #leistungen:not(.kd-js) .kd-svc:nth-child(n + 3) {
    grid-row: 7 / span 5;
  }
  #leistungen .kd-glyph {
    width: 68px;
    padding-top: 28px;
  }
}

/* subgrid missing (older browsers): each panel lays itself out, footers pushed to the bottom */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    #leistungen .kd-svc {
      display: flex;
      flex-direction: column;
      grid-row: auto !important;
    }
    #leistungen .kd-tiles {
      grid-template-rows: none;
      row-gap: 16px;
    }
    #leistungen .kd-cta {
      margin-top: auto;
    }
  }
}

/* the panel's close control (added by leistungen.js) belongs to the cards only */
#leistungen .kd-x {
  display: none;
}

/* =================== 760px and below: option 1, Leistungszeilen =================== */
@media (max-width: 760px) {
  #leistungen {
    --kd-cols: 40px minmax(0, 1fr) 44px;
    --kd-gap: 16px;
  }

  /* the list: rows between one-pixel rules */
  #leistungen .kd-tiles {
    display: block;
    margin-top: 8px;
    border-bottom: 1px solid var(--kd-rule);
  }
  #leistungen .kd-svc {
    display: grid;
    grid-template-columns: var(--kd-cols);
    column-gap: var(--kd-gap);
    border-top: 1px solid var(--kd-rule);
  }
  /* the open service's rule turns navy: one quiet marker, still one pixel */
  #leistungen .kd-svc.is-open {
    border-top-color: var(--kd-ink);
  }

  /* a row: glyph | title | "+", the sub under the title */
  #leistungen .kd-svc .kd-tile {
    grid-area: 1 / 1 / 2 / -1;
    display: grid;
    grid-template-columns: var(--kd-cols);
    grid-template-rows: auto auto;
    column-gap: var(--kd-gap);
    row-gap: 2px;
    align-items: center;
    min-height: 0;
    /* the row box reaches 8px past the text on both sides, so the focus ring sits inside it */
    margin: 0 -8px;
    padding: 20px 8px 24px;
    border-radius: 4px;
  }
  #leistungen .kd-glyph {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: 40px;
  }
  #leistungen .kd-tile h3 {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
    font-size: clamp(22px, 1.4vw + 14px, 36px);
    line-height: 1.1;
  }
  /* the whole row is the target (the button's ::after covers the row and takes its radius) */
  #leistungen .kd-tile h3 button {
    border-radius: 4px;
  }
  #leistungen .kd-sub {
    /* the 760px tile rule above hides the sub (for the service pages); here it stays visible under the title */
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    grid-column: 2 / -1;
    grid-row: 2;
    max-width: 30em;
  }
  #leistungen .kd-cta {
    display: none;
  }

  /* the round "+": a minus when open */
  #leistungen .kd-plus {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(11, 31, 59, 0.32);
    border-radius: 999px;
    background: #fff;
  }
  #leistungen .kd-plus::before,
  #leistungen .kd-plus::after {
    width: 14px;
    margin: -0.75px 0 0 -7px;
  }
  /* open: the circle takes the service's own tint */
  #leistungen .kd-svc.is-open .kd-plus {
    border-color: color-mix(in oklab, var(--c2) 80%, var(--kd-ink));
    background: var(--c1);
  }
  @media (hover: hover) {
    #leistungen.kd-js .kd-tile:hover .kd-plus {
      border-color: var(--kd-ink);
    }
    #leistungen.kd-js .kd-tile:hover h3 {
      color: var(--kd-link);
    }
  }
  /* keyboard focus: the accent ring around the whole row */
  #leistungen .kd-tile:has(button:focus-visible) {
    outline-offset: -3px;
  }

  /* the detail: inline under the row, from the title column to the edge */
  #leistungen .kd-detail {
    grid-column: 2 / -1;
    grid-row: 2;
    padding: 0 0 24px;
  }
  #leistungen .kd-detail p {
    max-width: 36em;
    font-size: 15px;
  }
  #leistungen .kd-detail p.kd-more {
    margin-top: 8px;
  }
  #leistungen .kd-more a {
    font-weight: 500;
    text-underline-offset: 0.18em;
  }

  /* with JavaScript the detail grows open (its row 0fr to 1fr) and fades in; the "+" turns with the tiles' own timing */
  #leistungen.kd-js .kd-svc {
    grid-template-rows: auto 0fr;
    transition: grid-template-rows 0.2s var(--kd-ease);
  }
  #leistungen.kd-js .kd-svc.is-open {
    grid-template-rows: auto 1fr;
    transition-duration: 0.35s;
  }
  /* the detail clips while it grows; 6px either side so the link's focus ring is not cut */
  #leistungen.kd-js .kd-detail:not([hidden]) {
    min-height: 0;
    overflow: hidden;
    margin-inline: -6px;
    padding: 0 6px;
    opacity: 0;
    transition: opacity 0.2s var(--kd-ease);
  }
  #leistungen.kd-js .kd-svc.is-open .kd-detail:not([hidden]) {
    opacity: 1;
    transition-duration: 0.35s;
  }
  #leistungen.kd-js .kd-detail p.kd-more {
    padding-bottom: 24px;
  }
}
@media (max-width: 380px) {
  #leistungen {
    --kd-cols: 32px minmax(0, 1fr) 44px;
    --kd-gap: 12px;
  }
  #leistungen .kd-glyph {
    width: 32px;
  }
  #leistungen .kd-tile h3 {
    font-size: 20px;
  }
}

/* ==================== both layouts: each tile's link to its service page ====================
   Plan 2026-10-13-dke-site-quick-wins, D1. Under the sub, in the hero's .text-link look; above the button's
   whole-card target, after it in tab order. Without JavaScript it shows as well. */
#leistungen .kd-page {
  position: relative;
  z-index: 1;
  justify-self: start;
  align-self: start;
}
#leistungen .kd-page:focus-visible {
  outline: 3px solid var(--accent, #007ead);
  outline-offset: 2px;
  border-radius: 2px;
}
@media (min-width: 761px) {
  /* its own row between the sub and the footer; the underline as wide as the text */
  #leistungen .kd-tile > .kd-page {
    margin: -12px var(--kd-pad) 16px;
    padding-inline: 0;
  }
}
@media (max-width: 760px) {
  #leistungen .kd-page {
    grid-column: 2 / -1;
    grid-row: 3;
    margin-top: 2px;
  }
}

/* ==================== the booking line after the tiles ====================
   Plan 2026-10-31-dke-site-improvements, W3.4 a: one sentence and the site's dialog button (arrow, natural width,
   left-aligned), the homepage's only booking control between the hero and the contact band. */
#leistungen .kd-cta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  margin-top: 64px;
}
#leistungen .kd-cta-line p {
  max-width: 520px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--kd-ink);
}
@media (max-width: 760px) {
  #leistungen .kd-cta-line {
    margin-top: 48px;
  }
}

/* ==================== with JavaScript, before leistungen.js has run ====================
   Plan 2026-10-13-dke-site-quick-wins, D3. The section already has the closed layout the script gives it, so nothing
   below moves when it closes the details (a reload while scrolled shifted #team). Without JavaScript (scripting: none),
   and in a browser that does not know the feature, this block does not apply and the :not(.kd-js) rules above keep
   every detail open. */
@media (scripting: enabled) {
  #leistungen:not(.kd-js) .kd-detail {
    display: none;
  }
  @media (min-width: 761px) {
    #leistungen:not(.kd-js) .kd-cta {
      display: flex;
    }
  }
  @media (max-width: 760px) {
    #leistungen:not(.kd-js) .kd-plus {
      display: block;
    }
  }
}

/* team.css */
/* Team: people area inside #team (Wer wir sind) */
.team .people{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.team .people>h3,.team .experts-head>h3{font-size:26px;letter-spacing:-.02em;padding-top:2px}
/* two by two when the row is wide enough, then one column (four across leaves the bios too narrow and uneven) */
.team .people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}
.team .person{margin:0}
.team .person picture{display:block}
.team .person img{display:block;width:100%;max-width:160px;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:var(--dke-sky,#EAF6FF)}
.team .person-text{margin-top:16px}
.team .person h4{margin:0;font-size:20px;line-height:1.15;letter-spacing:-.02em;font-weight:650;font-feature-settings:"cv08"}
.team .person-role{margin-top:6px;font-size:15px;color:#00729E}
.team .person-bio{margin-top:14px;font-size:15px;line-height:1.6;max-width:440px}
.team .person-focus{list-style:none;margin:16px 0 0;padding:0;font-size:13px;line-height:1.6;color:#56708F;display:flex;flex-wrap:wrap;row-gap:2px}
.team .person-focus li{white-space:nowrap}
.team .person-focus li:not(:last-child):after{content:"\00B7"/"";margin:0 .55em;color:#0b1f3b59}
/* a single person: photo beside text when the column is wide enough */
.team .people-grid{container-type:inline-size}
@container (min-width:520px){.team .person:only-child:not(.expert){grid-column:1/-1;display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:start}
.team .person:only-child:not(.expert) .person-text{margin-top:0;padding-top:2px}}
@media(max-width:850px){.team .people{gap:28px}}
@media(max-width:960px){.team .people-grid{grid-template-columns:1fr;gap:28px}}
/* photo beside text on tablets (one column, so stacked cards do not leave the right half empty) and from 1200px (two by two);
   between 961 and 1199px the two-by-two cards keep the photo above the text so the bio line stays readable */
@media(min-width:561px) and (max-width:960px),(min-width:1200px){.team .person{display:grid;grid-template-columns:160px minmax(0,1fr);gap:28px;align-items:start}
.team .person-text{margin-top:0;padding-top:2px}}
@media(max-width:560px){.team .person img{max-width:144px}}
@media(max-width:420px){.team .person-focus{column-gap:14px}.team .person-focus li:not(:last-child):after{content:none}}

/* Fachexperten after the team: the team card, one article.person.expert per expert (docs/fachexperten.md) */
.team .expert-function{margin-top:6px;font-size:14px;line-height:1.5;max-width:440px}
.team .expert-function a,.team .expert-credit a{text-decoration:underline;text-underline-offset:3px}
.team .expert-credit a{white-space:nowrap}
.team .expert-credit a{color:inherit}
/* the photo credit sits over the photo: shown on hover (hover devices) or keyboard focus; the (c) button toggles it and stays
   visible on touch screens (a tap leaves :hover and :focus stuck there, so neither opens the overlay) */
.team .expert-photo{position:relative;max-width:160px}
@media(max-width:560px){.team .expert-photo{max-width:144px}}
.team .expert-credit{position:absolute;left:0;right:0;bottom:0;margin:0;padding:30px 10px 10px;border-radius:0 0 12px 12px;background:linear-gradient(#0b1f3b00,#0b1f3be0 40%);color:#fff;font-size:11.5px;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .2s}
.team .expert-photo.credit-open .expert-credit,.team .expert-photo:has(:focus-visible) .expert-credit{opacity:1;pointer-events:auto}
.team .expert-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;transition:opacity .2s}
.team .expert-credit-toggle:focus-visible{outline-offset:2px}
@media(hover:hover){.team .expert-photo:hover .expert-credit{opacity:1;pointer-events:auto}.team .expert-credit-toggle{opacity:0}.team .expert-photo:hover .expert-credit-toggle,.team .expert-photo:has(:focus-visible) .expert-credit-toggle{opacity:1}}
@media(prefers-reduced-motion:reduce){.team .expert-credit,.team .expert-credit-toggle{transition:none}}

/* "Mitglied bei" after the team (plan 2026-11-02-dke-site-memberships, D2): a hairline, then a heading like Fachexperten
   and the member logos in their own colours, left-aligned in a row that wraps on phones; logo and caption are one link.
   The logos keep their aspect when a narrow screen shrinks them. */
.members{padding-bottom:96px}
.members:before{content:"";display:block;margin-bottom:48px;border-top:1px solid #0b1f3b1f}
.members h2{font-family:inherit;font-size:26px;font-weight:650;letter-spacing:-.02em;line-height:normal}
.members-list{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px 64px;margin:36px 0 0;padding:0;list-style:none}
.members-list a{display:flex;flex-direction:column;align-items:flex-start;gap:8px;color:inherit;text-decoration:none}
.members-list img{display:block;max-width:100%;height:auto;object-fit:contain}
.members-caption{font-size:14px;line-height:1.4;color:#56708F}
.members-list a:hover .members-caption,.members-list a:focus-visible .members-caption{text-decoration:underline;text-underline-offset:.18em}
@media(max-width:850px){.members{padding-bottom:64px}.members:before{margin-bottom:40px}.members-list{margin-top:28px}}

/* Wer wir sind: three steps, the button and the LinkedIn link under the intro (owner, 2 Nov 2026). Phones and tablets
   show a hairline list; from 1200 px the list sits on one floating sky tile, shaped like the hero's workflow tiles */
.team-steps{list-style:none;margin:36px 0 0;padding:0;max-width:540px;border-bottom:1px solid #132b3a30}
.team-steps li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 16px;padding:20px 0;border-top:1px solid #132b3a30}
.team-steps .n{grid-row:1/span 2;padding-top:2px;font-size:15px;line-height:1.35;font-weight:500;color:#41597A;font-variant-numeric:tabular-nums}
.team-steps h3{margin:0;font-size:18px;line-height:1.35;font-weight:650;letter-spacing:-.01em;color:#0B1F3B}
.team-steps p{margin-top:4px;font-size:16px;line-height:1.6;color:#41597A}
.team-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.team-cta .button{margin-top:0}
.team-cta a{font-size:15px;color:#0B1F3B;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;overflow-wrap:anywhere}
@media(max-width:850px){.team-partners{margin-top:16px;padding-top:32px;border-top:1px solid #132b3a30}}
@media(max-width:560px){.team-steps li{padding:16px 0}}
/* Two columns below 1200 px: a tighter list, so the left column runs less far past the cards */
@media(min-width:851px) and (max-width:1199px){.team-steps li{padding:10px 0}.team-steps p{margin-top:0;line-height:1.5}}
/* From 1200 px both columns end on one line (the button level with the last partner hairline) and the list sits on
   the sky tile */
@media(min-width:1200px){
.team-lead,.team-partners{align-self:stretch;display:flex;flex-direction:column}
.team-partners{justify-content:space-between}
.team-cta{margin-top:auto;padding-top:28px}
.team-steps{position:relative;isolation:isolate;max-width:none;margin-top:32px;padding:10px 32px;border:0;border-radius:32px;background:linear-gradient(180deg,#ffffff6b 0,#fff0 55%),linear-gradient(135deg,#F6FCFF 0,#E4F5FF 48%,#D3ECFD 100%);box-shadow:0 1px 2px #0B3A6B0f,0 22px 34px -26px #0B3A6B40}
.team-steps::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(180deg,#ffffffb3 0,#fff0 40%,#7DD3FC4d 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.team-steps::after{content:"";position:absolute;z-index:-1;left:8%;right:8%;bottom:-18px;height:18px;border-radius:50%;background:radial-gradient(closest-side,#0B3A6B26,#0B3A6B00)}
.team-steps li{grid-template-columns:32px 10em minmax(0,1fr);gap:0 20px;align-items:center;padding:11px 0;border-top:1px solid #0B1F3B12;box-shadow:inset 0 1px 0 #ffffffb3}
.team-steps li:first-child{border-top:0;box-shadow:none}
.team-steps .n{grid-row:auto;padding:0;font-family:Outfit,Inter,sans-serif;font-size:30px;font-weight:300;line-height:1;letter-spacing:-.02em;color:#007EAD}
.team-steps h3,.team-steps p{line-height:26px}
.team-steps p{margin:0}
.team-partners .partner{padding:44px 0}
.team-partners .partner:first-child{padding-top:0}
.refined .team .partner-heading .partner-logo{flex-basis:200px;height:88px}
.refined .team .partner-heading .partner-logo img{max-width:200px;max-height:88px}
.refined .team .partner-heading .partner-logo img[src^="assets/aberger.svg"]{width:106px}}