/* ==========================================================================
   SW360 — Leistungen (SR-Modul)
   Kopf (H2 + Intro) + Leistungsgruppen. Jede Gruppe: Inhalt links (Nummer, H3,
   Intro, Akkordeon der H4-Punkte, Hinweis-Box) + mitlaufendes Bild (sticky),
   Zickzack-versetzt. Schriften/Größen vom Theme (.h3/.h5/.lead/.display-3),
   KEIN font-family im Modul. Farben aus Theme-Palette mit Fallback.
   ========================================================================== */

.sw360-ls {
  --sw-green: var(--primary, #3bdc77);
  --sw-cyan: var(--tertiary, #5dc1cb);
  --sw-ink: var(--dark, #252634);
  --sw-cw: 1730px;
  --sw-px: clamp(20px, 4vw, 30px);
  --sw-nav-h: 86px;
  position: relative;
  padding: clamp(64px, 12vh, 140px) 0 0;   /* kein unteres Padding -> letzte Karte schliesst bündig an die nächste Sektion an */
}
.sw360-ls *, .sw360-ls *::before, .sw360-ls *::after { box-sizing: border-box; }

/* Hero-Breite: dasselbe Raster wie der Hero */
.sw360-ls .sw360-ls__box {
  width: 100%; max-width: var(--sw-cw);
  margin-left: auto; margin-right: auto;
  padding-left: var(--sw-px); padding-right: var(--sw-px);
}

/* ---------- Kopf ---------- */
.sw360-ls__head { max-width: 760px; margin: 0 0 clamp(48px, 8vh, 110px); }
/* Eyebrow-Pille mit Durchlauftext (einheitlich über alle Module) */
.sw360-ls .sw360-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(16px, 2.4vw, 24px); padding: 9px 18px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: var(--radius-pill, 999px); line-height: 1; max-width: 100%; color: var(--dark, #252634); }
.sw360-ls .sw360-eyebrow__vp { overflow: hidden; display: flex; align-items: center; width: clamp(116px, 15vw, 168px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.sw360-ls .sw360-eyebrow__track { display: inline-flex; align-items: center; width: max-content; white-space: nowrap; animation: sw360-eb-marquee 9s linear infinite; }
.sw360-ls .sw360-eyebrow__t { display: inline-flex; align-items: center; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; transform: translateY(3.5px); }
.sw360-ls .sw360-eyebrow__d { width: 6px; height: 6px; border-radius: 50%; background: var(--primary, #3bdc77); margin: 0 1.4em; flex: 0 0 auto; }
.sw360-ls .sw360-eyebrow__w { display: inline-block; }
.sw360-ls.bg-dark .sw360-eyebrow, .sw360-ls.on-dark .sw360-eyebrow { color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.sw360-ls.bg-dark .sw360-eyebrow__t, .sw360-ls.on-dark .sw360-eyebrow__t { color: #fff; }
.sw360-ls .sw360-eyebrow:hover .sw360-eyebrow__track { animation-play-state: paused; }
@keyframes sw360-eb-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sw360-ls .sw360-eyebrow__track { animation: none; transform: none; } .sw360-ls .sw360-eyebrow__vp { width: auto; -webkit-mask-image: none; mask-image: none; } }
/* Eyebrow blendet mit dem Kopf-Wrapper ein - darf selbst NIE auf opacity:0 haengenbleiben (Schutz vor geleakter .sw360-eyebrow{opacity:0}-Reveal-Regel im kombinierten CSS). */
.sw360-ls .sw360-eyebrow { opacity: 1; transform: none; }
.sw360-ls__title {
  margin: 0 0 clamp(20px, 3vw, 32px); letter-spacing: -0.02em; line-height: 1.04;
  /* Lichtbloom: H2 in Ink, weicher grün-cyaner Schein folgt dem Cursor */
  --lb-base: var(--sw-ink, #252634);
  background-image: radial-gradient(circle var(--lb-r, 290px) at var(--lb-x, -999px) var(--lb-y, -999px), #3bdc77 0%, #5dc1cb 50%, var(--lb-base) 94%);
  -webkit-background-clip: text; background-clip: text;
  color: var(--lb-base); -webkit-text-fill-color: transparent;
}
.sw360-ls.bg-dark .sw360-ls__title, .sw360-ls.on-dark .sw360-ls__title { --lb-base: #fff; }
@media (hover: none) { .sw360-ls__title { background-image: none; -webkit-text-fill-color: var(--lb-base); } }
.sw360-ls__intro p { margin: 0 0 0.8em; }
.sw360-ls__intro p:last-child { margin-bottom: 0; }

/* ---------- Pin-Stapel: jede Gruppe = vollbreites Panel ---------- */
.sw360-ls__stack { position: relative; }

.sw360-ls__group {
  position: relative;
  background: #fff;
  border-top-left-radius: clamp(26px, 3vw, 48px);
  border-top-right-radius: clamp(26px, 3vw, 48px);
  /* weicher Schatten an der Oberkante: zeichnet die Karte nach, wenn die
     nächste hochkommt (sonst wäre weiss auf weiss nicht sichtbar) */
  box-shadow: 0 -24px 50px rgba(37, 38, 52, 0.12);
}
/* erste Leistungscard ohne Oberkanten-Schatten – darüber ist nichts, das er nachzeichnen müsste */
.sw360-ls__stack .sw360-ls__group:first-child { box-shadow: none; }

/* Gepinntes Durchscrollen (Stapel) */
.sw360-ls__stack.is-pinned .sw360-ls__group {
  position: sticky; top: 0;
  min-height: 100vh;
}

/* Inhalt in Hero-Breite, vertikal zentriert */
.sw360-ls__ginner {
  width: 100%; max-width: var(--sw-cw); min-height: inherit;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 100px) var(--sw-px) clamp(72px, 12vh, 140px);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(34px, 6vw, 96px);
  align-items: center;
}
.sw360-ls__content { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sw360-ls__media { position: relative; align-self: stretch; }
/* Zickzack: Bild nach links */
.sw360-ls__group--flip .sw360-ls__content { order: 2; }
.sw360-ls__group--flip .sw360-ls__media { order: 1; }

/* ---------- Milchglas-Karte unten auf dem Bild (Nummer + H3 + Lead) ---------- */
.sw360-ls__glass {
  position: absolute; left: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px);
  bottom: clamp(14px, 1.6vw, 22px);
  padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  color: #fff; will-change: transform, opacity;
}
.sw360-ls__glasshead {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 16px); margin-bottom: clamp(8px, 1.2vw, 14px);
}
.sw360-ls__num {
  font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1;
  color: var(--sw-green); letter-spacing: -0.02em;
}
.sw360-ls__gicon {
  display: inline-flex; width: 44px; height: 44px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.18);
  align-items: center; justify-content: center;
}
.sw360-ls__gicon svg { width: 24px; height: 24px; stroke: #fff; fill: none; }
.sw360-ls__gtitle { margin: 0; letter-spacing: -0.015em; line-height: 1.08; color: #fff; }
.sw360-ls__gintro { color: rgba(255, 255, 255, 0.92); }
.sw360-ls__gintro p { margin: 0 0 0.6em; }
.sw360-ls__gintro p:last-child { margin-bottom: 0; }

/* ---------- Akkordeon (H4-Punkte) ---------- */
.sw360-ls__items { margin-top: 0; }
.sw360-ls__item {
  border-top: 1px solid color-mix(in srgb, var(--sw-ink) 12%, transparent);
}
.sw360-ls__item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--sw-ink) 12%, transparent); }

.sw360-ls__sum {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  padding: clamp(16px, 2vw, 22px) 2px;
  cursor: pointer; list-style: none; user-select: none;
}
.sw360-ls__sum::-webkit-details-marker { display: none; }
.sw360-ls__iic {
  display: inline-flex; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 10px; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sw-ink) 6%, transparent);
  transition: background .25s ease;
}
.sw360-ls__iic svg { width: 21px; height: 21px; stroke: var(--sw-ink); fill: none; }
.sw360-ls__ititle { margin: 0; letter-spacing: 0; line-height: 1.25; }
.sw360-ls__chev {
  display: inline-flex; width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--sw-ink) 20%, transparent);
  color: var(--sw-ink); transition: transform .3s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.sw360-ls__chev svg { width: 14px; height: 14px; }
.sw360-ls__item[open] .sw360-ls__chev { transform: rotate(180deg); background: var(--sw-green); border-color: var(--sw-green); color: var(--sw-ink); }
.sw360-ls__item[open] .sw360-ls__iic { background: var(--sw-green); }
.sw360-ls__sum:hover .sw360-ls__chev { border-color: var(--sw-green); color: var(--sw-green); }

.sw360-ls__itext {
  padding: 0 2px clamp(18px, 2.4vw, 26px) 52px;
  opacity: 0.86; max-width: 60ch;
}
.sw360-ls__itext p { margin: 0; }
/* Sanftes Aufklappen (moderne Browser; ältere ignorieren es) */
@supports (interpolate-size: allow-keywords) {
  .sw360-ls { interpolate-size: allow-keywords; }
  .sw360-ls__item::details-content {
    height: 0; overflow: hidden; opacity: 0;
    transition: height .38s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, content-visibility .38s allow-discrete;
  }
  .sw360-ls__item[open]::details-content { height: auto; opacity: 1; }
}

/* ---------- Hinweis-Box (Beispiel / Faustregel) — schlichte Ink-Karte ---------- */
.sw360-ls__callout {
  position: relative; overflow: hidden;
  margin-top: clamp(26px, 4vw, 40px);
  padding: clamp(20px, 2.6vw, 28px) clamp(22px, 2.8vw, 30px);
  border-radius: 18px;
  background: var(--sw-ink, #252634); color: #fff;
  box-shadow: 0 18px 40px rgba(37, 38, 52, 0.18);
}
.sw360-ls__callout-label {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sw-green); margin: 0 0 10px;
}
.sw360-ls__callout-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sw-green);
}
.sw360-ls__callout-tx { position: relative; z-index: 1; }
.sw360-ls__callout-tx p { margin: 0; font-weight: 500; color: rgba(255, 255, 255, 0.92); }

/* ---------- Bild: füllt die volle Panel-Höhe ---------- */
.sw360-ls__img {
  position: relative;
  width: 100%; height: 100%; min-height: clamp(320px, 58vh, 760px);
  border-radius: 30px; overflow: hidden;
  background-size: cover; background-position: center;
}
.sw360-ls__img::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(37, 38, 52, 0) 55%, rgba(37, 38, 52, 0.28) 100%),
    radial-gradient(120% 80% at 85% 10%, rgba(93, 193, 203, 0.14) 0%, rgba(93, 193, 203, 0) 50%);
}
.sw360-ls__img--ph {
  background:
    radial-gradient(120% 90% at 28% 16%, rgba(93, 193, 203, 0.20), transparent 55%),
    linear-gradient(135deg, #2b322e 0%, #39413a 55%, #2a2f2c 100%);
}

/* ---------- Hell auf dunklem Hintergrund ---------- */
.sw360-ls.bg-dark, .sw360-ls.bg-primary, .sw360-ls.text-white { color: #fff; }
.sw360-ls.text-white .sw360-ls__gicon svg,
.sw360-ls.text-white .sw360-ls__iic svg,
.sw360-ls.bg-dark .sw360-ls__gicon svg,
.sw360-ls.bg-dark .sw360-ls__iic svg { stroke: #fff; }
.sw360-ls.text-white .sw360-ls__chev,
.sw360-ls.bg-dark .sw360-ls__chev { color: #fff; }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 900px) {
  /* Mobile: gleicher Pin-Stapel, einspaltig (Bild als Banner oben, Inhalt darunter) */
  .sw360-ls__ginner {
    grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px);
    padding: clamp(28px, 5vh, 56px) var(--sw-px) clamp(56px, 9vh, 96px);
    align-items: start; align-content: start;
  }
  .sw360-ls__group--flip .sw360-ls__content,
  .sw360-ls__content { order: 2; }
  .sw360-ls__group--flip .sw360-ls__media,
  .sw360-ls__media { order: 1; align-self: auto; }
  /* höheres Bild, damit die Milchglas-Karte (H3 + Lead) gut draufpasst */
  .sw360-ls__img { height: auto; min-height: 0; aspect-ratio: 4 / 5; }
  .sw360-ls__itext { padding-left: 0; }
}
@media (max-width: 560px) {
  .sw360-ls__sum { grid-template-columns: auto 1fr auto; gap: 10px; }
  .sw360-ls__img { aspect-ratio: 3 / 4; }
}

/* ==========================================================================
   REVEAL beim Reinscrollen
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Reveal NICHT auf .sw360-ls__group (transform bricht position:sticky),
     stattdessen auf den Inhalt im Panel. */
  .sw360-ls__head, .sw360-ls__ginner {
    opacity: 0; transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  }
  .sw360-ls__head.is-in, .sw360-ls__group.is-in .sw360-ls__ginner { opacity: 1; transform: none; }
}

/* Reduced Motion: kein Pinnen */
@media (prefers-reduced-motion: reduce) {
  .sw360-ls__stack.is-pinned .sw360-ls__group { position: relative; min-height: 0; }
}