/* ============================================================
   Leistungen — seitenspezifische Abschnitte
   Header, Kontaktbereich und Footer kommen aus /css/original.css,
   damit sie mit den anderen Seiten identisch bleiben. Alles
   Übrige steht hier, mit eigenem Namensraum "lst-".
   ============================================================ */

.lst-container { width: 100%; max-width: 1312px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 768px) { .lst-container { padding-inline: 32px; } }

/* ---------- Hero ---------- */
.lst-hero { position: relative; isolation: isolate; overflow: hidden; background: #34333c; }
@media (min-width: 1024px) { .lst-hero { min-height: 880px; } }
.lst-hero__bg { position: absolute; inset: 0; z-index: -10; }
.lst-hero__bg img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center; }
.lst-hero__schleier { position: absolute; inset: 0; background: rgba(52, 51, 60, .45); }
.lst-hero__blau {
  pointer-events: none; position: absolute; right: -64px; bottom: 0;
  height: 380px; width: 460px; border-radius: 32px; background: #3f6780; display: none;
}
@media (min-width: 1024px) { .lst-hero__blau { display: block; } }
.lst-hero__inhalt { padding-top: 150px; padding-bottom: 56px; width: 100%; }
@media (min-width: 1024px) { .lst-hero__inhalt { padding-top: 400px; padding-bottom: 96px; } }
.lst-hero__karte-wrap { position: relative; max-width: 900px; }
.lst-hero__deko {
  pointer-events: none; position: absolute; left: -24px; top: -130px;
  height: 195px; width: 180px; border-radius: 32px;
  background-image: linear-gradient(150deg, #ffd50c 0%, #ff6c01 100%);
}
@media (min-width: 768px) { .lst-hero__deko { left: -48px; } }
@media (min-width: 1024px) {
  .lst-hero__deko { left: -104px; top: -210px; height: 285px; width: 255px; }
}
.lst-hero__karte {
  position: relative; border-radius: 32px; background: #fff; padding: 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
@media (min-width: 768px) { .lst-hero__karte { padding: 48px; } }
.lst-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #34333c; margin: 0;
}
@media (min-width: 768px) { .lst-kicker { font-size: 14px; } }
.lst-hero__h1 {
  margin: 20px 0 0; font-weight: 700; text-transform: uppercase;
  line-height: 1.1; letter-spacing: -.01em; color: #34333c;
  font-size: clamp(1.6rem, 6.4vw, 3.25rem);
  hyphens: auto;
  overflow-wrap: break-word;
}
.lst-hero__text { margin: 24px 0 0; max-width: 36rem; font-size: 16px; line-height: 1.625; color: rgba(52, 51, 60, .8); }

/* ---------- Abschnitte allgemein ---------- */
.lst-section { padding: 80px 0; }
@media (min-width: 768px) { .lst-section { padding: 112px 0; } }
.lst-section--hell { background: #f4f4f4; }
.lst-section--dunkel { background: #34333c; color: #fff; }
.lst-section--weiss { background: #fff; }

.lst-h2 {
  font-weight: 700; text-transform: uppercase; line-height: 1.15;
  letter-spacing: -.005em; word-spacing: .05em; color: #34333c;
  font-size: clamp(1.6rem, 5.6vw, 3.5rem); margin: 0;
  hyphens: auto; overflow-wrap: break-word;
}
.lst-section--dunkel .lst-h2 { color: #fff; }
.lst-akzent {
  display: inline-block; font-style: italic;
  background: linear-gradient(to right, #ffd80c 0%, #ff8b04 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .15em; margin-right: -.05em;
}
.lst-fliess { font-size: 16px; line-height: 1.625; color: rgba(52, 51, 60, .8); margin: 0; }
.lst-section--dunkel .lst-fliess { color: rgba(255, 255, 255, .8); }

/* ---------- „Im Zweifel fühlen wir uns zuständig." ---------- */
.lst-zweifel__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
@media (min-width: 1024px) {
  .lst-zweifel__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
}
.lst-zweifel__bild { position: relative; overflow: hidden; border-radius: 32px; aspect-ratio: 610 / 620; }
.lst-zweifel__bild img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.lst-zweifel__karte {
  border-radius: 32px; background: #98979f; color: #fff;
  padding: 40px; font-size: 16px; line-height: 1.625;
}
@media (min-width: 768px) { .lst-zweifel__karte { padding: 48px; } }
@media (min-width: 1024px) { .lst-zweifel__karte { margin-top: 96px; } }

/* ---------- Leistungs-Akkordeon ---------- */
.lst-leistungen__grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 56px; }
@media (min-width: 1024px) {
  .lst-leistungen__grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
}
/* Linke Spalte bleibt beim Scrollen stehen, bis alle Karten rechts
   durchgelaufen sind. Der sticky-Versatz berücksichtigt den 76-px-Header. */
.lst-liste-spalte { position: relative; }
@media (min-width: 1024px) {
  .lst-liste-spalte { position: sticky; top: 100px; align-self: start; }
}
.lst-liste { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) {
  .lst-liste { gap: 12px; max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: none; }
  .lst-liste::-webkit-scrollbar { display: none; }
  .lst-pille { padding-top: 16px; padding-bottom: 16px; }
}
.lst-pille {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; text-align: left; cursor: pointer;
  border: 0; border-radius: 9999px; padding: 20px 28px;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.3;
  transition: transform .2s ease, filter .2s ease;
}
.lst-pille:hover { transform: translateX(4px); }
.lst-pille__zeichen { position: relative; flex: none; width: 26px; height: 26px; }
.lst-pille__zeichen::before,
.lst-pille__zeichen::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%); transition: transform .3s ease;
}
.lst-pille__zeichen::before { width: 22px; height: 2px; }
.lst-pille__zeichen::after  { width: 2px; height: 22px; }
.lst-pille[aria-current="true"] .lst-pille__zeichen::after { transform: translate(-50%, -50%) scaleY(0); }

.lst-pille--blau   { background: #3f6780; color: #fff; }
.lst-pille--weiss  { background: #fff;    color: #34333c; }
.lst-pille--grau   { background: #98979f; color: #fff; }
.lst-pille--orange { background-image: linear-gradient(90deg, #ffd50c 0%, #ff8b04 100%); color: #fff; }
.lst-pille[aria-current="true"] { filter: brightness(1.1); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }

.lst-karten { display: flex; flex-direction: column; gap: 24px; }
.lst-detail {
  border-radius: 32px; padding: 40px; scroll-margin-top: 100px;
  background: #3f6780; color: #fff;
}
@media (min-width: 768px) { .lst-detail { padding: 48px; } }
.lst-detail__titel { margin: 0 0 12px; font-size: 24px; font-weight: 700; line-height: 1.25; }
.lst-detail__text  { margin: 0; font-size: 16px; line-height: 1.625; color: inherit; opacity: .92; }

/* Jede Karte trägt die Farbe ihres Balkens links */
.lst-detail--blau   { background: #3f6780; color: #fff; }
.lst-detail--weiss  { background: #fff;    color: #34333c; }
.lst-detail--grau   { background: #98979f; color: #fff; }
.lst-detail--orange { background-image: linear-gradient(120deg, #ffd50c 0%, #ff8b04 100%); color: #fff; }

/* ---------- Netzwerk-Collage ---------- */
.lst-netz__text { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
@media (min-width: 1024px) { .lst-netz__text { grid-template-columns: 1fr 1fr; gap: 64px; } }
.lst-collage { position: relative; margin-top: 64px; min-height: 420px; }
@media (min-width: 1024px) { .lst-collage { min-height: 620px; } }
.lst-collage__bild {
  position: relative; z-index: 2; overflow: hidden; border-radius: 32px;
  aspect-ratio: 800 / 490; width: 100%;
}
@media (min-width: 1024px) { .lst-collage__bild { width: 56%; margin-inline: auto; } }
.lst-collage__bild img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.lst-collage__block { position: absolute; border-radius: 32px; display: none; }
@media (min-width: 1024px) { .lst-collage__block { display: block; } }
.lst-collage__block--blau   { background: #3f6780; left: 0;   top: 40px;  width: 380px; height: 360px; z-index: 1; }
.lst-collage__block--grau   { background: #98979f; right: 0;  top: 0;     width: 400px; height: 160px; z-index: 1; }
.lst-collage__block--orange {
  background-image: linear-gradient(150deg, #ffd50c 0%, #ff8b04 100%);
  right: 130px; bottom: 20px; width: 500px; height: 270px; z-index: 3;
}

/* ---------- Für wen wir arbeiten ---------- */
.lst-fuerwen__grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
@media (min-width: 768px) { .lst-fuerwen__grid { grid-template-columns: 1fr 1fr; } }
.lst-zielgruppe {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 32px;
  background: #34333c; aspect-ratio: 590 / 400; display: flex;
}
.lst-zielgruppe img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; z-index: -2; }
.lst-zielgruppe__schleier {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, #3f6780 15%, rgba(63, 103, 128, .75) 60%, rgba(63, 103, 128, .2) 100%);
}
.lst-zielgruppe__inhalt {
  margin-top: auto; padding: 32px; text-align: center; color: #fff; width: 100%;
}
@media (min-width: 768px) { .lst-zielgruppe__inhalt { padding: 40px; } }
.lst-zielgruppe__titel { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.lst-zielgruppe__text  { margin: 0 auto; max-width: 34rem; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .9); }

/* ---------- So arbeiten wir zusammen ---------- */
.lst-zusammen__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .lst-zusammen__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.lst-zusammen__bildwrap { position: relative; }
.lst-zusammen__bild { position: relative; z-index: 2; overflow: hidden; border-radius: 32px; aspect-ratio: 575 / 345; }
.lst-zusammen__bild img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.lst-zusammen__datev {
  position: absolute; z-index: 3; right: 16px; top: 16px;
  display: grid; place-items: center;
  width: 110px; height: 110px; border-radius: 26px; background: #fff; padding: 14px;
}
.lst-zusammen__datev img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .lst-zusammen__datev { right: 24px; top: 24px; width: 132px; height: 132px; }
}
.lst-zusammen__block {
  display: none; position: absolute; z-index: 1; right: -40px; bottom: -40px;
  width: 320px; height: 240px; border-radius: 32px; background: #3f6780;
}
@media (min-width: 1024px) { .lst-zusammen__block { display: block; } }
.lst-zusammen__absatz + .lst-zusammen__absatz { margin-top: 24px; }

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-hidden, .reveal-visible, .reveal-settled { opacity: 1; animation: none; }
}