/* =========================================================================
   Leistungen (leistungen.html) · Redesign 10/2026 (Look der Startseite)
   Nur Klassen mit Präfix .leist-, nur Tokens aus styles.css (keine Hex-Werte,
   rgba nur als Petrol-Schatten). Globale Komponenten werden nicht umdefiniert,
   nur über Zusatzklassen ergänzt. Bewegung ausschließlich über die data-Bausteine
   (motion.js / main.js); Startzustände stehen unter .mo in styles.css – ohne JS
   oder mit reduzierter Bewegung ist alles sichtbar.
   Aufbau: 1 Hero · 2 01 Konzeptberatung (Prinzipien, Beispiel, Kernaussage) ·
   3 Vier Felder als Sticky-Split (02–05 + 06 360°) · 4 Laufband ·
   5 07 Für wen (gekippte Karten mit Stimmen) · 6 Bestand · 7 Sonderfälle/Druck
   ========================================================================= */

/* Silbentrennung: global in styles.css (hyphenate-limit-chars 10 4 5, brand.md §20.6). */


/* =========================================================================
   1 · PAGE-HERO – Quadranten-Sprungnavigation mit Feld-Stickern
   ========================================================================= */
.leist-hero__line { display: block; }
.leist-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.leist-hero__actions > * { max-width: 100%; }
.leist-hero__aside { width: 100%; }
@media (min-width: 480px) {
  .leist-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
}

/* Sticker statt Mini-Quadrant: unter 768 px links neben Titel/Text (Kachel = Grid), darüber oben */
.leist-hero__stk {
  --s: 44px;
  grid-row: 1 / span 3;
  align-self: start;
  margin-top: 2px;
  transition: transform 0.6s var(--ease-spring);
}
.quadrant__tile:hover .leist-hero__stk,
.quadrant__tile:focus-visible .leist-hero__stk { transform: rotate(0deg) scale(1.08); }
/* Mitte der Bildmarke: weiße Bildmarke im glänzenden Hub (Konzept = alle vier Felder) */
.leist-hero__hub svg {
  width: 46%;
  height: 46%;
  fill: var(--c-white);
  stroke: none;
  filter: drop-shadow(0 1px 0 rgba(var(--shadow-c), 0.3));
}
@media (min-width: 768px) {
  .leist-hero__stk { --s: 56px; margin: 0 0 var(--space-3); }
}
/* 1024–1279: Text oben links, Quadrant darunter rechtsbündig – eine Diagonale in
   Pfeilrichtung der Marke (nebeneinander wären die Kacheln zu eng für ihre Texte) */
@media (min-width: 1024px) {
  .leist-hero .page-hero__inner .page-hero__text { grid-column: 1 / span 8; }
  .leist-hero .page-hero__inner .page-hero__aside { grid-column: 1 / -1; }
  .leist-hero__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .leist-hero__quadrant,
  .leist-hero .quadrant__center-link { width: 100%; max-width: 640px; }
}
/* ab 1280: Text 5 Spalten, Quadrant 7 Spalten */
@media (min-width: 1280px) {
  .leist-hero .page-hero__inner .page-hero__text { grid-column: 1 / span 5; }
  .leist-hero .page-hero__inner .page-hero__aside { grid-column: 6 / -1; }
}


/* =========================================================================
   Gemeinsame Kleinteile
   ========================================================================= */
/* Zwischenüberschrift (echte h3) im Label-Stil: Termina-Versalien mit Viertel-Punkt */
.leist-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  hyphens: manual;
}
.leist-kicker::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 100% 0 0 0;
  background: var(--c-blue-700);
  transform: rotate(180deg);
}
.leist-more { margin-top: var(--space-7); }


/* =========================================================================
   2 · 01 KONZEPTBERATUNG – Prinzipien · Beispiel (Petrol-Karte) · Kernaussage
   ========================================================================= */
.leist-prinzipien {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}
.leist-prinzipien__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-content: start;
  padding: clamp(22px, 2.8vw, 40px);
  border-radius: var(--r-xl);
  background: var(--card-bg);
}
.leist-prinzipien__stk { grid-row: 1 / span 2; }
.leist-prinzipien__title {
  align-self: center;
  font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.leist-prinzipien__item p {
  grid-column: 2;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}
@media (max-width: 479.98px) {
  .leist-prinzipien__item { grid-template-columns: minmax(0, 1fr); }
  .leist-prinzipien__stk { grid-row: auto; margin-bottom: var(--space-3); }
  .leist-prinzipien__item p { grid-column: 1; }
}
/* ab 1024: drei Karten nebeneinander, Sticker oben */
@media (min-width: 1024px) {
  .leist-prinzipien { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leist-prinzipien__item { grid-template-columns: minmax(0, 1fr); }
  .leist-prinzipien__stk { grid-row: auto; margin-bottom: clamp(24px, 3vw, 48px); }
  .leist-prinzipien__item p { grid-column: 1; }
}

/* Beispiel: eine Entscheidung, vier Felder – tiefe Petrol-Karte (Tokens über .on-dark) */
.leist-beispiel { margin-top: clamp(56px, 7vw, 112px); }
.leist-beispiel__card {
  display: grid;
  gap: var(--space-7);
  padding: clamp(24px, 4.4vw, 72px);
  border-radius: var(--r-xl);
  background: var(--gradient-deep);
  box-shadow: var(--shadow-lg);
}
.leist-beispiel__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.leist-beispiel__intro > * { max-width: 100%; }
.leist-beispiel__stk { margin-bottom: var(--space-4); }
.leist-beispiel__title {
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 13em;
}
.leist-beispiel__text {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 30ch;
}
.leist-beispiel__list { display: grid; gap: var(--fuge); }
.leist-beispiel__row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-white) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-on-dark);
}
.leist-beispiel__row dt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  hyphens: manual;
}
.leist-beispiel__row dt .icon-quad { width: 22px; height: 22px; color: var(--c-blue-300); }
.leist-beispiel__row dt .icon-quad path:not(.is-on) { opacity: 0.3; }
.leist-beispiel__row dd {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text);
}
/* Begriffs-Links auf Petrol: helle Punktlinie, Hover weiß (global: Petrol 700 – zu dunkel hier) */
.leist-beispiel__card .term { text-decoration-color: var(--c-blue-300); }
.leist-beispiel__card .term:hover { color: var(--c-white); }
@media (min-width: 1024px) {
  .leist-beispiel__card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
  }
}

/* Kernaussage (Wort-Reveal): vier Feld-Sticker → Bildmarke */
.leist-beispiel__fazit {
  margin-top: clamp(64px, 9vw, 144px);
  max-width: 18.5em;
}
.leist-fazit__set { margin-left: 0.14em; }
.leist-fazit__set .stk + .stk { margin-left: -0.16em; }


/* =========================================================================
   3 · VIER FELDER als Sticky-Split – globale Komponente .split / .quad-mark (styles.css §33);
   hier nur die Maße dieser Seite (schmalere Bildmarken-Spalte)
   ========================================================================= */
.leist-felder__grid {
  --split-aside: clamp(210px, 22vw, 330px);
  --split-main: 1fr;
}
.leist-quad { --quad-w: 320px; }
.leist-felder__list {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}

/* Feld-Karte: groß, rund, weiß / Eis im Wechsel; Sticker klebt oben rechts über der Kante */
.leist-feld {
  --card-bg: var(--c-ice-50);
  position: relative;
  padding: clamp(24px, 4.4vw, 64px);
  border-radius: var(--r-xl);
  background: var(--c-white);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 48px;
}
.leist-feld--ice {
  --card-bg: var(--c-white);
  --accent: var(--c-ink-2);   /* accent auf ice-200 erst ab 18,66 px – Labels hier in ink-2 */
  background: var(--c-ice-200);
  box-shadow: none;
}
.leist-feld--dark {
  --card-bg: color-mix(in srgb, var(--c-white) 6%, transparent);
  background: var(--gradient-deep);
  box-shadow: var(--shadow-lg);
}
.leist-feld__stk {
  position: absolute;
  z-index: 2;
  top: calc(var(--s) * -0.3);
  right: clamp(20px, 4.4vw, 64px);
}
.leist-feld__head { margin-bottom: clamp(28px, 3.6vw, 52px); }
.leist-feld__head .section-head__marker { padding-right: clamp(68px, 9vw, 112px); }
.leist-feld .section-head__title {
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.375rem);
  max-width: 17em;
}
.leist-feld .section-head__lead { max-width: 46ch; }
.leist-feld--ice .section-head__num { background: var(--c-white); }

/* 02 · Absichern: vier Karten 2 × 2 mit Fuge – getrennt gedacht, zusammen geplant */
.leist-cards {
  display: grid;
  gap: var(--fuge);
}
@media (min-width: 640px) {
  .leist-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.leist-feld .card--service,
.leist-feld .leist-ziel {
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  box-shadow: none;
}
.leist-feld .card--service .card__icon,
.leist-feld .leist-ziel .card__icon {
  width: 44px;
  height: 44px;
  padding: 11px;
  margin-bottom: var(--space-2);
  color: var(--c-blue-700);
  background: var(--gloss-sticker-light);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 80%, transparent), 0 8px 16px -10px rgba(var(--shadow-c), 0.55), 0 0 0 1px rgba(var(--shadow-c), 0.06);
}
.leist-feld .card__text { max-width: none; font-size: 0.9875rem; color: var(--text-muted); }
.leist-feld .card__title { font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); }

/* Hinweis zur digitalen Verwaltung: Zeile mit kleinem hellem Sticker */
.leist-digital {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: none;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1.5px var(--c-ice-200);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text);
}
.leist-digital > .icon,
.leist-hinweis > .icon {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: var(--r-sticker);
  color: var(--c-blue-700);
  background: var(--gloss-sticker-light);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 80%, transparent), 0 8px 16px -10px rgba(var(--shadow-c), 0.55), 0 0 0 1px rgba(var(--shadow-c), 0.06);
  stroke-width: 2;
  transform: rotate(-6deg);
}

/* Fuß jedes Feldes: Typische Fragen (Sprechblasen) · So gehen wir vor (Sticker-Nummern) */
.leist-foot {
  display: grid;
  gap: var(--space-7);
  margin-top: clamp(36px, 4.4vw, 64px);
}
@media (min-width: 768px) {
  .leist-foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) clamp(24px, 3.4vw, 56px);
  }
}
.leist-fragen { gap: var(--fuge); }
.leist-fragen > li {
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 1.75rem);
  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs);
  background: var(--card-bg);
  font-size: 0.9875rem;
  line-height: 1.5;
  color: var(--text);
}
.leist-fragen > li::before { left: var(--space-4); top: calc(var(--space-3) + 0.15em); }

.leist-vorgehen { display: grid; gap: var(--space-5); }
.leist-vorgehen > li {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  font-size: 0.9875rem;
  line-height: 1.5;
  color: var(--text);
}
/* gestrichelte Linie von Nummer zu Nummer */
.leist-vorgehen > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 42px;
  bottom: calc(var(--space-5) * -1 + 4px);
  border-left: 2px dashed var(--c-blue-300);
  opacity: 0.6;
}
.leist-vorgehen > li > :last-child { padding-top: 0.45em; }
.leist-vorgehen__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sticker);
  background: var(--gloss-sticker);
  color: var(--c-white);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 50%, transparent), inset 0 -3px 6px rgba(var(--shadow-c), 0.3), 0 8px 14px -8px rgba(var(--shadow-c), 0.55);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  rotate: -5deg;
}
.leist-vorgehen > li:nth-child(2) .leist-vorgehen__num { rotate: 4deg; }
.leist-vorgehen > li:nth-child(3) .leist-vorgehen__num { rotate: -3deg; }

/* 03 · Vorsorgen: zwei Themen nebeneinander */
.leist-themen { display: grid; gap: var(--space-7); }
@media (min-width: 768px) {
  .leist-themen:not(.leist-themen--steps) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 3.4vw, 56px);
  }
}
.leist-thema { display: grid; gap: var(--space-3); align-content: start; }
.leist-thema__icon {
  width: 48px;
  height: 48px;
  padding: 12px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--c-blue-700);
}
.leist-thema__title {
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.leist-thema p { font-size: 1rem; line-height: 1.6; color: var(--text); }

/* 04 · Vermögen: Reihenfolge 1 → 2 → 3 als Sticker-Schritte mit Linie im Logoverlauf */
.leist-themen--steps { position: relative; gap: var(--space-6); }
.leist-themen--steps::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  border-radius: 1px;
  background: var(--gradient-brand-vertical);
}
.leist-themen--steps .leist-thema {
  position: relative;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
}
.leist-themen--steps .leist-thema > :not(.leist-thema__num) { grid-column: 2; }
.leist-thema__num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-sticker);
  background: var(--gloss-sticker);
  color: var(--c-white);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c-white) 50%, transparent), inset 0 -4px 8px rgba(var(--shadow-c), 0.32), 0 10px 18px -8px rgba(var(--shadow-c), 0.55);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  rotate: -4deg;
}
.leist-themen--steps .leist-thema:nth-child(2) .leist-thema__num { background: var(--gloss-sticker-light); color: var(--c-blue-700); rotate: 5deg; }
.leist-themen--steps .leist-thema:nth-child(3) .leist-thema__num { background: var(--gloss-sticker-deep); rotate: -3deg; }
.leist-themen--steps .leist-thema__title { padding-top: 0.9rem; }
@media (min-width: 768px) {
  .leist-themen--steps {
    --leist-steps-gap: clamp(16px, 2.6vw, 40px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--leist-steps-gap);
  }
  /* Linie von Sticker 1 bis Sticker 3 (Mitte zu Mitte) */
  .leist-themen--steps::before {
    left: 28px;
    right: calc((100% - 2 * var(--leist-steps-gap)) / 3 - 28px);
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: var(--gradient-brand);
  }
  .leist-themen--steps .leist-thema { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); }
  .leist-themen--steps .leist-thema > :not(.leist-thema__num) { grid-column: 1; }
  .leist-thema__num { grid-row: auto; margin-bottom: var(--space-3); }
  .leist-themen--steps .leist-thema__title { padding-top: 0; }
}

/* Werkzeug-Karte im Feld: quer (Text links, Vorschau rechts) */
.leist-tool {
  margin-top: clamp(32px, 4vw, 56px);
  background: var(--card-bg);
  box-shadow: none;
}
.leist-feld--ice .leist-tool { box-shadow: var(--shadow-sm); }
.leist-tool .card__title { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.12; letter-spacing: -0.025em; }
.leist-tool .card__preview svg { width: 100%; max-width: 200px; }
.leist-tool .link-arrow { margin-top: auto; }
@media (min-width: 640px) {
  .leist-tool {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.5fr);
    column-gap: clamp(20px, 3.4vw, 48px);
    row-gap: var(--space-3);
    align-items: start;
  }
  .leist-tool > * { grid-column: 1; }
  .leist-tool > .card__preview {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
    justify-self: end;
    width: 100%;
    margin: 0;
  }
  .leist-tool .card__preview svg { margin-left: auto; }
}
/* Vorschau-Grafiken: rein dekorativ, ohne Werte (Muster index.css .home-prev-*) */
.leist-prev-1 { fill: var(--chart-1); }
.leist-prev-2 { fill: var(--chart-2); }
.leist-prev-gap { fill: none; stroke: var(--c-blue-700); stroke-width: 2; stroke-dasharray: 5 5; }
/* Vorschau spielt beim Überfahren einmal (nur mit Bewegung) */
.leist-tool .card__preview rect { transform-box: fill-box; transform-origin: 50% 100%; }
.mo .leist-tool:hover .card__preview :is(.leist-prev-1, .leist-prev-2) { animation: leist-grow 0.9s var(--ease-spring) both; }
@keyframes leist-grow { 0% { transform: scale(1, 0.3); } 100% { transform: none; } }

/* Hinweis „Kosten transparent“ */
.leist-hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: none;
  margin-top: var(--fuge);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1.5px var(--c-ice-200);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text);
}
.leist-hinweis > .icon { padding: 9px; }
.leist-hinweis strong { display: block; margin-bottom: var(--space-1); color: var(--c-ink); }

/* 05 · Immobilien: Ziele links, Fahrplan rechts */
.leist-immo__grid { display: grid; gap: var(--space-6); }
@media (min-width: 900px) {
  .leist-immo__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;
  }
}
.leist-ziele { display: grid; gap: var(--fuge); align-content: start; }

/* Fahrplan in sieben Stationen: Linie im Logoverlauf wächst einmalig (data-steps, main.js) */
.leist-fahrplan-wrap {
  padding: clamp(22px, 2.8vw, 36px);
  border-radius: var(--r-lg);
  background: var(--card-bg);
}
.leist-fahrplan {
  position: relative;
  display: grid;
  gap: var(--space-3);
}
.leist-fahrplan::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 1px;
  background: var(--gradient-brand-vertical);
  transform-origin: top center;
  transition: transform 1.2s var(--ease-out);
}
.leist-fahrplan.is-pending::before { transform: scaleY(0); }
.leist-fahrplan__item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  min-height: 36px;
}
.leist-fahrplan__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: inset 0 0 0 2px var(--c-blue-300);
  color: var(--c-blue-900);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.leist-fahrplan__item:first-child .leist-fahrplan__num,
.leist-fahrplan__item:last-child .leist-fahrplan__num {
  background: var(--c-blue-700);
  box-shadow: none;
  color: var(--c-white);
}
.leist-fahrplan__title {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  hyphens: manual;
}
.leist-immo__actions { margin-top: clamp(28px, 3.4vw, 48px); }

/* 06 · 360°-Betreuung (Petrol-Karte, Kurzfassung) */
.leist-betreuung__text {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: var(--measure-lead);
  color: var(--text);
  hyphens: manual;
}
.leist-betreuung__body > .leist-more { margin-top: var(--space-5); }

/* Unter 1024 px (ohne Bildmarke daneben): Karten etwas weiter an den Rand */
@media (max-width: 599.98px) {
  .leist-felder__list { margin-inline: calc(var(--inset) - var(--gutter)); }
  .leist-feld { padding: var(--space-5) clamp(18px, 5vw, 24px) var(--space-6); }
  .leist-feld__stk { --s: 60px; right: 18px; }
}


/* =========================================================================
   4 · LAUFBAND – Zielgruppen, an die Scrollposition gekoppelt: globale Komponente
   .tape-stage + .tape (styles.css §33) mit den Standardwerten (Eis oben, Weiß unten, −2,6°)
   ========================================================================= */


/* =========================================================================
   5 · 07 FÜR WEN – gekippte Karten (Eis · Petrol · Eis) mit echten Stimmen
   ========================================================================= */
.leist-wer { padding-top: clamp(56px, 6vw, 104px); }
.leist-gruppen {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}
.leist-gruppe {
  --leist-tilt: 0deg;
  gap: var(--space-4);
  padding: clamp(24px, 2.8vw, 40px);
  border-radius: var(--r-xl);
  background: var(--c-ice-50);
  box-shadow: none;
  rotate: var(--leist-tilt);
  transition: rotate 0.7s var(--ease-spring), translate 0.7s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.leist-gruppe:nth-child(1) { --leist-tilt: -1.4deg; }
.leist-gruppe:nth-child(2) { --leist-tilt: 1.1deg; }
.leist-gruppe:nth-child(3) { --leist-tilt: -0.9deg; }
.leist-gruppe:hover,
.leist-gruppe:focus-within { rotate: 0deg; translate: 0 -6px; box-shadow: var(--shadow-lg); }
/* Mit Bewegung: Auftritt (data-stagger="tilt") und Hover teilen sich die Übergänge */
.mo .leist-gruppen[data-stagger] > .leist-gruppe {
  transition: opacity 0.6s var(--ease-out), transform 1s var(--ease-spring), rotate 0.7s var(--ease-spring), translate 0.7s var(--ease-spring), box-shadow 0.3s var(--ease-out);
  transition-delay: calc(var(--stagger-i, 0) * 80ms);
}
.mo .leist-gruppen.is-in > .leist-gruppe:is(:hover, :focus-within) { transition-delay: 0s; }
.leist-gruppe .card__title { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.12; letter-spacing: -0.025em; }
.leist-gruppe .card__text { max-width: none; color: var(--text-muted); }
.card.leist-gruppe--ice { background: var(--c-ice-200); --accent: var(--c-ink-2); }
/* Petrol-Karte: .card setzt helle Tokens – hier bewusst auf dunkel zurückbiegen */
/* Sekundärtext blue-200: ≥ 4,5:1 auch auf der hellsten Stelle des Verlaufs (#335b67, brand.md §22.2) */
.card.leist-gruppe--deep {
  --heading: var(--c-on-dark);
  --text: var(--c-on-dark);
  --text-muted: var(--c-blue-200);
  --link: var(--c-on-dark);
  --link-hover: var(--c-white);
  --focus: var(--c-on-dark-2);
  --em-fill: var(--gradient-em-on-dark);
  background: var(--gradient-brand-card);
  color: var(--c-on-dark);
}

/* „Oft im Spiel“: Sticker der Felder als Stapel */
.leist-gruppe__felder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  max-width: none;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border-radius: var(--r-lg);
  background: var(--c-white);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text);
}
.card.leist-gruppe--deep .leist-gruppe__felder { background: color-mix(in srgb, var(--c-blue-950) 32%, transparent); }
.leist-stack { display: inline-flex; flex: none; padding-left: 4px; }
.leist-stack .stk { --s: 32px; }
.leist-stack .stk + .stk { margin-left: -9px; }
.leist-gruppe__fields { flex: 1 1 9rem; min-width: 0; }
.leist-gruppe__label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.leist-gruppe__voice { margin-top: auto; padding-top: var(--space-4); }
.leist-gruppe--ice .testimonial__full summary { background: var(--c-white); }

/* 768–1023: Karte zweispaltig – links Text und Felder, rechts die Stimme */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .leist-gruppe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-7);
    align-items: start;
  }
  .leist-gruppe > :not(.leist-gruppe__voice) { grid-column: 1; }
  .leist-gruppe__voice { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; }
}
@media (min-width: 1024px) {
  .leist-gruppen { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  /* Zeilen über alle drei Karten ausrichten: Titel · Text · Felder · Stimme */
  @supports (grid-template-rows: subgrid) {
    .leist-gruppen { grid-template-rows: repeat(4, auto); align-items: stretch; }
    .leist-gruppe {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: var(--space-4);
    }
    .leist-gruppe__voice { margin-top: var(--space-2); }
  }
}
@media (max-width: 767.98px) {
  .leist-gruppe:nth-child(n) { --leist-tilt: 0deg; }
  .leist-gruppe:nth-child(odd) { --leist-tilt: -0.6deg; }
  .leist-gruppe:nth-child(even) { --leist-tilt: 0.6deg; }
}


/* =========================================================================
   6 · BESTAND – runde Karte mit Ordner-Sticker (Unterlagen, Bestandsaufnahme)
   ========================================================================= */
.leist-bestand__note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: clamp(24px, 3.6vw, 52px);
  border-radius: var(--r-xl);
}
.leist-bestand__note > .icon {
  width: 64px;
  height: 64px;
  padding: 17px;
  margin: 0;
}
.leist-bestand__body > * + * { margin-top: var(--space-3); }
.leist-bestand__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--heading);
}
.leist-bestand__body p { color: var(--text-muted); }
.leist-bestand__action { max-width: none; }
@media (min-width: 600px) {
  .leist-bestand__note { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6); }
  .leist-bestand__action { grid-column: 2; }
}
@media (min-width: 1024px) {
  .leist-bestand__note { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .leist-bestand__action { grid-column: 3; }
}


/* =========================================================================
   7 · SONDERFÄLLE – Druck (kleine Viewport-Höhe: global in styles.css)
   ========================================================================= */
@media print {
  .leist-feld__stk,
  .leist-beispiel__stk { display: none; }
  .leist-felder__list { display: block; margin: 0; }
  .leist-feld,
  .leist-feld--ice,
  .leist-feld--dark,
  .leist-beispiel__card,
  .card.leist-gruppe--deep,
  .card.leist-gruppe--ice {
    background: var(--c-white);
    box-shadow: none;
  }
  .leist-feld { padding: 0; margin-bottom: 8mm; border-radius: 0; }
  .leist-beispiel__card { padding: 0; border-radius: 0; }
  .leist-beispiel__row { background: none; box-shadow: none; padding-inline: 0; }
  .leist-beispiel__row dt .icon-quad { color: var(--c-blue-700); }
  .leist-gruppe { rotate: 0deg; padding: 0; margin-bottom: 6mm; }
  .leist-gruppen { display: block; }
  .leist-fragen > li,
  .leist-gruppe__felder,
  .card.leist-gruppe--deep .leist-gruppe__felder,
  .leist-fahrplan-wrap,
  .leist-digital,
  .leist-hinweis { background: none; box-shadow: none; }
  /* Petrol-Karte „Unternehmen“: blue-200 ist kein On-dark-Token – im Druck auf Sekundärtext zurück */
  .card.leist-gruppe--deep { --text-muted: var(--c-ink-2); }
  .leist-foot, .leist-cards, .leist-immo__grid { break-inside: auto; }
}