/* Leistungsseiten (Entwurf 25.10.2026): Hero (Aufbau in src/components/seite/LeistungsHero.astro) und die Abschnitte der Seite.
   Flacher als die Startseite, ruhiger; Wirkung aus Schrift, Raster und Licht in Sonne. Farben über die Kanäle (Tag und Nacht).
   Bewegung: quelle/leistung.js setzt .da, sobald die Seite steht; ohne Skript oder bei reduzierter Bewegung steht alles sofort. */

/* ---------- gemeinsam ---------- */
.lh { position: relative; }
.lh-titel { margin: 0; font-weight: 320; letter-spacing: -.045em; color: var(--sand); text-wrap: balance; }
html.hell .lh-titel { font-weight: 300; }
.lh-satz { margin: 0; max-width: 44ch; font-size: clamp(16.5px, 15px + .35vw, 19px); line-height: 1.5; letter-spacing: -.005em; color: rgb(var(--vg-k) / .78); text-wrap: pretty; }
.lh-handlung { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.lh-etikett { margin: 0; color: var(--leise); font: 500 14px/1.2 var(--schrift); letter-spacing: -.003em; }
/* eine Sprache für Links wie auf der Startseite: die Linie lädt beim Zeigen unter dem Text von links, der Pfeil geht ein Stück mit */
.lh-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--sand); text-decoration: none; font: 500 15px/1 var(--schrift); }
.lh-link > span { position: relative; padding: 6px 0; }
.lh-link > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--raus); }
.lh-link svg { width: 14px; height: 14px; flex: none; transition: translate .25s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .lh-link:hover > span::after { transform: scaleX(1); transition: transform .6s var(--lade); }
  .lh-link:hover svg { translate: 4px 0; }
}
.lh-link:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; }
.lh-link:focus-visible > span::after, .ls-fall:focus-visible .ls-fall-mehr > span::after { transform: none; }
/* ---------- a: Terminal. Zentriert, Wörter leuchten nacheinander auf (über Sonne in Sand), dahinter das Punktraster als Leinwand,
   unten ein Reiter mit der Frage ---------- */
.lh-a { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: clamp(600px, 72svh, 820px); padding: var(--kopf) var(--rand) 0; text-align: center; overflow: hidden; }
.lh-punkte { position: absolute; left: 0; top: var(--kopf); width: 100%; height: calc(100% - var(--kopf)); pointer-events: none; }
.lh-a-mitte { position: relative; align-self: center; justify-self: center; display: grid; justify-items: center; max-width: 1240px; padding: clamp(40px, 6vh, 88px) 0 clamp(32px, 5vh, 64px); }
/* Etikett: Boje mit Echolot zwischen zwei Linien, die nach außen auslaufen (Jonah wählt c am 25.10.: „gefällt mir sehr gut“) */
.lh-a .lh-etikett { display: inline-flex; align-items: center; gap: 12px; color: var(--sand); }
.lh-e-kimm { width: clamp(40px, 5vw, 88px); height: 1px; background: linear-gradient(90deg, transparent, rgb(var(--vg-k) / .4)); }
.lh-e-kimm:last-child { transform: scaleX(-1); }
.js .lh-a .lh-e-kimm { scale: 0 1; }
.js .lh-a.da .lh-e-kimm { scale: 1 1; transition: scale 1.1s var(--lade) .25s; }
.lh-e-boje { position: relative; width: 7px; height: 7px; margin-right: -2px; border-radius: 50%; background: var(--sonne); }
.lh-e-boje::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--sonne); border-radius: 50%; opacity: 0; }
.js .lh-a.da .lh-e-boje::after { animation: lh-echolot 3.2s cubic-bezier(.2, .6, .3, 1) .9s infinite; }
@keyframes lh-echolot { 0% { transform: scale(1); opacity: .85; } 70%, 100% { transform: scale(4.4); opacity: 0; } }
.lh-a .lh-titel { margin-top: 26px; max-width: 18ch; font-size: clamp(32px, 12px + 3.2vw, 81px); line-height: 1; }   /* ein Viertel kleiner als in Runde 2 (Jonah, 25.10.) */
/* Titel: je Zeile zieht eine schmale Pixel-Welle in Sonne durch (quelle/leistung.js legt die Leinwände an und setzt je Wort die Kante), hinter ihr
   steht die Schrift, noch warm, und kühlt zu Sand ab */
.lh-a .lh-titel { position: relative; }
.lh-zeilenpixel { position: absolute; pointer-events: none; }
.lh-wort { color: var(--sand); }
.js .lh-a.da .lh-wort:not(.ganz) { clip-path: polygon(-10% -40%, -10% -40%, -10% 140%, -10% 140%); }   /* die Kante setzt quelle/leistung.js */
.js .lh-a .lh-wort { opacity: 0; }
.js .lh-a.da .lh-wort { opacity: 1; }
.js .lh-a .lh-wort.auf { animation: lh-glut 1.2s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes lh-glut { 0%, 25% { color: var(--sonne); } 100% { color: var(--sand); } }
.lh-a .lh-satz { margin-top: 28px; max-width: 46ch; }
.lh-a .lh-handlung { justify-content: center; margin-top: 34px; }
.js .lh-a :is(.lh-satz, .lh-handlung, .lh-etikett) { opacity: 0; translate: 0 10px; }
.js .lh-a.da :is(.lh-satz, .lh-handlung, .lh-etikett) { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus), translate .8s var(--aus); }
.js .lh-a.da .lh-satz { transition-delay: 1.05s; }
.js .lh-a.da .lh-handlung { transition-delay: 1.17s; }
/* Reiter: die Kante der Seite steigt in der Mitte zu einer Lasche auf, darin die Frage der Leistung (Terminals Kerbe, hier als Linie) */
.lh-reiter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; }
.lh-reiter-kante { height: 1px; background: rgb(var(--vg-k) / .2); }
.lh-reiter-text { position: relative; margin: 0 10px 10px; padding: 13px clamp(18px, 2vw, 28px) 12px; border: 1px solid rgb(var(--vg-k) / .2); border-bottom: 0; border-radius: 12px 12px 0 0;
                  background: rgb(var(--hg-k)); color: var(--sand); font: 500 14px/1.25 var(--schrift); white-space: nowrap; }
.lh-reiter-text::before, .lh-reiter-text::after { content: ""; position: absolute; bottom: -10px; width: 10px; height: 10px; border-bottom: 1px solid rgb(var(--vg-k) / .2); }
.lh-reiter-text::before { left: -11px; border-right: 1px solid rgb(var(--vg-k) / .2); border-bottom-right-radius: 10px; }
.lh-reiter-text::after { right: -11px; border-left: 1px solid rgb(var(--vg-k) / .2); border-bottom-left-radius: 10px; }
.js .lh-a .lh-reiter-kante { transform: scaleX(0); }
.js .lh-a .lh-reiter-kante:first-child { transform-origin: right; }
.js .lh-a .lh-reiter-kante:last-child { transform-origin: left; }
.js .lh-a.da .lh-reiter-kante { transform: none; transition: transform 1.2s cubic-bezier(.65, 0, .35, 1) .55s; }
.js .lh-a .lh-reiter-text { opacity: 0; }
.js .lh-a.da .lh-reiter-text { opacity: 1; transition: opacity .6s var(--aus) .4s; }

@media (max-width: 860px) {
  .lh-a { min-height: auto; }
  .lh-a-mitte { padding: 56px 0 44px; }
  .lh-a .lh-titel { font-size: clamp(30px, 7.6vw, 44px); }
  .lh-reiter { grid-template-columns: minmax(16px, 1fr) minmax(0, max-content) minmax(16px, 1fr); }
  .lh-reiter-text { white-space: normal; text-align: center; text-wrap: balance; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lh .lh-wort, .js .lh :is(.lh-satz, .lh-handlung, .lh-etikett, .lh-reiter-text) { opacity: 1; translate: none; animation: none; color: inherit; }
  .js .lh-a .lh-wort, .js .lh-a .lh-wort.auf, .js .lh-a.da .lh-wort:not(.ganz) { opacity: 1; animation: none; color: var(--sand); clip-path: none; }
  .lh-zeilenpixel { display: none; }
  .js .lh-a .lh-reiter-kante { transform: none; }
  .js .lh-a .lh-e-kimm { scale: none; }
  .js .lh-a.da .lh-e-boje::after { animation: none; }
}

/* ========== Abschnitte der Leistungsseite ========== */
.ls-etikett { margin: 0 0 18px; color: var(--leise); font: 500 14px/1.2 var(--schrift); }
.ls-nr { font: 500 12px/1 var(--schrift); font-variant-numeric: tabular-nums; color: var(--sonne); }
html.hell .ls-nr { color: var(--sonne-700); }
.js [data-zeigen] .abschnitt-titel { opacity: 0; translate: 0 16px; }
.js [data-zeigen].zeigt .abschnitt-titel { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus), translate .9s var(--sanft); }

/* Kernpunkte: Zellen zwischen Linien, Plus an den Knoten (nur unter den Hero-Fassungen a und c) */
.ls-kern-zellen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border-top: 1px solid var(--zl); border-left: 1px solid var(--zl); }
.ls-kern-zellen li { position: relative; display: grid; align-content: start; gap: 14px; min-height: clamp(220px, 18vw, 300px); padding: 20px clamp(18px, 1.6vw, 28px) 28px; border-right: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.ls-kern-zellen .plus { left: 0; top: 0; color: var(--zp); }
.ls-kern-zellen h3 { margin: auto 0 0; padding-top: 40px; font: 320 clamp(26px, 14px + 1.3vw, 38px)/1.05 var(--schrift); letter-spacing: -.035em; color: var(--sand); }
html.hell .ls-kern-zellen h3 { font-weight: 300; }
.ls-kern-zellen p { margin: 0; max-width: 34ch; color: var(--leise); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.js .ls-kern .ls-kern-zellen li { opacity: 0; translate: 0 14px; }
.js .ls-kern.zeigt .ls-kern-zellen li { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus), translate .8s var(--aus); transition-delay: calc(.1s + var(--z) * 80ms); }

/* Umfang und Dauer: links der Satz groß, rechts die Zahl; die Teilung liegt bei 7/12 wie auf der Startseite */
.ls-mass-raster { display: grid; grid-template-columns: minmax(0, 1fr) var(--lh-rechts, minmax(0, 5fr));   /* Teilung wie im Hero und in der Kopfleiste (quelle/leistung.js) */
  border-top: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.ls-mass-zelle { padding: clamp(24px, 2.4vw, 40px) clamp(0px, 2vw, 40px) clamp(36px, 3.4vw, 56px) 0; }
.ls-mass-dauer { padding-left: clamp(20px, 2.4vw, 44px); border-left: 1px solid var(--zl); }
.ls-mass-satz { margin: 0; max-width: 36ch; font: 320 clamp(22px, 17px + .8vw, 30px)/1.25 var(--schrift); letter-spacing: -.035em; color: var(--sand); text-wrap: balance; }
html.hell .ls-mass-satz { font-weight: 300; }
.ls-zahl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .18em; margin: 0; font: 300 clamp(84px, 40px + 6.6vw, 176px)/.9 var(--schrift); letter-spacing: -.055em; color: var(--sand); font-variant-numeric: tabular-nums; }
.ls-zahl-bis, .ls-zahl-einheit { font-size: .26em; letter-spacing: -.02em; color: var(--leise); font-weight: 400; }
.ls-zahl-einheit { color: var(--sand); }
.ls-mass-klein { margin: 18px 0 0; max-width: 34ch; color: var(--leise); font-size: clamp(15px, 14px + .25vw, 17px); line-height: 1.5; text-wrap: pretty; }
.js .ls-mass :is(.ls-mass-satz, .ls-zahl, .ls-mass-klein, .ls-etikett) { opacity: 0; translate: 0 14px; }
.js .ls-mass.zeigt :is(.ls-mass-satz, .ls-zahl, .ls-mass-klein, .ls-etikett) { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus), translate .9s var(--sanft); }
.js .ls-mass.zeigt .ls-zahl { transition-delay: .15s; }
.js .ls-mass.zeigt .ls-mass-klein { transition-delay: .3s; }

/* Beispiele: drei Fälle nebeneinander, Ansicht oben, Leistungen, Ergebnissatz, Link */
.ls-faelle-kopf { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 2.5vw + 16px, 56px); }
.ls-faelle-kopf .abschnitt-titel { margin: 0; }
.ls-faelle-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(16px, 1.6vw, 28px); }   /* der erste Fall breiter: Website und System zusammen */
.ls-fall { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; height: 100%; color: inherit; text-decoration: none; }
.ls-fall-bild { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--nacht-800); box-shadow: 0 0 0 1px var(--zl); }
.ls-fall-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sanft); }
.ls-fall-oben { display: flex; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--zl); margin-top: 6px; padding-top: 14px; font: 500 14px/1.2 var(--schrift); }
.ls-fall-oben > span:last-child { color: var(--leise); }
.ls-fall-satz { color: rgb(var(--vg-k) / .8); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.ls-fall-mehr { display: inline-flex; justify-self: start; align-items: center; gap: 10px; margin-top: 4px; font: 500 15px/1 var(--schrift); color: var(--sand); }
.ls-fall-mehr > span { position: relative; padding: 6px 0; }
.ls-fall-mehr > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--raus); }
.ls-fall-mehr svg { width: 14px; height: 14px; transition: translate .25s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .ls-fall:hover .ls-fall-bild img { transform: scale(1.035); }
  .ls-fall:hover .ls-fall-mehr > span::after { transform: scaleX(1); transition: transform .6s var(--lade); }
  .ls-fall:hover .ls-fall-mehr svg { translate: 4px 0; }
}
.ls-fall:focus-visible { outline: 2px solid var(--fokus); outline-offset: 6px; }
.js .ls-faelle .ls-faelle-liste li { opacity: 0; translate: 0 24px; }
.js .ls-faelle.zeigt .ls-faelle-liste li { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus), translate 1s var(--sanft); transition-delay: calc(.1s + var(--z) * 90ms); }
.ls-antwort-link { color: var(--sand); text-underline-offset: 3px; text-decoration-color: rgb(var(--vg-k) / .35); }

@media (max-width: 860px) {
  .ls-kern-zellen { grid-template-columns: minmax(0, 1fr); }
  .ls-kern-zellen li { min-height: 0; }
  .ls-kern-zellen h3 { padding-top: 24px; }
  .ls-mass-raster { grid-template-columns: minmax(0, 1fr); }
  .ls-mass-zelle { padding-right: 0; }
  .ls-mass-dauer { padding-left: 0; border-left: 0; border-top: 1px solid var(--zl); }
  .ls-faelle-kopf { flex-direction: column; align-items: start; }
  .ls-faelle-liste { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (min-width: 861px) and (max-width: 1180px) { .ls-kern-zellen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .js [data-zeigen] :is(.abschnitt-titel, .ls-kern-zellen li, .ls-mass-satz, .ls-zahl, .ls-mass-klein, .ls-etikett, .ls-faelle-liste li) { opacity: 1; translate: none; }
}

/* Woran Sie den Unterschied merken (Fassung c, gewählt 26.10.): links bleibt die Nummer als Umriss stehen und rollt zum Punkt in der Bildmitte,
   die neue Ziffer glüht kurz in Sonne; rechts die Punkte an einer senkrechten Schiene, die sich beim Scrollen in Sonne füllt, vorn läuft eine
   Kursspitze mit (wie in 07). Wird ein Punkt aktiv, pingt seine Boje, der Strich zur Schrift wird Sonne, der Titel hellt auf. Gesehen heißt:
   Strich zeichnet sich, Titel steigt aus seiner Zeilenmaske, Satz blendet ein. quelle/leistung.js setzt --aktiv, .aktiv, .glueht und --fort. */
.ls-unter-kopf, .ls-kopf { display: grid; grid-template-columns: minmax(0, 1fr) var(--lh-rechts, minmax(0, 5fr)); align-items: end; gap: 24px 0; margin-bottom: clamp(24px, 3vw, 48px); }
:is(.ls-unter-kopf, .ls-kopf) .abschnitt-titel { margin: 0; }
.ls-unter-satz, .ls-kopf-satz { margin: 0; max-width: 40ch; padding-left: clamp(20px, 2.4vw, 44px); color: var(--leise); font-size: clamp(16px, 15px + .25vw, 18px); line-height: 1.5; text-wrap: pretty; }
.ls-unter-koerper { --einzug: clamp(44px, 4vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) var(--lh-rechts, minmax(0, 5fr)); align-items: start; }
.ls-unter-links { position: sticky; top: calc(var(--kopf) + 6vh); display: grid; gap: clamp(12px, 1.6vw, 28px); padding-right: clamp(24px, 4vw, 72px); }
.ls-unter-zaehler { display: flex; align-items: flex-start; font: 200 clamp(150px, 40px + 12vw, 320px)/1 var(--schrift);
                    user-select: none; }
/* Ziffern als Pfade (Unterschied.astro), Kontur bleibt bei jeder Größe 1,25 px; Breite wie die Ziffer der Schrift, Abstand wie letter-spacing -.05em */
.ls-unter-zaehler svg { display: block; flex: none; width: .6055em; max-width: none; height: 1em; margin-right: -.05em; overflow: visible; }
.ls-unter-zaehler path { fill: none; stroke: rgb(var(--vg-k) / .55); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.ls-unter-fenster { display: inline-block; height: 1em; overflow: hidden; }
.ls-unter-rolle { display: flex; flex-direction: column; transition: translate .9s var(--sanft); }   /* translate setzt quelle/leistung.js */
.ls-unter-rolle > span { display: flex; height: 1em; }
.ls-unter-rolle > span.glueht path { animation: ls-glut 1.8s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes ls-glut { 0%, 35% { stroke: var(--sonne); } 100% { stroke: rgb(var(--vg-k) / .55); } }
.ls-unter-von { align-self: flex-end; margin: 0 0 .62em 18px; color: var(--leise); font: 500 13px/1 var(--schrift); }
.ls-unter-spalte { position: relative; padding-left: var(--einzug); }
.ls-unter-schiene { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: rgb(var(--vg-k) / .16); }
.ls-unter-fuellung { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: linear-gradient(180deg, rgb(255 106 31 / .12), var(--sonne));
                     transform: scaleY(0); transform-origin: top; will-change: transform; }   /* scaleY und die Lage der Spitze setzt quelle/leistung.js */
.ls-unter-spitze { position: absolute; left: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--sonne); opacity: 0;
                   box-shadow: 0 0 0 4px rgb(255 106 31 / .16); transition: opacity .4s var(--aus); will-change: transform; }
.ls-unter-spitze.an { opacity: 1; }
.ls-unter-liste { list-style: none; margin: 0; padding: 0; }
.ls-unter-liste li { position: relative; display: flex; align-items: center; min-height: clamp(300px, 56vh, 580px); }   /* 27.10. Jonah: mehr Scrollweg je Punkt, damit die Grafik links Zeit hat (vorher 26vh) */
.ls-unter-boje { position: absolute; left: calc(-1 * var(--einzug) - 4px); top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
                 background: rgb(var(--hg-k)); box-shadow: inset 0 0 0 1.5px rgb(var(--vg-k) / .4); transition: background-color .4s var(--aus), box-shadow .4s var(--aus); }
.ls-unter-boje::after { content: ""; position: absolute; inset: -14px; border: 1px solid var(--sonne); border-radius: 50%; opacity: 0; transform: scale(.25); }
.ls-unter-linie { position: absolute; left: calc(-1 * var(--einzug) + 10px); top: 50%; width: calc(var(--einzug) - 22px); height: 1px; background: rgb(var(--vg-k) / .25);
                  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--lade), background-color .4s var(--aus); }
.ls-unter-tafel { display: grid; gap: 10px; }
.ls-unter-tafel h3 { margin: 0 0 -.22em; padding-bottom: .22em; overflow: clip; font: 320 clamp(24px, 14px + 1.1vw, 34px)/1.08 var(--schrift); letter-spacing: -.035em;
                     color: rgb(var(--vg-k) / .55); text-wrap: balance; transition: color .5s var(--aus); }
html.hell .ls-unter-tafel h3 { font-weight: 300; }
html:not(.js) .ls-unter-tafel h3 { color: var(--sand); }
.ls-unter-tafel h3 > span { display: block; }
.ls-unter-tafel p { margin: 0; max-width: 46ch; color: var(--leise); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.ls-unter-liste li.zeigt .ls-unter-linie { transform: none; }
.js .ls-unter-tafel h3 > span { translate: 0 calc(100% + .3em); }
.js .ls-unter-liste li.zeigt h3 > span { translate: 0 0; transition: translate 1s var(--sanft) .1s; }
.js .ls-unter-tafel p { opacity: 0; translate: 0 10px; }
.js .ls-unter-liste li.zeigt p { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus) .3s, translate .8s var(--aus) .3s; }
.ls-unter-liste li.aktiv .ls-unter-boje { background: var(--sonne); box-shadow: inset 0 0 0 1.5px var(--sonne); }
.ls-unter-liste li.aktiv .ls-unter-boje::after { animation: ls-ping 1.5s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes ls-ping { 0% { transform: scale(.25); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.ls-unter-liste li.aktiv .ls-unter-linie { background: var(--sonne); }
.ls-unter-liste li.aktiv h3 { color: var(--sand); }

/* Was Sie am Ende in der Hand haben: links Titel und Satz, die beim Lesen stehen bleiben, rechts die Teile als Zeilen */
.ls-liefer-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 0; align-items: start; }
.ls-liefer-kopf { position: sticky; top: calc(var(--kopf) + 32px); padding-right: 28px; }
.ls-liefer-kopf .abschnitt-titel { margin: 0; }
.ls-liefer-kopf p { margin: 20px 0 0; max-width: 30ch; color: var(--leise); font-size: clamp(16px, 15px + .25vw, 18px); line-height: 1.45; text-wrap: pretty; }
.ls-liefer-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zl); }
.ls-liefer-liste li { display: grid; grid-template-columns: 44px minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; gap: 6px 24px; padding: clamp(18px, 1.8vw, 26px) 0; border-bottom: 1px solid var(--zl); }
.ls-liefer-nr { font: 500 12px/1 var(--schrift); font-variant-numeric: tabular-nums; color: var(--leise); }
.ls-liefer-liste h3 { margin: 0; font: 320 clamp(21px, 14px + .7vw, 26px)/1.15 var(--schrift); letter-spacing: -.03em; color: var(--sand); }
html.hell .ls-liefer-liste h3 { font-weight: 300; }
.ls-liefer-liste p { margin: 0; max-width: 48ch; color: var(--leise); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.js .ls-liefer .ls-liefer-liste li { opacity: 0; translate: 0 12px; }
.js .ls-liefer.zeigt .ls-liefer-liste li { opacity: 1; translate: 0 0; transition: opacity .7s var(--aus), translate .7s var(--aus); transition-delay: calc(.1s + var(--z) * 60ms); }

/* Wie es nach dem Start weitergeht: Zeilen wie im Mega-Menü, beim Zeigen füllt sich die Zeile in Pixelstufen, die Schrift kippt in Nacht */
.ls-weiter-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zl); }
.ls-weiter-zeile { position: relative; isolation: isolate; display: grid; grid-template-columns: 44px minmax(min-content, 4fr) minmax(0, 6fr) 16px; align-items: baseline; gap: 12px 24px;
                   padding: clamp(24px, 2.6vw, 38px) calc(10% + 8px) clamp(24px, 2.6vw, 38px) 0; border-bottom: 1px solid var(--zl); color: inherit; text-decoration: none; }
.ls-pixel { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.ls-weiter-nr { font: 500 12px/1 var(--schrift); font-variant-numeric: tabular-nums; color: var(--leise); padding-left: 2px; }
.ls-weiter-zeile b { font: 320 clamp(32px, 14px + 2.3vw, 60px)/1 var(--schrift); letter-spacing: -.04em; color: var(--sand); }
html.hell .ls-weiter-zeile b { font-weight: 300; }
.ls-weiter-satz { max-width: 46ch; color: var(--leise); font-size: clamp(15px, 14px + .2vw, 17px); line-height: 1.45; }
.ls-weiter-pfeil { align-self: center; width: 16px; height: 16px; background: currentColor; color: rgb(var(--vg-k) / .5); transition: translate .35s var(--aus);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M8.5 3.5 13 8l-4.5 4.5' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M8.5 3.5 13 8l-4.5 4.5' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) { .ls-weiter-zeile:hover .ls-weiter-pfeil { translate: 4px 0; } }
.ls-weiter-zeile .dunkel { color: #0c0908; }
.ls-weiter-zeile :is(.ls-weiter-satz, .ls-weiter-nr).dunkel { color: rgb(12 9 8 / .8); }
.ls-weiter-zeile:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.js .ls-weiter .ls-weiter-liste li { opacity: 0; translate: 0 14px; }
.js .ls-weiter.zeigt .ls-weiter-liste li { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus), translate .8s var(--aus); transition-delay: calc(.1s + var(--z) * 90ms); }

/* Bühne der Grafiken (26.10.2026): Leinwand mit Punktraster und Linien, darüber die Beschriftung als echter Text (quelle/unterschied.js) */
.ls-unter-buehne, .ls-unter-bild { position: relative; }
.ls-unter-buehne { height: clamp(220px, 30vh, 330px); }
/* Nummer und Bühne zusammen sind höher als ein Punkt: Luft nach dem letzten, damit beide stehen bleiben, solange er in der Bildmitte ist */
@media (min-width: 861px) { .ls-unter-spalte { padding-bottom: clamp(0px, 4vh, 48px); } .ls-unter-schiene { bottom: clamp(0px, 4vh, 48px); } }
.ls-unter-bild { display: none; }
:is(.ls-unter-buehne, .ls-unter-bild) > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lsb-lagen { position: absolute; inset: 0; pointer-events: none; font-family: var(--schrift); }
.lsb-marke { position: absolute; display: grid; gap: 3px; white-space: nowrap; opacity: 0; transform: translateY(5px);
             transition: opacity .5s var(--aus), transform .6s var(--aus); }
.lsb-marke.an { opacity: 1; transform: none; }
.lsb-marke b { font-weight: 500; font-size: 13px; line-height: 1.2; color: rgb(var(--vg-k) / .92); letter-spacing: -.005em; transition: color .4s var(--aus); }
.lsb-marke span { font-size: 12.5px; line-height: 1.3; color: var(--leise); }
.lsb-marke.ziel b, .lsb-marke.hell b { color: var(--sonne); }
html.hell :is(.lsb-marke.ziel, .lsb-marke.hell) b { color: var(--sonne-700, #c43c0c); }
.lsb-marke.leise b { color: var(--leise); font-size: 12.5px; }
.lsb-marke.leise.hell b { color: var(--sonne); }   /* Suche und KI-Assistent leuchten, solange ihr Echo läuft */
.lsb-weg { opacity: 0 !important; transition: opacity .3s var(--aus) !important; }
.lsb-blatt { position: absolute; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity .5s var(--aus); }
.lsb-blatt.an { opacity: 1; }
.lsb-blatt > i { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-style: normal; font-size: 12.5px; color: var(--leise); white-space: nowrap; }
.lsb-blatt > i::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--vg-k) / .35); transition: background-color .3s var(--aus); }
.lsb-blatt.sendet > i::before { background: var(--sonne); }
.lsb-blatt dl { margin: 0; border-top: 1px solid rgb(var(--vg-k) / .18); }
.lsb-blatt dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgb(var(--vg-k) / .1);
                      opacity: 0; transform: translateY(4px); transition: opacity .45s var(--aus), transform .5s var(--aus); }
.lsb-blatt dl > div.an { opacity: 1; transform: none; }
.lsb-blatt dt { font-size: 12.5px; color: var(--leise); white-space: nowrap; }
.lsb-blatt dd { position: relative; margin: 0; font-weight: 500; font-size: 13px; color: rgb(var(--vg-k) / .92); white-space: nowrap; }
.lsb-blatt dd canvas { position: absolute; left: -5px; top: -3px; width: calc(100% + 10px); height: calc(100% + 6px); }
.lsb-blatt.crm dd > span { opacity: 0; transition: opacity .2s linear; }
.lsb-blatt.crm dd.an > span { opacity: 1; }
.lsb-blatt dd.erledigt { color: var(--sonne); }
html.hell .lsb-blatt dd.erledigt { color: var(--sonne-700); }
.lsb-zeile { position: absolute; display: flex; align-items: center; gap: 12px; white-space: nowrap; opacity: 0; transform: translateY(5px);
             transition: opacity .5s var(--aus), transform .6s var(--aus); }
.lsb-zeile.an { opacity: 1; transform: none; }
.lsb-zeile > i { font-style: normal; font-size: 12.5px; color: var(--leise); }
.lsb-zeile > b { font-weight: 500; font-size: 13.5px; color: rgb(var(--vg-k) / .92); transition: color .4s var(--aus); }
.lsb-kasten { position: relative; flex: none; width: 15px; height: 15px; border: 1px solid rgb(var(--vg-k) / .45); border-radius: 3px;
              transition: background-color .3s var(--aus), border-color .3s var(--aus); }
.lsb-kasten::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #0c0908; border-width: 0 1.6px 1.6px 0;
                     rotate: 45deg; scale: .6; opacity: 0; transition: scale .35s var(--aus) .1s, opacity .2s var(--aus) .1s; }
.lsb-zeile.erledigt .lsb-kasten { background: var(--sonne); border-color: var(--sonne); }
.lsb-zeile.erledigt .lsb-kasten::after { scale: 1; opacity: 1; }
.lsb-zeile.erledigt > b { color: var(--leise); }
.lsb-neu { flex: none; padding: 3px 7px; border-radius: 3px; background: var(--sonne); color: #0c0908; font-weight: 600; font-size: 11.5px; line-height: 1.2; }

/* Grafiken der Seite Sichtbarkeit (27.10.2026, quelle/unterschied.js): Karten mit Frage und Antwort, Orte im Umkreis, Bericht mit Stapel */
.lsb-marke.rechtsbuendig { justify-items: end; text-align: right; }
.lsb-marke.grund { padding: 2px 5px; margin: -2px -5px; border-radius: 3px; background: rgb(var(--hg-k) / .86); }
.lsb-marke.zahl b { font-size: 12px; font-variant-numeric: tabular-nums; }
.lsb-karte-inhalt { display: grid; justify-items: start; gap: 8px; padding-top: 10px; border-top: 1px solid rgb(var(--vg-k) / .18); white-space: normal; }
.lsb-frage { font-weight: 500; font-size: 13.5px; line-height: 1.35; color: rgb(var(--vg-k) / .92); }
.lsb-antwort { position: relative; font-size: 13px; line-height: 1.45; color: var(--leise); transition: color .4s var(--aus); }
.lsb-antwort > span { position: relative; }
.lsb-antwort > canvas { position: absolute; left: -4px; top: -2px; width: calc(100% + 8px); height: calc(100% + 4px); pointer-events: none; }
.lsb-antwort.markiert { color: var(--sonne); }
html.hell .lsb-antwort.markiert { color: var(--sonne-700, #c43c0c); }
.lsb-gefragt { justify-self: end; max-width: 94%; min-width: 3em; min-height: calc(1.35em + 14px); padding: 7px 11px; border-radius: 12px 12px 3px 12px;
               background: rgb(var(--vg-k) / .08); font-size: 13px; line-height: 1.35; color: rgb(var(--vg-k) / .92); }
.lsb-ki { color: rgb(var(--vg-k) / .92); opacity: 0; transform: translateY(4px); transition: opacity .5s var(--aus), transform .6s var(--aus); }
.lsb-ki.an { opacity: 1; transform: none; }
.lsb-quelle { padding: 3px 7px; border: 1px solid var(--sonne); border-radius: 3px; color: var(--sonne); font-weight: 600; font-size: 11.5px; line-height: 1.2;
              opacity: 0; transform: translateY(4px); transition: opacity .4s var(--aus), transform .5s var(--aus); }
html.hell .lsb-quelle { color: var(--sonne-700, #c43c0c); border-color: var(--sonne-700, #c43c0c); }
.lsb-quelle.an { opacity: 1; transform: none; }
.lsb-bericht { padding: 12px 14px 0; border: 1px solid rgb(var(--vg-k) / .22); border-radius: 6px; background: rgb(var(--hg-k)); }
.lsb-bericht dl { border-top-color: rgb(var(--vg-k) / .14); }
.lsb-bericht dl > div:last-child { border-bottom: 0; }
.lsb-bericht.kommt { animation: lsb-kommt .7s var(--aus) both; }
@keyframes lsb-kommt { from { transform: translateY(12px); } to { transform: none; } }
@media (max-width: 860px) {
  .ls-unter[data-szenen="sichtbarkeit"] .ls-unter-bild[data-szene="1"] { height: 300px; }   /* Ihre Seite oben, der KI-Assistent unten */
  .ls-unter[data-szenen="sichtbarkeit"] .ls-unter-bild[data-szene="2"] { height: 400px; }   /* Umkreis oben, das Profil darunter */
  .ls-unter[data-szenen="makler"] .ls-unter-bild[data-szene="0"] { height: 300px; }   /* Makler (28.10.): Wege, Karten mit drei Zeilen */
  .ls-unter[data-szenen="makler"] .ls-unter-bild[data-szene="1"] { height: 250px; }
  .ls-unter[data-szenen="makler"] .ls-unter-bild[data-szene="2"] { height: 330px; }
  .ls-unter[data-szenen="makler"] .ls-unter-bild[data-szene="3"] { height: 260px; }
  .ls-unter[data-szenen="mittelstand"] .ls-unter-bild { height: 300px; }   /* Mittelstand (28.10.) */
  .ls-unter[data-szenen="saas"] .ls-unter-bild { height: 300px; }   /* B2B-SaaS (28.10.) */
  .ls-unter[data-szenen="saas"] .ls-unter-bild[data-szene="3"] { height: 340px; }
  .ls-unter[data-szenen="sichtbarkeit"] .ls-unter-bild[data-szene="3"] { height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .lsb-ki, .lsb-quelle { transition: none; transform: none; } .lsb-bericht.kommt { animation: none; } }

/* Grafiken der Seite System (27.10.2026, quelle/unterschied.js): Eingang an der Weiche, Karten der Team-Tafel, Konfigurator */
.lsb-chip { position: absolute; translate: 0 -100%; padding: 5px 9px; border-radius: 4px; background: rgb(var(--vg-k) / .08); box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .16);
            font-size: 12.5px; line-height: 1.2; color: rgb(var(--vg-k) / .92); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .35s var(--aus), transform .45s var(--aus); }
.lsb-chip.an { opacity: 1; transform: none; }
.lsb-kachel { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border-radius: 5px; background: rgb(var(--hg-k));
              box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .18); opacity: 0; transition: box-shadow .3s var(--aus); }
.lsb-kachel b { overflow: hidden; font-weight: 500; font-size: 13px; color: rgb(var(--vg-k) / .92); white-space: nowrap; text-overflow: ellipsis; transition: color .4s var(--aus); }
.lsb-kachel .lsb-kasten { width: 13px; height: 13px; }
.lsb-kachel .lsb-kasten::after { left: 3.6px; top: 1px; width: 3.4px; height: 7px; }
.lsb-kachel.bewegt { box-shadow: inset 0 0 0 1px var(--sonne); }
.lsb-kachel.erledigt .lsb-kasten { background: var(--sonne); border-color: var(--sonne); }
.lsb-kachel.erledigt .lsb-kasten::after { scale: 1; opacity: 1; }
.lsb-kachel.erledigt b { color: var(--leise); }
.lsb-konf .lsb-konf-zeilen { border-top: 1px solid rgb(var(--vg-k) / .14); }
.lsb-konf-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgb(var(--vg-k) / .1); font-size: 12.5px; color: var(--leise); white-space: nowrap; }
.lsb-konf-wahl { display: flex; gap: 6px; }
.lsb-konf-wahl > span { padding: 4px 9px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .22); color: rgb(var(--vg-k) / .85); font-weight: 500; font-size: 12.5px; line-height: 1.2;
                        transition: color .3s var(--aus), box-shadow .3s var(--aus), background-color .3s var(--aus); }
.lsb-konf-wahl > span.an { box-shadow: inset 0 0 0 1px var(--sonne); background: rgb(255 106 31 / .12); color: var(--sonne); }
html.hell .lsb-konf-wahl > span.an { color: var(--sonne-700, #c43c0c); }
.lsb-konf-knopf { position: relative; display: inline-flex; margin: 12px 0 14px; padding: 8px 12px; border-radius: 4px; background: rgb(var(--vg-k) / .9); color: rgb(var(--hg-k));
                  font-weight: 600; font-size: 12.5px; line-height: 1.2; white-space: nowrap; transition: background-color .3s var(--aus), color .3s var(--aus); }
.lsb-konf-knopf.gesendet { background: var(--sonne); color: #0c0908; }
.lsb-zeiger { position: absolute; left: 0; top: 0; width: 14px; height: 20px; margin: 3px 0 0 1px; pointer-events: none; opacity: 0; transition: scale .12s var(--aus); }
.lsb-zeiger svg { display: block; width: 100%; height: 100%; fill: rgb(var(--vg-k)); stroke: rgb(var(--hg-k)); stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .35)); }
.lsb-zeiger.drueckt { scale: .86; }
.lsb-konf-wahl > span.an { animation: lsb-wahl .5s var(--aus); }
@keyframes lsb-wahl { from { box-shadow: inset 0 0 0 1px var(--sonne), 0 0 0 0 rgb(255 106 31 / .5); } to { box-shadow: inset 0 0 0 1px var(--sonne), 0 0 0 7px rgb(255 106 31 / 0); } }
.lsb-konf-knopf > canvas { position: absolute; left: -4px; top: -3px; width: calc(100% + 8px); height: calc(100% + 6px); pointer-events: none; }
@media (max-width: 860px) {
  .ls-unter[data-szenen="system"] .ls-unter-bild[data-szene="0"] { height: 260px; }
  .ls-unter[data-szenen="system"] .ls-unter-bild[data-szene="1"] { height: 370px; }   /* drei Bahnen untereinander */
  .ls-unter[data-szenen="system"] .ls-unter-bild[data-szene="2"] { height: 300px; }
  .lsb-konf-wahl > span { padding: 3px 7px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .lsb-chip, .lsb-kachel, .lsb-konf-wahl > span, .lsb-konf-knopf { transition: none; transform: none; animation: none; } }

/* Grafiken der Seite Webflow (27.10.2026, quelle/unterschied.js): Seitenplan, Editor, Einträge aus Ihrem Programm, Umleitungen */
.lsb-plan { position: absolute; display: grid; gap: 6px; opacity: 0; transition: opacity .5s var(--aus); }
.lsb-plan.an { opacity: 1; }
.lsb-plan.verblasst { opacity: 0; }
.lsb-plan-block { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; border: 1px dashed rgb(var(--vg-k) / .34); border-radius: 4px;
                  white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .4s var(--aus), transform .5s var(--aus), border-color .3s var(--aus), background-color .3s var(--aus); }
.lsb-plan-block.steht { opacity: 1; transform: none; }
.lsb-plan-block.gebaut { border-style: solid; border-color: rgb(var(--vg-k) / .2); background: rgb(var(--vg-k) / .05); }
.lsb-plan-block b { font-weight: 500; font-size: 13px; color: rgb(var(--vg-k) / .92); }
.lsb-plan-block span { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--leise); }
.lsb-plan-block canvas { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; }
.lsb-editor-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgb(var(--vg-k) / .14); }
.lsb-editor-kopf > i { display: flex; align-items: center; gap: 8px; font-style: normal; font-size: 12.5px; color: var(--leise); }
.lsb-editor-kopf > i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sonne); }
.lsb-editor-kopf .lsb-konf-knopf { margin: 0; }
.lsb-editor-titel { margin: 12px 0 8px; font: 320 19px/1.2 var(--schrift); letter-spacing: -.02em; color: var(--sand); }
.lsb-editor-neu { position: relative; min-height: calc(1.35em + 16px); padding: 7px 10px; border-radius: 4px; box-shadow: inset 0 0 0 1px transparent; font-weight: 500; font-size: 13px; line-height: 1.35;
                  color: rgb(var(--vg-k) / .92); white-space: nowrap; transition: box-shadow .3s var(--aus), background-color .3s var(--aus); }
.lsb-editor-neu.an { box-shadow: inset 0 0 0 1px var(--sonne); background: rgb(255 106 31 / .06); }
.lsb-editor-neu.fertig { box-shadow: inset 0 -1px 0 rgb(var(--vg-k) / .1); background: none; }
.lsb-caret { display: inline-block; width: 1px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: var(--sonne); opacity: 0; }
.lsb-editor-neu.schreibt .lsb-caret { animation: lsb-caret 1s steps(1) infinite; }
@keyframes lsb-caret { 0% { opacity: 1; } 50% { opacity: 0; } }
.lsb-editor-alt { padding: 7px 10px; border-bottom: 1px solid rgb(var(--vg-k) / .1); font-size: 13px; color: rgb(var(--vg-k) / .7); white-space: nowrap; }
.lsb-editor-alt:last-child { border-bottom: 0; }
.lsb-editor-alt b { font-weight: 500; }
.lsb-eintrag { position: absolute; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 10px; border-radius: 5px; background: rgb(var(--hg-k)); box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .18);
               opacity: 0; transition: opacity .4s var(--aus); }
.lsb-eintrag.leer { opacity: .5; box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .14); background: none; }
.lsb-eintrag.leer > * { visibility: hidden; }
.lsb-eintrag.an { opacity: 1; }
.lsb-eintrag.neu { animation: lsb-eintrag .9s var(--aus); }
@keyframes lsb-eintrag { from { box-shadow: inset 0 0 0 1px var(--sonne); } to { box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .18); } }
.lsb-eintrag-bild { position: relative; flex: none; width: 34px; height: 34px; border-radius: 3px; overflow: hidden; background: rgb(var(--vg-k) / .08); }
.lsb-eintrag-bild canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lsb-eintrag > span:last-child { display: grid; gap: 2px; min-width: 0; }
.lsb-eintrag b { font-weight: 500; font-size: 13px; color: rgb(var(--vg-k) / .92); white-space: nowrap; }
.lsb-eintrag b + span { overflow: hidden; font-size: 12.5px; color: var(--leise); white-space: nowrap; text-overflow: ellipsis; }
.lsb-marke.adresse b { font-weight: 500; font-size: 13px; letter-spacing: 0; transition: color .4s var(--aus); }
.lsb-marke.adresse.umgeleitet b { color: var(--leise); }
@media (max-width: 860px) {
  .ls-unter[data-szenen="webflow"] .ls-unter-bild[data-szene="0"] { height: 240px; }
  .ls-unter[data-szenen="webflow"] .ls-unter-bild[data-szene="1"] { height: 290px; }
  .ls-unter[data-szenen="webflow"] .ls-unter-bild[data-szene="2"] { height: 330px; }
}
@media (prefers-reduced-motion: reduce) { .lsb-plan, .lsb-plan-block, .lsb-editor-neu, .lsb-eintrag { transition: none; transform: none; animation: none; } .lsb-caret { display: none; } }

@media (max-width: 860px) {
  .ls-unter-links { display: none; }
  .ls-unter-liste li { flex-direction: column; align-items: stretch; }
  .ls-unter-bild { display: block; height: 230px; margin-top: 18px; }
  .ls-unter[data-szenen="website"] .ls-unter-bild[data-szene="1"] { height: 400px; }   /* Anfrage und CRM stehen versetzt übereinander, dazwischen die Leiterbahn (27.10.) */
  .ls-unter-kopf, .ls-kopf { grid-template-columns: minmax(0, 1fr); }
  .ls-unter-satz, .ls-kopf-satz { padding-left: 0; }
  .ls-unter-koerper { --einzug: 28px; display: block; }
  .ls-unter-liste li { min-height: 0; padding: 22px 0; }
  .ls-unter-boje, .ls-unter-linie { top: 40px; }   /* auf Höhe des Titels, darunter steht die Grafik */
  .ls-liefer-raster { grid-template-columns: minmax(0, 1fr); }
  .ls-liefer-kopf { position: static; padding-right: 0; }
  .ls-liefer-liste li { grid-template-columns: 36px minmax(0, 1fr); }
  .ls-liefer-liste li p { grid-column: 2; }
  .ls-weiter-zeile { grid-template-columns: 32px minmax(0, 1fr) 16px; padding-right: 16px; }
  .ls-weiter-satz { grid-column: 2; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ls-unter-tafel :is(h3 > span, p), .js :is(.ls-liefer-liste, .ls-weiter-liste) li { opacity: 1; translate: none; transform: none; }
  .ls-unter-linie { transform: none; transition: none; }
  .ls-unter-rolle { transition: none; }
  .lsb-marke, .lsb-blatt, .lsb-blatt dl > div, .lsb-zeile, .lsb-kasten::after { transition: none; transform: none; }
  .ls-unter-rolle > span.glueht, .ls-unter-liste li.aktiv .ls-unter-boje::after { animation: none; }
  .ls-fall-bild img { transition: none; }
  .ls-fall:hover .ls-fall-bild img { transform: none; }
}

/* ---------- Bausteine der übrigen Leistungsseiten (26.10.2026) ---------- */
/* Textabschnitt: Titel links, Text rechts in der Teilung der Kopfleiste, eine Linie darüber wie Umfang und Dauer */
.ls-text-raster { display: grid; grid-template-columns: minmax(0, 1fr) var(--lh-rechts, minmax(0, 5fr)); gap: 24px 0; align-items: start; padding-top: clamp(24px, 2.4vw, 40px); border-top: 1px solid var(--zl); }
.ls-text-raster .abschnitt-titel { margin: 0; padding-right: 24px; }
.ls-text-saetze { padding-left: clamp(20px, 2.4vw, 44px); }
.ls-text-saetze .ls-mass-satz { max-width: 34ch; }
.ls-text-saetze .ls-mass-klein { max-width: 52ch; }
.js .ls-text :is(.abschnitt-titel, .ls-mass-satz, .ls-mass-klein) { opacity: 0; translate: 0 14px; }
.js .ls-text.zeigt :is(.abschnitt-titel, .ls-mass-satz, .ls-mass-klein) { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus), translate .9s var(--sanft); }
.js .ls-text.zeigt .ls-mass-satz { transition-delay: .12s; }
.js .ls-text.zeigt .ls-mass-klein { transition-delay: .26s; }
/* Satz unter dem Titel der Beispiele */
.ls-faelle-satz { margin: 16px 0 0; max-width: 40ch; color: var(--leise); font-size: clamp(16px, 15px + .25vw, 18px); line-height: 1.45; }
/* ein einzelner Fall: halbe Breite statt eines schmalen Drittels */
@media (min-width: 861px) { .ls-faelle-liste:has(> li:only-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Leistungsliste der Übersicht: Webflow leiser darunter */
.ls-weiter-liste li.klein b { font-size: clamp(24px, 10px + 1.5vw, 40px); color: var(--leise); }
/* Abzeichen im Hero (Webflow): Nacht die weiße, Tag die blaue Fassung */
.lh-abzeichen { margin: 28px 0 0; display: flex; justify-content: center; }
.lh-abzeichen img { display: block; width: 150px; height: auto; }
.lh-abzeichen .tag, html.hell .lh-abzeichen .nacht { display: none; }
html.hell .lh-abzeichen .tag { display: block; }
@media (max-width: 860px) {   /* nach den Grundregeln oben, sonst gewinnt die Teilung */
  .ls-text-raster { grid-template-columns: minmax(0, 1fr); }
  .ls-text-raster .abschnitt-titel { padding-right: 0; }
  .ls-text-saetze { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ls-text :is(.abschnitt-titel, .ls-mass-satz, .ls-mass-klein) { opacity: 1; translate: none; }
}

/* ---------- Vergleich in Spalten und ein Fall groß (27.10.2026, src/components/seite/Vergleich.astro, Fall.astro) ---------- */
.ls-vg { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(var(--n), minmax(0, 2.2fr)); border-bottom: 1px solid var(--zl); }
.ls-vg-spalte { display: contents; }
.ls-vg-kopf { position: relative; grid-row: 1; display: grid; align-content: end; gap: 0; margin: 0; padding: 0 clamp(16px, 1.6vw, 28px) 24px; border-left: 1px solid var(--zl); }
.ls-vg-kopf::after { content: ""; position: absolute; left: -1px; right: 0; bottom: -1px; height: 1px; background: var(--sonne); transform: scaleX(0); transform-origin: left; }
.ls-vg-name { margin-top: 22px; font: 320 clamp(38px, 16px + 2.6vw, 68px)/.95 var(--schrift); letter-spacing: -.045em; color: var(--sand); hyphens: auto; overflow-wrap: break-word; }
html.hell .ls-vg-name { font-weight: 300; }
.ls-vg-kurz { margin-top: 12px; color: var(--leise); font: 400 14.5px/1.35 var(--schrift); }
.ls-vg-zeile { margin: 0; grid-column: 1; padding: 22px 24px 26px 0; border-top: 1px solid var(--zl); color: var(--leise); font: 500 14px/1.35 var(--schrift); }
.ls-vg-zelle { padding: 22px clamp(16px, 1.6vw, 28px) 26px; border-top: 1px solid var(--zl); border-left: 1px solid var(--zl); }
.ls-vg-etikett { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }   /* am Rechner steht das Etikett links in der Zeile */
.ls-vg-text { margin: 0; max-width: 40ch; color: rgb(var(--vg-k) / .82); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.js .ls-vergleich :is(.ls-vg-zeile, .ls-vg-zelle) { opacity: 0; translate: 0 12px; }
.js .ls-vergleich.zeigt :is(.ls-vg-zeile, .ls-vg-zelle) { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus), translate .8s var(--aus); transition-delay: calc(.25s + var(--r) * 110ms + var(--c, 0) * 60ms); }
.js .ls-vergleich .ls-vg-kopf > * { opacity: 0; translate: 0 14px; }
.js .ls-vergleich.zeigt .ls-vg-kopf > * { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus), translate .9s var(--sanft); transition-delay: calc(var(--c) * 90ms); }
.ls-vergleich.zeigt .ls-vg-kopf::after { transform: scaleX(1); transition: transform 1.2s var(--sanft) calc(.15s + var(--c) * 120ms); }
html:not(.js) .ls-vg-kopf::after { transform: none; }

.ls-gross .abschnitt-titel { margin: 0 0 clamp(28px, 2.5vw + 12px, 52px); }
.ls-gross-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 56px); align-items: start; }
.ls-gross-bild { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--nacht-800); box-shadow: 0 0 0 1px var(--zl); }
.ls-gross-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sanft); }
.ls-gross-bild:focus-visible { outline: 2px solid var(--fokus); outline-offset: 6px; }
.ls-gross-text { display: grid; align-content: start; gap: 0; }
.ls-gross-text .ls-fall-oben { margin: 0; padding-top: 14px; }
.ls-gross-satz { margin: 22px 0 30px; max-width: 30ch; font: 320 clamp(22px, 16px + .8vw, 30px)/1.25 var(--schrift); letter-spacing: -.03em; color: var(--sand); text-wrap: pretty; }
html.hell .ls-gross-satz { font-weight: 300; }
.ls-gross-text .ls-etikett { margin-bottom: 4px; }
.ls-gross-liste { list-style: none; margin: 0 0 24px; padding: 0; }
.ls-gross-liste li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--zl); color: rgb(var(--vg-k) / .82); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.ls-gross-text .lh-link { justify-self: start; }
@media (hover: hover) and (pointer: fine) { .ls-gross-bild:hover img { transform: scale(1.035); } }
.js .ls-gross :is(.ls-gross-bild, .ls-fall-oben, .ls-gross-satz, .ls-etikett, .ls-gross-liste li, .lh-link) { opacity: 0; translate: 0 16px; }
.js .ls-gross.zeigt :is(.ls-gross-bild, .ls-fall-oben, .ls-gross-satz, .ls-etikett, .ls-gross-liste li, .lh-link) { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus), translate 1s var(--sanft); }
.js .ls-gross.zeigt .ls-gross-satz { transition-delay: .12s; }
.js .ls-gross.zeigt .ls-etikett { transition-delay: .2s; }
.js .ls-gross.zeigt .ls-gross-liste li { transition-delay: calc(.26s + var(--z) * 80ms); }
.js .ls-gross.zeigt .lh-link { transition-delay: .6s; }
/* Fall mit Video (27.10.2026, Branchenseiten): wie 03 der Startseite. Fenster 72 % breit in einer 3:2-Fläche, also 14 % Rand links und rechts und
   9,33 % der Breite oben und unten; die Ecken gleiten bis 8 px vor seine Ecken (Ruhelage 14 px vom Rand). */
.ls-gross[data-video] .ls-gross-bild { container-type: inline-size; isolation: isolate; }
.ls-gross[data-video] .ls-gross-bild img { position: relative; transition: transform 1.1s var(--sanft), filter var(--raus); }
.ls-gross-schleier { position: absolute; inset: 0; z-index: 1; background: rgb(var(--hg-k) / .78); opacity: 0; transition: opacity .15s cubic-bezier(.25, 0, .25, 1); }
.ls-gross-fenster { position: absolute; left: 14%; top: 9.333cqw; z-index: 2; width: 72%; border-radius: var(--radius); overflow: hidden; background: var(--nacht-800);
  box-shadow: 0 0 0 1px rgb(var(--vg-k) / .14); opacity: 0; transform: translateY(72%) rotateX(18deg) scale(.95); transform-origin: 50% 100%;
  transition: opacity .15s cubic-bezier(.25, 0, .25, 1), transform .4s var(--aus); }
.ls-gross-fenster video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--nacht-800); }
.ls-gross-bild .ecke { position: absolute; width: 12px; height: 12px; z-index: 3; pointer-events: none; color: rgb(var(--vg-k) / .78); transition: translate var(--raus); }
.ls-gross-bild .ecke::before, .ls-gross-bild .ecke::after { content: ""; position: absolute; background: currentColor; }
.ls-gross-bild .ecke::before { width: 12px; height: 1px; }
.ls-gross-bild .ecke::after { width: 1px; height: 12px; }
.ls-gross-bild .ecke:nth-of-type(1) { left: 14px; top: 14px; }
.ls-gross-bild .ecke:nth-of-type(2) { right: 14px; top: 14px; }
.ls-gross-bild .ecke:nth-of-type(2)::before, .ls-gross-bild .ecke:nth-of-type(2)::after { right: 0; }
.ls-gross-bild .ecke:nth-of-type(3) { left: 14px; bottom: 14px; }
.ls-gross-bild .ecke:nth-of-type(3)::before, .ls-gross-bild .ecke:nth-of-type(3)::after { bottom: 0; }
.ls-gross-bild .ecke:nth-of-type(4) { right: 14px; bottom: 14px; }
.ls-gross-bild .ecke:nth-of-type(4)::before, .ls-gross-bild .ecke:nth-of-type(4)::after { right: 0; bottom: 0; }
.ls-gross-bild { --ex: max(0px, calc(14cqw - 22px)); --ey: max(0px, calc(9.333cqw - 22px)); }
.ls-gross.an .ecke { transition: translate .85s var(--sanft); }
.ls-gross.an .ecke:nth-of-type(1) { translate: var(--ex) var(--ey); }
.ls-gross.an .ecke:nth-of-type(2) { translate: calc(-1 * var(--ex)) var(--ey); }
.ls-gross.an .ecke:nth-of-type(3) { translate: var(--ex) calc(-1 * var(--ey)); }
.ls-gross.an .ecke:nth-of-type(4) { translate: calc(-1 * var(--ex)) calc(-1 * var(--ey)); }
.ls-gross.an .ls-gross-schleier { opacity: 1; transition: opacity .2s cubic-bezier(.25, 0, .25, 1); }
.ls-gross.an .ls-gross-bild img { filter: blur(14px) saturate(.6); transform: scale(1.06); transition: transform 1.1s var(--sanft), filter .85s var(--sanft); }
.ls-gross.an .ls-gross-fenster { opacity: 1; transform: none; transition: opacity .15s cubic-bezier(.25, 0, .25, 1), transform .85s var(--sanft); }
@media (hover: hover) and (pointer: fine) { .ls-gross[data-video] .ls-gross-bild:hover img { transform: scale(1.06); } }

@media (max-width: 860px) {
  .ls-vg { display: block; border-bottom: 0; }
  .ls-vg-zeile { display: none; }
  .ls-vg-spalte { display: block; margin-top: 40px; }
  .ls-vg-spalte:first-of-type { margin-top: 8px; }
  .ls-vg-kopf { padding: 0 0 16px; border-left: 0; }
  .ls-vg-name { margin-top: 14px; }
  .ls-vg-zelle { padding: 16px 0 18px; border-left: 0; }
  .ls-vg-etikett { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: 0 0 6px; color: var(--leise); font: 500 13.5px/1.3 var(--schrift); }
  .js .ls-vergleich.zeigt :is(.ls-vg-zeile, .ls-vg-zelle) { transition-delay: calc(.1s + var(--r) * 80ms); }
  .ls-gross-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 861px) and (max-width: 1180px) { .ls-vg { grid-template-columns: minmax(96px, .8fr) repeat(var(--n), minmax(0, 2.2fr)); } }
@media (prefers-reduced-motion: reduce) {
  .js :is(.ls-vergleich, .ls-gross) :is(.ls-vg-zeile, .ls-vg-zelle, .ls-vg-kopf > *, .ls-gross-bild, .ls-fall-oben, .ls-gross-satz, .ls-etikett, .ls-gross-liste li, .lh-link) { opacity: 1; translate: none; }
  .ls-vg-kopf::after { transform: none; transition: none; }
  .ls-gross-bild img { transition: none; }
  .ls-gross-fenster { transform: none; }
  .ls-gross-bild .ecke { transition: none; }
}
@media (max-width: 860px) { .ls-gross-bild .ecke { display: none; } }

/* Kernpunkte als große Sätze (27.10.2026, System „Woran Sie merken, dass es Zeit wird“): zwei Spalten, Name klein oben, Satz groß unten */
.ls-kern-saetze li { min-height: clamp(190px, 15vw, 250px); }
.ls-kern-saetze h3 { margin: 0; padding-top: 36px; font: 500 14px/1.2 var(--schrift); letter-spacing: -.003em; color: var(--leise); }
html.hell .ls-kern-saetze h3 { font-weight: 500; }
.ls-kern-saetze p { max-width: 30ch; font: 320 clamp(22px, 15px + .9vw, 32px)/1.22 var(--schrift); letter-spacing: -.03em; color: var(--sand); text-wrap: pretty; }
html.hell .ls-kern-saetze p { font-weight: 300; }
@media (min-width: 861px) and (max-width: 1180px) { .ls-kern-saetze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Partnerstatus groß (27.10.2026, src/components/seite/Partner.astro): Abzeichen links in der Teilung der Kopfleiste, Text rechts */
.ls-partner-raster { display: grid; grid-template-columns: minmax(0, 1fr) var(--lh-rechts, minmax(0, 5fr)); align-items: center; gap: 32px 0; padding: clamp(32px, 4vw, 72px) 0; border-top: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.ls-partner-abzeichen { position: relative; padding-right: clamp(24px, 4vw, 72px); }
.ls-partner-abzeichen img { display: block; width: min(100%, 440px); height: auto; }
.ls-partner-abzeichen .tag, html.hell .ls-partner-abzeichen .nacht { display: none; }
html.hell .ls-partner-abzeichen .tag { display: block; }
.ls-partner-abzeichen::after { content: ""; position: absolute; left: 0; bottom: -22px; width: min(100%, 440px); height: 1px; background: var(--sonne); transform: scaleX(0); transform-origin: left; }
.ls-partner.zeigt .ls-partner-abzeichen::after { transform: scaleX(1); transition: transform 1.3s var(--sanft) .2s; }
.ls-partner-text { padding-left: clamp(20px, 2.4vw, 44px); border-left: 1px solid var(--zl); }
.ls-partner-text .ls-etikett { margin: 0 0 18px; }
.ls-partner-text .lh-link { margin-top: 18px; }
.js .ls-partner :is(.ls-partner-abzeichen img, .ls-etikett, .ls-mass-satz, .ls-mass-klein) { opacity: 0; translate: 0 14px; }
.js .ls-partner.zeigt :is(.ls-partner-abzeichen img, .ls-etikett, .ls-mass-satz, .ls-mass-klein) { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus), translate 1s var(--sanft); }
.js .ls-partner.zeigt .ls-mass-satz { transition-delay: .12s; }
.js .ls-partner.zeigt .ls-mass-klein { transition-delay: .24s; }
@media (max-width: 860px) {
  .ls-partner-raster { grid-template-columns: minmax(0, 1fr); }
  .ls-partner-abzeichen { padding-right: 0; margin-bottom: 22px; }
  .ls-partner-abzeichen img { width: min(100%, 300px); }
  .ls-partner-text { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ls-partner :is(.ls-partner-abzeichen img, .ls-etikett, .ls-mass-satz, .ls-mass-klein) { opacity: 1; translate: none; }
  .ls-partner-abzeichen::after { transform: none; transition: none; }
}

/* Die Leiter (27.10.2026, src/components/seite/Leiter.astro, Bewegung quelle/leiter.js): drei Stufen über die ganze Breite, je Stufe die Frage über
   der Linie und die Leistung darunter; die Höhe der Linie je Stufe steht in --y und wird von der Leinwand mitgelesen */
.ls-leiter-feld { position: relative; height: clamp(440px, 38vw, 580px); border-top: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.ls-leiter-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; }
.ls-leiter-stufen { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 100%; }
.ls-leiter-stufe { position: relative; --y: calc(80% - var(--i) * 27%); }
.ls-leiter-stufe:nth-child(1) { --y: 80%; } .ls-leiter-stufe:nth-child(2) { --y: 53%; } .ls-leiter-stufe:nth-child(3) { --y: 26%; }
.ls-leiter-frage { position: absolute; left: 0; right: 84px; bottom: calc(100% - var(--y) + 24px); display: grid; gap: 12px; margin: 0;
                   font: 320 clamp(19px, 13px + .8vw, 27px)/1.22 var(--schrift); letter-spacing: -.025em; color: var(--sand); text-wrap: balance; }
html.hell .ls-leiter-frage { font-weight: 300; }
.ls-leiter-name { position: absolute; left: 0; top: calc(var(--y) + 18px); font: 320 clamp(30px, 14px + 2vw, 56px)/1 var(--schrift); letter-spacing: -.04em; gap: 14px; }
html.hell .ls-leiter-name { font-weight: 300; }
.ls-leiter-name svg { width: 18px; height: 18px; }
.js .ls-leiter .ls-leiter-stufe > * { opacity: 0; translate: 0 14px; }
.js .ls-leiter.zeigt .ls-leiter-stufe > * { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus), translate 1s var(--sanft); transition-delay: calc(.15s + var(--i) * 140ms); }
@media (max-width: 860px) {
  .ls-leiter-feld { height: auto; }
  .ls-leiter-stufen { display: block; height: auto; padding: 8px 0 8px 34px; }
  .ls-leiter-stufe { padding: 26px 0 30px; }
  .ls-leiter-frage, .ls-leiter-name { position: static; }
  .ls-leiter-frage { right: auto; }
  .ls-leiter-name { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .js .ls-leiter .ls-leiter-stufe > * { opacity: 1; translate: none; } }

/* Ziel einer Sprungmarke (27.10.2026, Mega-Menü): leuchtet einmal kurz in Sonne auf (quelle/seite.js setzt .ls-ziel) */
.ls-ziel { animation: ls-ziel 2.2s var(--aus) .25s both; }   /* Lichtschein, Ring und Teilchen zeichnet quelle/seite.js darüber */
@keyframes ls-ziel { 0% { box-shadow: inset 0 0 0 1px rgb(255 106 31 / 0); background-color: rgb(255 106 31 / 0); } 12%, 35% { box-shadow: inset 0 0 0 1px var(--sonne); background-color: rgb(255 106 31 / .09); } 100% { box-shadow: inset 0 0 0 1px rgb(255 106 31 / 0); background-color: rgb(255 106 31 / 0); } }
@media (prefers-reduced-motion: reduce) { .ls-ziel { animation: none; } }

/* Ein Monat Betreuung als Kreis (27.10.2026, src/components/seite/Monat.astro, Bewegung quelle/monat.js) */
.ls-monat-raster { display: grid; grid-template-columns: minmax(0, 1fr) var(--lh-rechts, minmax(0, 5fr)); align-items: center; gap: 32px 0; }
.ls-monat-bild { position: relative; width: min(100%, 560px); aspect-ratio: 1; justify-self: start; }
.ls-monat-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; }
.ls-monat-mitte { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; pointer-events: none; }
.ls-monat-wort { color: var(--leise); font: 500 14px/1 var(--schrift); }
.ls-monat-zahl { display: block; overflow: clip; font: 300 clamp(76px, 40px + 4.4vw, 148px)/1 var(--schrift); letter-spacing: -.05em; color: var(--sand); font-variant-numeric: tabular-nums; }
.ls-monat-zahl > span { display: block; }
.ls-monat-zahl > span.neu { animation: ls-monat-neu .8s var(--sanft) both; }
@keyframes ls-monat-neu { from { translate: 0 60%; opacity: 0; color: var(--sonne); } 60% { color: var(--sonne); } to { translate: 0 0; opacity: 1; } }
.ls-monat-marke { position: absolute; color: var(--leise); font: 500 12.5px/1.2 var(--schrift); white-space: nowrap; transition: color .4s var(--aus); }
.ls-monat-marke.an { color: var(--sand); }
.ls-monat-liste { list-style: none; margin: 0; padding: 0 0 0 clamp(20px, 2.4vw, 44px); border-left: 1px solid var(--zl); }
.ls-monat-liste li { position: relative; padding: 22px 0 24px 34px; border-bottom: 1px solid var(--zl); }
.ls-monat-liste li:first-child { border-top: 1px solid var(--zl); }
.ls-monat-boje { position: absolute; left: 0; top: 27px; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px rgb(var(--vg-k) / .55); transition: background-color .3s var(--aus), box-shadow .3s var(--aus); }
.ls-monat-boje::after { content: ""; position: absolute; inset: -14px; border: 1px solid var(--sonne); border-radius: 50%; opacity: 0; transform: scale(.25); }
.ls-monat-wann { margin: 0 0 6px; color: var(--leise); font: 500 13px/1.2 var(--schrift); }
.ls-monat-liste h3 { margin: 0 0 8px; font: 320 clamp(22px, 14px + .8vw, 30px)/1.1 var(--schrift); letter-spacing: -.03em; color: rgb(var(--vg-k) / .62); transition: color .4s var(--aus); }
html.hell .ls-monat-liste h3 { font-weight: 300; }
.ls-monat-liste li p:last-child { margin: 0; max-width: 46ch; color: var(--leise); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.ls-monat-liste li.jetzt h3, .ls-monat-liste li.vorbei h3 { color: var(--sand); }
.ls-monat-liste li.jetzt .ls-monat-boje { background: var(--sonne); box-shadow: inset 0 0 0 1.25px var(--sonne); }
.ls-monat-liste li.jetzt .ls-monat-boje::after { animation: ls-ping 1.5s cubic-bezier(.2, .6, .3, 1) both; }
.ls-monat-liste li.jetzt .ls-monat-wann { color: var(--sonne); }
html.hell .ls-monat-liste li.jetzt .ls-monat-wann { color: var(--sonne-700, #c43c0c); }
.js .ls-monat :is(.ls-monat-bild, .ls-monat-liste li) { opacity: 0; translate: 0 16px; }
.js .ls-monat.zeigt :is(.ls-monat-bild, .ls-monat-liste li) { opacity: 1; translate: 0 0; transition: opacity .9s var(--aus), translate 1s var(--sanft); }
.js .ls-monat.zeigt .ls-monat-liste li { transition-delay: calc(.15s + var(--z) * 90ms); }
@media (max-width: 860px) {
  .ls-monat-raster { grid-template-columns: minmax(0, 1fr); }
  .ls-monat-bild { width: min(100%, 360px); justify-self: center; }
  .ls-monat-liste { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ls-monat :is(.ls-monat-bild, .ls-monat-liste li) { opacity: 1; translate: none; }
  .ls-monat-zahl > span.neu, .ls-monat-liste li.jetzt .ls-monat-boje::after { animation: none; }
}

/* ---------- Technik und Recht: Prüfprotokoll (27.10.2026, src/components/seite/Pruefung.astro) ----------
   Drei Spalten zwischen Linien wie die Kernpunkte; vor jedem Prüfpunkt ein Kästchen aus 3 × 3 Pixeln, das sich beim Einblenden Zelle für Zelle in
   Sonne füllt (ohne Übergang, Stufe für Stufe), Spalte für Spalte und Punkt für Punkt. */
.ls-pruef-spalten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--zl); border-left: 1px solid var(--zl); }
.ls-pruef-spalten > li { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 14px; padding: 20px clamp(18px, 1.8vw, 32px) clamp(28px, 2.6vw, 40px); border-right: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.ls-pruef-spalten .plus { left: 0; top: 0; color: var(--zp); }
.ls-pruef-spalten h3 { margin: 0; padding-top: 44px; font: 320 clamp(28px, 14px + 1.5vw, 42px)/1.05 var(--schrift); letter-spacing: -.035em; color: var(--sand); }
html.hell .ls-pruef-spalten h3 { font-weight: 300; }
.ls-pruef-satz { margin: 0; max-width: 36ch; color: var(--leise); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.ls-pruef-liste { list-style: none; margin: 14px 0 0; padding: 0; align-self: end; display: grid; }
.ls-pruef-liste li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 0; border-top: 1px solid var(--zl); color: rgb(var(--vg-k) / .86); font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
.ls-px { display: grid; grid-template-columns: repeat(3, 4px); grid-auto-rows: 4px; gap: 1px; width: 14px; height: 14px; margin-top: 3px; box-shadow: 0 0 0 1px var(--zl); }
.ls-px b { background: var(--sonne); }
.js .ls-pruef .ls-px b { background: transparent; }
.js .ls-pruef.zeigt .ls-px b { background: var(--sonne); transition: background-color 0s linear; transition-delay: calc(.5s + var(--c) * .55s + var(--k) * .22s + var(--d) * 32ms); }
.js .ls-pruef .ls-pruef-spalten > li { opacity: 0; translate: 0 14px; }
.js .ls-pruef.zeigt .ls-pruef-spalten > li { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus), translate .8s var(--aus); transition-delay: calc(.1s + var(--c) * 90ms); }
@media (max-width: 860px) {
  .ls-pruef-spalten { grid-template-columns: minmax(0, 1fr); }
  .ls-pruef-spalten h3 { padding-top: 28px; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .ls-pruef-spalten h3 { font-size: clamp(26px, 12px + 1.6vw, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .js .ls-pruef .ls-pruef-spalten > li { opacity: 1; translate: none; }
  .js .ls-pruef .ls-px b { background: var(--sonne); transition: none; }
}

/* Link unter dem Vergleich (27.10.2026, Website-Seite: „Mehr zu Webflow“) */
.ls-vg-link { display: flex; justify-content: flex-end; margin-top: 18px; }
.js .ls-vergleich .ls-vg-link { opacity: 0; }
.js .ls-vergleich.zeigt .ls-vg-link { opacity: 1; transition: opacity .8s var(--aus) .8s; }
@media (prefers-reduced-motion: reduce) { .js .ls-vergleich .ls-vg-link { opacity: 1; } }

/* ---------- Wie ein System-Projekt läuft (27.10.2026, src/components/seite/Projektlauf.astro, Bewegung quelle/projektlauf.js) ----------
   Oben der heutige Ablauf als Punkte, links und rechts die Programme mit ihren Schnittstellen, in der Mitte das Werkzeug in Stücken, darunter je Stück
   das Kästchen, das Ihr Team abhakt, unten die Linie bis zum Start. Die Phase setzt das Skript als data-phase (1 bis 4). */
.pl-buehne { display: grid; grid-template-columns: 150px 128px 56px minmax(0, 1fr) 56px 128px; grid-template-rows: auto auto auto auto; row-gap: 22px; align-items: center;
  margin-bottom: clamp(8px, 1vw, 16px); padding: clamp(40px, 4vw, 60px) 0 clamp(32px, 3.6vw, 48px); border-top: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.pl-zeile { grid-column: 1; margin: 0; color: var(--leise); font: 500 13px/1.25 var(--schrift); }
.pl-z-heute { grid-row: 1; } .pl-z-test { grid-row: 3; }
.pl-heute, .pl-stuecke, .pl-tests { grid-column: 4; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
.pl-heute { position: relative; grid-row: 1; height: 26px; align-items: center; justify-items: center; }
.pl-heute-linie { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 50%; height: 1px; background: repeating-linear-gradient(90deg, rgb(var(--vg-k) / .45) 0 2px, transparent 2px 7px); transform-origin: left; }
.pl-knoten { position: relative; width: 9px; height: 9px; border-radius: 50%; border: 1.3px solid rgb(var(--vg-k) / .6); background: rgb(var(--hg-k)); }
.pl-hakt { border-color: var(--sonne); }
.pl-hakt::after { content: ""; position: absolute; inset: -6px; border: 1px solid var(--sonne); border-radius: 50%; }
.pl-hakt span { position: absolute; left: 50%; bottom: calc(100% + 12px); translate: -50% 0; white-space: nowrap; color: var(--sonne); font: 500 12.5px/1 var(--schrift); }
html.hell .pl-hakt span { color: var(--sonne-700); }
.pl-programm { grid-row: 2; justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px 10px; border: 1px solid rgb(var(--vg-k) / .3); border-radius: 4px; color: var(--sand); font: 500 13.5px/1 var(--schrift); white-space: nowrap; }
.pl-programm i { width: 6px; height: 6px; background: var(--sand); }
.pl-p-links { grid-column: 2; } .pl-p-rechts { grid-column: 6; }
.pl-schnitt { grid-row: 2; position: relative; height: 1px; background: rgb(var(--vg-k) / .55); }
.pl-schnitt::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; background: rgb(var(--vg-k) / .8); }
.pl-s-links { grid-column: 3; transform-origin: left; } .pl-s-links::after { right: 0; }
.pl-s-rechts { grid-column: 5; transform-origin: right; } .pl-s-rechts::after { left: 0; }
.pl-stuecke { grid-row: 2; }
.pl-stueck { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 92px; padding: 10px 12px 12px; border: 1px dashed rgb(var(--vg-k) / .3); border-radius: 4px; overflow: hidden;
  color: var(--leise); font: 500 13.5px/1.3 var(--schrift); transition: background-color .5s var(--aus), border-color .5s var(--aus), color .5s var(--aus); }
.pl-stueck canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pl-stueck > b { position: relative; font-weight: 500; text-wrap: balance; }
.pl-stueck.gebaut { background: rgb(var(--vg-k) / .07); border-style: solid; border-color: rgb(var(--vg-k) / .42); color: var(--sand); }
.ls-projekt.gestartet .pl-stueck.gebaut { border-color: var(--sonne); }
.pl-px-innen { display: none; flex: none; position: relative; }
.pl-tests { grid-row: 3; justify-items: center; }
.pl-test { display: block; }
.js .ls-projekt :is(.pl-test, .pl-stueck) .ls-px b { background: transparent; }
.js .ls-projekt :is(.pl-test, .pl-stueck).ok .ls-px b { background: var(--sonne); transition: background-color 0s linear; transition-delay: calc(var(--d) * 34ms); }
.pl-start { grid-column: 4 / 7; grid-row: 4; position: relative; height: 30px; }
.pl-start-linie { position: absolute; left: calc(50% / var(--n) * .66); right: 96px; top: 50%; height: 1px; background: rgb(var(--vg-k) / .55); transform-origin: left; }
.pl-start-boje { position: absolute; right: 22px; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 10px; color: var(--sand); font: 500 13.5px/1 var(--schrift); }
.pl-start-boje i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--sonne); }
.pl-start-boje i::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--sonne); border-radius: 50%; opacity: 0; }
.pl-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 40px); }
.pl-schritt { padding-top: 22px; }
.pl-nr { margin: 0 0 12px; font: 300 clamp(36px, 20px + 1.6vw, 56px)/1 var(--schrift); letter-spacing: -.04em; color: rgb(var(--vg-k) / .42); transition: color .5s var(--aus); }
.pl-schritt h3 { margin: 0 0 8px; color: var(--sand); font: 400 clamp(19px, 15px + .45vw, 23px)/1.2 var(--schrift); letter-spacing: -.02em; }
.pl-schritt p:last-child { margin: 0; max-width: 34ch; color: var(--leise); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.pl-schritt.jetzt .pl-nr { color: var(--sonne); }
/* Bewegung: nur mit Skript; ohne steht das Endbild */
.js .ls-projekt .pl-heute-linie, .js .ls-projekt .pl-schnitt, .js .ls-projekt .pl-start-linie { transform: scaleX(0); }
.js .ls-projekt :is(.pl-knoten, .pl-programm, .pl-start-boje, .pl-zeile) { opacity: 0; }
.js .ls-projekt .pl-hakt::after, .js .ls-projekt .pl-hakt span { opacity: 0; }
.js .ls-projekt .pl-schritt { opacity: .38; transition: opacity .6s var(--aus); }
.js .ls-projekt .pl-schritt:is(.jetzt, .war) { opacity: 1; }
.js .ls-projekt[data-phase] .pl-z-heute { opacity: 1; transition: opacity .6s var(--aus); }
.js .ls-projekt[data-phase] .pl-heute-linie { transform: none; transition: transform 1.2s var(--sanft); }
.js .ls-projekt[data-phase] .pl-knoten { opacity: 1; transition: opacity .4s var(--aus) calc(.15s + var(--i) * 120ms); }
.js .ls-projekt[data-phase] .pl-hakt::after, .js .ls-projekt[data-phase] .pl-hakt span { opacity: 1; transition: opacity .5s var(--aus) 1s; }
.js .ls-projekt:is([data-phase="2"], [data-phase="3"], [data-phase="4"]) .pl-programm { opacity: 1; transition: opacity .5s var(--aus); }
.js .ls-projekt:is([data-phase="2"], [data-phase="3"], [data-phase="4"]) .pl-schnitt { transform: none; transition: transform .9s var(--sanft) .3s; }
.js .ls-projekt:is([data-phase="3"], [data-phase="4"]) .pl-z-test { opacity: 1; transition: opacity .6s var(--aus); }
.js .ls-projekt[data-phase="4"] .pl-start-linie { transform: none; transition: transform 1.1s var(--sanft); }
.js .ls-projekt[data-phase="4"] .pl-start-boje { opacity: 1; transition: opacity .5s var(--aus) .9s; }
.js .ls-projekt[data-phase="4"] .pl-start-boje i::after { animation: lh-echolot 3.2s cubic-bezier(.2, .6, .3, 1) 1.1s infinite; }
@media (min-width: 861px) and (max-width: 1180px) {
  .pl-buehne { grid-template-columns: 0 112px 36px minmax(0, 1fr) 36px 112px; }
  .pl-zeile { display: none; }
  .pl-stueck { font-size: 12.5px; padding: 9px 10px 10px; }
}
@media (max-width: 860px) {
  .pl-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .pl-zeile, .pl-heute, .pl-schnitt, .pl-tests { display: none; }
  .pl-p-links { grid-column: 1; grid-row: 1; justify-self: start; } .pl-p-rechts { grid-column: 2; grid-row: 1; justify-self: end; }
  .pl-stuecke { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-stueck { min-height: 76px; }
  .pl-px-innen { display: grid; }
  .pl-start { grid-column: 1 / -1; grid-row: 3; }
  .pl-start-linie { left: 0; right: 76px; }
  .pl-start-boje { right: 0; }
  .pl-schritte { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .ls-projekt .pl-start-boje i::after { animation: none !important; }
}

/* ---------- Mittelstand (28.10.2026): Folie in der Bühne und Freigaben im Projekt (src/components/seite/Freigaben.astro, quelle/freigaben.js) ---------- */
.lsb-folie { position: absolute; left: 50%; top: 44%; translate: -50% -50%; width: min(92%, 460px); display: grid; gap: 12px; padding: 14px 16px 16px; border: 1px solid rgb(var(--vg-k) / .28); border-radius: 6px;
  background: rgb(var(--hg-k) / .9); opacity: 0; transition: opacity .5s var(--aus); }
.lsb-folie.an { opacity: 1; }
.lsb-folie > i { font-style: normal; font-size: 12.5px; color: var(--leise); }
.lsb-folie > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.lsb-folie > div > div { display: grid; gap: 5px; padding-top: 8px; border-top: 1px solid rgb(var(--vg-k) / .18); opacity: 0; transition: opacity .3s var(--aus); }
.lsb-folie > div > div.an { opacity: 1; }
.lsb-folie b { font-weight: 500; font-size: 12px; color: var(--leise); }
.lsb-folie div > span { position: relative; justify-self: start; font-weight: 500; font-size: 13px; line-height: 1.35; color: rgb(var(--vg-k) / .92); }
.lsb-folie div > span canvas { position: absolute; left: -4px; top: -2px; width: calc(100% + 8px); height: calc(100% + 4px); pointer-events: none; }
.lsb-folie div > span > span { position: relative; opacity: 0; transition: opacity .2s linear; }
.lsb-folie div > span.an > span { opacity: 1; }
.fg-raster { position: relative; display: grid; grid-template-columns: 170px repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: auto; column-gap: clamp(14px, 1.6vw, 28px);
  padding-top: 34px; border-top: 1px solid var(--zl); }
.fg-linie { position: absolute; left: calc(170px + clamp(14px, 1.6vw, 28px)); right: 0; top: 33px; height: 1px; background: var(--sonne); transform: scaleX(0); transform-origin: left; }
.fg-kopf { grid-row: 1; position: relative; padding: 22px 0 24px; }
.fg-boje { position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; border: 1.3px solid rgb(var(--vg-k) / .55); background: rgb(var(--hg-k)); transition: background-color .3s, border-color .3s; }
.fg-boje::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--sonne); border-radius: 50%; opacity: 0; }
.fg-kopf h3 { margin: 0 0 8px; color: var(--sand); font: 400 clamp(18px, 14px + .4vw, 22px)/1.2 var(--schrift); letter-spacing: -.02em; }
.fg-satz { margin: 0; max-width: 30ch; color: var(--leise); font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }
.fg-wer { display: none; margin: 10px 0 0; color: rgb(var(--vg-k) / .86); font-size: 14px; line-height: 1.45; }
.fg-rolle { grid-column: 1; margin: 0; padding: 14px 0; border-top: 1px solid var(--zl); color: var(--leise); font: 500 13.5px/1.25 var(--schrift); }
.fg-zelle { display: flex; align-items: center; min-height: 46px; border-top: 1px solid var(--zl); }
.fg-zu { display: inline-block; width: 7px; height: 7px; margin: 0 4px; border-radius: 50%; background: rgb(var(--vg-k) / .55); }
.fg-legende { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: var(--leise); font: 500 13px/1 var(--schrift); }
.fg-legende .fg-zu { margin-left: 14px; }
/* Bewegung: nur mit Skript */
.js .ls-fg .fg-zelle > * { opacity: 0; transition: opacity .3s var(--aus); }
.js .ls-fg .fg-zelle .ls-px b { background: transparent; }
.js .ls-fg .fg-zelle.war > * { opacity: 1; }
.js .ls-fg .fg-zelle.war .ls-px b { background: var(--sonne); transition: background-color 0s linear; transition-delay: calc(.15s + var(--d) * 34ms); }
.js .ls-fg .fg-kopf { opacity: .4; transition: opacity .5s var(--aus); }
.js .ls-fg .fg-kopf.war { opacity: 1; }
.fg-kopf.war .fg-boje { background: var(--sonne); border-color: var(--sonne); }
.js .ls-fg .fg-kopf.jetzt .fg-boje::after { animation: lh-echolot 1.6s cubic-bezier(.2, .6, .3, 1) 1; }
.js .ls-fg[data-schritt] .fg-linie { transform: scaleX(calc((var(--schritt, 0) + .02) / var(--n))); transition: transform .8s var(--sanft); }
html:not(.js) .fg-linie { transform: none; }
@media (max-width: 860px) {
  .fg-raster { grid-template-columns: minmax(0, 1fr); padding-top: 0; border-top: 0; }
  .fg-linie, .fg-rolle, .fg-zelle, .fg-legende { display: none; }
  .fg-kopf { grid-column: 1 !important; grid-row: auto; padding: 20px 0 22px 22px; border-top: 1px solid var(--zl); }
  .fg-boje { top: 26px; }
  .fg-wer { display: block; }
}
@media (prefers-reduced-motion: reduce) { .js .ls-fg .fg-kopf.jetzt .fg-boje::after { animation: none; } }

/* ---------- B2B-SaaS (28.10.2026): Bestandsaufnahme der Anwendung (src/components/seite/Bestandsaufnahme.astro), nur CSS ab .zeigt ---------- */
.ba-buehne { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 72px); align-items: center; margin-bottom: clamp(8px, 1vw, 16px);
  padding: clamp(36px, 4vw, 56px) 0; border-top: 1px solid var(--zl); border-bottom: 1px solid var(--zl); }
.ba-app { position: relative; overflow: hidden; border: 1px solid rgb(var(--vg-k) / .28); border-radius: 8px; background: rgb(var(--vg-k) / .03); }
.ba-app-kopf { display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; border-bottom: 1px solid rgb(var(--vg-k) / .16); color: var(--leise); font: 500 12.5px/1 var(--schrift); }
.ba-app-kopf i { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--vg-k) / .25); }
.ba-app-kopf span { margin-left: 8px; }
.ba-app-leib { display: grid; grid-template-columns: 22% repeat(3, minmax(0, 1fr)); grid-template-rows: 34px 88px 1fr 40px; gap: 12px; height: clamp(260px, 28vw, 380px); padding: 14px; }
.ba-app-leib > span { border: 1px solid rgb(var(--vg-k) / .2); border-radius: 4px; transition: border-color .4s, background-color .4s; }
.ba-seite { grid-row: 1 / -1; }
.ba-oben { grid-column: 2 / -1; }
.ba-liste { grid-column: 2 / -1; }
.ba-knopf { grid-column: 4; width: 70%; justify-self: end; }
.ba-scan { position: absolute; left: 0; right: 0; top: 34px; height: 2px; background: var(--sonne); box-shadow: 0 0 0 1px rgb(255 106 31 / .15); opacity: 0; }
.ba-muster { list-style: none; margin: 0; padding: 0; display: grid; }
.ba-muster li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--zl); color: rgb(var(--vg-k) / .88); font-size: 15px; }
.ba-muster .ba-muster-kopf { display: block; padding-top: 0; border-top: 0; color: var(--leise); font: 500 13px/1.2 var(--schrift); }
.ba-muster .ls-px { margin-top: 0; }
.js .ls-ba .ba-muster .ls-px b { background: transparent; }
.js .ls-ba.zeigt .ba-muster .ls-px b { background: var(--sonne); transition: background-color 0s linear; transition-delay: calc(.9s + var(--k) * .5s + var(--d) * 34ms); }
.js .ls-ba.zeigt .ba-app-leib > span { border-color: rgb(var(--vg-k) / .5); background: rgb(var(--vg-k) / .06); transition-delay: calc(.6s + var(--k) * .5s); }
.js .ls-ba.zeigt .ba-scan { animation: ba-scan 2.8s cubic-bezier(.45, 0, .25, 1) .5s both; }
@keyframes ba-scan { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(clamp(250px, 27vw, 370px)); } }
html:not(.js) .ba-app-leib > span { border-color: rgb(var(--vg-k) / .5); }
@media (max-width: 860px) {
  .ba-buehne { grid-template-columns: minmax(0, 1fr); }
  .ba-app-leib { height: 240px; }
  @keyframes ba-scan { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(232px); } }
}
@media (prefers-reduced-motion: reduce) {
  .js .ls-ba .ba-muster .ls-px b { background: var(--sonne); transition: none; }
  .js .ls-ba.zeigt .ba-scan { animation: none; }
}