/*
 * R8/A2 final visual candidate, based on production reference bild-09.jpg.
 * Load after r7-a.css; use instead of another r8-a.css or the fallback.
 * Native content unchanged. Cards overlap the hero; the existing heading follows.
 * Proven functional constraints: no track easing; viewport cannot focus-scroll.
 */
body.yk .r7a-leistungen.r8a-slider {
  --r8a-count: 1;
  --r8a-gap: 20px;
  --r8a-overlap: 56px;
  --r8a-basis: 100%;
  --r8a-brand: var(--r7a-bordeaux, #310001);
  --r8a-border: #e6dfe0;
  position: relative;
  z-index: 4;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--r8a-overlap));
  padding-top: 36px;
  padding-bottom: 64px;
  background: linear-gradient(to bottom, transparent 0 var(--r8a-overlap), #fff var(--r8a-overlap) 100%);
  scroll-margin-top: calc(var(--yl-kopf-h, 122px) + 40px);
}
body.yk .r8a-slider,
body.yk .r8a-slider > .e-con-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
body.yk .r8a-slider .r7a-leistungen__kopf { order: 3; align-items: center; width: 100%; max-width: 740px; margin: 38px auto 0; gap: 12px; text-align: center; }
body.yk .r8a-slider .r7a-leistungen__titel .elementor-heading-title { font-size: clamp(27px, 2.4vw, 36px); line-height: 1.22; }
body.yk .r8a-slider .r7a-leistungen__lead p { max-width: 42rem; margin: 0 auto; font-size: 16px; line-height: 26px; }
body.yk .r8a-slider .r8a-track {
  order: 1;
  display: grid;
  grid-template-columns: repeat(var(--r8a-count), minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 48px var(--r8a-gap);
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  overflow: visible;
}
body.yk .r8a-slider .r8a-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 304px;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  transform: none;
}
body.yk .r8a-slider .r7a-karte__bild { display: none; }
body.yk .r8a-slider .r8a-card .r7a-karte__tafel {
  position: static;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0 22px 22px;
  background-color: #fff;
  background-image: url("../img/r7a/service_box_shape1-1.png");
  background-size: 180px auto;
  background-repeat: no-repeat;
  background-position: right top;
  border: 1px solid #f0eded;
  box-shadow: 0 7px 20px -10px rgba(35, 9, 12, .18);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
body.yk .r8a-slider .r8a-card .r7a-karte__gruppe {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 0 0 12px;
  padding: 0;
  transform: none;
}
body.yk .r8a-slider .r7a-karte__gruppe .elementor-heading-title {
  /* The native group label remains editable and accessible; reference shows the badge only. */
  color: transparent;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
}
body.yk .r8a-slider .r7a-karte__gruppe .elementor-heading-title::before {
  content: '';
  left: 0;
  top: -28px;
  width: 72px;
  height: 82px;
  background: var(--r8a-brand);
  clip-path: polygon(50% 0, 100% 33.34%, 90% 33.34%, 90% 100%, 10% 100%, 10% 33.34%, 0 33.34%);
  transition: background-color 180ms ease;
}
body.yk .r8a-slider .r7a-karte__gruppe .elementor-heading-title::after {
  content: '';
  left: 20px;
  top: 12px;
  width: 32px;
  height: 32px;
  background: #fff;
  -webkit-mask: var(--yl-icon) center / contain no-repeat;
  mask: var(--yl-icon) center / contain no-repeat;
}
body.yk .r8a-slider .r8a-card .r7a-karte__titel { margin: 0 0 10px; }
body.yk .r8a-slider .r7a-karte__titel .elementor-heading-title {
  font-size: clamp(20px, 1.4vw, 22px);
  line-height: 1.24;
  min-height: 2.48em;
  overflow-wrap: anywhere;
}
body.yk .r8a-slider .r8a-card .r7a-karte__text { margin: 0 0 16px; }
body.yk .r8a-slider .r7a-karte__text p { color: #625b62; font-size: 14px; line-height: 22px; }
body.yk .r8a-slider .r8a-card .r7a-karte__mehr { margin-top: auto; padding-top: 12px; border-top-color: #eee8e8; }
body.yk .r8a-slider .r7a-karte__mehr .elementor-heading-title { font-size: 14px; line-height: 22px; }
body.yk .r8a-slider .r8a-viewport {
  order: 1;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  /* Prevent native focus scroll from competing with the scripted transform. */
  overflow: clip;
  padding: 38px 0 26px;
  margin: -38px 0 -26px;
  box-sizing: content-box;
  touch-action: pan-y;
}
body.yk .r8a-slider.r8a-ready .r8a-track {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  gap: 0 var(--r8a-gap);
  /* Elementor otherwise eases every frame and continues moving after Pause. */
  transition: none !important;
  will-change: transform;
}
body.yk .r8a-slider.r8a-ready .r8a-track > .r8a-card {
  flex: 0 0 var(--r8a-basis) !important;
  width: var(--r8a-basis);
  max-width: none;
}
body.yk .r8a-slider.r8a-dragging { cursor: grabbing; user-select: none; }
body.yk .r8a-slider .r8a-controls { order: 2; display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; margin: 20px 0 0; }
body.yk .r8a-slider .r8a-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 9px 14px;
  border: 1px solid var(--r8a-border);
  border-radius: 0;
  background: #fff;
  color: var(--r8a-brand);
  font: 600 14px/22px var(--yl-font-body, sans-serif);
  cursor: pointer;
}
body.yk .r8a-slider .r8a-controls .r8a-prev,
body.yk .r8a-slider .r8a-controls .r8a-next { width: 44px; padding: 0; font-size: 0; }
body.yk .r8a-slider .r8a-prev::before,
body.yk .r8a-slider .r8a-next::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--yl-i-pfeil) center / contain no-repeat; mask: var(--yl-i-pfeil) center / contain no-repeat; }
body.yk .r8a-slider .r8a-prev::before { transform: rotate(180deg); }
body.yk .r8a-slider .r8a-pause { min-width: 110px; }
body.yk .r8a-slider .r8a-controls button:disabled { opacity: .65; cursor: default; }
body.yk .r8a-slider .r8a-controls button:focus-visible { outline: 3px solid var(--r8a-brand); outline-offset: 3px; }
body.yk .r8a-slider .r8a-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
body.yk .r8a-slider .r8a-card:focus-within { outline: 3px solid var(--r8a-brand) !important; outline-offset: -3px !important; }
body.yk .r8a-slider .r8a-card:focus-within .r7a-karte__tafel { border-color: var(--r8a-brand); box-shadow: 0 10px 28px -16px rgba(49, 0, 1, .35); }
body.yk .r8a-process .yr6b-station,
body.yk .r8a-process .yr6b-handfolge__schritt { transition: transform 180ms ease, box-shadow 180ms ease; }
body.yk .r8a-process .yr6b-station__nr .elementor-heading-title,
body.yk .r8a-process .yr6b-handfolge__nr .elementor-heading-title { border-radius: 50%; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease; }
body.yk .r8a-process .yr6b-station:focus-visible,
body.yk .r8a-process .yr6b-handfolge__schritt:focus-visible { outline: 2px solid var(--yl-brand, #310001); outline-offset: 8px; transform: translateY(-3px); box-shadow: inset 0 -2px var(--yl-brand, #310001); }
body.yk .r8a-process .yr6b-station:focus .yr6b-station__nr .elementor-heading-title,
body.yk .r8a-process .yr6b-handfolge__schritt:focus .yr6b-handfolge__nr .elementor-heading-title { background: var(--yl-brand, #310001); color: #fff; border-color: var(--yl-brand, #310001); }
@media (hover: hover) and (pointer: fine) {
  body.yk .r8a-slider .r8a-card:hover .r7a-karte__tafel { border-color: var(--r8a-brand); box-shadow: 0 10px 28px -16px rgba(49, 0, 1, .35); }
  body.yk .r8a-slider .r8a-card:hover .r7a-karte__gruppe { transform: none; }
  body.yk .r8a-slider .r8a-controls button:not(:disabled):hover { color: #fff; background: var(--r8a-brand); border-color: var(--r8a-brand); }
  body.yk .r8a-process .yr6b-station:hover,
  body.yk .r8a-process .yr6b-handfolge__schritt:hover { transform: translateY(-3px); box-shadow: inset 0 -2px var(--yl-brand, #310001); }
  body.yk .r8a-process .yr6b-station:hover .yr6b-station__nr .elementor-heading-title,
  body.yk .r8a-process .yr6b-handfolge__schritt:hover .yr6b-handfolge__nr .elementor-heading-title { background: var(--yl-brand, #310001); color: #fff; border-color: var(--yl-brand, #310001); }
}
@media (min-width: 640px) { body.yk .r7a-leistungen.r8a-slider { --r8a-count: 2; --r8a-basis: calc((100% - var(--r8a-gap)) / 2); } }
@media (min-width: 1024px) { body.yk .r7a-leistungen.r8a-slider { --r8a-count: 4; --r8a-basis: calc((100% - 3 * var(--r8a-gap)) / 4); } }
@media (prefers-reduced-motion: reduce) {
  body.yk .r8a-slider *, body.yk .r8a-slider *::before, body.yk .r8a-slider *::after,
  body.yk .r8a-process *, body.yk .r8a-process *::before, body.yk .r8a-process *::after { transition: none !important; animation: none !important; }
  body.yk .r8a-slider .r8a-card, body.yk .r8a-slider .r7a-karte__gruppe,
  body.yk .r8a-process .yr6b-station, body.yk .r8a-process .yr6b-handfolge__schritt { transform: none !important; }
}
@media print {
  body.yk .r8a-slider .r8a-controls { display: none; }
  body.yk .r8a-slider .r8a-viewport { overflow: visible; padding: 0; margin: 0; }
  body.yk .r8a-slider .r8a-track { transform: none !important; display: grid !important; }
  body.yk .r8a-slider .r8a-card { width: auto !important; break-inside: avoid; }
}
