/* ============================================================
   FOUNDER COCKPIT — Leistungsseiten, Fassung 6

   „стиль сетки та сторінок сильно відрізняється від головного
   стилю сайту, адаптуй під головний сайт — він в пріоритеті!!"
   (Danilo, 26.08.2026). Das ist der Satz, der diese Fassung
   ausloest, und er hat recht: die Leistungsseiten waren ein
   ZWEITER Auftritt, kein Teil des ersten.

   Gemessen an der laufenden Startseite, nicht geschaetzt:

     |            | Startseite            | Fassung 5 hier      |
     |------------|-----------------------|---------------------|
     | Ueberschr. | Playfair Display 600/700 | Space Grotesk 600 |
     | zweite Zeile | Playfair 400 KURSIV in Gold #AF997A | gab es nicht |
     | Vorzeile   | Inter 700, .18em, #AF997A | JetBrains Mono  |
     | Satz       | Inter, 18,4 px / 1,6, #5A6280 | Inter kleiner |
     | Grundton   | #FAFAF7               | #FAF7F2             |
     | Schaltfl.  | Goldverlauf 135deg, r=6px | Messing, Pille  |
     | Karte      | weiss, r=32px, Goldhaarlinie, gestufter Schatten | Haarlinie ohne Schachtel |
     | Satzspiegel| `--gutter` clamp(20px,4vw,112px), Container = Schirm | feste 1800 px |
     | Ausrichtung| MITTIG                | linksbuendig        |

   Die Startseite ist also ein mittiger Antiqua-Auftritt mit
   goldenem Kursiv als zweiter Stimme. Diese Fassung uebernimmt
   das vollstaendig. Space Grotesk, Newsreader und JetBrains Mono
   sind abgesetzt — drei Schriften weniger, und die Seite spricht
   endlich mit derselben Stimme wie ihre Startseite.

   Der Satzspiegel kommt ab jetzt aus `layout-width.css`, genau
   wie auf der Startseite. `--l-wrap` gibt es nicht mehr.

   ------------------------------------------------------------
   Was aus Fassung 4 fachlich stehen bleibt (Begruendungen, die
   sich nicht durch einen Stilwechsel erledigen):

   Fassung 3 war richtig gesetzt und trotzdem zu leise: „дуже
   дешевий, на мільярдну компанію не тягне". Das Urteil traf
   nicht die Farben und nicht die Schriften — es traf die Form.
   Jedes Element war eine mittige Schachtel, der Titel stand in
   einer halben Spalte, und die Aufnahme lief oben wie unten ins
   Papier aus, was aus der Ferne wie ein verwaschener Druck
   aussieht statt wie eine Tafel.

   Gemessen an den Referenzen, die Danilo genannt hat (21st.dev,
   editorial heroes von flexnative/abui), machen premium-Seiten
   drei Dinge, die Fassung 3 nicht machte:
     1. Der Titel nimmt das ganze Mass, nicht eine Spalte davon.
        Erst dadurch wird er gross genug, um zu tragen.
     2. Aufnahmen liegen als begrenzte Tafel mit vier sichtbaren
        Ecken — nicht als Band, das an den Raendern verduftet.
     3. Der Kopf haftet, waehrend der Inhalt daran vorbeilaeuft.
        Das ist die einzige Bewegung, die eine Registratur macht.
   Diese Fassung baut genau diese drei um. Farbe, Schrift und
   Lichtmodell bleiben, wie das Musterbuch sie festlegt.

   Fassung 3 — was bleibt:

   Quelle: das Musterbuch der Marke (Artefakt „Founder Cockpit
   Musterbuch", von Danilo am 26.08.2026 als verbindlich
   uebergeben) und die Workshop-Seite, aus der es stammt. Jede
   Zahl hier steht so im Musterbuch — Farbwerte, Schriftgrade,
   Hoehenstufen, Zeitkurven. Nichts ist nachempfunden.

   Rollen der vier Schnitte (das ist der eigentliche Unterschied
   zu Fassung 2, die alles in Inter 800 gesetzt hat):
     Space Grotesk  Auszeichnung — H1, H2, H3, Schaltflaechen
     Newsreader     Antiqua — Einstiegssatz und jede grosse Zahl
     Inter          Fliesstext
     JetBrains Mono Beschriftung, Nummer, Krume

   Was Fassung 2 gekostet hat, und wogegen hier gebaut ist:
   — „фото обрізається з права": die Aufnahme lag als Kaertchen
     mit -480 px Ueberhang. Absicht war Anschnitt, gelesen wurde
     Fehler. Jetzt liegt sie randlos in einem eigenen Band und
     laeuft oben wie unten ins Papier — es gibt keine Kante mehr,
     an der etwas abgeschnitten wirken koennte.
   — „іконки поломані": es gibt keine Symbole mehr. Jede Plakette
     ist eine gezaehlte Zeile. Was nicht existiert, geht nicht
     kaputt.
   — „більше світлих кольорів": Papier traegt rund 80 % der
     Flaeche, Tiefblau genau ein Band, Gold bleibt Linie, Zahl
     und Marke — nie Fliesstext (auf Papier misst es 2,5:1).
   ============================================================ */

body[data-page="service-detail"],
body[data-page="services"] {
  color-scheme: light;

  /* KEINE eigenen Farbwerte mehr. premium.css fuehrt das Musterbuch der
     Marke bereits als Variablen (--bg-page, --gold-dark, --text-muted, …),
     und premium.css laeuft auf JEDER Seite. Fassung 5 hat dieselben Rollen
     ein zweites Mal in eigenen Hexwerten aufgeschrieben — zwei Quellen fuer
     eine Wahrheit, und genau daran driftet ein Auftritt auseinander:
     #FAF7F2 hier gegen #FAFAF7 dort, #6B7085 gegen #5A6280, #A9863F gegen
     #AF997A. Nah genug, um niemandem einzeln aufzufallen, und zusammen
     genug, dass Danilo „сильно відрізняється від головного стилю" sieht.
     Ab jetzt wird verwiesen, nicht wiederholt: aendert die Startseite ihr
     Gold, aendern die Leistungsseiten es mit. Der zweite Wert ist nur der
     Rueckfall, falls premium.css einmal nicht geladen ist. */
  --l-paper:   var(--bg-page, #FAFAF7);
  --l-paper-2: #F4EDDF;                       /* Verlaufsende der Abschnitte */
  --l-paper-3: var(--bg-section, #F4F0E8);
  --l-karte:   var(--bg-white, #FFFFFF);

  --l-navy:      var(--bg-dark, #0C1233);     /* gesperrt */
  --l-navy-soft: #1B2450;

  --l-gold:      var(--gold, #E9CBA1);        /* gesperrt */
  --l-gold-deep: var(--gold-dark, #AF997A);   /* Vorzeile UND Kursivstimme */
  --l-gold-hell: var(--gold-bright, #F8D9AB);
  --l-gold-rand: var(--gold-border, rgba(233,203,161,.30));
  /* Die Goldstimme AUF PAPIER. Gemessen: #AF997A auf #FAFAF7 ergibt 2,62:1 —
     das reisst nicht nur die 4,5:1 fuer Text, sondern auch die 3:1 fuer
     Grossschrift, und die gesperrte Vorzeile ist 11 px hoch. Dieselbe Farbe
     auf Tiefblau ist tadellos, deshalb bleibt --l-gold-deep fuer Linien,
     Punkte und alles auf dunklem Grund; nur GESCHRIEBENES auf Papier nimmt
     diesen Ton: dieselbe Achse, nur tiefer.

     Fassung 11 hat ihn ein zweites Mal nachgezogen. #7B6C55 hielt 4,88:1 auf
     dem HELLEN Papier — aber das getoente Band laeuft unten auf #EFE9DF aus,
     und dort waren es nur noch 4,22:1. Fassung 11 setzt Vorzeile, Schrittziffer
     und Fragezeichen genau dort hin, also zaehlt der dunkelste Grund, nicht
     der hellste. Gemessen jetzt: 4,96:1 auf dem getoenten Band, 5,73:1 auf
     Papier, 5,99:1 auf der weissen Karte. */
  --l-bronze: #70614D;

  --l-ink:      var(--text-h, #0C1233);
  --l-ink-mute: var(--text-muted, #5A6280);

  --l-shadow: 12 18 51;

  /* Groessen an der Startseite gemessen: H1 76,8 px, H2 51,2 px,
     Kursivzeile 72 px (also GROESSER als die fette Zeile darueber),
     Fliesstext 18,4 px / 1,6, Vorzeile 11,5 px mit .18em. */
  /* Die Steigung ist steiler und der Anfang niedriger als in Fassung 5.
     Grund: die Deckel greifen erst ab 1200 px, also bestimmt allein die
     Steigung, was auf dem Telefon steht — und dort standen 41,6 px fett
     ueber 35,2 px kursiv, vier Zeilen Kursive unter zwei Zeilen Fetter.
     Auf 1440 px aendert sich durch die neue Formel nichts (beide Werte
     liegen dort ueber dem Deckel), auf 390 px faellt der Titel auf 37 px
     und die Kursive auf 30 px. */
  --l-h1:    clamp(2.2rem, 1.05rem + 5.2vw, 4.8rem);
  --l-auftakt-em: clamp(1.25rem, .85rem + 1.5vw, 2.6rem);
  --l-h1-em: clamp(1.75rem, .8rem + 4.4vw, 4.5rem);
  --l-h2:    clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
  --l-h2-em: clamp(2.1rem, 1.3rem + 3vw, 4.5rem);
  --l-h3:    clamp(1.15rem, 1.02rem + .5vw, 1.5rem);
  --l-lede:  clamp(1.06rem, 1rem + .4vw, 1.28rem);
  --l-body:  clamp(1rem, .95rem + .28vw, 1.15rem);
  --l-small: clamp(.92rem, .88rem + .18vw, 1.02rem);
  --l-micro: clamp(.68rem, .64rem + .1vw, .72rem);

  /* Drei Schriften weniger: Space Grotesk, Newsreader und JetBrains Mono
     sind abgesetzt. Die Startseite kennt genau zwei, und jede Abweichung
     davon liest sich als fremde Seite. */
  --l-display: var(--font-serif, 'Playfair Display', Georgia, serif);
  --l-serif:   var(--font-serif, 'Playfair Display', Georgia, serif);
  --l-body-f:  var(--font-sans, Inter, system-ui, sans-serif);

  --l-band-y: clamp(3.4rem, 6vw, 7.2rem);
  --l-r:       var(--r-xl, 32px);    /* Kartenradius der Startseite */
  --l-r-klein: var(--r-md, 12px);

  --l-ease-cine: cubic-bezier(.16,.84,.28,1);
  --l-ease-firm: cubic-bezier(.22,1,.36,1);
  --l-d-hover: 160ms;
  --l-d-state: 420ms;

  --l-e1: 0 1px 1px rgb(var(--l-shadow)/.05),
          0 4px 10px -6px rgb(var(--l-shadow)/.20),
          0 18px 40px -28px rgb(var(--l-shadow)/.30);
  --l-e2: 0 1px 2px rgb(var(--l-shadow)/.07),
          0 8px 18px -10px rgb(var(--l-shadow)/.22),
          0 34px 66px -38px rgb(var(--l-shadow)/.40);
  --l-e3: 0 2px 4px rgb(var(--l-shadow)/.10),
          0 14px 30px -14px rgb(var(--l-shadow)/.26),
          0 56px 100px -50px rgb(var(--l-shadow)/.52);
  --l-rim: inset 0 1px 0 rgb(255 255 255/.92),
           inset 0 -1px 0 rgb(var(--l-shadow)/.06);
  --l-brass: linear-gradient(160deg,#E7CDA2 0%,#C9A868 34%,#A9863F 58%,#8A6C31 100%);
  --l-hair: linear-gradient(90deg,transparent,rgb(169 134 63/.55) 18%,
                            rgb(233 203 161/.9) 50%,rgb(169 134 63/.55) 82%,transparent);

  background: var(--l-paper);
  color: var(--l-ink);
}

/* Der Satzspiegel ist kein eigener mehr. `layout-width.css` setzt fuer die
   ganze Seite `--gutter: clamp(20px, 4vw, 112px)` und macht den Container
   zum Sichtfeld; das Lesemass haengt am Fliesstext (`--measure: 68ch`), nicht
   an der Huelle. Fassung 5 hatte dafuer eine zweite, eigene Antwort (feste
   1280/1560/1800 px) — zwei Systeme fuer dieselbe Frage, und deshalb stand
   eine Leistungsseite auf einem 2560er Schirm anders als die Startseite.
   `.lst-wrap` ist ab jetzt nur noch ein zweiter Name fuer `.container`. */
.lst-wrap {
  width: 100%;
  max-width: var(--container, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(20px, 4vw, 112px));
  position: relative; z-index: 2;
}

/* Das Lichtmodell: warmes Schluessellicht oben links, kuehler Fill unten
   rechts, darueber 3,5 % Korn. Zwei feste Ebenen fuer die ganze Seite —
   jeder Verlauf und jeder Schatten darunter gehorcht diesen zwei Lichtern. */
body[data-page="service-detail"] .page-content,
body[data-page="services"] .page-content {
  background: var(--l-paper);
  position: relative;
}
body[data-page="service-detail"] .page-content::before,
body[data-page="services"] .page-content::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 6% -10%, rgb(233 203 161/.20), transparent 58%),
    radial-gradient(90% 80% at 100% 106%, rgb(27 36 80/.10), transparent 60%);
}
body[data-page="service-detail"] .page-content::after,
body[data-page="services"] .page-content::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---- Schrift ------------------------------------------------
   Playfair Display, wie auf der Startseite. Die fette Zeile traegt den
   Gegenstand, die kursive Zeile darunter traegt die Aussage — und sie ist
   GROESSER als die fette (an der Startseite gemessen: 51,2 px fett, 72 px
   kursiv). Das ist die Signatur der Marke; ohne sie liest sich die Seite
   wie ein fremder Auftritt, und genau das war Danilos Befund. */
body[data-page="service-detail"] .lst-band h2,
body[data-page="service-detail"] .lst-band h3,
body[data-page="service-detail"] .lst-final h2,
body[data-page="services"] .lst-band h2,
body[data-page="services"] .lst-band h3,
body[data-page="services"] .lst-final h2 {
  font-family: var(--l-display); font-weight: 700;
  letter-spacing: -.015em; line-height: 1.08; margin: 0;
  text-wrap: balance; color: var(--l-ink);
}

/* Die zweite Stimme: Playfair 400 kursiv in Gold, groesser als die Zeile
   darueber. Sie steht in `<em>` — und premium.css erzwingt `font-style:
   italic !important` auf jedes `em` in einer Ueberschrift, was hier zum
   ersten Mal ERWUENSCHT ist statt bekaempft. */
body[data-page="service-detail"] .lst-band h2 em,
body[data-page="service-detail"] .lst-final h2 em,
body[data-page="services"] .lst-band h2 em,
body[data-page="services"] .lst-final h2 em {
  display: block; margin-top: .12em;
  font-family: var(--l-display) !important;
  font-style: italic !important; font-weight: 400 !important;
  font-size: var(--l-h2-em); line-height: 1.14;
  letter-spacing: -.005em; color: var(--l-gold-deep) !important;
}

/* Bis Fassung 5 stand hier das Gegenteil: `font-style: normal !important`,
   weil premium.css jedes `em` in einer Ueberschrift kursiv setzt und eine
   synthetisch geneigte GROTESK auf 60 px billig aussieht. Mit Playfair ist
   die Kursive echt gezeichnet und die Signatur der Marke — der Riegel faellt
   deshalb weg. Nur die kleine H3-Auszeichnung bleibt aufrecht: eine kursive
   Zwischenzeile auf 1,5 rem waere Zierat ohne Funktion. */
body[data-page="services"] .lst-band h3 em,
body[data-page="service-detail"] .lst-band h3 em {
  font-style: normal !important; font-weight: 700 !important;
  color: var(--l-gold-deep) !important;
}
body[data-page="services"] .lst-anspruch em {
  font-style: normal !important; font-weight: 400 !important;
  color: var(--l-gold-deep) !important;
}
body[data-page="service-detail"] .lst-band h2,
body[data-page="service-detail"] .lst-final h2,
body[data-page="services"] .lst-band h2,
body[data-page="services"] .lst-final h2 {
  font-size: var(--l-h2); line-height: 1.08; max-width: 24ch;
}
body[data-page="service-detail"] .lst-band h3,
body[data-page="services"] .lst-band h3 {
  font-size: var(--l-h3); line-height: 1.2; letter-spacing: -.01em;
  min-width: 0; overflow-wrap: break-word; hyphens: auto;
}

body[data-page="service-detail"] .lst-band p,
body[data-page="services"] .lst-anspruch p,
body[data-page="service-detail"] .lst-final p,
body[data-page="services"] .lst-band p,
body[data-page="services"] .lst-final p {
  font-family: var(--l-body-f); font-size: var(--l-body);
  line-height: 1.62; color: var(--l-ink-mute); margin: 0;
}

/* Vorzeile — exakt die der Startseite: Inter 700, 11,5 px, .18em, Versalien,
   #AF997A, und der kurze Strich DAVOR. Fassung 5 setzte sie in JetBrains
   Mono mit .22em; das ist ein anderes Signal und stammt aus einem anderen
   Auftritt. Mittig, wenn der Abschnitt mittig ist — die Startseite zentriert
   ihre Abschnittskoepfe, und das ist ihr staerkstes Formmerkmal. */
.lst-vorzeile {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: 0;
  font-family: var(--l-body-f); font-weight: 700; font-size: var(--l-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--l-gold-deep);
}
.lst-vorzeile i { display: block; width: 30px; height: 1px;
  background: currentColor; opacity: .7; }
.lst-band--mitte .lst-vorzeile { justify-content: center; }

/* Dieselbe Messung, aber nur fuer die Detailseiten: die Uebersichtsseite
   /pages/services ist stehendes Gut und wird nicht angefasst. Beide Regeln
   stehen weiter oben ohne Seitenbindung; hier bekommt allein die
   Detailseite die lesbare Goldstimme. */
body[data-page="service-detail"] .lst-vorzeile,
body[data-page="service-detail"] .lst-band h3 em { color: var(--l-bronze) !important; }

/* ---- Krume und Wortumbruch --------------------------------
   ACHTUNG, dritter Anlauf: diese beiden Regeln standen zweimal INNERHALB
   des Kopfblocks und sind zweimal mit ihm geloescht worden (Fassung 6 und
   7), weil der Kopf jedesmal als ganzer Block ersetzt wird. Sie gehoeren
   der SEITE, nicht dem Kopf, und stehen deshalb jetzt hier oben bei der
   Schrift — ausserhalb jedes Blocks, der noch einmal fliegen kann. */
.lst-krume {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: var(--l-body-f); font-weight: 600; font-size: var(--l-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--l-ink-mute);
  margin: 0;
}
.lst-krume a { text-decoration: none; color: inherit;
  transition: color var(--l-d-hover) var(--l-ease-firm); }
.lst-krume a:hover { color: var(--l-bronze); }
.lst-krume .sep { opacity: .45; }
.lst-krume [aria-current] { color: var(--l-ink); }

/* scroll-animations.js legt jedes Wort in ein inline-block, und ein
   inline-block bricht nicht in sich selbst — die Erlaubnis muss am WORT
   haengen, nicht am Absatz. */
body[data-page="service-detail"] .sa-word,
body[data-page="services"] .sa-word {
  max-width: 100%; overflow-wrap: break-word; hyphens: auto;
}

.lst-mono { font-family: var(--l-body-f); font-variant-numeric: tabular-nums;
  font-size: var(--l-micro); letter-spacing: .14em; text-transform: uppercase; }

/* Die Antiqua rechnet: eine 700 in Newsreader hat Zeichnung, dieselbe Zahl
   in der Grotesk hat nur Gewicht. */
.lst-zahl {
  font-family: var(--l-serif); font-weight: 500; line-height: .9;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em;
}

body[data-page="service-detail"] :focus-visible,
body[data-page="services"] :focus-visible {
  outline: 2px solid var(--l-gold-deep); outline-offset: 3px; border-radius: 4px;
}

/* ---- Schaltflaechen ----------------------------------------
   Von der Startseite abgelesen: Inter 600, 14 px, .04em, Radius 6 px,
   Polster 14/28, Goldverlauf 135deg #F8D9AB → #E9CBA1 → #AF997A, Text in
   Tiefblau, Schein in Gold. Fassung 5 hatte Pillen (Radius 999) in
   Playfair-Vorlaeufer Space Grotesk — eine Pille neben den eckigen
   Schaltflaechen der Startseite ist sofort als Fremdkoerper zu sehen. */
.lst-btn {
  --btn-y: .875rem; --btn-x: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: var(--btn-y) var(--btn-x); border: 0; border-radius: 6px; cursor: pointer;
  font-family: var(--l-body-f); font-size: .88rem; font-weight: 600;
  letter-spacing: .04em; text-decoration: none; min-height: 48px;
  transition: transform var(--l-d-hover) var(--l-ease-firm),
              box-shadow var(--l-d-hover) var(--l-ease-firm),
              background-color var(--l-d-hover) var(--l-ease-firm);
}
/* Die Hauptschaltflaeche der Marke, Wert fuer Wert wie auf der Startseite. */
.lst-btn--gold {
  position: relative; overflow: hidden; color: var(--l-navy);
  background: linear-gradient(135deg, #F8D9AB 0%, #E9CBA1 50%, #AF997A 100%);
  box-shadow: 0 4px 18px rgb(175 153 122/.32);
}
.lst-btn--gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255/.42), transparent);
  transform: skewX(-18deg); transition: left 620ms var(--l-ease-cine);
}
.lst-btn--gold:hover::after { left: 120%; }
.lst-btn--gold:hover { transform: translateY(-2px);
  box-shadow: 0 8px 28px rgb(175 153 122/.44); }
/* Die Nebenschaltflaeche stand bis Fassung 6 AUF der Aufnahme und war
   deshalb Glas mit heller Kante. In Fassung 7 steht sie auf Papier —
   Glas auf Papier ist ein fast unsichtbarer Knopf. Jetzt: weisse Karte
   mit Haarlinie, dieselbe Materialsprache wie jede andere Karte der
   Seite. Die Fassung fuer dunklen Grund bleibt als `--klar-dunkel`. */
.lst-btn--klar {
  color: var(--l-ink); background: #fff;
  border: 1px solid rgb(12 18 51/.14);
  box-shadow: inset 0 1px 0 rgb(255 255 255/.9), 0 1px 2px rgb(12 18 51/.05),
              0 10px 22px -14px rgb(12 18 51/.30);
}
.lst-btn--klar:hover { transform: translateY(-2px);
  border-color: var(--l-gold-deep); color: var(--l-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255/.9), 0 2px 4px rgb(12 18 51/.07),
              0 18px 34px -18px rgb(12 18 51/.34); }
.lst-btn--klar-dunkel {
  color: #fff; background: rgb(255 255 255/.10);
  border: 1px solid rgb(255 255 255/.34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lst-btn--klar-dunkel:hover { transform: translateY(-2px);
  background: rgb(255 255 255/.18); border-color: var(--l-gold); }
.lst-btn--lg { --btn-y: 1.15rem; --btn-x: 2.2rem; font-size: calc(var(--l-body)*1.02); }

/* ============================================================
   Die Kabine — Fassung 9

   Sechste Zurueckweisung: „дуже дешевий херо повністю з нуля перероби".
   Fassungen 3 bis 8 haben alle dieselbe Bauform variiert — Titel auf
   Papier, Fotostreifen darunter. Das ist die Bauform jeder Vorlage seit
   2014, und kein Schriftgrad und kein Weglassen von Zierat rettet sie.
   Fassung 9 wechselt den Bauplan, nicht die Moebel:

     DIE AUFNAHME IST DIE BUEHNE, NICHT DIE BEILAGE.

   Der Kopf ist ein tiefblauer Raum ueber die volle Hoehe. Die Fotografie
   liegt als Grund darin, in Graustufen gewandelt und mit `mix-blend-mode:
   color` tiefblau eingefaerbt. Der Satz steht IM Bild.

   Warum das Invariante 2 („nur helles Thema") nicht bricht: die Seite
   bleibt hell, der Kopf ist EIN Band — dasselbe Mittel wie im Ablauf und
   im Abschluss-Aufruf. Neu ist nur die Reihenfolge. Der Wechsel dunkel →
   hell beim ersten Scrollen ist der Auftritt, den die Seite nie hatte.

   Nebenwirkung, die ein zweites Problem loest: die Duotonie zwingt alle
   dreizehn Aufnahmen in EINE Gradation. Vorher sahen dreizehn Fotos aus
   wie dreizehn Einkaeufe; eingefaerbt sehen sie aus wie eine Serie.

   Lichtmodell — ausdrueckliche Ausnahme: die einzige Quelle ist das
   Fenster in der Fotografie. Kein goldener Hauch, kein zweiter Verlauf,
   kein Schein. Unten eine Vignette als Boden. Ab dem ersten hellen Band
   gilt wieder das Schluessellicht oben links.
   ============================================================ */
.lst-buehne {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--l-navy); color: #fff;
  padding-top: var(--nav-h, 76px);
  min-height: min(94vh, 940px);
  min-height: min(94svh, 940px);
  display: grid; grid-template-rows: auto 1fr auto;
}

/* ---- Der Grund: Aufnahme, tiefblau eingefaerbt ---------------
   Zwei Schritte. Erst Graustufe — damit dreizehn verschiedene Weissabgleiche
   verschwinden. Dann eine Flaeche Tiefblau im Mischmodus `color`: der nimmt
   Farbton und Saettigung aus der Flaeche und die HELLIGKEIT aus dem Foto.
   Das ist eine echte Duotonie, kein Farbschleier darueber. Faellt der
   Mischmodus aus, bleibt ein abgedunkeltes Graustufenbild unter dem
   Schleier — immer noch richtig, nur ohne Blaustich. */
.lst-buehne__grund { position: absolute; inset: 0; z-index: -2; margin: 0;
  overflow: hidden; background: var(--l-navy); }
.lst-buehne__grund img {
  width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%;
  filter: grayscale(1) contrast(1.12) brightness(.95);
}
.lst-buehne__grund::after {
  content: ''; position: absolute; inset: 0;
  background: var(--l-navy); mix-blend-mode: color;
}

/* Der Schleier. Links dicht (dort steht die Schrift), rechts offen (dort
   ist das Bild zu sehen), unten der Boden. Die Dichte ist nicht nach
   Gefuehl gesetzt: bei α .86 liegt Weiss auf Tiefblau-ueber-Weiss noch bei
   11:1, und weiter rechts als 70 % der Breite reicht kein Satz. */
.lst-buehne::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(96deg, rgb(12 18 51/.95) 0 42%, rgb(12 18 51/.86) 68%,
                           rgb(12 18 51/.44) 100%),
    linear-gradient(180deg, rgb(12 18 51/.60) 0, rgb(12 18 51/0) 26%,
                            rgb(12 18 51/0) 56%, rgb(12 18 51/.82) 100%);
}
/* Korn bei 6 %. Auf Papier waren 3,5 % richtig; eine tiefblaue Flaeche mit
   Verlauf zeigt ohne Korn Streifen (banding) auf jedem zweiten Bildschirm. */
.lst-buehne::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Die Navigationsleiste ueber der Buehne -------------------
   `.site-nav` steht seitenweit auf `rgba(250,250,247,.90)` mit Weichzeichner.
   Ueber Papier ist das richtig — ueber der tiefblauen Buehne mischen sich
   10 % Tiefblau in die Creme, und die Leiste wird grau. Gemessen:
   .9*250 + .1*12 = 226, also ein sichtbar schmutziger Ton direkt neben der
   reinen Wortmarke. Auf DIESEN Seiten deshalb deckend, mit einer goldenen
   Haarlinie als Kante zur Buehne. Kein Wechsel beim Scrollen: `.scrolled`
   springt bei 60 px um, die Buehne ist aber 840 px hoch — der Umschlag
   laege mitten im Kopf. */
body[data-page="service-detail"] .site-nav,
body[data-page="service-detail"] .site-nav.scrolled {
  background: var(--l-paper);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--l-gold-rand);
}

/* ---- Kopfzeile ---------------------------------------------- */
.lst-buehne__zeile { border-bottom: 1px solid rgb(233 203 161/.20); }
.lst-buehne__zeile > .lst-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem); min-height: 56px;
}
.lst-buehne__gattung {
  flex: none; font-family: var(--l-body-f); font-weight: 700;
  font-size: var(--l-micro); letter-spacing: .24em; text-transform: uppercase;
  color: var(--l-gold);
}
/* Nur die Farben der Krume, nicht ihre Form: die Grundregeln stehen oben
   im Schrift-Abschnitt und gehoeren der Seite, nicht diesem Block. */
.lst-buehne .lst-krume { margin: 0; font-size: .68rem; letter-spacing: .1em;
  color: rgb(255 255 255/.55); }
.lst-buehne .lst-krume a:hover { color: var(--l-gold); }
.lst-buehne .lst-krume .sep { opacity: 1; color: rgb(255 255 255/.26); }
.lst-buehne .lst-krume [aria-current] { color: rgb(255 255 255/.88); }

/* ---- Der Satz ----------------------------------------------- */
.lst-buehne__satz {
  align-self: center; display: grid; justify-items: start; min-width: 0;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  padding-block: clamp(3.4rem, 9vw, 7.5rem);
}
body[data-page="service-detail"] .lst-buehne h1 {
  font-family: var(--l-display); font-weight: 500; color: #fff;
  font-size: clamp(2.5rem, 1.05rem + 6vw, 6.2rem);
  line-height: 1.01; letter-spacing: -.03em;
  margin: 0; max-width: 14ch; min-width: 0; text-wrap: balance;
}
body[data-page="service-detail"] .lst-buehne h1 em {
  display: block; margin-top: .42em;
  font-family: var(--l-display) !important;
  font-style: italic !important; font-weight: 400 !important;
  font-size: clamp(1.1rem, .76rem + 1.3vw, 2.1rem);
  line-height: 1.34; letter-spacing: -.002em;
  color: var(--l-gold) !important; max-width: 34ch;
}
/* Deutsche Komposita: `break-word` zaehlt NICHT zur min-content-Breite, ein
   Rasterfeld waechst also auf das ungebrochene Wort und schiebt den Kopf
   ueber den Rand. Es braucht echte Trennung.

   FASSUNG 12: das galt bisher nur unter 700 px — darueber stand hier
   `hyphens: manual` und hat die Trennung, die weiter oben fuer .sa-word
   erlaubt ist, wieder abgeschaltet (gleiche Spezifitaet, spaetere Regel).
   Folge auf 1440 px: „Unternehmensberatung" braucht bei 99 px Schriftgrad
   1015 px, der Kopf ist auf 14ch = 854 px gedeckelt, und weil
   scroll-animations.js jedes Wort in ein `.sa-word` mit `overflow: hidden`
   legt, wurde das Wort nicht umbrochen und nicht ueberhaengend gezeigt,
   sondern GESCHNITTEN. Auf der Seite stand „Unternehmensberat".

   `hyphens: auto` trennt nur, wenn es sonst nicht passt — auf schmalen
   Titeln aendert sich dadurch nichts, lange Komposita brechen an der
   Fugenstelle. Das ist die richtige deutsche Satzweise und war auf dem
   Telefon ohnehin schon in Kraft. */
.lst-buehne h1 .sa-word,
.lst-buehne h1 em { hyphens: auto; }

/* ---- Handlung -----------------------------------------------
   Auf Tiefblau ist die Marken-Schaltflaeche der Startseite richtig: derselbe
   Goldverlauf, derselbe warme Schein, Wert fuer Wert wie im Kopfmenue direkt
   darueber. (Auf Papier war genau dieser Knopf in Fassung 7 zu viel — dort
   stand er neben nichts, hier steht er als einzige helle Flaeche im Raum.) */
.lst-buehne__cta { display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem); }
.lst-verweis {
  font-family: var(--l-body-f); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--l-ink);
  text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid rgb(12 18 51/.26);
  transition: border-color var(--l-d-hover) var(--l-ease-firm),
              color var(--l-d-hover) var(--l-ease-firm);
}
.lst-verweis:hover { color: var(--l-bronze); border-color: var(--l-gold-deep); }
.lst-verweis--hell { color: rgb(255 255 255/.86);
  border-bottom-color: rgb(255 255 255/.34); }
.lst-verweis--hell:hover { color: var(--l-gold); border-bottom-color: var(--l-gold); }

/* ---- Das Pult -----------------------------------------------
   Drei Anzeigezellen ueber die volle Breite, getrennt durch senkrechte
   Haarlinien. Der Inhalt ist NICHT erfunden: es sind genau die drei
   Ueberschriften aus „Ihre Vorteile" weiter unten, mit ihren eigenen
   Uebersetzungsschluesseln. Fassung 7 hat diese Anzeigenreihe mit dreizehn
   leeren Ziffernkaestchen vorgetaeuscht — dies ist dieselbe Form mit
   Bedeutung dahinter, und das ist der ganze Unterschied. */
.lst-buehne__pult {
  border-top: 1px solid rgb(233 203 161/.20);
  /* Eine eigene, flache Flaeche. Ohne sie liegt das Pult auf dem Verlauf der
     Buehne und wird nach rechts und nach oben hin heller — eine Anzeigenreihe
     mit ungleichem Grund liest sich als Zufall, nicht als Geraet. */
  background: rgb(9 13 40/.72);
}
.lst-buehne__pult > .lst-wrap {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none; margin-inline: auto;
}
.lst-buehne__pult li {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr);
  align-items: baseline; gap: .1rem; min-width: 0;
  padding-block: clamp(1.05rem, 2vw, 1.55rem);
  padding-inline: clamp(1rem, 2.2vw, 2rem) clamp(.6rem, 1.6vw, 1.4rem);
  border-left: 1px solid rgb(255 255 255/.10);
  font-family: var(--l-body-f); font-size: .86rem; line-height: 1.35;
  color: rgb(255 255 255/.82); letter-spacing: .01em;
}
.lst-buehne__pult li:first-child { border-left: 0; padding-inline-start: 0; }
.lst-kabine__n {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  color: var(--l-gold); font-variant-numeric: lining-nums tabular-nums;
}

/* ---- Bewegung -----------------------------------------------
   Ein gemeinsamer Start, drei Dauern. KEIN `animation-fill-mode` und KEINE
   `animation-delay`: ohne Fuellung gilt vor und nach dem Lauf der
   ENDzustand — ein eingefrorener Rahmen (Vorschau, Hintergrundtab) zeigt
   den Kopf also richtig statt gar nicht. Mit einer Verzoegerung waere
   dasselbe Verhalten ein sichtbarer Ruecksprung, deshalb entsteht der
   Versatz aus verschiedenen Dauern. */
@media (prefers-reduced-motion: no-preference) {
  .lst-buehne__grund img { animation: lst-ruhe 1800ms cubic-bezier(.22, 1, .36, 1); }
  .lst-buehne__satz > * { animation: lst-heben 900ms cubic-bezier(.22, 1, .36, 1); }
  .lst-buehne__zeile,
  .lst-buehne__pult { animation: lst-linie 700ms cubic-bezier(.22, 1, .36, 1); }
}
@keyframes lst-ruhe  { from { transform: scale(1.045); } to { transform: none; } }
@keyframes lst-heben { from { transform: translateY(16px); opacity: 0; }
                       to   { transform: none; opacity: 1; } }
@keyframes lst-linie { from { opacity: 0; } to { opacity: 1; } }

/* ---- Der Schnitt --------------------------------------------
   Die zweite von vier Aufnahmen der Seite, als Zaesur zwischen zwei
   Textbaendern — hier UNGEFAERBT und auf Papier: der Kopf ist der dunkle
   Raum, der Rumpf ist das helle Dokument. */
.lst-streifen {
  position: relative; margin: 0; width: 100%; overflow: hidden;
  aspect-ratio: 21 / 6; min-height: clamp(220px, 30vh, 420px);
  background: var(--l-navy);
}
.lst-streifen img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: saturate(.94) contrast(1.06) brightness(1.01);
}
.lst-streifen::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(12 18 51/.10) 0%, transparent 18%,
                              transparent 82%, rgb(12 18 51/.14) 100%);
}
.lst-schnitt { position: relative; background: var(--l-paper); }
.lst-schnitt .lst-streifen {
  border-top: 1px solid var(--l-gold-rand);
  border-bottom: 1px solid var(--l-gold-rand);
}

/* ---- Enge Schirme ------------------------------------------- */
@media (max-width: 900px) {
  /* Der Schleier wird gleichmaessig. Gemessen bei 390 px: der Titel fuellt
     94 % der Breite — dort steht der WAAGERECHTE Verlauf nur noch bei α .44,
     und Weiss laege auf einem hellen Fenster im Foto. Ein Verlauf, der nach
     rechts oeffnet, setzt eine Textspalte links voraus; auf einem Telefon
     gibt es keine Spalte, nur die volle Breite. Deshalb hier von oben nach
     unten und dicht. */
  .lst-buehne::before {
    background:
      linear-gradient(180deg, rgb(12 18 51/.82) 0%, rgb(12 18 51/.90) 48%,
                              rgb(12 18 51/.95) 100%);
  }
  /* Volle Hoehe faellt weg: auf einem Telefon ist ein Kopf, der genau bis
     zur Unterkante reicht, ein Kopf ohne sichtbare Fortsetzung. */
  .lst-buehne { min-height: auto; }
  .lst-buehne__pult > .lst-wrap { grid-template-columns: 1fr; }
  .lst-buehne__pult li {
    border-left: 0; border-top: 1px solid rgb(255 255 255/.10);
    padding-inline: 0; padding-block: .85rem;
  }
  .lst-buehne__pult li:first-child { border-top: 0; }
  .lst-schnitt .lst-streifen { aspect-ratio: 3 / 2; min-height: 0; }
}
@media (max-width: 760px) {
  /* Die Krume bricht auf einem Telefon in zwei Zeilen und schiebt die Nummer
     unter sich — eine Kopfzeile, die aussieht wie ein Satzfehler. Sie geht,
     die Gattung bleibt: uebrig ist eine saubere Leiste „01 / 13 … LEISTUNG".
     Fuer die Suche kostet das nichts, die BreadcrumbList steht als JSON-LD
     im Kopf der Seite und ist von der Anzeige unabhaengig. Die Navigation
     darueber fuehrt ohnehin nach „Leistungen" zurueck. */
  .lst-buehne .lst-krume { display: none; }
}
@media (max-width: 560px) {
  .lst-schnitt .lst-streifen { aspect-ratio: 4 / 3; }
  .lst-buehne__cta { gap: 1.1rem; }
  .lst-buehne__cta .lst-btn { width: 100%; }
}

/* ============================================================
   Der Rumpf — Fassung 10: das Dossier

   Fassung 9 hat den Kopf geloest. Dieser Block nimmt sich die restlichen
   sechstausend Pixel vor. Gemessen an der laufenden Seite: 6995 px, neun
   Baender, davon VIER dunkle, und 27 Vorkommen von `border-radius` /
   `box-shadow` im Rumpf.

   Der Befund war nicht „zu wenig Gestaltung", sondern ZWEI MATERIALIEN auf
   einer Seite: der Kopf flach und auf Haarlinie gebaut, der Rumpf mit
   20 px Radius und fuenfstufigem Schlagschatten. Das ist die Sprache der
   weichen Vorlagenkarte, und sie steht direkt unter einem Kopf, der genau
   diese Sprache abgelegt hat.

   Fassung 10 fuehrt EIN Material ueber die ganze Laenge:
     — Radius und Schlagschatten raus (Ausnahme unten begruendet),
     — Tiefblau erscheint GENAU ZWEIMAL statt viermal (Kopf, Abschluss),
     — jede Flaeche ist Papier, jede Kante eine Haarlinie,
     — und die Seite bekommt zum ersten Mal eine Orientierung:
       Registerschiene, Fortschrittslinie, Handbalken.

   Die eine bewusste Ausnahme: die Leistungskarten bleiben Karten. Sie sind
   Wert fuer Wert die Karte der STARTSEITE, und die Startseite ist seit
   Fassung 6 die Referenz (Danilo, 26.08.: „адаптуй під головний сайт — він
   в пріоритеті"). Ein Bauteil, das absichtlich der Hauptseite gleicht, ist
   keine Vorlage.
   ============================================================ */

/* ---- Baender ------------------------------------------------
   Zwei Papiertoene, abwechselnd, mit einem leichten Verlauf: Licht faellt
   oben links, wie auf jedem hellen Teil des Auftritts. Das dunkle Band
   (`--tief`) ist ersatzlos weg — sein Inhalt, der Ablauf, steht jetzt auf
   Papier. Damit erscheint Tiefblau auf der Seite noch zweimal: als Kopf
   und als Abschluss. Viermal war kein Auftritt mehr, sondern eine Farbe. */
.lst-band { position: relative; padding-block: var(--l-band-y); }
.lst-band:not(.lst-band--alt) {
  background: linear-gradient(176deg, #FDFBF7 0%, var(--l-paper) 58%);
}
.lst-band--alt {
  background:
    radial-gradient(64% 52% at 4% 0%, rgb(233 203 161/.14), transparent 60%),
    linear-gradient(176deg, #F6F1E9 0%, var(--l-paper-2) 62%, #EFE9DF 100%);
}
.lst-band + .lst-band::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgb(var(--l-shadow)/.09);
}

.lst-shead { display: grid; gap: .9rem; max-width: 52rem;
  margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.lst-shead__note { color: var(--l-ink-mute); font-size: var(--l-small) !important;
  max-width: 60ch; }

/* ---- Registerschiene ----------------------------------------
   Die Antwort auf „зручно для використання": auf 7000 px gab es bisher
   keinen Index, keine Marke und keinen Ruecksprung.

   Erster Anlauf war eine senkrechte Schiene im linken Rand — gemessen und
   verworfen: der Satzspiegel dieser Seite laeuft ueber die volle Breite
   (der Titel beginnt bei 59 px), es GIBT keinen freien Rand, und die
   Schiene lag mitten im Text. Statt sie schmaler zu rechnen, die richtige
   Form: ein waagerechter Registerstreifen unter der Navigation. Der passt
   auf jede Breite, auf dem Telefon schiebt er sich seitlich.

   Er kommt erst, wenn die Buehne durchgelaufen ist — im Kopf braucht ihn
   niemand, und dort wuerde er die Kopfzeile verdecken. Seine Unterkante IST
   die Fortschrittsanzeige: ein Element, eine Aufgabe. */
.lst-schiene {
  position: fixed; left: 0; right: 0; top: var(--nav-h, 76px); z-index: 700;
  background: rgb(250 250 247/.94);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgb(12 18 51/.10);
  transform: translateY(-102%);
  transition: transform 380ms var(--l-ease-cine);
}
.lst-schiene.ist-da { transform: none; }
/* Die Unterkante als Laufanzeige. `--lauf` setzt das Skript, `scaleX`
   laeuft auf dem Verbund und loest keine Neuberechnung aus. */
.lst-schiene::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--l-gold-deep), var(--l-gold));
  transform: scaleX(var(--lauf, 0)); transform-origin: 0 50%;
}
.lst-schiene ol {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--container, 100%);
  padding-inline: var(--gutter, clamp(20px, 4vw, 112px));
  display: flex; align-items: stretch; gap: clamp(.9rem, 2.4vw, 2.6rem);
  overflow-x: auto; scrollbar-width: none;
  /* `position: relative` ist keine Zier: `offsetLeft` der Eintraege rechnet
     gegen den naechsten positionierten Vorfahren, und genau damit schiebt
     das Skript den laufenden Eintrag auf dem Telefon in die Mitte. */
  position: relative;
}
.lst-schiene ol::-webkit-scrollbar { display: none; }
.lst-schiene a {
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  min-height: 46px; padding: 0; text-decoration: none;
  border-bottom: 2px solid transparent;
  font-family: var(--l-body-f); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--l-ink-mute);
  transition: color var(--l-d-hover) var(--l-ease-firm),
              border-color var(--l-d-hover) var(--l-ease-firm);
}
.lst-schiene b {
  font-weight: 700; font-size: .62rem; color: var(--l-bronze);
  font-variant-numeric: lining-nums tabular-nums;
}
.lst-schiene em { font-style: normal; }
.lst-schiene i { display: none; }
.lst-schiene a:hover { color: var(--l-ink); }
.lst-schiene a.ist-da { color: var(--l-ink); border-bottom-color: var(--l-gold-deep); }
@media (max-width: 700px) {
  .lst-schiene a { font-size: .64rem; letter-spacing: .12em; }
}
/* Unter 430 px nimmt die Schaltflaeche den Streifen ganz: der Name der
   Leistung stand dort als „БИЗНЕС-КОУЧИ…" und ein abgeschnittenes Wort
   liest sich als Fehler, nicht als Beschriftung. */
@media (max-width: 430px) {
  .lst-handbalken__t { display: none; }
  .lst-handbalken .lst-btn { width: 100% !important; flex: 1 1 auto; }
}

/* Sprungmarken duerfen nicht unter der Navigation UND dem Register landen. */
html { scroll-padding-top: calc(var(--nav-h, 76px) + 50px); }

/* Der Handbalken: auf dem Telefon steht der Aufruf sonst nur ganz oben und
   ganz unten — auf 7000 px heisst das praktisch nirgends. Er kommt zur
   selben Zeit wie das Register und traegt genau zwei Dinge. */
.lst-handbalken { display: none; }
@media (max-width: 900px) {
  .lst-handbalken {
    display: flex; align-items: center; gap: .8rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
    padding: .7rem clamp(14px, 4vw, 22px);
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgb(12 18 51/.95);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--l-gold-rand);
    transform: translateY(115%);
    transition: transform 420ms var(--l-ease-cine);
  }
  .lst-handbalken.ist-da { transform: none; }
  .lst-handbalken__t {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: rgb(255 255 255/.82);
    font-family: var(--l-body-f); font-size: .72rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
  }
  /* `.lst-btn` steht unter 640 px auf voller Breite — im Balken waere das
     der ganze Streifen und der Name der Leistung waere weg. */
  .lst-handbalken .lst-btn { width: auto !important; flex: none;
    --btn-y: .7rem; --btn-x: 1.1rem; font-size: .74rem; min-height: 42px; }
}

/* ---- Die Doppelseite ----------------------------------------
   DER Bruch der Fassung 11. Vorher lief der ganze Rumpf ueber `.lst-zwei`:
   haftender Kopf im linken Drittel, Inhalt rechts — fuenfmal hintereinander
   derselbe Gegenstand, und weil so ein Kopf nur zwei Zeilen hoch ist, stand
   unter jedem davon ein leeres Drittel. Im Ablauf waren das gemessene 45 %
   der Seitenbreite, auf denen nichts stand. Genau daran liest man „fuenfmal
   dieselbe Sektion" und „hier ist nur Text".

   Die Doppelseite ist das Gegenteil: zwei gleichrangige Haelften, eine davon
   traegt eine Aufnahme, und die Aufnahme laeuft randlos an die Seitenkante.
   Der Satzspiegel IST das Sichtfeld (`--container: 100%`), ein negativer
   Steg in Hoehe des Stegs trifft die Kante deshalb auf JEDER Breite — das
   ist der Unterschied zwischen einer Doppelseite und einem zweispaltigen
   Kasten mit Bild darin. */
/* FASSUNG 12, die Korrektur an genau dieser Stelle. Fassung 11 hat die
   Doppelseite mit `align-items: center` gesetzt und der Aufnahme ein festes
   Seitenverhaeltnis gegeben. Beides zusammen ist die Ursache der zwei
   Meldungen vom 28.08. — und es ist EINE Ursache, nicht zwei:

   Mittig ausgerichtet stehen zwei verschieden hohe Spalten nebeneinander,
   und die Differenz faellt zur Haelfte OBEN an. Gemessen auf 1440 px:
   im Abschnitt „Im Detail" begann der Text 120 px unter der Bildkante, in
   „Grundlage" 75 px darunter. Das ist „по верхам пусті міста" — oben rechts
   stand nichts, waehrend links schon das Bild lief.

   Und weil die Hoehe der Aufnahme aus ihrem eigenen Seitenverhaeltnis kam
   statt aus der Zeile, hing sie als Rechteck im Raum: im Abschnitt „Im
   Detail" 523 px hoch neben 282 px Text, oben und unten je 120 px ueber den
   Satz hinaus. Eine Aufnahme, die randlos an die Papierkante laeuft und an
   der Innenseite mitten im Motiv aufhoert, ohne dass die Kante eine Linie
   des Satzes traefe — das ist „обрізано з права" und „як ти обіграв фото".

   Die Korrektur ist eine Zeile Haltung: die Aufnahme ist eine WAND, kein
   Bild im Text. Sie fuellt die Zeile von oben bis unten, ihre Hoehe kommt
   aus dem Satz daneben, und ihre Innenkante ist damit eine durchgehende
   Linie statt eines zufaelligen Schnitts. Der Satz beginnt oben. Kein Raum
   ueber dem Text, kein Ueberstand unter dem Bild.

   Diese Form gab es in Fassung 11 schon — als Sonderfall `--hoch` fuer die
   Fragen. Das war der einzige Abschnitt, der bei der Messung 0 px Versatz
   hatte, und der einzige, den Danilo nicht gemeldet hat. Der Sonderfall war
   die richtige Regel. */
.lst-spread {
  display: grid; align-items: stretch;
  gap: clamp(1.6rem, 3.2vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.lst-spread--portraet { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.lst-spread--hoch     { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }

/* ---- Das Bildband ------------------------------------------
   FASSUNG 13. Fassung 12 hat die Aufnahme auf die Hoehe der ZEILE gebracht,
   aber die Zeile steht im Band, und das Band hat oben und unten seine
   Polsterung — clamp(3,4rem, 6vw, 7,2rem), auf 1440 px also 86 px. Dazu kam
   im Abschnitt „Im Detail" der Aufschlag ueber der Doppelseite und die
   Vorteilsliste darunter. Gemessen war die Aufnahme dort oben 237 px und
   unten 496 px vom Bandrand entfernt und fuellte 40 % der Abschnittshoehe.
   Danilo: „відступів по верхах та низах у фото не повинно бути в середині
   секції". Genau das.

   Ein Bildband hat deshalb KEINE senkrechte Polsterung. Die traegt jetzt die
   Textspalte allein, und die Aufnahme reicht von der Oberkante des Bandes
   bis zur Unterkante — randlos an drei Seiten. Das ist der Unterschied
   zwischen einer Abbildung im Satz und einer Tafel: eine Abbildung hat einen
   Rand ringsum, eine Tafel hat keinen.

   Damit die Aufnahme das kann, muss im Band NICHTS ueber oder unter ihr
   stehen. „Im Detail" ist dafuer geteilt: die Doppelseite bildet das
   Bildband, die Vorteile stehen im eigenen Band darunter. Ein Bildband
   traegt genau eine Doppelseite — sonst ist es kein Bildband. */
.lst-band--platte { padding-block: 0; }
/* Die Haarlinie zwischen zwei Baendern liefe hier ueber die Aufnahme. */
.lst-band--platte::before { display: none !important; }
.lst-spread--platte .lst-spread__bild { align-self: stretch; }
.lst-spread--platte .lst-spread__seite,
.lst-spread--platte > .lst-spread__text { padding-block: var(--l-band-y); }

/* Die Aufnahme fuellt die Zeile. `min-height` ist der Boden fuer den Fall,
   dass der Satz daneben kurz ist — ohne ihn wuerde aus der Wand ein
   Briefschlitz. 26vw haelt den Ausschnitt bei rund 16:9, und genau darauf
   sind die vier Arbeitsaufnahmen ausgesucht worden. */
.lst-spread__bild {
  margin: 0; overflow: hidden; background: var(--l-paper-3);
  align-self: stretch; min-height: clamp(17rem, 26vw, 27rem);
}
.lst-spread__bild img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Dieselbe Gradation wie auf den Karten: die Aufnahmen kommen aus zwei
     Quellen und wuerden sonst als zwei Serien nebeneinander stehen. */
  filter: saturate(1.06) contrast(1.08) brightness(1.01) sepia(.05);
}
/* Das Portraet steht hochkant und braucht mehr Boden als eine Raumaufnahme,
   sonst kippt der stehende Mensch in ein Querformat. Der Ausschnitt liegt
   bei rund 4:5 statt der 3:4 der Vorlage — die fehlenden 5 % nimmt
   `object-position` UNTEN weg, nie oben. Ein Kopf, der die obere Kante
   beruehrt, ist der teuerste Fehler bei Menschenbildern. */
.lst-spread--portraet .lst-spread__bild {
  min-height: clamp(22rem, 34vw, 36rem);
}
.lst-spread--portraet .lst-spread__bild img { object-position: 50% 28%; }
.lst-spread--links  .lst-spread__bild {
  margin-left:  calc(-1 * var(--gutter, clamp(20px, 4vw, 112px))); }
.lst-spread--rechts .lst-spread__bild {
  margin-right: calc(-1 * var(--gutter, clamp(20px, 4vw, 112px))); }
.lst-spread__seite { display: grid; gap: 0; align-content: start; min-width: 0; }
/* `align-content: start` ist hier NICHT Geschmack, sondern Notwendigkeit:
   seit die Doppelseite streckt, streckt sie auch diesen Kasten auf die volle
   Zeilenhoehe — und ein Raster ohne diese Angabe verteilt die ueberzaehlige
   Hoehe auf SEINE Zeilen. Gemessen ohne sie: die goldene Kante des
   Einstiegssatzes lief 85 px unter dessen letzte Zeile weiter, und zwischen
   den Absaetzen stand ein Loch. Der Satz beginnt oben und endet, wo er endet. */
.lst-spread__text { display: grid; gap: 1.1rem; align-content: start;
  max-width: 62ch; min-width: 0; }
/* Der Aufschlag steht in der Doppelseite ueber seinem eigenen Text, nicht
   ueber der ganzen Seite — deshalb hier weniger Abstand als freistehend. */
.lst-spread__seite .lst-shead { margin-bottom: clamp(1.1rem, 2vw, 1.7rem); }

@media (max-width: 900px) {
  .lst-spread,
  .lst-spread--portraet,
  .lst-spread--hoch { grid-template-columns: 1fr; }
  /* Auf dem Telefon laeuft die Aufnahme an BEIDE Kanten: eine halb randlose
     Aufnahme ueber die volle Breite sieht aus wie ein Fehler im Satz. */
  .lst-spread--links  .lst-spread__bild,
  .lst-spread--rechts .lst-spread__bild {
    margin-inline: calc(-1 * var(--gutter, clamp(20px, 4vw, 112px))); }
  /* Einspaltig gibt es keine Zeile mehr, aus der eine Hoehe kaeme — hier
     zaehlt wieder das Seitenverhaeltnis, sonst faellt die Aufnahme auf ihren
     `min-height`-Boden zusammen. */
  .lst-spread__bild,
  .lst-spread--portraet .lst-spread__bild { min-height: 0; }
  .lst-spread__bild img { height: auto; aspect-ratio: 16 / 9; }
  .lst-spread--portraet .lst-spread__bild img { aspect-ratio: 4 / 3;
    object-position: 50% 26%; }
}

/* Der Einstiegssatz jedes Abschnitts: Antiqua, goldene Kante. */
.lst-lede {
  font-family: var(--l-serif) !important; font-size: var(--l-lede) !important;
  line-height: 1.42 !important; color: var(--l-ink) !important;
  border-left: 2px solid var(--l-gold-deep);
  padding-left: clamp(1rem, 1.8vw, 1.5rem);
}

/* ---- Ihre Vorteile: die ausgeschriebene Form ----------------
   Bis Fassung 9 standen hier drei schmale Spalten mit genau den drei
   Ueberschriften, die anderthalb Bildschirme weiter oben schon im Pult des
   Kopfes stehen — dieselben i18n-Schluessel, dieselbe Reihenfolge. Das las
   sich als Wiederholung, weil es eine war.

   Jetzt ist das Pult die Kurzfassung und dies der Text dazu: grosse Antiqua-
   Ziffer, Ueberschrift, Beschreibung, ueber die volle Breite. Aus
   Wiederholung wird Aufbau — und die Spaltenform, die 2026-08 nur eingefuehrt
   wurde, damit keine 700 px leere Trennlinie stehen bleibt, wird nicht mehr
   gebraucht: die Beschreibung fuellt die Zeile jetzt selbst. */
.lst-punkte__h {
  margin: clamp(2.6rem, 4.4vw, 3.8rem) 0 clamp(.4rem, 1vw, .8rem) !important;
  font-size: var(--l-h3) !important;
}
.lst-punkte { list-style: none; margin: 0; padding: 0; display: grid; }
.lst-punkte > li {
  display: grid; align-items: start;
  grid-template-columns: 4.4rem minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(.6rem, 1.6vw, 2.4rem);
  padding: clamp(1.25rem, 2.2vw, 1.9rem) 0;
  border-top: 1px solid rgb(var(--l-shadow)/.12);
  transition: background-color var(--l-d-state) var(--l-ease-firm);
}
.lst-punkte > li:last-child { border-bottom: 1px solid rgb(var(--l-shadow)/.12); }
.lst-punkte > li:hover { background: rgb(233 203 161/.07); }
.lst-punkte > li p { font-size: var(--l-small) !important; line-height: 1.62 !important;
  max-width: 62ch; }
/* Die Ziffer in der Antiqua, nicht in der Grotesk: eine 01 in Playfair hat
   Zeichnung, dieselbe Ziffer in Inter hat nur Gewicht. */
.lst-punkte__nr {
  font-family: var(--l-display); font-weight: 400; line-height: .86;
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.5rem);
  letter-spacing: -.02em; color: var(--l-bronze);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- Eignung: zwei Haarlinienspalten -------------------------
   Vorher zwei Tafeln mit 20 px Radius und fuenfstufigem Schlagschatten —
   das lauteste Vorlagenmerkmal der Seite, unmittelbar unter einem Kopf, der
   weder Radius noch Schatten kennt. Jetzt zwei Spalten, getrennt durch
   nichts als eine Kopflinie: golden fuer „passt", grau fuer „passt nicht".
   Die Rolle ist an der Kante ablesbar, bevor man liest — dieselbe Absicht
   wie vorher, ohne die Schachtel darum.

   Fassung 11 stellt den Aufschlag DANEBEN statt darueber. Vorher lief er
   ueber die volle Breite, danach standen die zwei Spalten — und weil beide
   Listen kurz sind, blieb unter dem Abschnitt eine halbe Bildschirmhoehe
   Papier stehen. Jetzt sind es drei Spalten in einer Zeile: Aufschlag,
   passt, passt nicht. Eine Gegenueberstellung gehoert nebeneinander. */
.lst-eignung {
  display: grid; gap: clamp(1.8rem, 3vw, 3.4rem) clamp(2rem, 4vw, 4.4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
  .lst-eignung {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
@media (min-width: 700px) and (max-width: 999.98px) {
  .lst-eignung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lst-eignung__kopf { grid-column: 1 / -1; }
}
.lst-eignung__kopf { min-width: 0; }
.lst-eignung__kopf .lst-shead { margin-bottom: clamp(1rem, 1.8vw, 1.5rem); }
.lst-tafel { position: relative; min-width: 0;
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 2px solid rgb(var(--l-shadow)/.16); }
.lst-tafel--ja { border-top-color: var(--l-gold-deep); }
.lst-tafel h3 { padding-bottom: .9rem; }
.lst-tafel ul { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; }
.lst-tafel li {
  position: relative; padding: .85rem 0 .85rem 1.9rem;
  font-family: var(--l-body-f); font-size: var(--l-small);
  line-height: 1.55; color: var(--l-ink-mute);
  border-top: 1px solid rgb(var(--l-shadow)/.09);
}
/* Das Haekchen ist aus zwei Raendern gezeichnet: Inter hat kein ✓, und die
   Ersatzschrift des Systems zeichnete ein verzerrtes. */
.lst-tafel--ja li::before {
  content: ''; position: absolute; left: 2px; top: 1.25em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--l-gold-deep);
  border-bottom: 2px solid var(--l-gold-deep);
  transform: rotate(-45deg);
}
.lst-tafel--nein li::before {
  content: ''; position: absolute; left: 2px; top: 1.55em;
  width: 12px; height: 2px; background: var(--l-ink-mute); opacity: .5;
}

/* ---- Ablauf: jetzt auf Papier -------------------------------
   Bis Fassung 9 lag hier eine Wendeltreppe bei 50 % Deckkraft unter fuenf
   Schritten mit Beschreibung — die Aufnahme kaempfte gegen ihren eigenen
   Text. Und es war das dritte von vier tiefblauen Feldern der Seite.
   Beides faellt weg: der Ablauf ist eine Registratur, und eine Registratur
   steht auf Papier.

   Fassung 11 nimmt ihm den haftenden Reiter. Der Ablauf stand als einziger
   Abschnitt in einem Zweispalter, dessen linke Spalte nur die Ueberschrift
   trug: bei 1440 px waren das 45 % der Seitenbreite, auf denen ueber die
   ganze Hoehe des Abschnitts nichts stand. Jetzt steht der Kopf ueber der
   Breite und die Schritte laufen ZWEISPALTIG darunter — dieselbe Zahl von
   Schritten auf halber Hoehe, und kein leeres Feld daneben.

   Zwei Spalten, nicht `auto-fit`: bei 1920 px legte auto-fit vier Spuren an,
   und fuenf Schritte auf vier Spalten sind 4+1. Zwei ergibt 3+2 und liest
   sich zeilenweise, wie eine gedruckte Aufzaehlung. */
.lst-schritte {
  list-style: none; margin: 0; padding: 0; counter-reset: schritt;
  display: grid; grid-template-columns: 1fr;
  column-gap: clamp(2rem, 4vw, 4.4rem);
}
@media (min-width: 900px) {
  .lst-schritte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.lst-schritte > li {
  counter-increment: schritt; position: relative; min-width: 0;
  display: grid; gap: .45rem; align-content: start;
  padding: clamp(1.15rem, 2.1vw, 1.7rem) 0;
  border-top: 1px solid rgb(var(--l-shadow)/.11);
}
.lst-schritte > li::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--l-serif); font-weight: 500; line-height: .9;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 1.15rem + 1.1vw, 2.5rem); color: var(--l-bronze);
  margin-bottom: .25rem;
}
.lst-schritte strong { font-family: var(--l-display); font-weight: 600;
  font-size: var(--l-h3); letter-spacing: -.01em; color: var(--l-ink);
  min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.lst-schritte span { font-family: var(--l-body-f); font-size: var(--l-small);
  line-height: 1.62; color: var(--l-ink-mute); max-width: 46ch; }

/* ---- Fragen -------------------------------------------------
   <details> statt Schaltflaeche mit Skript: das Aufklappen kann der Browser,
   und ohne Skript bleibt die Antwort trotzdem lesbar. Neu sind das Mass —
   die Zeile ist mindestens 56 px hoch und geht ueber die volle Breite, statt
   auf 62 rem zu enden — und das Zeichen: ein Kreuz aus zwei Linien, das beim
   Oeffnen zum Strich wird. Ein Winkel, der sich dreht, sagt „Menue"; ein
   Kreuz, das zum Strich wird, sagt „mehr / weniger". */
/* Fassung 11 setzt sie NEBEN eine Aufnahme. Drei zugeklappte Zeilen ueber
   die volle Breite sind rund 270 px Inhalt in einem Band von 700 px Hoehe —
   das war die leerste Stelle der ganzen Seite. In der halben Breite fuellen
   dieselben drei Zeilen ihre Spalte, und die andere Haelfte traegt Bild. */
.lst-faq { max-width: none; }
.lst-faq details { border-top: 1px solid rgb(var(--l-shadow)/.13); }
.lst-faq details:last-child { border-bottom: 1px solid rgb(var(--l-shadow)/.13); }
.lst-faq summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; min-height: 56px;
  padding: 1.25rem 3.4rem 1.25rem 0;
  font-family: var(--l-display); font-weight: 600; font-size: var(--l-h3);
  letter-spacing: -.01em; line-height: 1.3; color: var(--l-ink);
  transition: padding-left var(--l-d-state) var(--l-ease-firm),
              color var(--l-d-hover) var(--l-ease-firm);
}
.lst-faq summary::-webkit-details-marker { display: none; }
/* Waagerechter Strich — bleibt immer. */
.lst-faq summary::before {
  content: ''; position: absolute; right: .5rem; top: calc(50% - 1px);
  width: 15px; height: 2px; background: var(--l-bronze);
}
/* Senkrechter Strich — verschwindet beim Oeffnen; aus dem Kreuz wird der
   Strich. Gedreht statt ausgeblendet, damit die Bewegung eine Richtung hat. */
.lst-faq summary::after {
  content: ''; position: absolute; right: calc(.5rem + 6.5px); top: calc(50% - 7.5px);
  width: 2px; height: 15px; background: var(--l-bronze);
  transition: transform var(--l-d-state) var(--l-ease-firm);
}
.lst-faq details[open] summary::after { transform: rotate(90deg) scaleX(0); }
.lst-faq details[open] summary,
.lst-faq summary:hover { padding-left: .6rem; color: var(--l-bronze); }
.lst-faq__a { padding: 0 3.4rem 1.5rem .6rem; max-width: 68ch; }

/* ---- Karten ------------------------------------------------
   DIE EINE AUSNAHME dieser Fassung. Alles andere im Rumpf verliert Radius
   und Schatten — die Karte behaelt beides, weil sie Wert fuer Wert die
   Karte der STARTSEITE ist: weiss, Radius 32, goldene Haarlinie, gestufter
   Schatten mit hellem Innenlicht oben. Fassung 5 hatte hier flache
   „Verzeichniseintraege"; das war fuer sich stimmig und trotzdem falsch,
   weil Danilo genau diesen Bruch gemeldet hat („стиль сетки … сильно
   відрізняється від головного стилю сайту", 26.08.). Ein Bauteil, das
   absichtlich der Hauptseite gleicht, ist keine Vorlage. */
.lst-karten {
  display: grid; gap: clamp(1.6rem, 2.6vw, 2.6rem) clamp(1.2rem, 2vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
@media (min-width: 900px) {
  .lst-karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.8rem, 3vw, 3.2rem); }
  .lst-karten--drei .lst-karte__bild img { aspect-ratio: 4 / 3; }
  .lst-karten--drei .lst-karte__text h3 { font-size: var(--l-h3) !important; }
}
.lst-karte {
  position: relative; display: flex; flex-direction: column;
  text-decoration: none; overflow: hidden;
  background: var(--l-karte); border-radius: var(--l-r);
  border: 1px solid var(--l-gold-rand);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.92),
    inset 0 -1px 0 rgb(12 18 51/.05),
    0 1px 2px rgb(12 18 51/.07),
    0 4px 10px -2px rgb(12 18 51/.09),
    0 14px 30px -8px rgb(12 18 51/.14);
  transition: transform var(--l-d-state) var(--l-ease-cine),
              box-shadow var(--l-d-state) var(--l-ease-cine),
              border-color var(--l-d-state) var(--l-ease-firm);
}
.lst-karte:hover,
.lst-karte:focus-visible {
  transform: translateY(-6px);
  border-color: rgb(233 203 161/.62);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255/.92),
    0 2px 4px rgb(12 18 51/.08),
    0 10px 22px -4px rgb(12 18 51/.12),
    0 30px 60px -14px rgb(12 18 51/.22);
}
/* Fassung 11: die Ziffer 01–13 auf der Aufnahme ist raus („не потрібно
   робити акцент на 13 услугах") — und mit ihr der Verlauf, den es nur gab,
   damit das Gold auf hellen Bildern Halt hatte. Zwei Schichten weniger ueber
   der Aufnahme, und aus dem durchgezaehlten Warenregal wird ein Raster
   gleichrangiger Leistungen. */
.lst-karte__bild { position: relative; margin: 0; overflow: hidden; }
.lst-karte__bild img {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 6;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.14) brightness(1.01) sepia(.07);
  transition: transform 720ms var(--l-ease-cine), filter var(--l-d-state) var(--l-ease-cine);
}
.lst-karte:hover .lst-karte__bild img {
  transform: scale(1.055);
  filter: saturate(1.18) contrast(1.18) brightness(1.03) sepia(.07);
}
.lst-karte__text { display: grid; gap: .45rem;
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2vw, 1.6rem)
           clamp(1.3rem, 2.2vw, 1.8rem); }
.lst-karte__text h3 { transition: color var(--l-d-hover) var(--l-ease-firm);
  hyphens: manual; overflow-wrap: break-word; }
.lst-karte:hover .lst-karte__text h3 { color: var(--l-bronze); }
.lst-karte__text p { font-size: var(--l-small) !important; line-height: 1.55 !important; }
/* Bronze, nicht Gold: die Karte ist WEISS, und #AF997A misst darauf 2,55:1 —
   dieselbe Messung, die schon die Vorzeile auf Papier gekippt hat. */
.lst-karte__mehr {
  margin-top: .4rem; color: var(--l-bronze); font-family: var(--l-body-f);
  font-size: var(--l-micro); letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .5rem;
}
.lst-karte__mehr::after { content: ''; width: 14px; height: 1px; background: currentColor;
  transition: width var(--l-d-state) var(--l-ease-firm); }
.lst-karte:hover .lst-karte__mehr::after { width: 30px; }

/* ---- Der Abschluss: die zweite Buehne -----------------------
   Der Abschluss war mittig gesetzt, waehrend die ganze uebrige Seite
   linksbuendig laeuft — und er war eine dritte Bauart neben Kopf und Rumpf.
   Jetzt ist er dieselbe Buehne wie der Kopf: eingefaerbte Aufnahme als
   Grund, Kopfzeile auf goldener Haarlinie, Satz links, Pult unten. Die
   Seite ist damit eingefasst — man kommt an, wo man losgegangen ist.

   Das Pult traegt hier die drei Belege (26 Jahre · 700+ Unternehmen ·
   14 Branchen). Oben sagt das Pult, was man bekommt; unten, warum bei uns.
   Dieselbe Form, andere Aussage — das ist eine Klammer, keine Wiederholung. */
.lst-buehne--schluss { padding-top: 0; min-height: min(76vh, 780px); }
.lst-buehne--schluss .lst-buehne__zeile { border-top: 1px solid rgb(233 203 161/.20); }
.lst-buehne--schluss .lst-buehne__satz { gap: clamp(1.3rem, 2.4vw, 2rem); }
body[data-page="service-detail"] .lst-buehne--schluss h2 {
  font-family: var(--l-display); font-weight: 500; color: #fff;
  font-size: clamp(1.95rem, 1rem + 3.6vw, 3.9rem);
  line-height: 1.06; letter-spacing: -.024em;
  margin: 0; max-width: 18ch; min-width: 0; text-wrap: balance;
}
body[data-page="service-detail"] .lst-buehne--schluss h2 em {
  font-style: italic !important; font-weight: 400 !important;
  color: var(--l-gold) !important;
}
body[data-page="service-detail"] .lst-buehne--schluss p {
  color: rgb(255 255 255/.78) !important; max-width: 52ch;
  font-size: var(--l-body) !important;
}
/* Der Beleg im Pult: die Zahl steht in der Antiqua an der Stelle, an der im
   Kopf die laufende Nummer steht. */
.lst-buehne--schluss .lst-kabine__n {
  font-family: var(--l-display); font-weight: 500; font-size: 1.35rem;
  letter-spacing: -.01em; line-height: 1;
}
.lst-buehne--schluss .lst-buehne__pult li { grid-template-columns: 3.6rem minmax(0, 1fr); }

/* ============================================================
   Nur /pages/services — Kopf, Anspruch, die vier Programme
   ============================================================ */

/* Der Kopf der Uebersichtsseite traegt statt der Kennkarte das Bild des
   Inhabers: hier ist die Person das Argument, auf den Einzelseiten die Zahl. */
.lst-portraet {
  position: relative; margin: 0; border-radius: var(--l-r); overflow: hidden;
  box-shadow: var(--l-rim), var(--l-e3);
}
.lst-portraet img { display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; }

.lst-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem;
  list-style: none; padding: 0; }
.lst-chips li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; border-radius: 999px;
  background: var(--l-karte); box-shadow: var(--l-rim), var(--l-e1);
  font-family: var(--l-body-f); font-size: var(--l-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--l-ink-mute);
}
.lst-chips li::before { content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--l-gold-deep); flex: none; }

/* Der Anspruchssatz stand vorher auf einem tiefblauen Streifen. Auf einer
   Seite, die heller werden soll, traegt ihn das Papier — und die Antiqua. */
.lst-anspruch { position: relative; padding-block: clamp(3rem, 5vw, 5rem);
  background: var(--l-paper-2); text-align: center; }
.lst-anspruch::before,
.lst-anspruch::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--l-hair); opacity: .8;
}
.lst-anspruch::before { top: 0; }
.lst-anspruch::after { bottom: 0; }
.lst-anspruch p {
  font-family: var(--l-serif) !important; font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.9rem) !important;
  line-height: 1.24 !important; color: var(--l-ink) !important;
  max-width: 26ch; margin-inline: auto !important;
}
.lst-anspruch em { font-style: normal; color: var(--l-gold-deep); }

/* Die vier Programme: abwechselnd Bild links und rechts. */
.lst-programme { display: grid; gap: clamp(2.6rem, 5vw, 5rem); }
.lst-programm {
  display: grid; gap: clamp(1.6rem, 3.4vw, 3.4rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
}
.lst-programm:nth-child(even) .lst-programm__bild { order: 2; }
.lst-programm__bild {
  position: relative; margin: 0; border-radius: var(--l-r); overflow: hidden;
  box-shadow: var(--l-rim), var(--l-e2);
}
.lst-programm__bild img { display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.lst-programm__nr {
  position: absolute; left: 0; bottom: 0; padding: .35rem 1rem .2rem;
  background: rgb(250 247 242/.94); color: var(--l-navy);
  font-family: var(--l-serif); font-weight: 500; line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.4rem);
}
.lst-programm__badge {
  position: absolute; right: .8rem; top: .8rem; padding: .4rem .75rem;
  border-radius: 999px; background: rgb(250 247 242/.94); color: var(--l-ink-mute);
  font-family: var(--l-body-f); font-size: var(--l-micro);
  letter-spacing: .12em; text-transform: uppercase;
}
.lst-programm__text { display: grid; gap: .9rem; align-content: start; }
.lst-programm__text h3 { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem) !important;
  line-height: 1.1 !important; }
.lst-programm__text h3 em { font-style: normal; display: block;
  color: var(--l-gold-deep); }
.lst-programm__strich { display: block; width: 46px; height: 1px;
  background: var(--l-gold-deep); opacity: .6; }
.lst-programm__text .lst-btn { justify-self: start; margin-top: .5rem; }

/* Schlussband der Uebersichtsseite: zwei Wege statt einem. */
/* Die Belegzeile: dieselben drei Zahlen, die aus dem Kopf raus sind, in
   anderer Form und an anderer Stelle — eine gesperrte Zeile unter der
   Schaltflaeche, wo ein Beleg tatsaechlich etwas bewirkt. Kein Kasten,
   keine Haarlinienspalten, kein eigener Abschnitt. */
.lst-final__beleg {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem clamp(1rem, 2.4vw, 2.2rem);
  margin: clamp(.6rem, 1.4vw, 1.2rem) 0 0; padding: 0;
  font-family: var(--l-body-f); font-size: var(--l-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: rgb(255 255 255/.62) !important;
  /* `.lst-final p` deckelt auf 52ch — fuer den Fliesstext richtig, fuer
     diese Zeile falsch: auf Russisch brach sie damit nach dem ersten
     Beleg um und stand krumm unter der Schaltflaeche. */
  max-width: none;
}
.lst-final__beleg > span { display: inline-flex; align-items: baseline; gap: .45rem; }
.lst-final__beleg b {
  font-family: var(--l-display); font-weight: 700; letter-spacing: 0;
  font-size: 1.05rem; color: var(--l-gold);
  font-variant-numeric: lining-nums tabular-nums;
}

.lst-final__wege { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.lst-btn--whatsapp { color: #fff; background: #25D366;
  box-shadow: 0 2px 4px rgb(var(--l-shadow)/.14), 0 14px 30px -12px rgb(37 211 102/.45); }
.lst-btn--whatsapp:hover { transform: translateY(-2px); filter: brightness(1.04); }
.lst-btn--whatsapp svg { width: 16px; height: 16px; }

@media (max-width: 1020px) {
  .lst-programm { grid-template-columns: 1fr; }
  .lst-programm:nth-child(even) .lst-programm__bild { order: 0; }
  .lst-portraet { max-width: 26rem; }
}

/* ---- Enge Schirme ------------------------------------------ */
@media (max-width: 1020px) {
  /* Unter 1020 px stapelt die Buehne: erst der Satz mit den Schaltflaechen,
     dann die Aufnahme, dann die Schiene. Die Drehung faellt weg — auf einem
     schmalen Schirm liest sie sich als schiefes Bild, nicht als Tiefe. */
  .lst-punkte > li { grid-template-columns: 2.6rem minmax(0, 1fr); }
  .lst-punkte > li p { grid-column: 2; }
}

@media (max-width: 640px) {
  .lst-btn { width: 100%; }
}

/* ---- Bewegung ----------------------------------------------
   Die Reihen steigen beim Eintreten in das Blickfeld auf, ueber eine
   Bildlaufzeitleiste des Browsers, ohne Skript.

   Der erste Versuch blendete dabei auch die Deckkraft ein — und genau das
   hat sich sofort geraecht: in einem sehr hohen Sichtfeld (eine Aufnahme
   der ganzen Seite ist genau das) tritt kein Element jemals „ein", die
   Zeitleiste steht bei 0, und mit `both` gilt der Anfangszustand. Vier
   ganze Baender waren leer — die Vorteile, die Eignung, der Ablauf, die
   verwandten Leistungen. Ich hatte in den Kommentar geschrieben, die Regel
   koenne nichts verbergen; die erste Messung hat das widerlegt.

   Deshalb bewegt sich hier nur noch die Lage, nie die Deckkraft. Steht die
   Zeitleiste still, steht die Zeile 14 px zu tief — sichtbar, lesbar,
   auffindbar. Ein Text, der wegen einer Verzierung verschwinden kann,
   ist die Verzierung nicht wert. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body[data-page="service-detail"] .lst-punkte > li,
    body[data-page="service-detail"] .lst-schritte > li,
    body[data-page="service-detail"] .lst-tafel,
    body[data-page="services"] .lst-karte,
    body[data-page="service-detail"] .lst-karte {
      animation: lst-steigen linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 14%;
    }
  }
}
@keyframes lst-steigen {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

/* Symbole gibt es auf diesen Seiten nicht mehr. Der Riegel bleibt trotzdem
   stehen: er kostet nichts, und genau dieser Fehler hat ein <svg> ohne
   Groessenregel schon einmal auf 700 px Hoehe wachsen lassen. */
body[data-page="service-detail"] .page-content svg { max-width: 24px; max-height: 24px; }

@media (prefers-reduced-motion: reduce) {
  body[data-page="service-detail"] *,
  body[data-page="services"] * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}