/* ===========================================================================
   UNSERE LEISTUNGEN
   Aufbau wie bei Imperia: Quellen oben, Estera in der Mitte, Ergebnis unten,
   alles über Pfeile verbunden und beim Scrollen aufgedeckt.

   Estera-Sprache statt Karten mit Schatten:
   — gestochene Haarlinien, die sich selbst zeichnen
   — ein Siegel-Medaillon als Mitte (Prägung, Wachssiegel)
   — eine doppelt gerahmte Kartusche als Ergebnis (Urkunde)
   Gold tritt nur als Haarlinie auf, nie als Fläche.
   =========================================================================== */

/* Zweispaltig: links der Ablauf, rechts ein durchlaufendes Bild über die
   volle Höhe der Section — bis an die Fensterkante, ohne Rand. */
.lst__split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 58.2fr) minmax(0, 41.8fr);
  align-items: stretch;
}

/* Querbild — Anordnung nach der Referenz ausgemessen:
   linke Kante bei 26,5 % der Breite, Breite 46,6 %.
   Rund 29 % seiner Höhe überlappen das Hochbild, 71 % hängen darunter.
   Eckig, ohne Steg, ohne Rahmen — es schiebt sich direkt über das andere Bild. */
.lst__unten {
  position: absolute;
  z-index: 4;
  left: 26.5%;
  bottom: 0;
  transform: translateY(71%);
  width: 46.6%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--navy-800);
}
.lst__unten img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Gleiche Gradation wie das Hochbild — kein wärmerer Ton */
  object-position: 50% 52%;
  filter: saturate(0.32) contrast(1.06) brightness(1.0);
}
@media (max-width: 1100px) { .lst__unten { display: none; } }
/* Freiraum unter den Schritten. Das Querbild hängt an der Unterkante dieses
   Bereichs — ohne diesen Abstand schiebt es sich über die letzten Schritte. */
.lst__content {
  min-width: 0;
  padding-bottom: clamp(10rem, 18vw, 18rem);
}

.lst__side {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--navy-800);
}
.lst__side img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
  filter: saturate(0.32) contrast(1.06) brightness(1.0);
}
/* Abdunklung im unteren Bereich — dort schiebt sich das Querbild darüber.
   Ohne sie stoßen zwei gleich helle Flächen aufeinander und die Schichtung
   ist nicht lesbar. */
.lst__side::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10,25,46,0) 46%, rgba(10,25,46,0.28) 74%, rgba(10,25,46,0.5) 100%);
}

@media (max-width: 1100px) {
  .lst__split { grid-template-columns: 1fr; }
  .lst__side { display: none; }
}

.lst {
  position: relative;
  /* über dem folgenden Abschnitt, damit das überstehende Querbild sichtbar bleibt */
  z-index: 2;
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
  /* Kein Farbwechsel zum Hero — die Seite bleibt ein durchgehendes Papier */
  background: var(--paper-warm);
  padding: clamp(4rem, 10vh, 8rem) 0 clamp(2rem, 5vh, 4rem);
}

/* --- Kopf: nur zwei Zeilen ------------------------------------------------ */
.lst__head {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

/* Kicker zwischen zwei Goldhaarlinien — die einzige Zierform im Kopf */
.lst__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
}
.lst__eyebrow::before,
.lst__eyebrow::after {
  content: '';
  width: clamp(28px, 6vw, 76px);
  height: 1px;
  background: var(--line-gold);
}
.lst__eyebrow span {
  font-size: clamp(0.8rem, 0.86vw, 0.89rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--gold-text);
  white-space: nowrap;
}

.lst__h2 {
  margin-top: clamp(1rem, 2.2vh, 1.6rem);
  font-size: clamp(2.1rem, 3.6vw, 3.6rem);
  line-height: 1.1;
}

/* --- Quellen -------------------------------------------------------------- */
.lst__sources {
  margin: clamp(2.5rem, 6vh, 4.5rem) auto 0;
  padding: 0 var(--gutter);
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
  text-align: center;
}
.lst__sources li {
  position: relative;
  padding-bottom: 0.85em;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.28vw, 1.28rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--ink-black);
}
.lst__sources li::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 46px; height: 1px;
  transform: translateX(-50%);
  background: var(--line-gold);
}


/* --- Der Fluss ------------------------------------------------------------ */
.lst__flow {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.78fr) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: center;
}

.lst__col { display: grid; gap: clamp(1.8rem, 4.5vh, 3.4rem); }
.lst__col--right { text-align: right; }

.lst__item { position: relative; padding-left: 3.2rem; }
.lst__col--right .lst__item { padding-left: 0; padding-right: 3.2rem; }

/* Römische Ziffer in einem Haarlinien-Ring — greift das Siegel in der
   Mitte auf und bindet die Schritte optisch daran. */
.lst__num {
  position: absolute;
  top: -0.1em;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.05rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line-gold);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: var(--gold-text);
}
.lst__col--right .lst__num { left: auto; right: 0; }

.lst__title {
  position: relative;
  display: inline-block;
  padding-bottom: 0.42em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.75vw, 1.75rem);
  line-height: 1.2;
  color: var(--ink-black);
}
/* Feine Linie unter dem Titel — zieht beim Aufdecken mit auf */
.lst__title::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-soft) 0.1s;   /* 1 s -> 0,6 s, P0 01.09.2026 */
}
.lst__col--right .lst__title::after { transform-origin: right; }
[data-seen='true'] .lst__title::after { transform: scaleX(1); }
.lst__txt {
  margin-top: 0.75em;
  font-size: clamp(0.98rem, 1.14vw, 1.14rem);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 34ch;
  text-wrap: pretty;
}
.lst__col--right .lst__txt { margin-left: auto; }

/* --- Mittelachse ---------------------------------------------------------- */
.lst__axis {
  position: relative;
  align-self: stretch;
  display: grid;
  align-content: center;
  color: rgba(16, 41, 73, 0.3);
}
.lst__axis-inner { position: relative; width: 100%; }
.lst__axis svg { width: 100%; height: auto; overflow: visible; display: block; }

/* Linien zeichnen sich beim Scrollen selbst */
/* 1,4 s -> 0,6 s, Versatz halbiert — Optimierungsbriefing 01.09.2026, P0.
   site.js schreibt --d als Vielfaches von 120; hier 0,5 ms je Einheit,
   also 60 ms Staffel. */
[data-lines] path {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 0.6s var(--ease-soft) calc(var(--d, 0) * 0.5ms);
}
[data-drawn='true'] path { stroke-dashoffset: 0; }
/* Die Pfeilspitze selbst darf nie gestrichelt werden */
marker path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }

/* --- Siegel-Medaillon ----------------------------------------------------- */
.lst__seal {
  position: absolute;
  /* Schnittpunkt der Linien liegt bei y=275 von 660 Einheiten = 41,7 % */
  top: 41.7%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: clamp(112px, 12vw, 148px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper-warm);
  /* Doppelring wie eine Prägung: außen Navy-Haarlinie, innen Gold */
  box-shadow:
    0 0 0 1px rgba(16, 41, 73, 0.22),
    0 0 0 7px var(--paper-warm),
    0 0 0 8px rgba(168, 135, 79, 0.55);
  opacity: 0;
  /* 0,9 s nach 0,85 s -> 0,5 s nach 0,2 s — Optimierungsbriefing 01.09.2026,
     P0. Das Siegel steht auf keiner Seite mehr im Markup; die Regel ist
     nur noch Rueckweg. */
  transition: opacity 0.5s var(--ease-soft) 0.2s,
              transform 0.5s var(--ease-soft) 0.2s;
}
[data-drawn='true'] .lst__seal {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.lst__seal-ring { display: grid; place-items: center; text-align: center; }
.lst__seal-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--navy-800);
}
.lst__seal-sub {
  margin-top: 0.55em;
  font-family: var(--font-wordmark-sub);
  font-size: 0.5rem;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --- Pfeil zum Ergebnis --------------------------------------------------- */
.lst__outflow {
  width: 200px;
  margin: 0 auto;
  color: rgba(16, 41, 73, 0.3);
}
.lst__outflow svg { display: block; width: 100%; height: clamp(60px, 8vh, 110px); }

/* --- Ergebnis: kein Kasten, nur Typografie zwischen Goldhaarlinien ------- */
.lst__result {
  margin: 0 auto;
  padding: clamp(1.8rem, 4vh, 3rem) var(--gutter) 0;
  max-width: 900px;
  text-align: center;
}
.lst__result-kicker {
  font-size: clamp(0.78rem, 0.84vw, 0.86rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.lst__result-name {
  position: relative;
  display: inline-block;
  margin-top: clamp(0.9rem, 2vh, 1.4rem);
  padding: clamp(0.9rem, 2vh, 1.4rem) 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.1vw, 3.1rem);
  line-height: 1.14;
  color: var(--ink-black);
  text-wrap: balance;
}
/* Zwei Goldhaarlinien statt eines Rahmens */
.lst__result-name::before,
.lst__result-name::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--line-gold);
}
.lst__result-name::before { top: 0; }
.lst__result-name::after  { bottom: 0; }

.lst__result-anchor {
  margin-top: clamp(0.9rem, 2vh, 1.3rem);
  font-size: clamp(0.74rem, 0.82vw, 0.82rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --- Einlauf beim Scrollen ------------------------------------------------ */
/* AN `.is-ready` GEBUNDEN — 30.08.2026 nachgezogen.
   Vorher stand hier `[data-reveal] { opacity: 0 }` unbedingt. Ohne
   Javascript setzt aber niemand `data-seen`, und dann blieb JEDES so
   ausgezeichnete Element dauerhaft unsichtbar — auf der Startseite unter
   anderem der Kopf der Leistungen und die Kopfzeilen mehrerer Abschnitte.
   `.is-ready` setzt assets/js/site.js als Erstes; die Klasse ist also der
   Nachweis, dass ueberhaupt jemand da ist, der spaeter aufdeckt.
   problem.css und seiten.css binden ihre eigenen Einlaeufe seit jeher so —
   diese Regel hier war die Ausnahme.
   Der Endzustand ist damit der Grundzustand; die Bewegung nimmt ihn nur
   kurz weg. */
.is-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  /* 0,9 s -> 0,5 s, Optimierungsbriefing 01.09.2026 (P0): hoechstens
     400-600 ms, 12-20 px Weg. */
  transition: opacity 0.5s var(--ease-soft), transform 0.5s var(--ease-soft);
}
[data-reveal][data-seen='true'] {
  opacity: 1;
  transform: none;
  /* 0,12 s -> 0,06 s je Stufe — Optimierungsbriefing 01.09.2026, P0
     („kaum Verzoegerung zwischen Elementen"). */
  transition-delay: calc(var(--i, 0) * 0.06s);
}

@media (prefers-reduced-motion: reduce) {
  /* `.is-ready` steht mit im Selektor, sonst verliert diese Regel
     (0,1,0) gegen den Startzustand `.is-ready [data-reveal]` (0,2,0)
     darueber — nachgemessen am 01.09.2026: der Kopf der Kundenstimmen und
     der Zwischen-CTA standen im Ruhemodus bis zum Aufdecken auf Deckkraft
     0. Das Briefing verlangt bei `reduce` die vollstaendige Deaktivierung,
     also: nichts ist je verborgen. */
  [data-reveal],
  .is-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-lines] path { stroke-dashoffset: 0; }
  .lst__seal { opacity: 1; transform: translate(-50%, -50%); }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  /* Aus dem Fächer wird eine Reihe: durchlaufende Achse links,
     alle Leistungen daran aufgereiht. */
  .lst__sources { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; max-width: 620px; }
  .lst__inflow { display: none; }

  .lst__flow {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 620px;
    position: relative;
    padding-left: calc(var(--gutter) + 1.6rem);
    margin-top: clamp(2rem, 5vh, 3rem);
  }
  .lst__flow::before {
    content: '';
    position: absolute;
    left: calc(var(--gutter) + 3px);
    top: 2.1em; bottom: 2.1em;
    width: 1px;
    background: rgba(16, 41, 73, 0.2);
  }
  .lst__axis { display: none; }

  .lst__col { gap: 0; position: relative; }
  .lst__col--right { text-align: left; }
  .lst__col--right .lst__item { padding-left: 3.2rem; padding-right: 0; }
  .lst__col--right .lst__num { left: 0; right: auto; }
  .lst__col--right .lst__txt { margin-left: 0; }

  .lst__item { padding: 1.5rem 0 1.5rem 3.2rem; }
  .lst__item::before {
    content: '';
    position: absolute;
    left: -1.6rem; top: 1.9em;
    width: 1.1rem; height: 1px;
    background: rgba(16, 41, 73, 0.2);
  }
  .lst__txt { max-width: none; }
  .lst__outflow { width: 120px; }
}

@media (max-width: 620px) {
  .lst__h2 { font-size: clamp(1.85rem, 7.4vw, 2.4rem); }

}




/* ===========================================================================
   DER ABLAUF — senkrechte Linie links, Schritte rechts daneben
   Aufbau nach der Referenz: eine durchgehende Linie als Anker, der Text
   sitzt eingerückt daneben. Keine Kästen.
   =========================================================================== */
.lst__unterzeile {
  margin-top: clamp(1rem, 2.2vh, 1.5rem);
  font-size: clamp(0.8rem, 0.86vw, 0.89rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Linie und Text beginnen exakt dort, wo das Querbild links anfängt.
   Das Bild sitzt bei 26,5 % der Fensterbreite; die Textspalte ist aber nur
   58,2 % breit — also 26,5/58,2 = 45,5 % innerhalb dieser Spalte. */
.ablauf {
  --ablauf-x: 45.5%;
  /* Wie weit Linie und Ziffern nach LINKS aus der Textkante heraushängen */
  --ablauf-versatz: clamp(2.6rem, 4.4vw, 4rem);
  position: relative;
  margin-top: clamp(2.6rem, 7vh, 5rem);
}

/* Die Linie läuft über das Ende der Section hinaus bis zur Unterkante des
   Querbilds. Dessen Überstand beträgt 71 % seiner Höhe; bei 46,6vw Breite
   und 3:2 ergibt das rund 22vw. */
.ablauf__linie {
  position: absolute;
  top: 0.2em;
  /* deutlich weiter rechts als der Seitenrand */
  left: calc(var(--ablauf-x) - var(--ablauf-versatz));
  bottom: 0;   /* wird per Skript exakt auf die Unterkante des Querbilds gesetzt */
  width: 1px;
  background: var(--ink-black);
  opacity: 0.55;
}

.ablauf__liste {
  display: grid;
  /* enger gesetzt, damit alle sechs Schritte OBERHALB der Bildkante enden */
  gap: clamp(1.1rem, 2.4vh, 1.7rem);
  /* Der TEXT beginnt exakt an der linken Kante des Querbilds.
     Die Ziffern hängen nach links aus, die Linie läuft noch weiter links vorbei. */
  margin-left: var(--ablauf-x);
  padding-left: 0;
  /* Zweite Schranke: der Satz muss vor dem Hochbild enden. Ohne sie stößt der
     Fließtext bei 1280 px auf 0 px an die Bildkante. */
  max-width: min(27rem, calc(100% - var(--ablauf-x) - 2rem));
}

.ablauf__schritt {
  position: relative;
}

.ablauf__nr {
  position: absolute;
  top: 0.16em;
  right: calc(100% + clamp(0.7rem, 1.4vw, 1.15rem));
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--gold-text);
}

.ablauf__titel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.42vw, 1.42rem);
  line-height: 1.2;
  color: var(--ink-black);
}
.ablauf__txt {
  margin-top: 0.35em;
  font-size: clamp(0.9rem, 0.98vw, 0.98rem);
  line-height: 1.52;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Ab hier fallen beide Bilder weg — die 45,5 % waren nur deren Kante.
   Der Ablauf rückt an den Seitenrand zurück, die Linie ganz nach außen. */
@media (max-width: 1100px) {
  .ablauf {
    --ablauf-x: clamp(3.4rem, 8vw, 5rem);
    --ablauf-versatz: var(--ablauf-x);
  }
  .ablauf__linie { bottom: 0; }
  .ablauf__liste { max-width: min(38rem, calc(100% - var(--ablauf-x))); }
  /* Der Freiraum trug das Querbild — ohne Bild ist er nur noch ein Loch.
     Der Seitenrand wandert hierher, damit die Linie (left:0) nicht am
     Fensterrand klebt; der Kopf gibt seinen eigenen dafür ab. */
  .lst__content {
    padding: 0 var(--gutter) clamp(1rem, 3vh, 2rem);
  }
  .lst__head { padding-left: 0; padding-right: 0; }
}