/* ============================================================
   ZOLMAN – Leistungen
   ============================================================ */

/* Kopf schließt direkt an die Auswahlleiste an */
.page-head--flush {
  border-bottom: 0;
  padding-bottom: clamp(30px, 4vw, 44px);
}

/* ---------- Auswahlleiste ---------- */
.svcbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 50;
  background: rgba(255, 255, 255, .84);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .svcbar { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}

.svctabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.svctabs::-webkit-scrollbar { display: none; }

/* Der wandernde Hintergrund – Position setzt script.js */
.svctabs__pill {
  position: absolute;
  top: 8px;
  left: 0;
  height: calc(100% - 16px);
  background: var(--c-ink);
  border-radius: var(--r-sm);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform .4s var(--ease-out), width .4s var(--ease-out), opacity .25s var(--ease);
}
.svctabs__pill.is-ready { opacity: 1; }

.svctabs__tab {
  position: relative;
  z-index: 1;
  padding: 10px 18px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--c-muted);
  white-space: nowrap;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .3s var(--ease);
}
.svctabs__tab:hover { color: var(--c-ink); text-decoration: none; }
.svctabs__tab[aria-selected="true"] { color: #fff; }

/* Ohne JS bleibt die Leiste eine Sprungnavigation */
.no-js .svctabs__tab[aria-selected="true"] { color: var(--c-ink); }

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

/* ---------- Bühne ---------- */
.svcstage { padding-block: clamp(44px, 6vw, 76px); }

.svcpanels { position: relative; transition: height .38s var(--ease-out); }
.svcpanels.is-busy { overflow: hidden; }

/* Mit JS ist immer genau ein Bereich sichtbar, ohne JS alle */
html:not(.no-js) .svcpanel { display: none; }
html:not(.no-js) .svcpanel.is-active { display: block; }

.svcpanel { scroll-margin-top: calc(var(--nav-h) + 78px); }
.svcpanel:focus { outline: none; }

@keyframes svc-in-right { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes svc-in-left  { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes svc-out-left  { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-34px); } }
@keyframes svc-out-right { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(34px); } }

.svcpanel.is-in-right { animation: svc-in-right .42s var(--ease-out) both; }
.svcpanel.is-in-left  { animation: svc-in-left  .42s var(--ease-out) both; }
.svcpanel.is-out-left  { animation: svc-out-left  .17s var(--ease) both; }
.svcpanel.is-out-right { animation: svc-out-right .17s var(--ease) both; }

/* ---------- Leistungsblöcke ---------- */
.svc__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  max-width: 780px;
  margin-bottom: clamp(32px, 4vw, 48px);
}
@media (max-width: 640px) { .svc__head { grid-template-columns: 1fr; gap: 14px; } }

.svc__num {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-line);
  padding-top: .55em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.svc__head h2 { margin-bottom: 14px; }
/* Bereiche ohne Einleitungstext: kein Leerraum unter der Überschrift */
.svc__head h2:last-child { margin-bottom: 0; }

.svc__cards { margin-bottom: 32px; }

/* ---------- Häkchenliste ---------- */
.checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  max-width: 720px;
}
.checks li {
  position: relative;
  padding-left: 30px;
  font-size: .9375rem;
  color: var(--c-ink-2);
  line-height: 1.5;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .32em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--c-accent-soft) center / 11px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}

.svc__link { margin-top: 4px; }

/* ---------- Weitere Leistungen ---------- */
.misc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--c-line-soft);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 900px) { .misc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .misc { grid-template-columns: 1fr; } }

.misc li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 24px 26px;
  background: var(--c-bg);
  transition: background .25s var(--ease);
}
.misc li:hover { background: var(--c-bg-tint); }
.misc strong { font-size: .9375rem; font-weight: 600; letter-spacing: -.012em; }
.misc span { font-size: .8438rem; color: var(--c-muted); line-height: 1.4; }