/* ============================================================================
   assets/css/blog.css - the blog (blog.php, blog-detail.php, components/blog-card.php),
   2026-10-09, owner review round 1. Loaded only by the two blog pages ($pageCss in
   layouts/header.php), after site.min.css, so it builds on the site's own parts:
   buttons = cta.css B1 (.fill-btn / .outline-btn), labels = .menu-tag / .white-tag /
   .sub-round, FAQ = components/faqs.php (exactly as on the service pages), meta icons = the
   icon system P1 (.icon-tile from style.css). Card hover (owner 2026-10-12): the picture zooms
   a little inside its frame and the card tints - no lift, no shadow, the text never turns blue.
   Colours: brand tokens only (vitec/branding/tokens/tokens.json is the master):
   #003996 primary, #e55a37 coral, #c2411f coral ink, #14213d text navy, #4d5461 subtitle,
   #c5e1f9 sky, #f6fbff light ground, #070d13 dark ground, #ffffff, #aeb3bf sub text.
   ========================================================================== */

/* ---------------------------------------------------------------- the card */
.blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 768px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.blog-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid rgba(20, 33, 61, 0.1);
  border-radius: 20px;
  background: #ffffff;
  color: #14213d;
  transition: border-color 0.25s ease;
}

/* the hover tint: a faint coral-to-navy wash (the icon tile's hues) behind the content */
.blog-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(229, 90, 55, 0.06), rgba(0, 57, 150, 0.07));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.blog-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1200 / 630;
  border-radius: 19px 19px 0 0;
  background: #070d13;
}

.blog-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.blog-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 22px;
  container: blogcard / inline-size;
}

/* category, date and reading time: ONE row at every card width (owner 2026-10-09) - the row
   never wraps, the category is never cut; narrow cards get the compact size below */
.blog-card-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #4d5461;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.blog-card-meta .blog-card-cat {
  flex: none;
  padding: 4px 11px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.blog-card-fact {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
}

/* the card's icon tiles: the P1 tile one step smaller than .icon-tile-sm, so the meta row
   keeps its one line */
.blog-tile-xs {
  width: 24px;
  height: 24px;
  border-radius: 8px;
}

.blog-tile-xs > img {
  width: 14px;
  height: 14px;
}

/* !important: the global h3 rule sets Oswald with !important; card titles read as text */
.blog-card-title {
  margin: 0 !important;
  color: #14213d;
  font-family: "OverusedGrotesk", "Grotesk Fallback", sans-serif !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

.blog-card-link {
  color: inherit;
  text-decoration: none;
}

/* the whole card is the link's target: one tab stop, one hover, one focus ring */
.blog-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 20px;
}

.blog-card-link:focus {
  outline: none;
}

.blog-card-link:focus-visible::after {
  outline: 2px solid #e55a37;
  outline-offset: 3px;
}

.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-card-tags .white-tag,
.blog-tags .white-tag {
  padding: 4px 11px;
  color: #14213d;
  font-size: 13px;
  line-height: 1.4;
}

.blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
  color: #003996;
  font-size: 15px;
  font-weight: 700;
}

.blog-card-cta svg {
  transition: transform 0.2s ease;
}

.blog-card-note {
  margin-top: auto;
  color: #4d5461;
  font-size: 15px;
}

.blog-card:not(.is-upcoming):hover,
.blog-card:not(.is-upcoming):focus-within {
  border-color: rgba(229, 90, 55, 0.55);
}

.blog-card:not(.is-upcoming):hover::before,
.blog-card:not(.is-upcoming):focus-within::before {
  opacity: 1;
}

.blog-card:not(.is-upcoming):hover .blog-card-media img,
.blog-card:not(.is-upcoming):focus-within .blog-card-media img {
  transform: scale(1.045);
}

/* the tile deepens with the card, like every P1 tile on hover */
.blog-card:not(.is-upcoming):hover .icon-tile,
.blog-card:not(.is-upcoming):focus-within .icon-tile {
  --tile-a: 0.2;
  --tile-b: 0.2;
}

.blog-card:not(.is-upcoming):hover .blog-card-cta svg,
.blog-card:not(.is-upcoming):focus-within .blog-card-cta svg {
  transform: translateX(4px);
}

/* narrow card text columns (phones, the 768-1199px grids, the featured rows): the compact
   meta size. The query measures the card BODY (container below), so a row card with its
   picture beside the text compacts as soon as its text column is narrow. */
@container blogcard (max-width: 340px) {
  .blog-card-meta {
    gap: 9px;
    font-size: 13px;
  }

  .blog-card-meta .blog-card-cat {
    padding: 3px 9px;
    font-size: 12px;
  }

  .blog-card-fact {
    gap: 4px;
  }
}

@container blogcard (max-width: 270px) {
  .blog-card-meta {
    gap: 7px;
    font-size: 12px;
  }

  .blog-card-meta .blog-card-cat {
    padding: 3px 8px;
  }
}

/* only where the tiles do not fit (a long category in a narrow card - blog.js measures every
   row and sets .is-tight): the tiles go, a dot separates date and reading time, the row still
   never wraps. Without the script the row is clipped, never wrapped. */
.blog-card-meta {
  overflow: hidden;
}

.blog-card-meta.is-tight .blog-tile {
  display: none;
}

.blog-card-meta.is-tight .blog-card-rt::before {
  content: "\00b7";
  margin-right: 4px;
  color: #4d5461;
  font-weight: 700;
}

/* phones: a little less side padding, so the one-row meta has room at 320px */
@media (max-width: 400px) {
  .blog-card-body {
    padding: 16px 14px 20px;
  }
}

/* Safari below 16 has no container queries: below 1200px every card gets the smallest
   one-row form (the narrowest text column at 320-1199px is 258px; it needs 251px) */
@supports not (container-type: inline-size) {
  @media (max-width: 1199.98px) {
    .blog-card-meta {
      gap: 7px;
      font-size: 12px;
    }

    .blog-card-meta .blog-card-cat {
      padding: 3px 8px;
      font-size: 12px;
    }

    .blog-card-fact .blog-tile {
      display: none;
    }

    .blog-card-rt::before {
      content: "\00b7";
      margin-right: 4px;
      color: #4d5461;
      font-weight: 700;
    }
  }
}

/* ------------------------------------------------- the overview's featured row */
.blog-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.blog-featured-list {
  display: grid;
  gap: 20px;
}

@media (min-width: 992px) {
  .blog-featured-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 32px;
  }
}

.blog-card-big .blog-card-title {
  font-size: 24px;
}

.blog-card.is-upcoming .blog-card-cat {
  background: #c5e1f9;
  color: #003996 !important;
}

/* a row card: picture left, text right (from 576px) */
@media (min-width: 576px) {
  .blog-card-row {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    align-items: stretch;
  }

  .blog-card-row .blog-card-media {
    height: 100%;
    min-height: 100%;
    aspect-ratio: auto;
    border-radius: 19px 0 0 19px;
  }

  /* the hero's headline sits on the left of the picture: crop from the right */
  .blog-card-row .blog-card-media img {
    object-position: left center;
  }

  .blog-card-row .blog-card-body {
    gap: 10px;
    padding: 16px 18px;
  }

  .blog-card-row .blog-card-title {
    font-size: 18px;
  }
}

/* ------------------------------------------------------------ article hero */
/* the title runs over the full container width above summary and image: max. three lines from
   1024px, mostly two (owner 2026-10-12: "nicht in fünf Zeilen") - wider than a heading's usual
   900px on purpose; balance keeps the lines even */
/* below 1200px the per-device .elevate-block rules of style.css gave the article hero a 30-65px
   top margin and 0-40px padding: the eyebrow chip sat under the floating header (QA 2026-10-12,
   768-1199px). The service pages' heroes start at 0 with 96px padding - the article does the same. */
@media (max-width: 1199.98px) {
  .box-pd.elevate-block.blog-hero {
    margin-top: 0 !important;
    padding-top: 96px !important;
    padding-bottom: 56px !important;
  }
}

.blog-hero-head {
  margin-bottom: 36px;
}

/* back to the overview, as on the case studies (owner 2026-10-17): a quiet text link above the
   eyebrow; the arrow moves a little on hover, the colour follows the site's link hover */
.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #4d5461;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-back .blog-ic {
  transition: transform 0.2s ease;
}

.blog-back:hover {
  color: #003996;
}

.blog-back:hover .blog-ic {
  transform: translateX(-3px);
}

.blog-back:focus-visible {
  outline: 2px solid #e55a37;
  outline-offset: 3px;
  border-radius: 4px;
}

.blog-hero-head .blog-back + .sub-round {
  display: table;
}

@media (prefers-reduced-motion: reduce) {
  .blog-back .blog-ic {
    transition: none;
  }
}

.blog-title {
  max-width: none;
  margin: 0 !important;
  font-size: clamp(30px, 2.4vw + 14px, 52px);
  line-height: 1.12;
  text-wrap: balance;
}

/* style.css sets .row { margin: 0 !important } between 374 and 392px, which pushed summary, tags
   and image 12px in from the title, the strip and the text - the hero row keeps Bootstrap's gutter
   compensation at every width (!important only to beat that rule), so everything shares one edge */
.blog-hero .row {
  margin-right: calc(-0.5 * var(--bs-gutter-x)) !important;
  margin-left: calc(-0.5 * var(--bs-gutter-x)) !important;
}

.blog-dek {
  margin-bottom: 22px !important;
  line-height: 1.6;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.blog-hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.blog-author {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.blog-author img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.blog-author-name {
  display: block;
  color: #14213d;
  font-size: 18px;
  font-weight: 600;
}

.blog-author-role {
  display: block;
  color: #4d5461;
  font-size: 15px;
}

/* ---------------------------------------- the strip: category, date | share */
.blog-strip {
  padding: 16px 0;
}

.blog-strip-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
}

.blog-strip-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  color: var(--sub-text-tt);
  font-size: 16px;
}

.blog-strip-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.blog-share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.blog-share .blog-share-btn {
  min-height: 44px;
  padding: 0 1.1em 0 0.45em;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.blog-share .blog-share-btn:hover,
.blog-share .blog-share-btn:focus-visible {
  color: #ffffff;
}

/* the share icons sit in the B1 circle; the B1 hover turns the circle white, the icon navy.
   The padding keeps every glyph inside the circle's inscribed square (an SVG clips to its
   rounded box). The link is a line icon (stroked); LinkedIn is its own filled brand mark - the
   outlined line version broke apart at this size (owner 2026-10-12: "LinkedIn-Icon ist innen
   drin abgeschnitten"). */
.blog-share .blog-share-btn svg {
  padding: 0.3em;
}

.blog-share .blog-share-btn svg:not(.blog-ic-brand) path {
  fill: none;
  stroke: #ffffff;
  transition: stroke 0.3s ease;
}

.blog-share .blog-share-btn svg.blog-ic-brand path {
  fill: #ffffff;
  stroke: none;
}

.blog-share .blog-share-btn:hover svg:not(.blog-ic-brand) path,
.blog-share .blog-share-btn:focus-visible svg:not(.blog-ic-brand) path,
.blog-share .blog-share-btn.is-done svg path {
  fill: none;
  stroke: #14213d;
}

.blog-share .blog-share-btn:hover svg.blog-ic-brand path,
.blog-share .blog-share-btn:focus-visible svg.blog-ic-brand path {
  fill: #14213d;
}

.blog-share .blog-share-btn.is-done svg {
  background: #ffffff;
}

/* ------------------------------------------- body: table of contents | text */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

.blog-toc-col {
  display: none;
}

@media (min-width: 992px) {
  .blog-layout {
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 56px;
  }

  .blog-toc-col {
    display: block;
  }

  .blog-chips {
    display: none;
  }
}

@media (min-width: 1200px) {
  .blog-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 72px;
  }
}

/* the sticky column: the table of contents (the article's H2s, the current one marked; Figma:
   the dark side card of the article frame) and under it the CTA card. The column never grows
   past the screen: a long list scrolls inside its card, the CTA always stays in view. */
.blog-side {
  position: sticky;
  top: calc(var(--vitec-header-offset, 82px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - var(--vitec-header-offset, 82px) - 48px);
}

.blog-toc {
  min-height: 0;
  overflow-y: auto;
  padding: 24px 16px 18px;
  border-radius: 20px;
  background: #070d13;
  color: var(--sub-text-tt);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* the CTA card (owner 2026-10-12: "so eine CTA reinbauen wie Kontaktiere uns"): one question,
   one line, CTA B1 to the strategy call */
.blog-side-cta {
  flex: none;
  padding: 22px 22px 24px;
  border: 1px solid rgba(20, 33, 61, 0.1);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(229, 90, 55, 0.08), rgba(0, 57, 150, 0.1)), #ffffff;
}

.blog-side-cta-title {
  margin-bottom: 8px !important;
  color: #14213d;
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.blog-side-cta-text {
  margin-bottom: 18px !important;
  color: #4d5461;
  font-size: 15px;
  line-height: 1.5;
}

.blog-side-cta .blog-side-cta-btn {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* phones and tablets: the card follows "Das Wichtigste in Kürze" (owner 2026-10-17); from 992px it
   lives in the sticky column only */
.blog-side-cta-inline {
  margin: 32px 0;
}

/* phones and tablets (owner 2026-10-17, variant C): the article's sections as a dark chip row right
   under the dark strip, so strip and chips read as one band and the text starts at once. The chips
   look like the case studies' section bar (.cs-bar-link in style.css); on phones the same chips
   continue as the sticky bar (.cs-bar-toc) once this row has scrolled away. */
.blog-chips {
  padding: 2px 0 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-chips-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}

.blog-chips-row::-webkit-scrollbar {
  display: none;
}

.blog-chips-label {
  flex: none;
  margin-right: 4px;
  color: #e55a37;
  font: 600 12px/1 "Oswald", "Oswald Fallback", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blog-chip {
  flex: none;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: #aeb3bf;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.blog-chip:last-child {
  margin-right: 28px;
}

@media (hover: hover) {
  .blog-chip:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
  }
}

/* the blog's sticky bar (.cs-bar-toc) wears the same chip colour as the row above it */
.cs-bar-toc .cs-bar-link:not([aria-current]) {
  color: #aeb3bf;
}

.blog-chip.is-active {
  border-color: #e55a37;
  background-color: rgba(229, 90, 55, 0.14);
  color: #ffffff;
}

.blog-chip:focus-visible {
  outline: 2px solid #e55a37;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-chip {
    transition: none;
  }
}

@media (min-width: 992px) {
  .blog-side-cta-inline {
    display: none;
  }
}

.blog-toc-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 8px 14px !important;
  color: #ffffff;
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.blog-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-toc a {
  display: block;
  padding: 8px 10px 8px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 10px 10px 0;
  color: var(--sub-text-tt);
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blog-toc a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.blog-toc a.is-active {
  border-left-color: #e55a37;
  background: rgba(229, 90, 55, 0.14);
  color: #ffffff;
  font-weight: 600;
}

.blog-toc a:focus-visible {
  outline: 2px solid #e55a37;
  outline-offset: -2px;
}


/* ------------------------------------------------------------ the text */
.blog-article {
  min-width: 0;
  color: #4d5461;
  font-size: 18px;
  line-height: 1.7;
}

.blog-article > p,
.blog-article > ul > li,
.blog-article > ol > li {
  max-width: none;
}

/* !important: the global p rule sets margin: 0 !important (style.css) */
.blog-article > p,
.blog-article > ul,
.blog-article > ol {
  margin-bottom: 1.1em !important;
}

/* bullets (owner review 2026-10-12: the old ones were tiny coral dots in the text's own font):
   a round marker in the brand gradient, centred on the first line; numbers in the heading
   face. style.css hides every list marker (li::marker { content: none }), so they are drawn. */
.blog-article > ul,
.blog-article > ol {
  padding-left: 0;
  list-style: none;
}

.blog-article > ul > li,
.blog-article > ol > li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 1.6em;
}

.blog-article > ul > li::before {
  content: "";
  position: absolute;
  top: calc(0.85em - 4px);
  left: 0.3em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e55a37, #003996);
}

.blog-article > ol {
  counter-reset: blog-ol;
}

.blog-article > ol > li {
  counter-increment: blog-ol;
  padding-left: 1.9em;
}

.blog-article > ol > li::before {
  content: counter(blog-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  min-width: 1.4em;
  color: #c2411f;
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-weight: 600;
  text-align: right;
}

.blog-article > h2,
.blog-article > h3,
.blog-article .faq-embed h2 {
  color: #14213d;
  scroll-margin-top: calc(var(--vitec-header-offset, 82px) + 24px);
}

/* phones: a jumped-to heading lands below the header and the sticky contents bar */
@media (max-width: 767.98px) {
  .blog-article > h2,
  .blog-article > h3,
  .blog-article .faq-embed h2 {
    scroll-margin-top: calc(var(--vitec-header-offset, 82px) + 80px);
  }
}

/* size: the site's h2/h3 scale (style.css "main h2" sets it with !important); the spacing
   has to be !important too - the global h1/h2/p rules set margin: 0 !important */
.blog-article > h2 {
  margin: 56px 0 18px !important;
  line-height: 1.2;
}

.blog-article > h3 {
  margin: 34px 0 12px !important;
  line-height: 1.3;
}

.blog-article > p strong,
.blog-article > ul strong,
.blog-article > ol strong {
  color: #14213d;
}

.blog-article a:not(.fill-btn):not(.outline-btn) {
  color: #003996;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.blog-article a:not(.fill-btn):not(.outline-btn):hover {
  color: #c2411f;
  text-decoration-thickness: 2px;
}

.blog-article a:not(.fill-btn):not(.outline-btn):focus-visible {
  border-radius: 2px;
  outline: 2px solid #e55a37;
  outline-offset: 2px;
}

.blog-lead {
  color: #14213d;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

.blog-takeaways {
  margin: 28px 0 8px;
  padding: 22px 26px;
  border-left: 4px solid #e55a37;
  border-radius: 0 16px 16px 0;
  background: #f6fbff;
}

.blog-takeaways-title {
  margin-bottom: 10px !important;
  color: #003996;
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.blog-takeaways ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the tick on the light icon tile, as in the site's feature lists (style.css .feature-list) */
.blog-takeaways li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 32px;
  color: #14213d;
  font-size: 17px;
  line-height: 1.55;
}

.blog-takeaways li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;
  background: url("../svg/tick-tile.svg") no-repeat center / 20px 20px;
}

.blog-figure {
  margin: 36px 0;
}

/* the pictures run the full column width, edge to edge with the text, the takeaways box and the
   FAQ (round 2 stopped them at 760px, 48px short of everything else in the column) */
.blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(20, 33, 61, 0.08);
  border-radius: 20px;
}

.blog-figure figcaption {
  margin-top: 10px;
  color: #4d5461;
  font-size: 15px;
  line-height: 1.5;
}

.blog-quote {
  margin: 32px 0;
  padding: 6px 0 6px 22px;
  border-left: 4px solid #e55a37;
}

.blog-quote p {
  margin-bottom: 8px !important;
  color: #14213d;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.45;
}

.blog-quote cite {
  color: #4d5461;
  font-size: 15px;
  font-style: normal;
}

/* the comparison table (post 19): real text, scrolls sideways inside its box on phones */
.blog-table-scroll {
  overflow-x: auto;
  border: 1px solid rgba(20, 33, 61, 0.12);
  border-radius: 16px;
  background: #ffffff;
}

.blog-table table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.35;
}

.blog-table th,
.blog-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(20, 33, 61, 0.08);
  text-align: left;
  vertical-align: middle;
}

.blog-table thead th {
  color: #003996;
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-size: 17px;
  font-weight: 600;
}

.blog-table thead th span {
  display: block;
  color: #4d5461;
  font-family: "OverusedGrotesk", "Grotesk Fallback", sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.blog-table tbody th {
  color: #14213d;
  font-weight: 600;
}

.blog-table tr:last-child th,
.blog-table tr:last-child td {
  border-bottom: 0;
}

/* phones: the table fits the column instead of scrolling sideways with the third column cut off
   (QA 2026-10-12): the technology line under each heading and the level words give way to the
   dots (the words stay for screen readers), headings may break at their hyphen */
@media (max-width: 575.98px) {
  .blog-table table {
    min-width: 0;
    table-layout: fixed;
  }

  .blog-table th,
  .blog-table td {
    padding: 10px 6px;
  }

  .blog-table thead th {
    font-size: 15px;
    hyphens: manual;
  }

  .blog-table thead th span {
    display: none;
  }

  /* a fixed table takes its column widths from the first row: the empty corner cell */
  .blog-table thead td:first-child {
    width: 40%;
  }

  .blog-table tbody th {
    font-size: 14px;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .blog-table td > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .blog-table td .blog-dots {
    margin-right: 0;
  }
}

@media (max-width: 359.98px) {
  .blog-table thead th {
    padding: 10px 2px;
    font-size: 13px;
  }
}

.blog-dots {
  display: inline-flex;
  gap: 3px;
  margin-right: 8px;
  vertical-align: middle;
}

.blog-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c5e1f9;
}

.blog-dots.d1 i:nth-child(1),
.blog-dots.d2 i:nth-child(-n+2),
.blog-dots.d3 i {
  background: #003996;
}

/* the FAQ inside the article column (components/faqs.php, $faqEmbed): the service pages'
   component unchanged - only its place and the heading's spacing are the article's. The
   article's own h3/p rules used to reach into it and pushed a white band above every question
   (owner 2026-10-12: "Komponente FAQs ist komplett debugged") - they are child-scoped now. */
.faq-embed {
  margin-top: 64px;
  /* the page's base text, not the article's 18px reading size (the service pages' values) */
  font-size: 16px;
  line-height: 1.5;
}

.blog-article .faq-embed h2 {
  margin: 0 0 24px !important;
  line-height: 1.2;
}

/* -------------------------------------------------- phones */
@media (max-width: 767.98px) {
  /* owner 2026-10-17: the strip's content centred on phones (meta and share buttons) */
  .blog-strip-in {
    flex-direction: column;
    align-items: center;
  }

  .blog-strip-meta {
    gap: 8px 18px;
    font-size: 15px;
    justify-content: center;
  }

  .blog-share {
    justify-content: center;
  }

  .blog-article {
    font-size: 17px;
  }

  .blog-lead {
    font-size: 18px;
  }

  .blog-article > h2 {
    margin-top: 44px !important;
  }

  .blog-figure {
    margin: 28px 0;
  }

  .blog-figure img {
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card::before,
  .blog-card-media img,
  .blog-card-cta svg,
  .blog-toc a,
  .blog-article a,
  .blog-share .blog-share-btn svg path {
    transition: none;
  }

  /* no zoom, no moving arrow: the tint alone marks the card */
  .blog-card:not(.is-upcoming):hover .blog-card-media img,
  .blog-card:not(.is-upcoming):focus-within .blog-card-media img,
  .blog-card:not(.is-upcoming):hover .blog-card-cta svg,
  .blog-card:not(.is-upcoming):focus-within .blog-card-cta svg {
    transform: none;
  }
}

/* a heading focused by a table-of-contents jump shows no ring (it is not a control) */
.blog-article h2[tabindex="-1"]:focus {
  outline: none;
}