/* Leistungsdetailseite: Wartung, Kalibrierung & Reparatur */

:root {
  /* Hoehe der Leistungskapsel und das Stueck, um das der helle Bereich darunter hochgeschoben wird */
  --rail-h: 4.75rem;
  --rail-bottom: var(--nav-top);
  --halt: 55vh;

  --hair: 1px solid var(--line);
  --hair-dark: 1px solid rgba(255,255,255,.16);
  --r-tech: 3px;
}

/* Gemeinsame Bausteine */

.sd-sec { padding-block: var(--section); }
.sd-sec--soft { background: var(--bg-soft); }
.sd-sec--dark { background: var(--night); color: #fff; }
.sd-sec--dark h2, .sd-sec--dark h3 { color: #fff; }
.sd-sec + .sd-sec:not(.sd-sec--dark):not(.sd-sec--soft) { border-top: var(--hair); }

.sd-copy p { margin: 0; }
.sd-copy p + p { margin-top: 1.15rem; }
.sd-sec--dark .sd-copy p { color: #b9bcc2; }
.sd-copy--lg p { font-size: 1.15rem; line-height: 1.6; }

.sd-specs { margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: sd-spec; }
.sd-specs li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 1rem;
  padding: .95rem 0;
  border-top: var(--hair);
  font-size: 1rem;
}
.sd-specs li:last-child { border-bottom: var(--hair); }
.sd-specs li::before {
  content: counter(sd-spec, decimal-leading-zero);
  counter-increment: sd-spec;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.75;
}
.sd-sec--dark .sd-specs li { border-color: rgba(255,255,255,.16); color: #d6d8dc; }

/* Kopf Zweigeteilt ueber die volle Hoehe: die Bildstrecke fuellt die linke Haelfte von oben bis unten und laeuft ohne Rand bis an den linken Bildschirmrand, der Text steht rechts und traegt die vertikalen Abstaende */

/* Buehne fuer den Kopf */

.sd-stage {
  position: relative;
  height: 200vh;
  height: 200svh;
}
.sd-top {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
}
/* Alles nach der Buehne legt sich darueber */
.sd-stage ~ * {
  position: relative;
  z-index: 2;
}
.sd-stage + .sd-sec {
  margin-top: -100vh;
  margin-top: -100svh;
  border-radius: 44px 44px 0 0;
  background: var(--bg);
  box-shadow: 0 -28px 60px rgba(0,0,0,.38);
}

.sd-hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--night);
  color: #fff;
  overflow: hidden;
}
.sd-hero__grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}
/* Der Textblock steht mittig in seiner Haelfte, waagerecht wie senkrecht: feste Blockbreite mit `margin-inline: auto` statt Ausrichtung an der Wrap-Kante: sonst klebt er links am Bild und laesst rechts Luft */
.sd-hero__copy {
  align-self: center;
  width: min(100%, 36rem);
  margin-inline: auto;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: calc(var(--rail-bottom) + var(--rail-h) + clamp(1.5rem, 3vw, 2.5rem));
  padding-inline: clamp(1.25rem, 2.5vw, 2rem);
}
/* Eigener Grad statt h1.display: die Ueberschrift steht in einer halben Spalte, die Systemgroesse rechnet gegen die volle Fensterbreite und wird darin zu gross */
.sd-hero h1 {
  color: #fff;
  font-size: clamp(1.85rem, 2.9vw, 3rem);
}
.sd-hero .lead {
  color: #b9bcc2;
  margin-top: 1.5rem;
  max-width: none;
  font-size: clamp(.98rem, 1.15vw, 1.1rem);
  line-height: 1.6;
}
.sd-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2.4rem;
}
.sd-hero__actions .btn--ghost {
  --fill: #fff;
  --fill-ink: var(--ink);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

/* Bildstrecke: die Motive liegen uebereinander und blenden ineinander */

.sd-hero__slider {
  position: relative;
  overflow: hidden;
}
.sd-hero__track {
  position: relative;
  height: 100%;
}
.sd-hero__track:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

.sd-hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .9s ease;
}
.sd-hero__slide:first-child { opacity: 1; }
.sd-hero__track.is-live .sd-hero__slide { opacity: 0; }
.sd-hero__track.is-live .sd-hero__slide.is-on { opacity: 1; }
.sd-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.sd-hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(205deg, rgba(227,9,33,.22), transparent 48%),
    linear-gradient(90deg, rgba(11,11,13,.35), transparent 30%),
    /* Fuss abdunkeln, damit Pfeile und Punkte auf jedem Motiv stehen */
    linear-gradient(0deg, rgba(11,11,13,.62), transparent 20%);
  pointer-events: none;
}

/* Nur Punkte, die Bildstrecke laeuft von selbst weiter */
.sd-dots {
  position: absolute;
  right: clamp(1.5rem, 3vw, 2.5rem);
  bottom: clamp(1.5rem, 3vw, 2rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
}
.sd-dots button {
  width: 10px; height: 10px;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  transition: border-color .25s ease;
}
.sd-dots button:hover { border-color: #fff; }
.sd-dots button[aria-selected="true"] { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .sd-hero__slide { transition: none; }
  .sd-dots button { transition: none; }
}

/* Leistungsnavigation Gleiche Bauart wie die Navi oben: dunkle, halbdurchlaessige Kapsel mit Weichzeichner, Pillenform, dieselbe Breite */

.sd-rail {
  position: absolute;
  left: 50%;
  bottom: var(--rail-bottom);
  transform: translateX(-50%);
  z-index: 20;
  width: min(calc(100% - 32px), 1120px);
  border-radius: 999px;
  /* Deckend weiss. Kein Weichzeichner mehr: der greift nur bei halbdurchlaessigem Grund und kostet sonst nur Rechenzeit */
  background: #fff;
  box-shadow: 0 20px 48px rgba(0,0,0,.32);
  color: var(--ink);
  overflow: hidden;
}
.sd-rail__inner {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.sd-rail__inner::-webkit-scrollbar { display: none; }
/* Gleicher Hover wie bei den Buttons: die Fuellflaeche faehrt ueber scaleY von unten hoch, die Beschriftung wandert nach oben aus und die zweite Fassung rueckt von unten nach */
.sd-rail__item {
  --fill: var(--accent);
  --fill-ink: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 0 auto;
  min-width: 0;
  min-height: var(--rail-h);
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.4rem;
  border-left: 1px solid rgba(0,0,0,.09);
}
.sd-rail__item:first-child { border-left: 0; }
.sd-rail__item.is-active { background: rgba(0,0,0,.05); }

.sd-rail__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fill);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.sd-rail__item:hover::before,
.sd-rail__item:focus-visible::before { transform: scaleY(1); }

.sd-rail__item:hover .sd-rail__icon,
.sd-rail__item:focus-visible .sd-rail__icon { color: #fff; }

.sd-rail__item:hover .swap__row:first-child,
.sd-rail__item:focus-visible .swap__row:first-child { transform: translateY(-120%); }
.sd-rail__item:hover .swap__row + .swap__row,
.sd-rail__item:focus-visible .swap__row + .swap__row { transform: translateY(0); }

/* Icons aus dem Entwurf dsp25 */
.sd-rail__icon {
  flex: none;
  display: block;
  color: var(--ink-soft);
  transition: color .25s ease;
}
.sd-rail__icon svg { width: 28px; height: 28px; display: block; }
/* Nur der aktive Eintrag faerbt das Icon rot */
.sd-rail__item.is-active .sd-rail__icon { color: var(--accent); }
.sd-rail__item.is-active:hover .sd-rail__icon { color: #fff; }

/* Beschriftung: linksbuendig statt der zentrierten Vorgabe aus site.css, die auf Buttons gemuenzt ist */
.sd-rail .swap { line-height: 1.3; }
.sd-rail .swap__row {
  justify-content: flex-start;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
}
.sd-rail .swap__row + .swap__row { color: var(--fill-ink); }
.sd-rail__item.is-active .swap__row:first-child { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .sd-rail__item::before { display: none; }
  .sd-rail__item:hover,
  .sd-rail__item:focus-visible { background: var(--fill); }
  .sd-rail__item:hover .swap__row:first-child { color: var(--fill-ink); }
  .sd-rail .swap__row + .swap__row { display: none; }
}

/* Problem und Leistungsversprechen */

.sd-lede__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.sd-lede h2 { max-width: 15ch; }

.sd-lede__facts .reveal {
  transition-duration: 1.2s;
  transform: translateY(38px);
}
.sd-lede__facts .reveal.is-in { transform: none; }

.sd-lede__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.sd-fact { padding-top: 1.1rem; border-top: 1px solid var(--ink); }
/* Die Icons haben im Raster 61 rundum Luft; der Abstand nach unten darf deshalb klein bleiben, sonst reisst er optisch auf */
.sd-fact__icon {
  display: block;
  margin-bottom: .2rem;
  margin-left: -2px;
  color: var(--accent);
}
.sd-fact__icon svg { width: 60px; height: 60px; display: block; }
.sd-fact h3 {
  margin: 0 0 .55rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sd-fact p { margin: 0; font-size: .96rem; color: var(--ink-soft); }

/* Themenblock mit Bild */

.sd-topic__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.sd-topic--flip .sd-topic__media { order: -1; }
.sd-topic__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-tech);
  aspect-ratio: 4 / 3;
}
.sd-topic__media img { width: 100%; height: 100%; object-fit: cover; }
.sd-topic h2 { max-width: 17ch; }

.sd-values { margin: 2.25rem 0 0; display: grid; gap: 0; }
.sd-value {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: var(--hair);
}
.sd-value:last-child { border-bottom: var(--hair); }
.sd-value__unit {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: .15rem;
}
.sd-value h3 { margin: 0 0 .3rem; font-size: 1.02rem; font-weight: 600; }
.sd-value p { margin: 0; font-size: .95rem; color: var(--ink-soft); }

/* Fehlerdiagnose und Reparatur */

.sd-repair { position: relative; overflow: hidden; }
.sd-repair::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 58% at 92% 6%, rgba(227,9,33,.24), transparent 62%);
  pointer-events: none;
}
.sd-repair .wrap { position: relative; z-index: 1; }
.sd-repair__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sd-repair h2 { max-width: 16ch; }
.sd-repair__band {
  position: relative;
  border-radius: var(--r-tech);
  overflow: hidden;
  aspect-ratio: 16 / 6;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.sd-repair__band img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.sd-repair__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11,11,13,.8), rgba(11,11,13,.15) 55%, rgba(11,11,13,.7));
}
.sd-steps {
  counter-reset: sd-step;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
}
.sd-step-line {
  counter-increment: sd-step;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: var(--hair-dark);
}
.sd-step-line::before {
  content: counter(sd-step, decimal-leading-zero);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}
.sd-step-line h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 600; }
.sd-step-line p { margin: 0; font-size: .95rem; color: #a9adb4; }

/* Vor Ort oder Werkstatt */

.sd-ways__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
/* Asymmetrisch: der erste Weg bekommt mehr Flaeche, damit die beiden Moeglichkeiten nicht wie zwei Tarife nebeneinander stehen */
.sd-ways__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .88fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: stretch;
}
.sd-way { display: flex; flex-direction: column; }
.sd-way__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-tech);
  aspect-ratio: 16 / 9;
  margin-bottom: 1.75rem;
}
.sd-way--b .sd-way__media { aspect-ratio: 4 / 5; }
.sd-way__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.sd-way:hover .sd-way__media img { transform: scale(1.04); }
.sd-way h3 {
  margin: 0 0 .9rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.sd-way p { margin: 0; color: var(--ink-soft); }
.sd-way p + p { margin-top: .9rem; }

/* Technikbestand */

.sd-scale__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.sd-tier {
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}
.sd-tier h3 {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.sd-tier p { margin: 0; font-size: .97rem; color: var(--ink-soft); }

/* Die vier Bausteine Ein Thema auf einmal */

/* Ueberschrift und Einordnung stehen mittig ueber dem Kasten und kommen beim Scrollen nacheinander herein (Versatz im Markup, Dauer hier) */
.sd-showcase__head {
  max-width: 36rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
  transition: opacity .45s ease, transform .45s ease;
}
.sd-showcase__head h2 { color: #fff; }
.sd-showcase__head p {
  margin: 1.25rem auto 0;
  max-width: 54ch;
  font-size: .98rem;
  line-height: 1.65;
  color: #a9adb4;
}
.sd-showcase__head .reveal { transition-duration: 1s; }

/* Sobald der Kasten andockt, blendet der Text darueber aus: er hat seine Aufgabe dann erfuellt und wuerde nur den Blick vom Kasten wegziehen */
.sd-showcase.is-docked .sd-showcase__head {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

/* Der Nachlauf gibt dem Kasten den Weg, den er angedockt steht */
.sd-showcase__run,
.sd-showcase__hold { height: 0; }

/* Kein schwarzer Rest unter dem Kasten: die helle Flaeche schliesst direkt an und faehrt mit gerundeter Oberkante darueber */
.sd-sec.sd-showcase { padding-bottom: 0; }
/* Die Flaeche, die ueber den angedockten Kasten faehrt */
/* Die vier Themenabschnitte liegen im Dokument, stehen aber nicht auf der Seite: ihr Inhalt faehrt in der Schublade von rechts herein und stuende sonst doppelt da */
.js .sd-quelle { display: none; }

/* Ohne Skript traegt der erste Themenabschnitt die Ueberfahrt, mit Skript der Vor-Ort-Abschnitt, weil er dann als erster unter dem Kasten steht */
.sd-ueberfahrt,
.js .sd-ueberfahrt-js {
  position: relative;
  z-index: 2;
  border-radius: 44px 44px 0 0;
  background: var(--bg-soft);
  box-shadow: 0 -28px 60px rgba(0,0,0,.45);
}

@media (min-width: 1081px) and (min-height: 760px) {
  .sd-showcase__run { height: 165vh; }
  .sd-showcase__hold { height: var(--halt); }
  .sd-ueberfahrt,
  .js .sd-ueberfahrt-js { margin-top: calc(-1 * var(--halt)); }
  /* --dock-top setzt detail.js: Fensterhoehe minus Kastenhoehe, der Kasten steht also buendig auf der Bildschirmunterkante */
  .sd-showcase__dock {
    position: sticky;
    top: var(--dock-top, 12vh);
  }
}

/* Heller Kasten auf dunkler Flaeche: die Karte liest wie die Schublade, die aus demselben Inhalt gespeist wird */
.sd-panel {
  position: relative;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}

/* Jede Karte traegt ihr eigenes Motiv, damit Bild und Inhalt zusammen hereinfahren statt getrennt zu wechseln */
.sd-slide__media {
  position: relative;
  margin: 0;
  min-height: 100%;
}
.sd-slide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sd-slide__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  background: var(--bg);
}

.sd-slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sd-slides::-webkit-scrollbar { display: none; }
.sd-slides:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

/* Im gefahrenen Zustand liegen die Karten uebereinander und werden von detail.js einzeln bewegt: sie schieben sich also selbst herein, statt dass ein Fenster ueber sie hinwegwandert */
.sd-slides.is-driven {
  display: block;
  position: relative;
  overflow: hidden;
  scroll-snap-type: none;
  min-height: var(--folien-hoehe, 340px);
}
.sd-slides.is-driven .sd-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  /* Alle Folien gleich hoch, damit das Motiv links immer bis zur Unterkante des Kastens durchlaeuft: die Textseiten sind unterschiedlich lang */
  min-height: 100%;
}

/* Versatz, Stauchung und Deckkraft setzt detail.js aus dem Fortschritt */
.sd-slide {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
  transform-origin: center 40%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;
}
.sd-slide h3 {
  margin: 0 0 .7rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sd-slide__body > p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

.sd-slide__list {
  width: 100%;
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  list-style: none;
}
.sd-slide__list li {
  position: relative;
  padding: .7rem 0 .7rem 1.75rem;
  border-top: var(--hair);
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.sd-slide__list li:last-child { border-bottom: var(--hair); }
.sd-slide__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
/* Button ans untere Ende, damit die gewonnene Hoehe nicht als Leerraum unter der Liste stehen bleibt */
.sd-slide__body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* Kleine Navi ueber dem Kasten, gebaut wie der Umschalter auf der Kursseite des Pilates-Projekts: Pille mit Kontur, darin ein gefuellter Gleiter, der federnd auf den aktiven Eintrag faehrt */
.sd-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 4px;
  width: fit-content;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  padding: 4px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
}
.sd-tabs::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px - (var(--n, 4) - 1) * 4px) / var(--n, 4));
  border-radius: 999px;
  background: var(--accent);
  transform: translateX(calc((100% + 4px) * var(--tab, 0)));
  transition: transform .5s cubic-bezier(.32, 1.5, .55, 1);
  will-change: transform;
}
.sd-tabs button {
  position: relative;
  z-index: 1;
  padding: .7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .86rem;
  font-weight: 500;
  line-height: 1;
  color: #8f939a;
  cursor: pointer;
  white-space: nowrap;
  transition: color .35s ease, transform .35s cubic-bezier(.32, 1.5, .55, 1);
}
.sd-tabs:empty { display: none; }
.sd-tabs button:hover { color: #fff; }
.sd-tabs button:active { transform: scale(.94); }
.sd-tabs button[aria-selected="true"] { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sd-tabs::after,
  .sd-tabs button { transition: none; }
  .sd-slide { transform: none !important; opacity: 1 !important; will-change: auto; }
  .sd-showcase__head { transition: none; }
  .sd-showcase.is-docked .sd-showcase__head { opacity: 1; transform: none; }
}

/* FAQ Aufbau wie im Pilates-Projekt: dunkle Flaeche mit grosser Rundung, darin die weisse Karte, links die Ueberschrift, rechts die Liste */

.sd-faqwrap {
  background: var(--night);
  border-radius: 56px 56px 0 0;
  padding: var(--section) clamp(1rem, 3vw, 50px) 0;
}
.sd-faq {
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1.75rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(1.75rem, 5vw, 5rem);
}
.sd-faq__intro h2 { margin-bottom: 1.1rem; }
.sd-faq__intro p { margin: 0; color: var(--ink-soft); max-width: 34ch; }
.sd-faq__intro .btn--ghost { margin-top: 1.75rem; }

.sd-faq__item { border-top: var(--hair); }
.sd-faq__item:last-child { border-bottom: var(--hair); }

.sd-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.5rem 0;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
  transition: color .2s ease;
}
.sd-faq__item summary::-webkit-details-marker { display: none; }
.sd-faq__item summary:hover { color: var(--accent); }

.sd-faq__plus {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .35s ease, background .2s ease;
}
.sd-faq__item[open] .sd-faq__plus { transform: rotate(45deg); background: var(--accent); }

.sd-faq__item > p { margin: 0; padding: 0 3.75rem 1.5rem 0; color: var(--ink-soft); }
.sd-faq__item > p + p { padding-top: .8rem; }

.sd-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition: block-size .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease,
    content-visibility .45s allow-discrete;
}
.sd-faq__item[open]::details-content { block-size: auto; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .sd-faq__plus,
  .sd-faq__item::details-content { transition: none; }
}

/* Schublade Faehrt beim Klick auf „Mehr erfahren" von rechts auf */

.sd-drawer {
  position: fixed;
  inset: 0;
  z-index: 400;
}
.sd-drawer[hidden] { display: none; }

.sd-drawer__veil {
  position: absolute;
  inset: 0;
  background: rgba(6,6,8,.55);
  opacity: 0;
  transition: opacity .45s ease;
}
.sd-drawer.is-open .sd-drawer__veil { opacity: 1; }

.sd-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(900px, 96vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  box-shadow: -30px 0 70px rgba(0,0,0,.4);
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}
.sd-drawer.is-open .sd-drawer__panel { transform: none; }

.sd-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.75rem, 3.5vw, 3.5rem) clamp(1.25rem, 2vw, 1.75rem);
  border-bottom: var(--hair);
}
.sd-drawer__head h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  max-width: 24ch;
}

.sd-drawer__close {
  position: relative;
  flex: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
.sd-drawer__close:hover {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: #fff;
}
.sd-drawer__close span,
.sd-drawer__close span::before {
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 1.5px;
  background: currentColor;
  content: "";
}
.sd-drawer__close span { transform: translate(-50%, -50%) rotate(45deg); }
.sd-drawer__close span::before { left: 0; top: 0; transform: rotate(-90deg); }

.sd-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.75rem, 3.5vw, 3.5rem);
}

/* Aufbau wie auf der Seite, nur einspaltig: die geklonten Raster stehen untereinander, die Ueberschrift steht schon im Kopf der Schublade */
.sd-drawer__body > .wrap { padding-inline: 0; max-width: none; }
.sd-drawer__body h2 { display: none; }
.sd-drawer__body .sd-topic__grid,
.sd-drawer__body .sd-repair__top,
.sd-drawer__body .sd-ways__head,
.sd-drawer__body .sd-ways__grid { display: block; }
.sd-drawer__body .sd-steps { grid-template-columns: 1fr; }

.sd-drawer__body .sd-topic__media,
.sd-drawer__body .sd-repair__band,
.sd-drawer__body .sd-way__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--r-tech);
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.sd-drawer__body .sd-topic__media img,
.sd-drawer__body .sd-repair__band img,
.sd-drawer__body .sd-way__media img { width: 100%; height: 100%; object-fit: cover; }
.sd-drawer__body .sd-repair__band::after { display: none; }
.sd-drawer__body .sd-topic--flip .sd-topic__media { order: 0; }

/* Fuer dunklen Grund gebaute Bausteine auf die helle Fassung zurueckholen */
.sd-drawer__body .sd-copy p,
.sd-drawer__body .sd-step-line p,
.sd-drawer__body .sd-way p,
.sd-drawer__body .sd-value p { color: var(--ink-soft); }
.sd-drawer__body h3,
.sd-drawer__body .sd-step-line h3,
.sd-drawer__body .sd-value h3 { color: var(--ink); }
.sd-drawer__body .sd-step-line,
.sd-drawer__body .sd-specs li,
.sd-drawer__body .sd-value { border-color: var(--line); }
.sd-drawer__body .sd-specs li:last-child { border-bottom: var(--hair); }
.sd-drawer__body .sd-way + .sd-way { margin-top: 2.5rem; }
.sd-drawer__body small { color: var(--ink-soft); }

body.sd-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .sd-drawer__panel,
  .sd-drawer__veil { transition: none; }
}