/* ============================================================
   blocks.css — neue Bausteine der Startseite (CTA-Karte mit Siegeln
   und Footer). Entstanden im Lab, Klassen aus dem Lab auf .ll- gezogen.
   Nur die Startseite laedt diese Datei. styles.css bleibt unberuehrt,
   damit die uebrigen Seiten ihren bisherigen Footer behalten.
   ============================================================ */

:root {
  --ll-accent-dark: #5c7a10; --ll-radius: 20px;
  /* Inhaltsbreite der unteren Sections (Ergebnisse, CTA, Footer).
     Genau drei Testimonial-Karten + zwei Luecken = --ll-band, damit die
     Kartenreihe, die weisse CTA-Flaeche und der Footer auf denselben
     Kanten stehen. Vorher 1040px — die drei Karten ragten 36px darueber. */
  --ll-band: 1200px;
  --ll-gap: clamp(24px, calc(1.6vw + 10px), 32px);
}
/* ----- TRANSFORMATION (Section #markt-transformation, Klassen .ll-mk*) ----- */
/* ============================================================
   LL-MK — eigene Kopie der Transformations-Section. Klassen und
   Regeln sind dupliziert (.ll-mk*), damit die globale Fassung in
   styles.css unangetastet bleibt. Rechte Karte: weiss statt Verlauf.
   ============================================================ */
.ll-mk { background: transparent; padding: clamp(90px,14vw,170px) var(--pad); text-align: center; }
.ll-mk__inner { max-width: 1000px; margin: 0 auto; }
.ll-mk__kicker {
  display: inline-block; font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--c-ink-soft); background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-surface-line); border-radius: 999px; padding: 8px 20px; margin: 0 0 28px;
}
.ll-mk__headline { margin: 0 auto; }
.ll-mk__sub {
  font-family: var(--sans); font-size: clamp(17px, 2vw, 24px); letter-spacing: .1px;
  line-height: 1.3; color: var(--c-ink-soft); max-width: 700px; margin: 16px auto 0;
}
.ll-mk__compare {
  max-width: 1080px; margin: clamp(23px, 6vw, 46px) auto 0;
  display: flex; align-items: center; justify-content: center; text-align: left; position: relative;
}
.ll-mk__card { border-radius: 95px; box-sizing: border-box; position: relative; }
.ll-mk__content { width: min(81%, var(--ll-mk-max, 350px)); margin: 0 auto; text-align: center; }
/* ALT — gedaempft, kleiner, hinten */
.ll-mk__card--old {
  --ll-mk-max: 340px; width: auto; flex: 0 1 44%; min-width: 0;
  padding: 74px clamp(36px, 5vw, 72px) 74px clamp(36px, 4vw, 64px);
  margin: 40px -42px 40px 6vw;
  background: linear-gradient(108deg, rgb(255 255 255 / 12%) 22%, rgba(255,255,255,0) 100%);
  z-index: 1;
}
.ll-mk__title-old {
  font-family: var(--sans); font-size: 27px; font-weight: 400; line-height: 1; letter-spacing: -.3px;
  text-align: center; text-decoration: line-through; color: rgb(255 255 255 / 17%); margin: 0 0 13px;
}
.ll-mk__list { list-style: none; margin: 0; padding: 0; }
.ll-mk__list--old li {
  text-align: left; padding: 0; margin: 0 0 22px; display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-style: italic; font-size: 17px; line-height: 1em; font-weight: 500;
  letter-spacing: -.3px; color: rgba(255,255,255,.3);
}
.ll-mk__ic { display: inline-flex; flex: 0 0 auto; box-sizing: border-box; margin-top: -3px; }
.ll-mk__ic--old {
  width: 24px; height: 24px; padding: 5px; border-radius: 50%;
  background: rgba(255,255,255,.10); color: rgba(255,255,255,.62);
}
/* NEU — weisse Karte statt des Radial-Verlaufs */
.ll-mk__card--new {
  --ll-mk-max: 450px; width: auto; flex: 0 1 60%; min-width: 0;
  padding: 66px 20px 94px; border: none;
  /* Verlauf von Weiss nach Hellgrau */
  background: linear-gradient(160deg, #ffffff 0%, #ffffff 48%, #e9e9ec 100%);
  box-shadow: 0 60px 130px -55px rgba(0,0,0,.9);
  z-index: 3;
}
/* Statt Eyebrow + „Der neue Weg" steht hier nur noch der Schriftzug. */
.ll-mk__logo {
  margin: 0 0 26px; font-family: var(--serif); font-weight: 400;
  font-size: 44px; line-height: 1; letter-spacing: -.02em; color: #0c0c0e;
}
.ll-mk__logo strong { font-weight: 500; }
@media (max-width: 1000px) { .ll-mk__logo { font-size: 36px; } }
.ll-mk__eyebrow {
  display: inline-block; margin: 20px 0 0; font-family: var(--sans); font-weight: 500;
  font-size: 19px; line-height: 1; letter-spacing: .2px; color: #0c0c0e;
  background: rgb(0 0 0 / 6%); border: 1px solid rgba(0,0,0,.08); padding: 8px 20px; border-radius: 999px;
}
.ll-mk__title-new {
  font-family: var(--serif); font-size: 52px; font-weight: 500; line-height: 1.05;
  letter-spacing: -2px; color: #0c0c0e; margin: 0 0 26px;
}
.ll-mk__list--new { margin: 0 0 0 3%; padding: 0 0 0 1px; text-align: left; }
.ll-mk__list--new li {
  padding: 0; margin: 0 0 26px; display: flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 22px; font-weight: 500; letter-spacing: -.1px;
  line-height: 1.15; color: #0c0c0e;
}
/* Akzentgruen auf Weiss ist zu hell — dunklerer Ton aus dem Lab-Token */
.ll-mk__ic--new { width: 30px; height: 30px; }
.ll-mk__vs {
  position: relative; z-index: 5; flex: 0 0 auto;
  width: 80px; height: 80px; border-radius: 50%; margin: -30px -38px 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* Weisser Verlauf statt Vollton, Schatten bleibt. */
  background: linear-gradient(160deg, #ffffff 0%, #ffffff 46%, #dedee1 100%);
  color: #000; box-shadow: 0 21px 70px 18px rgb(0 0 0 / 36%);
  font-family: var(--serif); font-size: 51px; padding-bottom: 8px; padding-left: 5px;
  font-weight: 500; letter-spacing: -1.5px;
}
/* Tablet/Mobile: stapeln — alt oben, vs, neu unten */
@media (max-width: 1000px) {
  .ll-mk__compare { flex-direction: column; max-width: 640px; }
  .ll-mk__card { border-radius: 55px; }
  .ll-mk__card--old { width: 91%; flex: none; margin: 0; padding: 50px 10px 40px; }
  .ll-mk__card--new { text-align: center; width: 100%; flex: none; padding: 68px 30px 52px; }
  .ll-mk__card--new .ll-mk__content { width: min(100%, 450px); margin: 0 auto; text-align: center; }
  .ll-mk__vs { margin: -50px 0; }
  .ll-mk__title-new { font-size: 40px; }
  .ll-mk__list--new li { margin: 0 0 18px; font-size: 21px; font-weight: 500; letter-spacing: .1px; line-height: 1; }
}
@media (max-width: 600px) {
  .ll-mk { padding: 40px var(--mobile-gutter) 250px; }
  .ll-mk__inner { max-width: var(--mobile-content); margin-inline: auto; }
  .ll-mk__sub { max-width: min(100%, var(--mobile-content)); }
}

/* Wortmarke im Fliesstext: "Logic" duenner als "Leader", genau wie im Logo. */
.ll-logo-thin { font-weight: 400; }
/* Markenzeichen: klein und hochgestellt, ohne die Zeilenhoehe zu dehnen. */
.ll-tm {
  font-size: .72em; font-weight: 500; line-height: 1;
  /* eigener Hochstand statt „super": sitzt dichter an der Wortmarke.
     Die negativen Raender ziehen das Zeichen an das „c" und das nachfolgende
     Wort naeher heran. */
  vertical-align: .26em; letter-spacing: 0;
  margin-left: -.05em; margin-right: -.12em;
}

/* Transformation-Feinschliff (Lab 01.10.) */
.ll-mk .ll-mk__headline em {
  background: linear-gradient(100deg, #fbffee 0%, #e9ffab 50%, #d6e251 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Logo in der weissen Karte: je eine Stufe kraeftiger (Leader 500 -> 700,
   Logic 400 -> 500) und 10 % kleiner. Nur hier (heller Hintergrund). */
@font-face {
  font-family: 'TT Norms'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/assets/fonts/TT-Norms-Bold.woff2') format('woff2');
}
.ll-mk__card--new .ll-mk__logo { font-size: 39.6px; font-weight: 500; }
.ll-mk__card--new .ll-mk__logo strong { font-weight: 700; }
@media (max-width: 1000px) { .ll-mk__card--new .ll-mk__logo { font-size: 32.4px; } }

/* Mobile: Listen-Typo und Icons 10 % kleiner. */
@media (max-width: 600px) {
  .ll-mk .ll-mk__list--old li { font-size: 15.3px; }
  .ll-mk .ll-mk__ic--old { width: 21.6px; height: 21.6px; padding: 4.5px; }
  .ll-mk .ll-mk__list--new li { font-size: 18.9px; }
  .ll-mk .ll-mk__ic--new { width: 27px; height: 27px; }
}

/* LeaderLogic-Liste (weisse Karte): engere Laufweite, Grau, mehr Abstand Icon/Text. */
.ll-mk .ll-mk__list--new li { letter-spacing: -.4px; color: #707077; gap: 10px; }

/* ----- UEBER JAN (Section #founder, Klassen .ll-about*, .ll-card*, .ll-ab-stat*, .ll-tag*) ----- */
/* Stat-Klassen heissen .ll-ab-stat*, weil .ll-stat* in styles.css schon fuer die Trust-Zahlen vergeben ist. */
/* ---------------------------------------------------------- ABOUT */
.ll-about { padding: clamp(80px, 11vh, 140px) 0; }
/* Gleiche Breite wie die Section darueber (.ll-stack__inner). */
.ll-about > .container { max-width: min(var(--ll-band), 100%); margin-inline: auto; }
.ll-about__title {
  margin: 0 auto 12px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 6.2vw, 72px); line-height: 1.1; letter-spacing: -.5px;
  color: var(--c-ink); text-align: center;
}
.ll-about__eyebrow {
  display: block; width: max-content; margin: 0 auto 16px;
  padding: 8px 20px; border-radius: 999px;
  border: 1px solid var(--c-surface-line); background: rgba(255,255,255,.05);
  font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--c-ink-soft);
}
.ll-about__grid {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  /* Portraet | Textkarte | rechte Spalte (zwei Kennzahlen + Mediapark-Foto). */
  /* Portraet | Kennzahl + Koeln-Bild | Textkarte rechts aussen. */
  /* Portraet ~330 | Kennzahl + Koeln-Bild ~309 | Textkarte ~517 (bei 1440px):
     Band-Breite wie .ll-stack (1200), Mitte bleibt, die Aussenkarten werden schmaler. */
  grid-template-columns: 1fr .936fr 1.567fr;
  /* Graue Karte oben ueber zwei Spalten, darunter Koeln-Foto + weisse Karte. */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "portrait bio bio"
    "portrait media stat1";
}
.ll-about__portrait { grid-area: portrait; }
/* Kopf immer voll sichtbar: Ausschnitt oben verankert (Desktop + Mobile). */
.ll-about__portrait img { object-position: 50% 12%; }
/* Social-Icons im Namens-Tag unter der Rolle: hell auf dunklem Glas. */
.ll-tag .ll-about__socials { gap: 14px; margin-top: 8px; }
.ll-tag .ll-about__socials a { color: rgba(255,255,255,.66); }
.ll-tag .ll-about__socials svg { width: 16px; height: 16px; }
@media (hover: hover) {
  .ll-tag .ll-about__socials a:hover { color: #fff; }
}
.ll-about__bio { grid-area: bio; }
.ll-about__grid .ll-ab-stat--light { grid-area: stat1; align-self: stretch; }
/* Das Koeln-Bild fuellt die restliche Hoehe der mittleren Spalte. */
.ll-about__media { grid-area: media; height: 100%; min-height: 308px; /* +20 % (war 257px); weisse Karte zieht ueber die Zeile mit */ }
/* KoelnTurm + Dom unten angedockt: die Unterkante des Fotos bleibt immer sichtbar. */
.ll-about__media img { object-position: 50% 100%; }
/* Unten 40px abschneiden: Foto 40px hoeher als die Karte, ueber die Unterkante hinaus. */
.ll-about__grid .ll-about__media img {
  position: absolute; left: 0; right: 0; top: auto; bottom: -40px;
  width: 100%; height: calc(100% + 40px);
}
/* Im Grid bestimmt die Zeile die Hoehe, nicht das Seitenverhaeltnis. */
.ll-about__grid .ll-card--photo { aspect-ratio: auto; height: 100%; }
/* Karten ca. 40 % flacher: Fotos liegen absolut im Kartenrahmen und treiben
   die Zeilenhoehe nicht mehr, die Hoehe ergibt sich aus der Textkarte. */
@media (min-width: 901px) {
  .ll-about__grid .ll-card--photo img { position: absolute; inset: 0; }
  /* Gleiches Padding wie die Kennzahl-Karte „15 Jahre Erfahrung" (.ll-ab-stat). */
  .ll-about__grid .ll-about__bio { padding: clamp(24px, 2.6vw, 34px); }
}

.ll-card { border-radius: var(--ll-radius); overflow: hidden; position: relative; }

.ll-card--photo { margin: 0; background: var(--c-surface); aspect-ratio: 1 / 1.06; }
.ll-card--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Namensschild unten in der Foto-Karte (wie in der Vorlage) */
.ll-tag {
  position: absolute; left: 14px; bottom: 14px; right: auto;
  padding: 9px 14px; border-radius: 12px;
  background: rgba(10,10,12,.62); backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.ll-tag--right { left: auto; right: 14px; }
.ll-tag__name, .ll-tag__role { display: block; font-family: var(--sans); }
.ll-tag__name { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.25; }
.ll-tag__role { color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.3; margin-top: 1px; }

/* Dunkle Textkarte, Inhalt vertikal mittig. */
.ll-about__bio {
  background: var(--c-surface); border: 1px solid var(--c-surface-line);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 3vw, 46px);
}
.ll-about__kicker {
  margin: 0 0 14px; font-family: var(--sans); font-weight: 500;
  font-size: clamp(26px, 2.9vw, 38px); line-height: 1.12; letter-spacing: -.01em; color: var(--c-ink);
}
.ll-about__text {
  margin: 0; font-family: var(--sans); font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.4; color: var(--c-ink-soft);
}
/* Social-Profile sitzen in der weissen Kennzahl-Karte. */
.ll-about__socials { display: flex; gap: 20px; margin-top: 20px; }
.ll-about__socials a { color: rgba(12,12,14,.38); transition: color .16s ease; }
.ll-about__socials svg { width: 20px; height: 20px; display: block; }
@media (hover: hover) and (pointer: fine) {
  .ll-about__socials a:hover { color: #0c0c0e; }
}

.ll-about__stats { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); }
.ll-ab-stat { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 2.6vw, 34px); }
.ll-ab-stat__num {
  margin: 0 0 10px; font-family: var(--sans); font-weight: 700;
  font-size: clamp(24px, 2.5vw, 32px); line-height: 1.12; letter-spacing: -.02em;
}
.ll-ab-stat__label { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.35; }
/* Kennzahlen ohne Akzentfarbe: eine weisse, eine mittelgraue Karte. */
.ll-ab-stat--light { background: #fff; }
.ll-ab-stat--light .ll-ab-stat__num { color: #0c0c0e; }
.ll-ab-stat--light .ll-ab-stat__label { color: rgba(12,12,14,.62); font-weight: 500; }
/* Fliesstext in der weissen Karte (900+ Kundenprojekte). */
.ll-ab-stat__text {
  margin: 0; font-family: var(--sans); font-size: clamp(15px, 1.3vw, 16px);
  line-height: 1.4; color: rgba(12,12,14,.62);
}
.ll-ab-stat--mid { background: #6f6f76; }
.ll-ab-stat--mid .ll-ab-stat__num { color: #fff; }
.ll-ab-stat--mid .ll-ab-stat__label { color: rgba(255,255,255,.78); font-weight: 500; }

@media (max-width: 900px) {
  .ll-about__grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "portrait" "bio" "stat1" "media";
  }
  .ll-about__grid .ll-card--photo { aspect-ratio: 4 / 3; height: auto; }
  /* Mobil: Portraet 4:3 + 30px, Koeln-Bild 4:3 + 80px. */
  .ll-about__grid { container-type: inline-size; }
  .ll-about__grid .ll-about__portrait { aspect-ratio: auto; height: calc(75cqw + 30px); }
  .ll-about__grid .ll-about__media { aspect-ratio: auto; height: calc(75cqw + 80px); min-height: 0; }
  /* Ueberschriften „15 Jahre Erfahrung" und „Ueber 900 Projekte" mobil 10 % groesser. */
  .ll-about__grid .ll-ab-stat__num { font-size: 26.4px; }
  .ll-about__grid .ll-about__kicker { font-size: 28.6px; }
}

/* Headline-Laufweite wie im Lab (Lab-Regel gilt dort fuer alle Headlines, hier nur diese drei Sections). */
html body :is(.ll-mk__headline, .ll-about__title, .ll-decision-headline, .ll-cta__headline) { letter-spacing: -2px; }

/* ----- ENTSCHEIDUNG (Section #entscheidung, Klassen .ll-decision*, .ll-dc-*) ----- */
.ll-decision-kicker { display:inline-block; font-family:var(--sans); font-size:15px; font-weight:500; color:var(--c-ink-soft); background:rgba(255,255,255,0.05); border:1px solid var(--c-surface-line); border-radius:999px; padding:8px 20px; margin:0 0 28px; }
.ll-decision-headline { margin:0 auto; }
.ll-decision-sub { font-family: var(--sans); font-size: clamp(17px, 2vw, 24px); letter-spacing: 0.1px; line-height: 1.3; color: var(--c-ink-soft); max-width: 700px; margin: 16px auto 0; }
.ll-decision { padding: clamp(72px,9vw,134px) var(--pad); text-align: center; }
.ll-decision-inner { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.ll-decision-stage { position: relative; width: 100%; max-width: 840px; margin: clamp(48px,6vw,84px) auto 0; }
.ll-dc-ghost { position: absolute; inset: 0; border-radius: 100px; background: linear-gradient(180deg,#19191b,#0f0f11); border: 0; pointer-events: none; }
.ll-dc-ghost--1 { transform: translate(15px,17px); opacity: 0.7; z-index: 1; }
.ll-dc-ghost--2 { transform: translate(30px,34px); opacity: 0.45; z-index: 0; }
.ll-dc-ghost--3 { transform: translate(45px,51px); opacity: 0.24; z-index: 0; }
.ll-dc-card { --dc-grid-left: 8.71%; --dc-grid-right: 8.71%; position: relative; z-index: 2; text-align: left; border-radius: 100px; padding: clamp(42px,5.2vw,60px) clamp(32px,4vw,46px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(130% 120% at 50% -15%, #ffffff 0%, #998e8e 50%, #282827 100%); border: 0; box-shadow: 0 46px 110px -54px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,255,255,0.05); }
.ll-dc-card-head { position: absolute; left: var(--dc-grid-left); right: var(--dc-grid-right); top: 20px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-sizing: border-box; }
.ll-dc-title { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: clamp(22px,2.4vw,29px); font-weight: 500; color: #000000; letter-spacing: 0.1px; line-height: 1.05; }
.ll-dc-title-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-accent); background: rgba(0,0,0,0.82); flex-shrink: 0; box-shadow: 0 14px 30px -22px rgba(0,0,0,0.9); }
.ll-dc-title-ico svg { width: 24px; height: 24px; }
.ll-dc-timeframe { display: flex; gap: 16px; padding-left: 56px; }
.ll-dc-tf { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--c-ink-faint); letter-spacing: 0.2px; }
.ll-dc-tf.is-active { color: var(--c-ink-soft); }
.ll-dc-plot { position: relative; }
.ll-dc-graph { display: block; width: 100%; height: auto; overflow: visible; }
.ll-dc-gl-v, .ll-dc-gl-h { stroke: rgba(255,255,255,0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ll-dc-gl-vs, .ll-dc-gl-hs { stroke: rgba(255,255,255,0.04); stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.ll-dc-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; mix-blend-mode: normal; }
.ll-dc-line--new { stroke: var(--c-accent); }
.ll-dc-line--old { stroke: rgba(255,255,255,0.52); }
.ll-dc-area--new { fill: url(#llDcAreaNew); opacity: 0; transition: opacity .6s ease .35s; }
.is-drawn .ll-dc-area--new { opacity: 1; }
.ll-dc-dots circle { opacity: 0; transition: opacity .4s ease; }
.ll-dc-dots--new circle { fill: var(--c-accent); }
.ll-dc-dots--old circle { fill: rgba(255,255,255,0.42); }
.ll-dc-diverge { fill: var(--c-accent); opacity: 0; transition: opacity .45s ease .15s; }
.is-drawn .ll-dc-dots circle, .is-drawn .ll-dc-diverge { opacity: 1; }
.ll-dc-callout { position: absolute; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; white-space: nowrap; z-index: 3; }
.ll-dc-callout::before { content: ""; position: absolute; left: calc(50% + var(--tip-shift, 0px)); width: 0; height: 0; transform: translateX(-50%); border-left: 8px solid transparent; border-right: 8px solid transparent; }
.ll-dc-callout--new { min-width: 0; padding: 13px 10px 14px; color: #050505; background: var(--c-accent); border: 0; border-radius: 14px; transform: translate(-50%, calc(-100% - 15px)); box-shadow: 0 20px 42px -28px rgba(214,226,81,0.68), 0 12px 24px -22px rgba(0,0,0,0.9); }
.ll-dc-callout--new::before { bottom: -9px; border-top: 10px solid var(--c-accent); }
.ll-dc-callout--new .ll-dc-co-label { color: rgba(0,0,0,0.72); }
.ll-dc-callout--old { min-width: 0; padding: 11px 12px 12px; color: rgba(255,255,255,0.68); background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; transform: translate(-50%, 15px); }
.ll-dc-callout--old::before { top: -9px; border-bottom: 10px solid #111; }
.ll-dc-pct { font-family: var(--sans); font-variant-numeric: tabular-nums; line-height: 1; }
.ll-dc-pct--new { display: block; font-size: clamp(25px,2.95vw,34px); font-weight: 500; letter-spacing: -0.7px; color: inherit; }
.ll-dc-pct--old { display: block; font-size: 25px; font-weight: 500; letter-spacing: -0.4px; color: inherit; }
.ll-dc-co-label { position: static; font-family: var(--sans); font-size: 12.5px; font-weight: 400; line-height: 1.1; letter-spacing: 0.1px; color: rgba(0,0,0,0.72); white-space: nowrap; }
.ll-dc-callout--old .ll-dc-co-label { font-size: 14.5px; font-weight: 400; color: rgba(255,255,255,0.56); }
.ll-dc-axis { position: relative; height: 16px; margin-top: 9px; }
.ll-dc-axis span { position: absolute; transform: translateX(-50%); font-family: var(--sans); font-size: 12px; color: var(--c-ink-faint); }
.ll-dc-foot { margin-top: 14px; padding-left: var(--dc-grid-left); padding-right: var(--dc-grid-right); box-sizing: border-box; }
.ll-dc-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--c-ink-soft); }
.ll-dc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
/* Verlauf-Stops der Inline-SVGs (llAccentGrad, llDcAreaNew) auf den aktuellen Akzent. */
#llAccentGrad stop[offset="1"] { stop-color: var(--c-accent); }
#llDcAreaNew stop[offset="0"], #llDcAreaNew stop[offset="1"] { stop-color: var(--c-accent); }
@media (max-width: 600px) {
  .ll-decision-headline { width: 100%; max-width: var(--mobile-content, calc(100vw - 40px)); font-size: var(--mobile-display-size, 44px); }
  .ll-dc-card { min-height: auto; padding: 38px 22px 54px; border-radius: 38px; justify-content: center; }
  .ll-dc-ghost { border-radius: 38px; }
  .ll-dc-card-head { position: static; width: 100%; margin-bottom: 18px; gap: 5px; }
  .ll-dc-plot { width: 100%; }
  .ll-dc-graph { aspect-ratio: 620 / 442; height: auto; }
  .ll-dc-title { font-size: 22px; }
  .ll-dc-title-ico { width: 34px; height: 34px; }
  .ll-dc-title-ico svg { width: 19px; height: 19px; }
  .ll-dc-timeframe { padding-left: 44px; gap: 12px; }
  .ll-dc-callout { gap: 3px; width: max-content; max-width: calc(100% - 24px); }
  .ll-dc-callout::before { border-left-width: 6px; border-right-width: 6px; }
  .ll-dc-callout--new { min-width: 0; padding: 7px 5px 8px; border-radius: 11px; transform: translate(-50%, calc(-100% - 10px)); }
  .ll-dc-callout--new::before { bottom: -7px; border-top-width: 8px; }
  .ll-dc-callout--old { min-width: 0; padding: 7px 10px 8px; border-radius: 11px; transform: translate(-50%, 10px); }
  .ll-dc-callout--old::before { top: -7px; border-bottom-width: 8px; }
  .ll-dc-pct--new { font-size: 26px; letter-spacing: -0.25px; }
  .ll-dc-pct--old { font-size: 18px; }
  .ll-dc-co-label { font-size: 10px; }
  .ll-dc-callout--old .ll-dc-co-label { font-size: 10.5px; }
  .ll-dc-axis span { font-size: 11px; }
  .ll-dc-ghost--1 { transform: translate(9px,11px); }
  .ll-dc-ghost--2 { transform: translate(18px,22px); }
  .ll-dc-ghost--3 { transform: translate(27px,33px); }
}
@media (min-width: 601px) {
  .ll-decision { padding-top: 140px; padding-bottom: 300px; }
}
.ll-decision { background: #000 !important; background-color: #000 !important; }
.ll-decision-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 19px; font-weight: 500; line-height: 1; letter-spacing: 0.2px; text-transform: none; font-style: normal; color: var(--c-ink-soft); background: rgba(255,255,255,0.05); border: 1px solid var(--c-surface-line); border-radius: 999px; padding: 8px 20px; }
@media (max-width: 600px) {
  .ll-decision { padding-left: var(--mobile-gutter); padding-right: var(--mobile-gutter); }
  .ll-decision { padding-top: 40px; padding-bottom: 250px; }
  .ll-decision-inner, .ll-decision-stage { width: 100%; max-width: var(--mobile-content); margin-left: auto; margin-right: auto; }
  .ll-decision-headline { max-inline-size: var(--mobile-headline-max); margin-left: 0; margin-right: auto; letter-spacing: 0; overflow-wrap: break-word; word-break: normal; hyphens: manual; text-wrap: pretty; }
  .ll-decision-headline { font-size: var(--mobile-display-size); line-height: 1.06; }
  .ll-decision-inner { text-align: center; }
  .ll-decision-headline { margin-left: auto; margin-right: auto; text-align: center; }
  .ll-decision-headline { font-size: 38px; line-height: 1.08; }
  .ll-decision-sub { max-width: min(100%, var(--mobile-content)); }
  .ll-decision-kicker { font-size: 16px; padding: 7px 15px; margin-bottom: 10px; border: none; }
}
.ll-dc-subline { margin: -13px 0 0 56px; font-size: 17px; font-weight: 500; color: #000; opacity: .4; }
@media (max-width: 600px) {
  .ll-dc-card { --dc-grid-left: 0%; --dc-grid-right: 0%; padding: 26px 29px 41px; }
  .ll-dc-title { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ll-dc-timeframe { padding-left: 0; }
  .ll-dc-subline { margin: -3px 0 0 0; font-size: 14px; line-height: 1em; }
}
/* Sehr leichter Verlauf ins Grau: gibt der Flaeche Tiefe, ohne aufzufallen. */
.ll-dc-card { background: linear-gradient(160deg, #ffffff 0%, #ffffff 55%, #f2f2f3 100%); color: #0c0c0e; }
.ll-dc-title, .ll-dc-subline, .ll-dc-co-label, .ll-dc-foot, .ll-dc-tf { color: #0c0c0e; }
.ll-dc-foot strong { color: #0c0c0e; }
/* obere Linie (+70 %) in Schwarz statt Akzent */
.ll-dc-line--new { stroke: #0c0c0e; }
.ll-dc-dots--new circle { fill: #0c0c0e; stroke: #fff; }
.ll-dc-diverge { stroke: #0c0c0e; fill: #fff; }
/* --- Diagramm auf der weissen Karte: alles in Grauwerten --- */
/* zweite Linie (ohne KI) und ihre Punkte */
.ll-dc-line--old { stroke: #9a9aa0; }
/* Punkte auf der grauen Linie bleiben weg. */
.ll-dc-dots--old circle { display: none; }
/* Gitter: auf Weiss sichtbar statt heller Linien auf Dunkel */
/* Gitter bleibt hell und zurueckhaltend, es dunkelt nicht nach. */
.ll-dc-gl-v, .ll-dc-gl-h { stroke: rgba(12,12,14,.06); }
.ll-dc-gl-vs, .ll-dc-gl-hs { stroke: rgba(12,12,14,.03); }
/* Flaeche unter der Kurve: kein Akzent-Schein mehr, nur ein Hauch Grau */
.ll-dc-area--new { fill: rgba(12,12,14,.05); }
/* Zeitraum-Schalter */
.ll-dc-tf { color: rgba(12,12,14,.42); }
.ll-dc-tf.is-active { color: #0c0c0e; }
/* Achsenbeschriftung */
.ll-dc-axis span { color: rgba(12,12,14,.42); }
/* untere Bubble */
.ll-dc-callout--old { background: #999; border-color: #999; color: #fff; }
.ll-dc-callout--old::before { border-bottom-color: #999; }
.ll-dc-callout--old .ll-dc-co-label { color: rgba(255,255,255,.8); }
/* Karten hinter der Karte: reine Grauwerte, deutlich sichtbar gestaffelt. */
.ll-dc-ghost { background: none; }
.ll-dc-ghost--1 { background: #4a4a4e; opacity: 1; transform: translate(3px, 17px); }
.ll-dc-ghost--2 { background: #35353a; opacity: 1; transform: translate(6px, 34px); }
.ll-dc-ghost--3 { background: #232327; opacity: 1; transform: translate(9px, 51px); }
@media (max-width: 1000px) {
  .ll-dc-ghost--1 { transform: translate(3px, 11px); }
  .ll-dc-ghost--2 { transform: translate(6px, 22px); }
  .ll-dc-ghost--3 { transform: translate(9px, 33px); }
}

/* Callout +70 %: schwarze Flaeche, Zahl in Akzentfarbe */
.ll-dc-callout--new { background: #0c0c0e; border-color: #0c0c0e; }
/* Pfeil der oberen Bubble schwarz statt Akzent */
.ll-dc-callout--new::before { border-top-color: #0c0c0e; }
.ll-dc-callout--new .ll-dc-pct--new { color: var(--c-accent); }
.ll-dc-callout--new .ll-dc-co-label { color: rgba(255,255,255,.72); }

/* ----- CTA (Section #cta, Klassen .ll-cta*, .ll-seal*) ----- */
/* #cta im Selektor: styles.css setzt #cta { padding-bottom: 30px } (ID schlaegt Klasse). */
#cta.ll-cta { padding: clamp(40px, 2vh, 70px) 20px clamp(70px, 9vh, 110px); }
.ll-cta__wrap { display: flex; flex-direction: column; align-items: center; }
/* Dunkle Karte: ganz dunkles Grau mit leichtem Verlauf, Schrift hell. */
.ll-cta__card {
  width: min(var(--ll-band), 100%);
  background: linear-gradient(160deg, #040404 0%, #272728 55%, #040404 100%);
  color: #fff; border: none;
  border-radius: clamp(20px, 2.4vw, 30px); overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}
.ll-cta__body {
  padding: clamp(34px, 5vw, 74px) clamp(24px, 4.4vw, 72px);
  text-align: center; display: flex; flex-direction: column; justify-content: center;
}
/* Eyebrow im selben Outline-Stil wie im Hero; auf der grauen Karte etwas heller umrandet. */
.ll-cta .ll-cta__eyebrow {
  display: table; margin: 0 auto 20px;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid #424247; background: none;
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.3;
  letter-spacing: .01em; color: #86868b;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.ll-cta__headline {
  margin: 0 0 14px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(26px, 3.5vw, 42px); line-height: 1.1; letter-spacing: -.5px;
  color: #fff; text-wrap: balance;
}
/* Zeilenumbrueche in der Headline nur auf Desktop. */
@media (max-width: 900px) { .ll-br-desk { display: none; } }
/* Mobile: die globale h2-Regel (styles.css, <=600px) setzt margin-left:0
   und kappt die Breite, hier wieder mittig. */
@media (max-width: 600px) {
  .ll-cta__headline { margin-left: auto; margin-right: auto; text-align: center; }
}
.ll-cta__sub {
  margin: 0 auto clamp(26px, 3.4vw, 40px); max-width: 46ch;
  font-family: var(--sans); font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5; color: rgba(255,255,255,.66);
}
/* Button ist der Hero-Button (.hero-cta, styles.css); hier nur Gewichte und Glow. */
/* Hero-Button in der CTA ohne eigenen Top-Abstand (kommt aus dem Sub-Text). */
#cta .hero-cta { margin: 0; }
#cta .hero-cta .ll-cta-lead { font-weight: 500; }
#cta .hero-cta strong { font-weight: 500; }
#cta .hero-cta { box-shadow: 0 14px 40px -12px rgba(214,226,81,.4); }
#cta .hero-cta:hover { box-shadow: 0 18px 50px -12px rgba(214,226,81,.52); }
/* Kleiner Zusatz unter dem Button, nimmt dem Klick den Druck. */
.ll-cta__note {
  margin: 16px 0 0; font-family: var(--sans); font-size: 15px;
  line-height: 1.3; color: rgba(255,255,255,.72); text-align: center;
}
/* Trust-Bullet: Hero-Klassen (.hero-proof), hier fuer die dunkle Karte eingefaerbt. */
.ll-cta__proof { margin: 24px 0 0; }
.ll-cta__proof .hero-proof-text { color: rgba(255,255,255,.62); font-size: 16.5px; }
.ll-cta__proof .hero-proof-text strong { color: inherit; font-weight: inherit; }
.ll-cta__proof .hero-avatars img { filter: none; border-color: #1b1b1e; }
/* Siegel */
.ll-seals { display: flex; gap: clamp(26px, 4vw, 46px); justify-content: center; margin-top: clamp(26px, 3.2vw, 38px);
}
.ll-seal { display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.ll-seal__ic { height: clamp(71px, 6.6vw, 91px); display: flex; align-items: center;
}
.ll-seal svg { height: clamp(71px, 6.6vw, 91px); width: auto; display: block;
}
.ll-seal__cap { font-family: var(--sans); font-size: 12.5px; text-align: center; letter-spacing: .01em; color: var(--c-ink-faint);
}
.ll-footer { background: #000; padding: 0;
}
.ll-footer .container { padding-inline: clamp(20px, 4vw, 56px);
}
.ll-footer__inner {
  display: grid; gap: clamp(30px, 4vw, 56px);
  /* Inhalt schmaler als die Trennlinien: die Linie laeuft ueber die volle
     Bandbreite, die drei Spalten sitzen eingerueckt. */
  grid-template-columns: 1fr auto auto;
  /* Abstand Angebot <-> Service: 30 % enger als die frueher gleichmaessige
     Verteilung (280px -> 196px -> 137px bei 1440px Viewport). */
  column-gap: clamp(63px, 9.52vw, 137px);
  padding-inline: clamp(0px, 8vw, 90px);
  max-width: min(var(--ll-band), 100%); margin-inline: auto;
  border-top: 1px solid var(--c-surface-line);
  padding-top: clamp(52px, 7vw, 86px);
}
.ll-footer__logo {
  margin: 0 0 6px; font-family: var(--sans); font-size: 28.6px; font-weight: 400;
  letter-spacing: -.02em; color: var(--c-ink);
}
.ll-footer__logo strong { font-weight: 700;
}
.ll-footer__claim {
  margin: 0 0 22px; font-family: var(--sans); font-size: 20.15px; line-height: 1.35;
  color: var(--c-ink-soft); letter-spacing: .01em; max-width: 22ch;
}
.ll-footer__col { display: flex; flex-direction: column; align-items: flex-start;
}
.ll-footer__head {
  /* 12px statt 22px: damit die erste Link-Zeile exakt dort beginnt, wo
     unter dem Logo der Claim beginnt (Link traegt 9px Tap-Padding). */
  margin: 0 0 12px; font-family: var(--sans); font-size: 20.8px; font-weight: 600;
  color: var(--c-ink);
}
.ll-footer__col a {
  font-family: var(--sans); font-size: 20.15px; line-height: 1; color: var(--c-ink-soft);
  text-decoration: none; padding: 9px 0; transition: color .16s ease;
}
.ll-footer__social { display: flex; gap: 18px; margin-top: 16px;
}
.ll-footer__social a {
  display: flex; align-items: center; justify-content: center;
  padding: 8px; margin: -8px; color: var(--c-ink); opacity: .25; transition: opacity .16s ease;
}
.ll-footer__social svg { width: 23.1px; height: 23.1px;
}
.ll-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 5px 6px;    /* Legal-Links schliessen direkt an den Textblock an */
  max-width: min(var(--ll-band), 100%); margin-inline: auto;
  margin-top: clamp(46px, 6vw, 72px); padding-top: 24px; padding-bottom: 30px;
  border-top: 0; text-align: center;
}
.ll-footer__bar p { margin: 0; font-family: var(--sans); font-size: 14px; color: var(--c-ink-faint);
}
.ll-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 14px;
}
.ll-footer__legal a {
  font-family: var(--sans); font-size: 14px; color: var(--c-ink-faint);
  text-decoration: none; transition: color .16s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ll-footer__col a:hover, .ll-footer__legal a:hover { color: var(--c-ink);
  }
  .ll-footer__social a:hover { opacity: 1;
  }
}
@media (max-width: 1050px) {
  .ll-footer__inner { padding-inline: clamp(0px, 4vw, 40px);
  }
}
@media (max-width: 620px) {
  .ll-footer__inner { grid-template-columns: 1fr; gap: 30px; justify-items: center;
  }
  .ll-footer__brand { text-align: center;
  }
  .ll-footer__col { display: none;
  }
  .ll-footer__claim, .ll-footer__social { display: none;
  }
  .ll-footer__inner { padding-top: 6px;
  }
  .ll-footer__logo { margin-bottom: 0;
  }
  .ll-footer__bar { margin-top: 18px; padding-top: 0;
  }
  .ll-footer__bar { --ll-foot-gap: 7px; gap: var(--ll-foot-gap);
  }
  .ll-footer__bar .ll-footer__cp {
    display: flex; flex-direction: column; gap: var(--ll-foot-gap);
    font-size: 12px; line-height: 1;
  }
  .ll-footer__cp-line { white-space: nowrap;
  }
  .ll-footer__bar .ll-footer__legal { gap: var(--ll-foot-gap); font-size: 12px; line-height: 1;
  }
  .ll-footer__bar .ll-footer__legal a { font-size: 12px; line-height: 1; padding: 0;
  }
  .ll-footer__sep { display: none;
  }
  .ll-footer__bar { flex-direction: column;
  }
}

/* ============================================================
   Testimonial-Slider (zwei Instanzen auf der Startseite).
   Aus dem Lab uebernommen, Klassen aus dem Lab auf .ll-.
   ============================================================ */
.ll-tst { padding: clamp(70px, 10vh, 130px) var(--mobile-gutter, 20px) 0; overflow: hidden;
}
.ll-tst__inner { max-width: min(var(--ll-band), 100%); margin-inline: auto;
}
.ll-tst--top { padding: var(--section-pad-top) var(--mobile-gutter, 20px) var(--section-pad-bottom);
}
.ll-tst__head { margin-bottom: clamp(22px, 2.6vw, 32px); text-align: center;
}
.ll-tst__title {
  margin: 0 auto 10px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(44px, 6.8vw, 76px); line-height: 1.1; letter-spacing: -.5px;
  color: var(--c-ink);
}
.ll-tst__title em { font-style: normal; font-weight: inherit; color: var(--c-accent);
}
.ll-tst__lede {
  margin: 0 auto; font-family: var(--sans); font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5; color: var(--c-ink-soft);
}
.ll-tst__navrow { display: flex; justify-content: flex-end; margin-bottom: 16px;
}
.ll-tst__nav { display: flex; gap: 10px; flex: 0 0 auto;
}
.ll-tst__arrow {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); background: transparent; color: var(--c-ink-soft);
  transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ll-tst__arrow svg { width: 18px; height: 18px;
}
.ll-tst__arrow:disabled { opacity: .3; cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .ll-tst__arrow:not(:disabled):hover { background: rgba(255,255,255,.09); color: var(--c-ink); border-color: rgba(255,255,255,.28);
  }
}
.ll-tst__rail {
  --ll-fade: clamp(56px, 14vw, 220px);
  /* align-items: flex-start -> jede Karte ist nur so hoch wie ihr Inhalt
     und dockt oben an, statt auf die Hoehe der laengsten gezogen zu werden. */
  display: flex; align-items: flex-start; gap: var(--ll-gap);
  /* Die Schiene laeuft links UND rechts bis an den Fensterrand. Die Karten
     starten trotzdem an der Bandkante, weil dasselbe Mass als Innenabstand
     wieder hineingeht. So werden Karten, die nach links hinauslaufen, nicht
     abgeschnitten, sondern bleiben abgedunkelt stehen (Effekt wie beim
     Future Business Club). Deshalb auch KEINE Maske mehr. */
  margin-inline: calc(50% - 50vw);
  padding: 4px calc(50vw - 50%);
  overflow-x: auto; overflow-y: hidden;
  scroll-padding-left: calc(50vw - 50%);
  scrollbar-width: none; -ms-overflow-style: none;
}
.ll-tst__rail::-webkit-scrollbar { display: none;
}
.ll-tst__rail { cursor: grab; user-select: none; -webkit-user-select: none;
}
.ll-tst__rail.is-dragging { cursor: grabbing; scroll-behavior: auto;
}
.ll-tst__rail.is-dragging .ll-tst__card { pointer-events: none;
}
.ll-tst__card { opacity: .3; transition: opacity .45s cubic-bezier(.16,1,.3,1);
}
.ll-tst__card.is-active { opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ll-tst__card { transition: none;
  }
}
.ll-tst__rail:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px;
}
.ll-tst__card {
  flex: 0 0 auto; width: max(272px, min(74vw, calc((var(--ll-band) - 2 * var(--ll-gap)) / 3)));
  display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-surface-line);
  border-radius: 40px; overflow: hidden;
}
@media (max-width: 700px) {
  .ll-tst__rail { scroll-snap-type: x mandatory;
  }
  .ll-tst__card { scroll-snap-align: start; scroll-snap-stop: always;
  }
  .ll-tst__card { width: max(272px, 81.4vw);
  }
}
.ll-tst__photo { position: relative; aspect-ratio: 40 / 27; background: #101012;
}
.ll-tst__photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--shot); background-size: cover; background-position: 50% 30%;
  filter: blur(26px) saturate(.75) brightness(.45);
  transform: scale(1.25);
}
.ll-tst__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; display: block;
}
.ll-tst__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.20) 52%, rgba(0,0,0,.72) 100%);
}
.ll-tst__photo .ll-tst__who {
  position: absolute; z-index: 1;
  /* gleicher Innenabstand wie im Kartentext darunter */
  left: 35px; right: 28px; bottom: 18px;
  margin: 0; padding: 0; border: 0;
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.4;
  color: #bbb;
  /* Sehr weicher, breiter Schatten: kaum sichtbar, hebt die Schrift aber
     auf hellen Bildstellen noch ab. */
  text-shadow: 0 1px 38px rgba(0,0,0,.28);
}
.ll-tst__photo .ll-tst__who strong { color: inherit; font-weight: inherit; font-size: inherit;
}
.ll-tst__body { padding: 21.6px 28px 48px 35px; display: flex; flex-direction: column; flex: 1 1 auto;
}
.ll-tst__tag { display: none;
}
.ll-tst__tag {
  align-self: flex-start; margin-bottom: 14px;
  position: relative; z-index: 2;
  padding: 5px 11px; border-radius: 999px;
  border: none;
  background: #000;
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .01em;
  color: var(--c-accent);
}
.ll-tst__quote {
  margin: 0 0 14px; font-family: var(--sans); font-weight: 500;
  font-size: 26.2px; line-height: 1.18; letter-spacing: 0;
  color: var(--c-ink); text-wrap: pretty; position: relative; z-index: 1;
}
.ll-tst__result {
  margin: 0; font-family: var(--sans); font-size: 17.5px; line-height: 1.38;
  color: rgba(255,255,255,.5);
}
.ll-tst__result span { color: #fff; font-weight: 500; font-size: inherit;
}
@media (max-width: 700px) {
  .ll-tst__navrow { display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ll-tst__rail { scroll-behavior: auto;
  }
}
@media (max-width: 700px) {
  .ll-tst__body { padding: 16.8px 14px 42px 17px;
  }
}
@media (max-width: 700px) {
  .ll-tst__rail { padding-inline: var(--mobile-gutter, 20px);
  }
  .ll-tst__photo .ll-tst__who { left: 17px; right: 14px; bottom: 14px;
  }
}

/* Mobile: nur nach rechts ueber den Rand laufen lassen. Links buendig mit
   dem Inhalt, sonst klebt die erste Karte an der Display-Kante. */
@media (max-width: 700px) {
  .ll-tst__rail {
    margin-left: 0; padding-left: 0;
    margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%);
    scroll-padding-left: 0;
  }
}

/* ============================================================
   HERO + STATEMENT (aus dem Lab, 10/2026)
   ============================================================ */
/* H1 auf Desktop kleiner, hervorgehobenes Wort mit Akzent-Verlauf. */
@media (min-width: 601px) {
  .hero .hero-h1 { font-size: clamp(34px, 4.93vw, 62px); }
}
.hero .hero-h1 em {
  background: var(--ll-text-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Eyebrow ueber der H1: duenne Outline, kein Hintergrund, gedaempfte Schrift. */
.hero .ll-hero-eyebrow {
  display: table; margin: 0 auto 22px;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid #2a2a2d; background: none;
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1.3;
  letter-spacing: .01em; color: #86868b; text-align: center;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
@media (max-width: 600px) {
  .hero .ll-hero-eyebrow { font-size: 13px; padding: 7px 14px; margin-bottom: 18px; }
}
/* 10 % mehr Weissraum oben. */
.hero { padding-top: clamp(112px, 29.7vw, 189px); }
@media (max-width: 600px) {
  /* Leerraum ueber der Eyebrow halbiert (Abstand zum Menue 56 -> 28px), H1 20 % groesser. */
  .hero { padding-top: 100px; }
  .hero .hero-h1 { font-size: 37.2px; }
}
/* Fliesstext unter der H1: feste Groesse, 50 % Weiss. */
.hero .hero-positioning { font-size: 23px; letter-spacing: -.2px; color: rgba(255,255,255,.5); }
/* Hero-Button: „Kostenlose Potenzialberatung", beide Teile 500. */
.hero .hero-cta { letter-spacing: -1px; }
.hero .hero-cta .ll-cta-lead,
.hero .hero-cta strong { font-weight: 500; }
/* Proof: Avatare 20 % kleiner, Text als deckendes Grau (saubere Kanten). */
.hero .hero-avatars img { width: 60px; height: 60px; }
@media (max-width: 600px) { .hero .hero-avatars img { width: 44px; height: 44px; } }
.hero .hero-proof-text {
  color: #5f5f62; font-weight: 500; letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.hero .hero-proof-text strong { color: #999; }

/* Statement: breiterer Absatz, Unterschrift „Jan" 30 % groesser und naeher am Text. */
@media (min-width: 601px) {
  .statement .statement-text { max-width: 900px; }
}
.statement .statement-text { margin-bottom: 20px; }
.statement .statement-sign { margin-top: 0; }
.statement .statement-name { font-size: calc(64px * 1.3); }
.statement .statement-role,
.statement .statement-cred { color: #777; font-size: 16px; }

/* Alle Headlines der Startseite: engere Laufweite. */
html body :is(.hero-h1, section h2.display, .ll-mk__headline, .ll-tst__title,
  .ll-about__title, .ll-cta__headline) { letter-spacing: -2px; }

/* CTA mobil: Headline 30 % groesser ueber die volle Kartenbreite (20px Innenabstand),
   Button bleibt innerhalb der Karte (lief vorher rechts ueber den Bildschirmrand). */
@media (max-width: 600px) {
  #cta .ll-cta__body { padding-left: 20px; padding-right: 20px; }
  #cta .ll-cta__headline { font-size: 33.8px; max-width: none; margin-left: 0; margin-right: 0; }
  #cta .ll-cta__sub { max-width: none; }
  #cta .hero-cta {
    max-width: 100%; box-sizing: border-box;
    font-size: 16px; letter-spacing: -0.6px;
    padding: 5px 7px 5px 20px; gap: 6px;
  }
}

/* Hero-Button auf sehr schmalen Handys (< 360px): Schrift und Einzug skalieren mit der
   Breite, damit „Kostenlose Potenzialberatung" immer einzeilig im Rand bleibt. */
@media (max-width: 359px) {
  .hero .hero-cta {
    max-width: 100%; box-sizing: border-box; white-space: nowrap;
    font-size: 4.6vw; padding-left: 14px; gap: 4px;
  }
  /* Sehr lange deutsche Komposita in Listen sauber silbentrennen statt ueberlaufen. */
  .ll-mk__list li, #system li { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 389px) {
  /* Eyebrow einzeilig halten (sonst steht „Experten" allein in Zeile 2). */
  .hero .ll-hero-eyebrow { white-space: nowrap; font-size: clamp(10.5px, 3.4vw, 13px); padding: 7px 12px; }
}

/* Transformation: auf dem Handy die Kurzfassung des Textes, auf Desktop die volle. */
.ll-mk__sub-short { display: none; }
@media (max-width: 600px) {
  .ll-mk__sub-long { display: none; }
  .ll-mk__sub-short { display: inline; }
}

/* Scoped production rollout: Lab glow and System module color treatment (2026-10-02). */
/* ============================================================
   LAB (02.10.): Hero-Hintergrund nach Vorbild leadersmedia.de,
   aber dezent in Grauwerten: feines Raster (56px, laeuft nach unten
   aus) + weicher Lichtschein von oben Mitte. Beides liegt HINTER dem
   Inhalt (isolation + z-index:-1), klickt nicht mit.
   ============================================================ */
/* Shared Hero/System grid tokens keep the pattern itself 1:1 aligned. */
:root { --ll-grid-cell: 56px; --ll-grid-line: rgba(255,255,255,.55); --ll-grid-alpha: .12; }
@media (max-width: 600px) { :root { --ll-grid-cell: 40px; } }
.hero { position: relative; isolation: isolate; }
.hero::before,
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
/* Raster: helle 1px-Linien, sehr geringe Deckkraft, unten weich ausgeblendet. */
.hero::before {
  background-image:
    linear-gradient(to right, var(--ll-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ll-grid-line) 1px, transparent 1px);
  background-size: var(--ll-grid-cell) var(--ll-grid-cell);
  background-position: center top;
  opacity: var(--ll-grid-alpha);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
/* Lichtschein: neutrales Grau-Weiss von oben Mitte. */
.hero::after {
  /* Doppelter Radius (war 70% 60%), viele weiche Stufen statt harter Kante;
     die Maske laesst den Schein nach unten sanft ins Dunkle auslaufen. */
  background: radial-gradient(ellipse 140% 120% at 50% 0%,
    rgba(255,255,255,.25) 0%, rgba(255,255,255,.17) 12%, rgba(255,255,255,.105) 26%,
    rgba(255,255,255,.06) 42%, rgba(255,255,255,.028) 60%, rgba(255,255,255,.01) 78%, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 70%, transparent 100%);
}
@media (max-width: 600px) {
  .hero::after { background: radial-gradient(ellipse 240% 110% at 50% 0%,
    rgba(255,255,255,.25) 0%, rgba(255,255,255,.17) 12%, rgba(255,255,255,.105) 26%,
    rgba(255,255,255,.06) 42%, rgba(255,255,255,.028) 60%, rgba(255,255,255,.01) 78%, transparent 95%); }
}

/* ============================================================
   LAB (02.10.): Raster + Schein als Akzent in weiteren Sections.
   Mittelpunkt per --fx-y (Abstand von der Section-Oberkante),
   blendet radial in ALLE Richtungen aus. Liegt hinter dem Inhalt.
   1) Transformation: auf Hoehe der Headline
   2) CTA: unter der Karte (Schein kommt unter der Kartenkante hervor)
   ============================================================ */
#markt-transformation.ll-mk,
#cta.ll-cta { position: relative; isolation: isolate; }
#markt-transformation.ll-mk { --fx-y: 40%; --fx-r-y: 40%; }
#cta.ll-cta { --fx-y: 76%; --fx-r-y: 24%; }
@media (max-width: 600px) {
  #markt-transformation.ll-mk { --fx-y: 40%; --fx-r-y: 40%; }
  #cta.ll-cta { --fx-y: 78%; --fx-r-y: 22%; }
}
#markt-transformation.ll-mk::before,
#markt-transformation.ll-mk::after,
#cta.ll-cta::before,
#cta.ll-cta::after {
  content: ""; display: block; position: absolute; inset: 0; height: 100%;
  z-index: -1; pointer-events: none;
}
/* Raster (wie im Hero, 12 %), radial ausgeblendet */
#markt-transformation.ll-mk::before,
#cta.ll-cta::before {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.55) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center center;
  opacity: .12;
  -webkit-mask-image: radial-gradient(ellipse 42% var(--fx-r-y) at 50% var(--fx-y), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 42% var(--fx-r-y) at 50% var(--fx-y), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
}
/* Schein: von der Mitte weich nach aussen */
#markt-transformation.ll-mk::after,
#cta.ll-cta::after {
  background: radial-gradient(ellipse 48% var(--fx-r-y) at 50% var(--fx-y),
    rgba(255,255,255,.20) 0%, rgba(255,255,255,.12) 18%, rgba(255,255,255,.065) 36%,
    rgba(255,255,255,.03) 56%, rgba(255,255,255,.01) 76%, transparent 100%);
}
@media (max-width: 600px) {
  #markt-transformation.ll-mk::before, #cta.ll-cta::before {
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(ellipse 75% var(--fx-r-y) at 50% var(--fx-y), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
            mask-image: radial-gradient(ellipse 75% var(--fx-r-y) at 50% var(--fx-y), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
  }
  #markt-transformation.ll-mk::after, #cta.ll-cta::after {
    background: radial-gradient(ellipse 85% var(--fx-r-y) at 50% var(--fx-y),
      rgba(255,255,255,.20) 0%, rgba(255,255,255,.12) 18%, rgba(255,255,255,.065) 36%,
      rgba(255,255,255,.03) 56%, rgba(255,255,255,.01) 76%, transparent 100%);
  }
}
/* Effekte bleiben in ihrer Section: so clippen weder #system noch schwarze Nachbarsections
   sichtbare Teile weg. Radiale Masken laufen bis zu jeder Section-Kante transparent aus.
   Bei Pseudo-Flaechen auch den Startbereich ausblenden; sonst wirkt deren obere Kante hart. */
#cta.ll-cta { overflow: hidden; contain: paint; }
/* Helle Trennlinie ueber dem Footer entfernt (der CTA-Schein laeuft jetzt weich hinein). */
/* Production footer styles are preserved. */

/* ============================================================
   LAB (02.10.): helle „Das System"-Module (system-light.css, generiert)
   Overrides hier statt in der generierten Datei. Spezifitaet html body #system,
   damit sie unabhaengig von der Ladereihenfolge gewinnen.
   ============================================================ */
/* Plaketten „Modul 1/2/3": fast schwarz, Schrift weiss. */
html body #system .sys-badge { background: #2a2a2d; color: #fff; } /* 10 % heller (war #141416) */

/* Modul 3: Punkte-Raster auf hellem Grund gerade gut erkennbar (dunkle Punkte). */
html body #system .sys-visual--m3::before {
  background-image: radial-gradient(circle, rgb(40 40 46 / 6.4%) 2.5px, transparent 2.6px); /* -60 % */
}
/* Modul 3: Haptik — heller Verlauf mit weissem Rand, Innenschatten mit echtem Weiss
   (weicher weisser Innenrand, Glanzkante oben links, leichte Tiefe unten rechts). */
html body #system .sys-visual--m3 {
  /* Innen dunkler (weisse Balken setzen sich ab), nach aussen weich ins Weiss. */
  background: radial-gradient(circle, #a4a4a8 0%, #adadb1 38%, #bcbcc0 62%, #d6d6d9 82%, #f4f4f5 94%, #ffffff 100%);
  box-shadow:
    inset 0 0 60px -14px #ffffff,
    inset 4px 4px 3px -1px rgba(255,255,255,.95),
    inset -4px -6px 14px -4px rgba(60,60,66,.18);
}

/* Diagramm: helle Balken von links transparent in den Akzent-Verlauf,
   die kaum sichtbaren Balken von links transparent in dunkleres Grau. */
html body #system .sys-fill--light {
  /* Komplett weiss (statt Akzent), weich aus der Transparenz. */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.1) 18%, rgba(255,255,255,.4) 40%, rgba(255,255,255,.78) 62%, #ffffff 82%, #ffffff 100%);
}
html body #system .sys-fill--dark {
  background: linear-gradient(to right, rgba(100,100,108,0) 0%, rgba(100,100,108,.08) 18%, rgba(100,100,108,.32) 42%, rgba(100,100,108,.65) 68%, rgba(96,96,104,.9) 100%);
}

/* Module (Visuals) auf Desktop 20 % kleiner: 80 % Breite + Hoehe, mittig in der Spalte.
   Feste Inhalte (Modul-2-Szene, Modul-3-Diagramm) skalieren mit; das Modul-1-Raster
   ist prozentual und passt sich selbst an. */
@media (min-width: 801px) {
  html body #system .sys-visual { width: 80%; min-height: 616px; justify-self: center; margin-left: auto; margin-right: auto; }
  html body #system .sys-visual .m2-scene,
  html body #system .sys-visual .sys-chart { transform: scale(.8); transform-origin: center center; }
  /* Szene ist fest 465x740: Layout-Platz um 20 % zurueckgeben, sonst bleibt Modul 2 770px hoch. */
  html body #system .sys-visual .m2-scene { margin: -74px -46.5px; }
}

/* Alle Modul-Flaechen: Rundung clamp(34px, 6vw, 90px). */
html body #system .sys-visual { border-radius: clamp(34px, 6vw, 90px); }
/* Modul 3: Balken nutzen mehr der Flaeche (+15 % Breite). */
html body #system .sys-chart { width: 345px; }
html body #system .sys-barrow { width: 100%; }

/* ============================================================
   Modul 3: Legende IN die Balken integriert (wie ein Profi-Diagramm).
   Oben: „Weniger Workload & Kosten" im laengsten dunklen Balken (Reihe 1),
   unten: „Profitabilitaet" im laengsten weissen Balken (Reihe 9).
   Pfeile im Kreis. Labels blenden erst ein, wenn die Balken ausgefahren sind.
   ============================================================ */
html body #system .sys-chart { position: relative; }
html body #system .sys-chart-label {
  position: absolute; right: 0; z-index: 4; margin: 0;
  height: 35px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 6px 0 14px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -.1px; line-height: 1;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
html body #system .sys-chart-label--down { top: 0; color: #fff; }
html body #system .sys-chart-label--up { bottom: 0; color: #1c1c1f; }
html body #system .sys-module.bars-run .sys-chart-label--down { opacity: 1; transition-delay: .9s; }
html body #system .sys-module.bars-run .sys-chart-label--up { opacity: 1; transition-delay: 1.5s; }
/* Pfeil im Kreis */
html body #system .sys-chart-label .sys-chart-arrow {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 25px; height: 25px; border-radius: 50%;
  font-size: 14px; line-height: 1; vertical-align: 0;
}
html body #system .sys-chart-label--down .sys-chart-arrow { background: #fff; color: #1c1c1f; order: -1; }
html body #system .sys-chart-label--up .sys-chart-arrow { background: #1c1c1f; color: #fff; }
/* Ohne die Labels im Fluss beginnt das Diagramm direkt mit Reihe 1. */
html body #system .sys-bars { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  html body #system .sys-chart-label { opacity: 1; transition: none; }
}
/* Legende: Schrift groesser, Pfeile ohne Kreis, oben mehr Abstand zum Balkenende. */
html body #system .sys-chart-label { font-size: 17px; gap: 6px; }
html body #system .sys-chart-label--down { padding-right: 18px; }
html body #system .sys-chart-label--up { padding-right: 12px; }
html body #system .sys-chart-label .sys-chart-arrow,
html body #system .sys-chart-label--down .sys-chart-arrow,
html body #system .sys-chart-label--up .sys-chart-arrow {
  width: auto; height: auto; border-radius: 0; background: none; color: inherit;
  font-size: 19px;
}

/* ============================================================
   Modul 3 nach Jans Vorlage (Screenshot 02.10.): flaches Dunkelgrau,
   KEINE Innen-/Aussenschatten, Plakette fast schwarz, dezente helle Punkte,
   dunkle Balken -> kuehles Grau, weisse Balken -> Weiss, Einstieg noch weicher.
   ============================================================ */
html body #system .sys-visual--m3 {
  background: radial-gradient(ellipse 90% 70% at 50% 25%, #282828 0%, #202020 45%, #1d1d1d 100%);
  background-color: #1e1e1e;
  box-shadow: none;
}
html body #system .sys-badge { background: #0a0a0a; color: #fff; border-color: transparent; }
html body #system .sys-visual--m3::before {
  background-image: radial-gradient(circle, rgb(255 255 255 / 5%) 2.5px, transparent 2.6px);
}
/* Noch weicherer Einstieg aus der Transparenz (lange, flache Rampe). */
html body #system .sys-fill--dark {
  background: linear-gradient(to right,
    rgba(89,88,94,0) 0%, rgba(89,88,94,.03) 15%, rgba(89,88,94,.12) 32%,
    rgba(89,88,94,.3) 50%, rgba(89,88,94,.58) 68%, rgba(89,88,94,.85) 85%, #59585e 100%);
}
html body #system .sys-fill--light {
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.03) 15%, rgba(255,255,255,.12) 32%,
    rgba(255,255,255,.32) 50%, rgba(255,255,255,.62) 68%, rgba(255,255,255,.9) 85%, #ffffff 100%);
}

/* ============================================================
   Modul 2: Karte bleibt hell, Grafiken wieder wie im Original (dunkel):
   Kugel + Trichter wie live, Social-Icons dunkel statt hellgrau.
   ============================================================ */
html body #system .sys-visual--m2 .m2-sphere {
  background: radial-gradient(circle at 40% 30%, #5c5c63 0%, #2c2c31 33%, #141416 64%, #050506 100%);
  box-shadow: inset -10px -16px 34px rgba(0,0,0,.72), inset 9px 11px 26px rgba(255,255,255,.12), 0 32px 54px -20px rgba(0,0,0,.85), 0px -94px 100px -5px, 0px -44px 40px -25px;
}
html body #system .sys-visual--m2 .m2-funnel { filter: none; }
html body #system .sys-visual--m2 .m2-logo { filter: brightness(0) invert(.2); }
html body #system .sys-visual--m2 .m2-logo--3a { filter: brightness(0) invert(.2); }
/* Modul 2: Glow hinter der Karte (aeusserer Schatten) entfernt, nur Innenrand bleibt. */
html body #system .sys-visual--m2 { box-shadow: 2px 2px 29px 14px rgb(254 254 254 / 30%) inset; }

/* Modul 3: Profitabilitaet + Pfeil groesser und tiefschwarz. */
html body #system .sys-chart-label--up { font-size: 20px; color: #000; font-weight: 600; }
html body #system .sys-chart-label--up .sys-chart-arrow { color: #000; font-size: 22px; }
/* Kleine + mittlere Balken (bis 70 %) 10 % laenger -> gleichmaessigerer Verlauf.
   Lange Balken (80/89,7/100 %) bleiben. !important schlaegt das Inline-Style --w. */
html body #system .sys-barrow:nth-child(1) .sys-fill--light { --w: 11.77% !important; }
html body #system .sys-barrow:nth-child(2) .sys-fill--light { --w: 11.77% !important; }
html body #system .sys-barrow:nth-child(3) .sys-fill--dark { --w: 66% !important; }
html body #system .sys-barrow:nth-child(3) .sys-fill--light { --w: 20.46% !important; }
html body #system .sys-barrow:nth-child(4) .sys-fill--dark { --w: 44% !important; }
html body #system .sys-barrow:nth-child(4) .sys-fill--light { --w: 30.36% !important; }
html body #system .sys-barrow:nth-child(5) .sys-fill--dark { --w: 30.36% !important; }
html body #system .sys-barrow:nth-child(5) .sys-fill--light { --w: 55.33% !important; }
html body #system .sys-barrow:nth-child(6) .sys-fill--dark { --w: 30.36% !important; }
html body #system .sys-barrow:nth-child(6) .sys-fill--light { --w: 66% !important; }
html body #system .sys-barrow:nth-child(7) .sys-fill--dark { --w: 20.46% !important; }
html body #system .sys-barrow:nth-child(7) .sys-fill--light { --w: 76.67% !important; }
html body #system .sys-barrow:nth-child(8) .sys-fill--dark { --w: 20.46% !important; }
html body #system .sys-barrow:nth-child(9) .sys-fill--dark { --w: 11.77% !important; }

/* Modul 2: Kunden-Icons dunkel, Social-Icons im Ton des Trichters (~rgb 17,19,23). */
html body #system .sys-visual--m2 .m2-drop { fill: #111317; opacity: .9; }
html body #system .sys-visual--m2 .m2-logo,
html body #system .sys-visual--m2 .m2-logo--3a { filter: brightness(0) invert(.07); }
/* Plaketten je Modul (Jans Werte): Modul 2 hell, Modul 3 fast schwarz. */
html body #system .sys-visual--m2 .sys-badge { background: #f4f4f4; color: #909090; border-color: transparent; }
html body #system .sys-visual--m3 .sys-badge { background: #101010; color: #909090; border-color: transparent; }

/* ============================================================
   Modul 1 wie Modul 3: flaches Dunkelgrau ohne Schatten, Plakette #101010,
   Kugeln flach (kein 3D-Verlauf, kein Schlagschatten) im Balken-Grau,
   Fokus-Kugel weiss. Scroll-Leuchten der Fokus-Kugel bleibt.
   ============================================================ */
html body #system .sys-visual--m1 {
  background: radial-gradient(ellipse 90% 70% at 50% 25%, #282828 0%, #202020 45%, #1d1d1d 100%);
  background-color: #1e1e1e;
  box-shadow: none;
}
html body #system .sys-visual--m1 .sys-badge { background: #101010; color: #909090; border-color: transparent; }
html body #system .sys-visual--m1 .m1-ball:not(.m1-ball--icp) {
  background: #59585e; box-shadow: none;
}
html body #system .sys-visual--m1 .m1-ball--icp {
  background: #ffffff;
  box-shadow: 0 0 calc(var(--p, 0) * 104px) calc(var(--p, 0) * 31px) rgba(255,255,255, calc(var(--p, 0) * 0.55));
}

/* Modul 1: gleiches Punkte-Raster wie Modul 3, Kugeln heller, Fokus-Kugel gleich gross. */
html body #system .sys-visual--m1::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgb(255 255 255 / 5%) 2.5px, transparent 2.6px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 74% 82% at 45% 50%, #000 46%, transparent 86%);
          mask-image: radial-gradient(ellipse 68% 75% at 52% 41%, #000 10%, transparent 72%);
}
html body #system .sys-visual--m1 .m1-grid { z-index: 1; }
html body #system .sys-visual--m1 .m1-ball:not(.m1-ball--icp) { background: #868686; }
html body #system .sys-visual--m1 .m1-ball--icp { width: 9%; }

/* Modul 2: Hintergrund wie Modul 3 (flaches Dunkelgrau, ohne Schatten), alle Icons hell. */
html body #system .sys-visual--m2 {
  background: radial-gradient(ellipse 90% 70% at 50% 25%, #282828 0%, #202020 45%, #1d1d1d 100%);
  background-color: #1e1e1e;
  box-shadow: none;
}
html body #system .sys-visual--m2 .m2-logo,
html body #system .sys-visual--m2 .m2-logo--3a { filter: brightness(0) invert(.85); }
html body #system .sys-visual--m2 .m2-drop { fill: #ffffff; opacity: .95; }
/* Modul 2: Plakette jetzt dunkel wie Modul 1 und 3. */
html body #system .sys-visual--m2 .sys-badge { background: #101010; color: #909090; border-color: transparent; }

/* Modul 2: Social-Icons 30 % transparenter, Punkte-Raster wie Modul 1/3,
   Glow hinter der Kugel 50 % dezenter (Glow-Flaeche + heller Halo der Kugel). */
html body #system .sys-visual--m2 .m2-logo { opacity: .7; }
html body #system .sys-visual--m2::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgb(255 255 255 / 5%) 2.5px, transparent 2.6px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 74% 82% at 45% 50%, #000 46%, transparent 86%);
          mask-image: radial-gradient(ellipse 68% 75% at 52% 41%, #000 10%, transparent 72%);
}
html body #system .sys-visual--m2 .m2-scene { position: relative; z-index: 1; }
html body #system .sys-visual--m2 .m2-glow { opacity: .5; }
html body #system .sys-visual--m2 .m2-sphere {
  box-shadow: inset -10px -16px 34px rgba(0,0,0,.72), inset 9px 11px 26px rgba(255,255,255,.12), 0 32px 54px -20px rgba(0,0,0,.85),
    0px -94px 100px -5px rgba(255,255,255,.5), 0px -44px 40px -25px rgba(255,255,255,.5);
}

/* ============================================================
   DAS SYSTEM — Modul-Visuals (10/2026, finale Lab-Fassung)
   Alle drei Module: flaches Dunkelgrau ohne Schatten, dunkle Plakette,
   dezentes Punkte-Raster, Desktop 20 % kleiner.
   ============================================================ */
html body #system .sys-visual { border-radius: clamp(34px, 6vw, 90px); }
html body #system .sys-visual--m1,
html body #system .sys-visual--m2,
html body #system .sys-visual--m3 {
  background: radial-gradient(ellipse 90% 70% at 50% 25%, #282828 0%, #202020 45%, #1d1d1d 100%);
  background-color: #1e1e1e;
  box-shadow: none;
}
html body #system .sys-badge { background: #101010; color: #909090; border-color: transparent; }
/* Punkte-Raster (wie Modul 3) in allen drei Modulen */
html body #system .sys-visual--m1::before,
html body #system .sys-visual--m2::before,
html body #system .sys-visual--m3::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgb(255 255 255 / 5%) 2.5px, transparent 2.6px);
  background-size: 12px 12px;
  -webkit-mask-image: radial-gradient(ellipse 74% 82% at 45% 50%, #000 46%, transparent 86%);
          mask-image: radial-gradient(ellipse 68% 75% at 52% 41%, #000 10%, transparent 72%);
}
html body #system .sys-visual--m1 .m1-grid { z-index: 1; }
html body #system .sys-visual--m2 .m2-scene { position: relative; z-index: 1; }

/* Desktop: Module 20 % kleiner (Breite + Hoehe), feste Inhalte skalieren mit. */
@media (min-width: 801px) {
  html body #system .sys-visual { width: 80%; min-height: 616px; justify-self: center; margin-left: auto; margin-right: auto; }
  html body #system .sys-visual .m2-scene,
  html body #system .sys-visual .sys-chart { transform: scale(.8); transform-origin: center center; }
  html body #system .sys-visual .m2-scene { margin: -74px -46.5px; }
}

/* Modul 1: flache Kugeln (kein 3D), Fokus-Kugel weiss und gleich gross. */
html body #system .sys-visual--m1 .m1-ball:not(.m1-ball--icp) { background: #868686; box-shadow: none; }
html body #system .sys-visual--m1 .m1-ball--icp {
  width: 9%; background: #ffffff;
  box-shadow: 0 0 calc(var(--p, 0) * 104px) calc(var(--p, 0) * 31px) rgba(255,255,255, calc(var(--p, 0) * 0.55));
}

/* Modul 2: helle Icons, Social-Icons 70 %, Kugel-Glow 50 % dezenter. */
html body #system .sys-visual--m2 .m2-logo,
html body #system .sys-visual--m2 .m2-logo--3a { filter: brightness(0) invert(.85); }
html body #system .sys-visual--m2 .m2-logo { opacity: .7; }
html body #system .sys-visual--m2 .m2-drop { fill: #ffffff; opacity: .95; }
html body #system .sys-visual--m2 .m2-glow { opacity: .5; }
html body #system .sys-visual--m2 .m2-sphere {
  box-shadow: inset -10px -16px 34px rgba(0,0,0,.72), inset 9px 11px 26px rgba(255,255,255,.12), 0 32px 54px -20px rgba(0,0,0,.85),
    0px -94px 100px -5px rgba(255,255,255,.5), 0px -44px 40px -25px rgba(255,255,255,.5);
}

/* Modul 3: Balken weich aus der Transparenz (dunkel -> kuehles Grau, hell -> Weiss),
   breiteres Diagramm, kleine/mittlere Balken 10 % laenger. */
html body #system .sys-chart { width: 345px; position: relative; }
html body #system .sys-barrow { width: 100%; }
html body #system .sys-bars { margin: 0; }
html body #system .sys-fill--dark {
  background: linear-gradient(to right,
    rgba(89,88,94,0) 0%, rgba(89,88,94,.03) 15%, rgba(89,88,94,.12) 32%,
    rgba(89,88,94,.3) 50%, rgba(89,88,94,.58) 68%, rgba(89,88,94,.85) 85%, #59585e 100%);
}
html body #system .sys-fill--light {
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.03) 15%, rgba(255,255,255,.12) 32%,
    rgba(255,255,255,.32) 50%, rgba(255,255,255,.62) 68%, rgba(255,255,255,.9) 85%, #ffffff 100%);
}
html body #system .sys-barrow:nth-child(1) .sys-fill--light { --w: 11.77% !important; }
html body #system .sys-barrow:nth-child(2) .sys-fill--light { --w: 11.77% !important; }
html body #system .sys-barrow:nth-child(3) .sys-fill--dark { --w: 66% !important; }
html body #system .sys-barrow:nth-child(3) .sys-fill--light { --w: 20.46% !important; }
html body #system .sys-barrow:nth-child(4) .sys-fill--dark { --w: 44% !important; }
html body #system .sys-barrow:nth-child(4) .sys-fill--light { --w: 30.36% !important; }
html body #system .sys-barrow:nth-child(5) .sys-fill--dark { --w: 30.36% !important; }
html body #system .sys-barrow:nth-child(5) .sys-fill--light { --w: 55.33% !important; }
html body #system .sys-barrow:nth-child(6) .sys-fill--dark { --w: 30.36% !important; }
html body #system .sys-barrow:nth-child(6) .sys-fill--light { --w: 66% !important; }
html body #system .sys-barrow:nth-child(7) .sys-fill--dark { --w: 20.46% !important; }
html body #system .sys-barrow:nth-child(7) .sys-fill--light { --w: 76.67% !important; }
html body #system .sys-barrow:nth-child(8) .sys-fill--dark { --w: 20.46% !important; }
html body #system .sys-barrow:nth-child(9) .sys-fill--dark { --w: 11.77% !important; }

/* Modul 3: Legende in den Balken (oben im laengsten dunklen, unten im laengsten weissen). */
html body #system .sys-chart-label {
  position: absolute; right: 0; z-index: 4; margin: 0;
  height: 35px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 6px 0 14px;
  font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: -.1px; line-height: 1;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
html body #system .sys-chart-label--down { top: 0; color: #fff; padding-right: 18px; }
html body #system .sys-chart-label--up { bottom: 0; color: #000; font-size: 20px; font-weight: 600; padding-right: 12px; }
html body #system .sys-module.bars-run .sys-chart-label--down { opacity: 1; transition-delay: .9s; }
html body #system .sys-module.bars-run .sys-chart-label--up { opacity: 1; transition-delay: 1.5s; }
html body #system .sys-chart-label .sys-chart-arrow {
  display: inline-block; width: auto; height: auto; border-radius: 0; background: none;
  color: inherit; font-size: 19px; line-height: 1; vertical-align: 0;
}
html body #system .sys-chart-label--down .sys-chart-arrow { order: -1; }
html body #system .sys-chart-label--up .sys-chart-arrow { color: #000; font-size: 22px; }
@media (prefers-reduced-motion: reduce) {
  html body #system .sys-chart-label { opacity: 1; transition: none; }
}