/**
 * @file
 * Leistungsbereich: drei farbige Schwerpunkt-Karten und eine ruhige Liste
 * weiterer Testleistungen. Cinzel nur für H2, alles andere Source Serif 4.
 * Kontraste: Weiß auf Römisch-Blau 11,5:1, auf Römisch-Rot 7:1, auf Purpur
 * 12,8:1; #1A1A1A auf Weiß 17,4:1, #595C61 auf Weiß 6,9:1.
 */

.qa-services {
  padding: clamp(3.5rem, 6vw, 6rem) 0;
}

/* ---------- Abschnittskopf ---------- */
.qa-eyebrow {
  margin: 0 0 0.75rem;
  color: var(--roman-red, #A82824);
  font-family: var(--font-body, serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.qa-services__intro {
  max-width: 44rem;
  margin-bottom: 3rem;
}
/* basics.css setzt h2-Abstände mit !important und zentriert h2 in Blöcken
   (.content-fullwidth-inner .block-block-content h2) – hier gezielt übersteuern. */
.qa-services .qa-services__heading,
.qa-services .qa-more__heading {
  margin: 0 !important;
  color: var(--ink, #1A1A1A);
  font-family: var(--font-heading, serif);
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: left !important;
}
.qa-services__lead,
.qa-more__lead {
  margin: 1rem 0 0;
  color: var(--meta, #595C61);
  font-size: 1.1875rem;
  line-height: 1.6;
}

/* ---------- Schwerpunkt-Karten ---------- */
/* Farbige Karten mit weißem Icon. Beim Überfahren wird die Fläche etwas
   heller (88 % Farbe + 12 % Weiß), der weiße Strich läuft über die ganze
   Breite. Weiße Schrift bleibt auch im Hover-Zustand über AA:
   Blau 8:1, Rot 5,6:1, Purpur 9,9:1. */
.qa-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .qa-focus {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.qa-focus__item {
  --accent: var(--roman-blue, #1F3A5F);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 2.25rem 2rem 2rem;
  background: var(--accent);
  color: #FFF;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.qa-focus__item--blue   { --accent: var(--roman-blue, #1F3A5F); }
.qa-focus__item--red    { --accent: var(--roman-red, #A82824); }
.qa-focus__item--purple { --accent: var(--roman-purple, #66023C); }

.qa-focus__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2rem;
  width: 3rem;
  height: 3px;
  background: #FFF;
  transition: width 0.25s ease;
}
.qa-focus__item:hover {
  background: color-mix(in srgb, var(--accent) 88%, #FFF);
  box-shadow: 0 18px 40px rgba(26, 26, 26, 0.18);
  transform: translateY(-4px);
}
.qa-focus__item:hover::before {
  width: calc(100% - 4rem);
}
/* Rahmen um die Karte nur bei Tastatur-Fokus, nicht beim Klicken. */
.qa-focus__item:has(a:focus-visible) {
  outline: 3px solid var(--ink, #1A1A1A);
  outline-offset: 3px;
}

.qa-focus__icon {
  display: block;
  width: 36px;
  height: 36px;
  margin: 0.5rem 0 1.5rem;
  object-fit: contain;
}
.qa-services .qa-focus__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-body, serif);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  hyphens: manual;
}
.qa-focus__title a,
.qa-focus__text,
.qa-focus__more,
.qa-focus__arrow {
  color: #FFF;
}
.qa-focus__title a {
  text-decoration: none;
}
.qa-services .qa-focus__title a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.qa-focus__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
}
.qa-focus__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.qa-focus__arrow {
  transition: transform 0.25s ease;
}
.qa-focus__item:hover .qa-focus__arrow {
  transform: translateX(4px);
}

/* ---------- Weitere Testleistungen ---------- */
.qa-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  margin-top: clamp(4rem, 7vw, 6rem);
}
@media (min-width: 992px) {
  .qa-more {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 4rem;
  }
}
.qa-more__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) {
  .qa-more__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.qa-more__item {
  margin: 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line, #E5E3DD);
}
.qa-services .qa-more__title {
  margin: 0 0 0.5rem;
  color: var(--ink, #1A1A1A);
  font-family: var(--font-body, serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}
.qa-more__text {
  margin: 0;
  color: var(--meta, #595C61);
  font-size: 0.9875rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .qa-focus__item,
  .qa-focus__item::before,
  .qa-focus__arrow {
    transition: none;
  }
  .qa-focus__item:hover,
  .qa-focus__item:hover .qa-focus__arrow {
    transform: none;
  }
}