/* ============================================================
   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: none; font-size: 16px; line-height: 1.625; color: rgba(52, 51, 60, .8); }
/* ---------- Abschnitte allgemein ---------- */
.lst-section { padding: 80px 0; overflow-x: clip; } /* Deko-Block ragt bei 1024 px sonst 8 px heraus */
@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; margin-top: 40px;
}
@media (min-width: 768px) { .lst-zweifel__karte { padding: 48px; } }
/* Unter dem Kasten steht ein zweites, flaches Foto. Damit enden beide Spalten
   auf derselben Linie, ohne dass zwischen Text und Kasten Luft entsteht
   (Kundenwunsch 21.09.2026, nachdem der erste Versuch mit nach unten
   geschobenem Kasten nicht gefiel). */
.lst-zweifel__bild--klein { margin-top: 24px; aspect-ratio: 16 / 7; }
@media (min-width: 1024px) {
  .lst-zweifel__grid { align-items: stretch; }
  .lst-zweifel__grid > div:first-child { display: flex; flex-direction: column; }
  .lst-zweifel__bild--klein { aspect-ratio: auto; flex: 1 1 auto; min-height: 170px; }
}
/* ---------- Leistungen in vier Themenbändern ----------
   Je Gruppe ein großes Foto (Seiten wechseln) und darunter die Leistungen als
   Überschrift plus Text. Vorstufen (Balkenliste, Akkordeon, Kartenraster) waren
   dem Kunden zu unruhig bzw. zu eintönig (18.09.2026). */
.lst-gruppen { margin-top: 48px; display: flex; flex-direction: column; gap: 56px; }
@media (min-width: 1024px) { .lst-gruppen { margin-top: 64px; gap: 96px; } }
.lst-gruppe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 1024px) {
  .lst-gruppe { grid-template-columns: 5fr 7fr; gap: 56px; align-items: stretch; }
  /* Gedrehte Bänder: Bild rechts, aber die Textspalte bleibt die breite.
     Vorher lagen 7fr beim Bild und 5fr beim Text – der Text stand dort in einer
     schmalen Spalte und das Bild wirkte übergroß. */
  .lst-gruppe--gedreht { grid-template-columns: 7fr 5fr; }
  .lst-gruppe--gedreht .lst-gruppe__bild { order: 2; }
}
.lst-gruppe__bild { position: relative; overflow: hidden; border-radius: 32px; aspect-ratio: 4 / 3; }
/* Ab 1024 px richtet sich die Bildhöhe nach dem Text daneben (Kundenwunsch
   21.09.2026: vorher war das Bild bei kurzen Bändern deutlich länger als der
   Text). Das Bild selbst liegt absolut im Rahmen und steuert die Zeilenhöhe
   nicht mit; min-height fängt sehr kurze Bänder ab. */
@media (min-width: 1024px) {
  .lst-gruppe__bild { aspect-ratio: auto; height: 100%; min-height: 420px; }
}
.lst-gruppe__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lst-gruppe__nr { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #f59b00; }
.lst-gruppe__titel {
  margin: 10px 0 0; font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 700;
  line-height: 1.1; text-transform: uppercase; letter-spacing: -.01em; color: #fff;
}
.lst-gruppe__unter { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.lst-posten { margin-top: 32px; scroll-margin-top: 110px; }
.lst-posten__titel { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: #fff; }
.lst-posten__titel::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px;
  border-radius: 3px; background: #f59b00; vertical-align: .09em;
}
.lst-posten__text {
  margin: 10px 0 0; max-width: 44rem; font-size: 16px; line-height: 1.7;
  color: rgba(255, 255, 255, .85);
}

/* ---------- 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; }
}


/* ---------- Abschlussband: „Sie suchen eine Steuerkanzlei?“ ----------
   Randlos über die volle Breite, wie auf der Serviceseite. */
.lst-band { position: relative; isolation: isolate; overflow: hidden; }
.lst-band img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; z-index: -2; }
.lst-band__schleier { position: absolute; inset: 0; z-index: -1; background: rgba(52, 51, 60, .8); }
.lst-band__inhalt { padding-top: 80px; padding-bottom: 80px; text-align: center; color: #fff; }
@media (min-width: 768px) { .lst-band__inhalt { padding-top: 120px; padding-bottom: 120px; } }
.lst-band__h2 { color: #fff; margin: 0 auto 24px; max-width: 56rem; }
.lst-band__text { margin: 0 auto; max-width: 44rem; font-size: 18px; line-height: 1.6; color: #fff; }
@media (min-width: 768px) { .lst-band__text { font-size: 20px; } }

/* Handy: festes Seitenverhältnis schnitt den Button ab (Review 18.09.2026).
   Ab 768 px stehen die zwei Karten nebeneinander und sind dann nur ~350 px
   breit – 590/400 war dort zu flach, der Text wurde abgeschnitten (21.09.2026).
   Erst ab 1024 px ist die Karte breit genug für das feste Verhältnis. */
@media (max-width: 1023px) {
  .lst-zielgruppe { aspect-ratio: auto; min-height: 420px; }
}