/* Abschnitt 60 – Startseite – Software Motion Graphic */
/*
  Startseite – Software Motion Graphic
  ====================================

  Ein Durchlauf: --lz-dauer (15 s), danach von vorn. Jede Animation läuft über
  den ganzen Durchlauf; WANN etwas passiert, steht in den Prozenten der
  @keyframes weiter unten:  1 s = 6,667 %   ·   Prozent = Sekunde / 15 × 100.

    Szene 1   0,0 –  2,0 s   „Software“ – die zu Ihrem Betrieb passt
    Szene 2   2,0 –  4,0 s   Individualsoftware | Websites
    Szene 3   4,0 –  7,0 s   Arbeitsablauf → digitale Lösung → weniger Handarbeit
    Szene 4   7,0 – 10,0 s   Ihr Server. Ihre Daten. Ihr Quellcode.
    Szene 5  10,0 – 12,5 s   Ein Ansprechpartner
    Szene 6  12,5 – 15,0 s   Logo, Claim, Adresse – dann leer, Neustart

  --lz-dauer ändert das Tempo des Ganzen, ohne die Abfolge zu verschieben.

  Farben und Schriften kommen aus den Token der Website (Einstellungen →
  Design); die Rückfallwerte sind die veröffentlichten Werte von
  lorz-software.de. Eigene Werte gehören in den Block unter .lz.

  Dieses CSS gilt nur in diesem Abschnitt: der Server verschachtelt es unter
  [data-custom-block-id="…"]. Die @keyframes bleiben seitenweit und tragen
  deshalb alle das Präfix lz-.
*/

/* --- Zeitleiste ----------------------------------------------------- */

@keyframes lz-fortschritt {
  0% { transform: scaleX(0) }
  100% { transform: scaleX(1) }
}
@keyframes lz-s1 {
  0% { visibility: visible }
  27.667% { visibility: visible }
  27.733% { visibility: hidden }
  99.933% { visibility: hidden }
  100% { visibility: visible }
}
@keyframes lz-s1-wort-text {
  0% { transform: translateY(108%) }
  1.667% { transform: translateY(108%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  6.333% { transform: translateY(0) }
  25.333% { transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  27.333% { transform: translateY(-108%) }
  100% { transform: translateY(-108%) }
}
@keyframes lz-s1-wort {
  0% { transform: translateY(0) scale(1) }
  13.333% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.65, 0, .35, 1) }
  17.667% { transform: translateY(var(--lz-kicker-y)) scale(var(--lz-kicker-s)) }
  100% { transform: translateY(var(--lz-kicker-y)) scale(var(--lz-kicker-s)) }
}
@keyframes lz-s1-linie {
  0% { transform: scaleX(0) }
  1% { transform: scaleX(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  5.333% { transform: scaleX(1) }
  12.333% { transform: scaleX(1); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  14.667% { transform: scaleX(0) }
  100% { transform: scaleX(0) }
}
@keyframes lz-s1-zeile {
  0% { transform: translateY(110%) }
  5.667% { transform: translateY(110%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  9.667% { transform: translateY(0) }
  12.333% { transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  14.333% { transform: translateY(-110%) }
  100% { transform: translateY(-110%) }
}
@keyframes lz-s2 {
  0% { visibility: hidden }
  14.6% { visibility: hidden }
  14.667% { visibility: visible }
  28.667% { visibility: visible }
  28.733% { visibility: hidden }
  99.933% { visibility: hidden }
  100% { visibility: hidden }
}
@keyframes lz-s2-teiler {
  0% { scale: var(--lz-teiler-zu) }
  15% { scale: var(--lz-teiler-zu); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  18.667% { scale: 1 1 }
  26.333% { scale: 1 1; animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  28.333% { scale: var(--lz-teiler-zu) }
  100% { scale: var(--lz-teiler-zu) }
}
@keyframes lz-s2-links {
  0% { clip-path: inset(0 0 0 100%); transform: translateX(3cqw) }
  17% { clip-path: inset(0 0 0 100%); transform: translateX(3cqw); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  21% { clip-path: inset(0 0 0 0); transform: translateX(0) }
  25.333% { clip-path: inset(0 0 0 0); transform: translateX(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  27.333% { clip-path: inset(0 0 0 100%); transform: translateX(1.5cqw) }
  100% { clip-path: inset(0 0 0 100%); transform: translateX(1.5cqw) }
}
@keyframes lz-s2-rechts {
  0% { clip-path: inset(0 100% 0 0); transform: translateX(-3cqw) }
  17% { clip-path: inset(0 100% 0 0); transform: translateX(-3cqw); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  21% { clip-path: inset(0 0 0 0); transform: translateX(0) }
  25.333% { clip-path: inset(0 0 0 0); transform: translateX(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  27.333% { clip-path: inset(0 100% 0 0); transform: translateX(-1.5cqw) }
  100% { clip-path: inset(0 100% 0 0); transform: translateX(-1.5cqw) }
}
@keyframes lz-s2-detail {
  0% { opacity: 0; transform: translateY(.6cqw) }
  19.667% { opacity: 0; transform: translateY(.6cqw); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  22.667% { opacity: 1; transform: translateY(0) }
  25% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  26.333% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes lz-s3 {
  0% { visibility: hidden }
  26.933% { visibility: hidden }
  27% { visibility: visible }
  47% { visibility: visible }
  47.067% { visibility: hidden }
  99.933% { visibility: hidden }
  100% { visibility: hidden }
}
@keyframes lz-s3-kamera {
  0% { translate: var(--lz-pan-a); scale: 1; opacity: 1 }
  27.333% { translate: var(--lz-pan-a); scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .7, 1) }
  45% { translate: var(--lz-pan-b); scale: 1; opacity: 1; animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  46.667% { translate: var(--lz-pan-c); scale: 1.05; opacity: 0 }
  100% { translate: var(--lz-pan-c); scale: 1.05; opacity: 0 }
}
@keyframes lz-s3-karte-a {
  0% { clip-path: inset(0 0 100% 0) }
  27.667% { clip-path: inset(0 0 100% 0); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  31.333% { clip-path: inset(0 0 0 0) }
  100% { clip-path: inset(0 0 0 0) }
}
@keyframes lz-s3-karte-b {
  0% { clip-path: inset(0 100% 0 0) }
  32.333% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  35.667% { clip-path: inset(0 0 0 0) }
  100% { clip-path: inset(0 0 0 0) }
}
@keyframes lz-s3-karte-c {
  0% { clip-path: inset(0 100% 0 0) }
  39% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  42% { clip-path: inset(0 0 0 0) }
  100% { clip-path: inset(0 0 0 0) }
}
@keyframes lz-s3-zeile {
  0% { opacity: 0; transform: translateX(-6%) }
  29% { opacity: 0; transform: translateX(-6%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  31.667% { opacity: 1; transform: translateX(0) }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes lz-s3-etikett {
  0% { opacity: 0; transform: translateY(40%) }
  29.667% { opacity: 0; transform: translateY(40%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  32.333% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes lz-s3-pfeil {
  0% { scale: var(--lz-pfeil-zu) }
  30.333% { scale: var(--lz-pfeil-zu); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  33% { scale: 1 1 }
  100% { scale: 1 1 }
}
@keyframes lz-s3-punkt {
  0% { opacity: 0; translate: 0 0 }
  32% { opacity: 0; translate: 0 0 }
  32.333% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(.65, 0, .35, 1) }
  35.333% { opacity: 1; translate: var(--lz-pfeil-weg) }
  36.333% { opacity: 0; translate: var(--lz-pfeil-weg) }
  100% { opacity: 0; translate: var(--lz-pfeil-weg) }
}
@keyframes lz-s3-inhalt {
  0% { opacity: 0; transform: translateY(8%) }
  34% { opacity: 0; transform: translateY(8%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  36.333% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes lz-s3-tippen {
  0% { transform: scaleX(0) }
  35.667% { transform: scaleX(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1) }
  38.333% { transform: scaleX(1) }
  100% { transform: scaleX(1) }
}
@keyframes lz-s3-reihe {
  0% { opacity: 0; transform: translateX(-4%) }
  36.333% { opacity: 0; transform: translateX(-4%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  38.667% { opacity: 1; transform: translateX(0) }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes lz-s3-knopf {
  0% { opacity: 0; transform: scale(.9) }
  38.333% { opacity: 0; transform: scale(.9); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  40.333% { opacity: 1; transform: scale(1) }
  100% { opacity: 1; transform: scale(1) }
}
@keyframes lz-s3-balken {
  0% { transform: scaleX(1); background-color: var(--lz-halb) }
  41% { transform: scaleX(1); background-color: var(--lz-halb); animation-timing-function: cubic-bezier(.65, 0, .35, 1) }
  44.667% { transform: scaleX(.28); background-color: var(--lz-akzent) }
  100% { transform: scaleX(.28); background-color: var(--lz-akzent) }
}
@keyframes lz-s3-erledigt {
  0% { opacity: 0; transform: translateX(-4%) }
  41.333% { opacity: 0; transform: translateX(-4%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  43.667% { opacity: 1; transform: translateX(0) }
  100% { opacity: 1; transform: translateX(0) }
}
@keyframes lz-s4 {
  0% { visibility: hidden }
  46.467% { visibility: hidden }
  46.533% { visibility: visible }
  68% { visibility: visible }
  68.067% { visibility: hidden }
  99.933% { visibility: hidden }
  100% { visibility: hidden }
}
@keyframes lz-s4-kamera {
  0% { transform: scale(1.06) }
  46.667% { transform: scale(1.06); animation-timing-function: cubic-bezier(.2, .6, .3, 1) }
  66.667% { transform: scale(1) }
  100% { transform: scale(1) }
}
@keyframes lz-s4-zeile-1 {
  0% { transform: translateY(105%) }
  47% { transform: translateY(105%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  50% { transform: translateY(0) }
  65.667% { transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  67.333% { transform: translateY(-105%) }
  100% { transform: translateY(-105%) }
}
@keyframes lz-s4-hell-1 {
  0% { opacity: 1 }
  52.333% { opacity: 1; animation-timing-function: cubic-bezier(.65, 0, .35, 1) }
  54% { opacity: .3 }
  62.333% { opacity: .3; animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  64% { opacity: 1 }
  100% { opacity: 1 }
}
@keyframes lz-s4-notiz-1 {
  0% { opacity: 0; transform: translateY(40%) }
  49% { opacity: 0; transform: translateY(40%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  51.333% { opacity: 1; transform: translateY(0) }
  65% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  66.333% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes lz-s4-zeile-2 {
  0% { transform: translateY(105%) }
  52.333% { transform: translateY(105%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  55.333% { transform: translateY(0) }
  66% { transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  67.667% { transform: translateY(-105%) }
  100% { transform: translateY(-105%) }
}
@keyframes lz-s4-hell-2 {
  0% { opacity: 1 }
  57.667% { opacity: 1; animation-timing-function: cubic-bezier(.65, 0, .35, 1) }
  59.333% { opacity: .3 }
  62.333% { opacity: .3; animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  64% { opacity: 1 }
  100% { opacity: 1 }
}
@keyframes lz-s4-notiz-2 {
  0% { opacity: 0; transform: translateY(40%) }
  54.333% { opacity: 0; transform: translateY(40%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  56.667% { opacity: 1; transform: translateY(0) }
  65.333% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  66.667% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes lz-s4-zeile-3 {
  0% { transform: translateY(105%) }
  57.667% { transform: translateY(105%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  60.667% { transform: translateY(0) }
  66.333% { transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  68% { transform: translateY(-105%) }
  100% { transform: translateY(-105%) }
}
@keyframes lz-s4-hell-3 {
  0% { opacity: 1 }
  100% { opacity: 1 }
}
@keyframes lz-s4-notiz-3 {
  0% { opacity: 0; transform: translateY(40%) }
  59.667% { opacity: 0; transform: translateY(40%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  62% { opacity: 1; transform: translateY(0) }
  65.667% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  67% { opacity: 0; transform: translateY(0) }
  100% { opacity: 0; transform: translateY(0) }
}
@keyframes lz-s4-strich {
  0% { transform: scaleX(0) }
  62% { transform: scaleX(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  65.333% { transform: scaleX(1) }
  66.333% { transform: scaleX(1); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  67.667% { transform: scaleX(0) }
  100% { transform: scaleX(0) }
}
@keyframes lz-s5 {
  0% { visibility: hidden; opacity: 1; transform: scale(1) }
  66.933% { visibility: hidden; opacity: 1; transform: scale(1) }
  67% { visibility: visible; opacity: 1; transform: scale(1) }
  81.333% { visibility: visible; opacity: 1; transform: scale(1.025); animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  83.333% { visibility: visible; opacity: 0; transform: scale(1.035) }
  83.4% { visibility: hidden; opacity: 0; transform: scale(1) }
  99.933% { visibility: hidden; opacity: 1; transform: scale(1) }
  100% { visibility: hidden; opacity: 1; transform: scale(1) }
}
@keyframes lz-s5-ring {
  0% { stroke-dashoffset: 100 }
  67.667% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  73.333% { stroke-dashoffset: 0 }
  100% { stroke-dashoffset: 0 }
}
@keyframes lz-s5-person {
  0% { opacity: 0; transform: translateY(6%) }
  70.333% { opacity: 0; transform: translateY(6%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  73.333% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes lz-s5-titel {
  0% { transform: translateY(105%) }
  69% { transform: translateY(105%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  72.667% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
@keyframes lz-s5-unter {
  0% { opacity: 0; transform: translateY(.8cqw) }
  72% { opacity: 0; transform: translateY(.8cqw); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  75% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes lz-s5-linie {
  0% { transform: scaleX(0) }
  73.333% { transform: scaleX(0); animation-timing-function: cubic-bezier(.65, 0, .35, 1) }
  78.667% { transform: scaleX(1) }
  100% { transform: scaleX(1) }
}
@keyframes lz-s5-punkt {
  0% { opacity: 0; transform: translateY(30%) }
  73.667% { opacity: 0; transform: translateY(30%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  75.667% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
@keyframes lz-s6 {
  0% { visibility: hidden; opacity: 1 }
  82.933% { visibility: hidden; opacity: 1 }
  83% { visibility: visible; opacity: 1 }
  97.667% { visibility: visible; opacity: 1; animation-timing-function: cubic-bezier(.7, 0, .84, 0) }
  99.667% { visibility: visible; opacity: 0 }
  99.733% { visibility: hidden; opacity: 0 }
  99.933% { visibility: hidden; opacity: 1 }
  100% { visibility: hidden; opacity: 1 }
}
@keyframes lz-s6-logo {
  0% { opacity: 0; clip-path: inset(100% 73% 0 0); transform: translateX(36.5%) }
  84% { opacity: 0; clip-path: inset(100% 73% 0 0); transform: translateX(36.5%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  86.667% { opacity: 1; clip-path: inset(0 73% 0 0); transform: translateX(36.5%) }
  87.333% { opacity: 1; clip-path: inset(0 73% 0 0); transform: translateX(36.5%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  91% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0) }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0) }
}
@keyframes lz-s6-claim {
  0% { transform: translateY(105%) }
  90% { transform: translateY(105%); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  93.333% { transform: translateY(0) }
  100% { transform: translateY(0) }
}
@keyframes lz-s6-adresse {
  0% { opacity: 0; transform: translateY(.6cqw) }
  92.667% { opacity: 0; transform: translateY(.6cqw); animation-timing-function: cubic-bezier(.16, 1, .3, 1) }
  95.333% { opacity: 1; transform: translateY(0) }
  100% { opacity: 1; transform: translateY(0) }
}
[data-custom-block-id="60"] {
.lz {
  /* Tempo */
  --lz-dauer: 15s;

  /* Farben – Token der Website, Rückfall = Live-Werte */
  --lz-grund: var(--primary, #061B32);
  --lz-flaeche: var(--primary-strong, #0E2A45);
  --lz-hell: var(--on-image, #fafaf9);
  --lz-akzent: var(--accent-strong, #3971d4);
  --lz-leise: color-mix(in oklab, var(--lz-hell) 72%, transparent);
  --lz-halb: color-mix(in oklab, var(--lz-hell) 40%, transparent);
  --lz-linie: color-mix(in oklab, var(--lz-hell) 16%, transparent);
  --lz-hauch: color-mix(in oklab, var(--lz-hell) 7%, transparent);
  --lz-raster: color-mix(in oklab, var(--lz-hell) 4.5%, transparent);

  /* Schriften */
  --lz-display: var(--font-display, 'Barlow Condensed', system-ui, sans-serif);
  --lz-sans: var(--font-sans, 'Inter', system-ui, sans-serif);
  --lz-mono: var(--font-mono, ui-monospace, monospace);
  --lz-radius: var(--radius, .375rem);

  /* Wege, die je nach Breite anders laufen */
  --lz-kicker-y: -27cqh;
  --lz-kicker-s: .2;
  --lz-teiler-zu: 1 0;
  --lz-pan-a: 2.5cqw 0;
  --lz-pan-b: -1.8cqw 0;
  --lz-pan-c: -2.5cqw 0;
  --lz-pfeil-zu: 0 1;
  --lz-pfeil-weg: 6cqw 0;

  position: relative;
  container: lz / inline-size;
  overflow: hidden;
  color: var(--lz-hell);
  background:
    radial-gradient(110% 90% at 78% 12%, color-mix(in oklab, var(--lz-flaeche) 85%, transparent) 0%, transparent 62%),
    var(--lz-grund);
}

/* Ein Raster aus Haarlinien, wie Spalten eines Layouts – sehr leise. */
.lz-raster {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, var(--lz-raster) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
  background-position: calc(100% / 24) 0;
  pointer-events: none;
}

.lz-buehne {
  position: relative;
  max-width: 1320px;
  margin-inline: auto;
  aspect-ratio: 2 / 1;
  container: lz-buehne / size;
  overflow: hidden;
}

@container lz (max-width: 900px) {
  .lz-buehne { aspect-ratio: 16 / 11; }
}

@container lz (max-width: 640px) {
  .lz-buehne { aspect-ratio: 4 / 5; }
}

.lz-buehne * {
  animation-duration: var(--lz-dauer);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.lz[data-lauf="aus"] :is(*, *::before, *::after) {
  animation-play-state: paused;
}

.lz-szene {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

/* Text, der aus einer Kante kommt: der Rahmen schneidet, der Inhalt fährt. */
.lz-maske {
  overflow: hidden;
  padding-block: .06em;
}

.lz-maske > span {
  display: block;
}

.lz-maske i,
.lz-s4-zeile i {
  font-style: normal;
  color: var(--lz-akzent);
}

.lz-nr {
  font-family: var(--lz-mono);
  font-size: max(11px, 1.05cqw);
  letter-spacing: .06em;
  color: var(--lz-leise);
}

.lz-fortschritt {
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--lz-hauch);
}

.lz-fortschritt i {
  position: absolute;
  inset: 0;
  background: var(--lz-akzent);
  transform-origin: left;
  animation-name: lz-fortschritt;
}

/* --- Szene 1 ------------------------------------------------------------ */

.lz-s1 { animation-name: lz-s1; }

.lz-s1-wort {
  font: 700 17cqw/.86 var(--lz-display);
  letter-spacing: -.01em;
  text-transform: uppercase;
  animation-name: lz-s1-wort;
}

.lz-s1-wort > span { animation-name: lz-s1-wort-text; }

.lz-s1-linie {
  width: 54cqw;
  height: 2px;
  margin-top: 2cqw;
  background: var(--lz-akzent);
  animation-name: lz-s1-linie;
}

.lz-s1-zeile {
  margin-top: 1.6cqw;
  font: 400 max(16px, 2.5cqw)/1.3 var(--lz-sans);
  color: var(--lz-leise);
}

.lz-s1-zeile > span { animation-name: lz-s1-zeile; }

/* --- Szene 2 ------------------------------------------------------------ */

.lz-s2 {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 3.5cqw;
  padding-inline: 5cqw;
  padding-top: 8cqh;
  animation-name: lz-s2;
}

.lz-s2-feld {
  display: grid;
  gap: 1.2cqw;
}

.lz-s2-links { justify-items: end; text-align: right; }
.lz-s2-rechts { justify-items: start; text-align: left; }

.lz-s2-titel {
  font: 700 5cqw/.9 var(--lz-display);
  text-transform: uppercase;
  letter-spacing: -.005em;
  hyphens: manual;
}

.lz-s2-links .lz-s2-titel { animation-name: lz-s2-links; }
.lz-s2-rechts .lz-s2-titel { animation-name: lz-s2-rechts; }

.lz-s2-unter {
  font: 400 max(14px, 1.55cqw)/1.4 var(--lz-sans);
  color: var(--lz-leise);
}

.lz-s2 .lz-nr,
.lz-s2-unter { animation-name: lz-s2-detail; }

.lz-s2-teiler {
  width: 2px;
  height: 30cqh;
  background: var(--lz-akzent);
  animation-name: lz-s2-teiler;
}

/* --- Szene 3 ------------------------------------------------------------ */

.lz-s3 { animation-name: lz-s3; }

.lz-s3-reihe {
  display: flex;
  align-items: flex-start;
  animation-name: lz-s3-kamera;
}

.lz-s3-schritt {
  display: grid;
  justify-items: start;
  gap: 1.4cqw;
}

.lz-etikett {
  display: flex;
  align-items: baseline;
  gap: .8cqw;
  font: 600 max(13px, 1.45cqw)/1 var(--lz-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  animation-name: lz-s3-etikett;
}

.lz-s3-b .lz-etikett { animation-delay: .7s; }
.lz-s3-c .lz-etikett { animation-delay: 1.45s; }

.lz-karte {
  position: relative;
  container-type: inline-size;
  box-sizing: border-box;
  border: 1px solid var(--lz-linie);
  border-radius: var(--lz-radius);
  overflow: hidden;
  text-align: left;
}

/* Karte A – der Ablauf von Hand: gestrichelt, ungleich, kein System */
.lz-papier {
  width: 21cqw;
  height: 20cqw;
  padding: 1.9cqw 2.1cqw;
  border-style: dashed;
  border-color: var(--lz-halb);
  animation-name: lz-s3-karte-a;
}

.lz-zeile {
  display: flex;
  align-items: center;
  gap: 6cqw;
  height: 14cqw;
  animation-name: lz-s3-zeile;
}

.lz-zeile:nth-child(2) { animation-delay: .06s; }
.lz-zeile:nth-child(3) { animation-delay: .12s; }
.lz-zeile:nth-child(4) { animation-delay: .18s; }
.lz-zeile:nth-child(5) { animation-delay: .24s; }

.lz-zeile b {
  flex: none;
  width: 6cqw;
  aspect-ratio: 1;
  border: 1px solid var(--lz-halb);
  border-radius: 2px;
}

.lz-zeile em,
.lz-erledigt em {
  height: 3.2cqw;
  border-radius: 99px;
  background: var(--lz-linie);
}

.lz-w45 { width: 45%; }
.lz-w55 { width: 55%; }
.lz-w65 { width: 65%; }
.lz-w70 { width: 70%; }
.lz-w85 { width: 85%; }

/* Karte B – die Anwendung im Browser */
.lz-browser {
  width: 28cqw;
  height: 20cqw;
  background: var(--lz-flaeche);
  animation-name: lz-s3-karte-b;
}

.lz-browser-kopf {
  display: flex;
  align-items: center;
  gap: 1.8cqw;
  height: 10cqw;
  padding-inline: 4cqw;
  border-bottom: 1px solid var(--lz-linie);
}

.lz-browser-kopf i {
  width: 2.4cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lz-linie);
}

.lz-browser-kopf em {
  flex: 1;
  height: 4cqw;
  margin-left: 3cqw;
  border-radius: 99px;
  background: var(--lz-hauch);
}

.lz-browser-inhalt {
  display: grid;
  gap: 3.4cqw;
  padding: 5.5cqw 6cqw;
}

.lz-browser-inhalt > * { animation-name: lz-s3-inhalt; }
.lz-browser-inhalt > :nth-child(2) { animation-delay: .08s; }
.lz-browser-inhalt > :nth-child(3) { animation-delay: .16s; }
.lz-browser-inhalt > :nth-child(4) { animation-delay: .24s; }

.lz-feld {
  display: grid;
  grid-template-columns: 26% 1fr;
  align-items: center;
  gap: 4cqw;
}

.lz-feld b {
  height: 2.4cqw;
  border-radius: 99px;
  background: var(--lz-halb);
}

.lz-feld em {
  display: block;
  height: 8cqw;
  padding: 2.6cqw 3cqw;
  box-sizing: border-box;
  border: 1px solid var(--lz-linie);
  border-radius: calc(var(--lz-radius) * .8);
}

.lz-feld em i {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: 99px;
  background: var(--lz-leise);
  transform-origin: left;
  animation-name: lz-s3-tippen;
}

.lz-feld + .lz-feld em i { width: 44%; animation-delay: .25s; }

.lz-tabelle {
  display: grid;
  border-top: 1px solid var(--lz-linie);
}

.lz-tabelle i {
  height: 6.4cqw;
  border-bottom: 1px solid var(--lz-linie);
  background: linear-gradient(to right, var(--lz-halb) 0 18%, transparent 18% 26%, var(--lz-linie) 26% 62%, transparent 62% 76%, var(--lz-linie) 76% 92%, transparent 92%) center / 100% 2.2cqw no-repeat;
  animation-name: lz-s3-reihe;
}

.lz-tabelle i:nth-child(2) { animation-delay: .07s; }
.lz-tabelle i:nth-child(3) { animation-delay: .14s; }

.lz-knopf {
  justify-self: end;
  width: 32%;
  height: 6.4cqw;
  border-radius: 99px;
  background: var(--lz-akzent);
  animation-name: lz-s3-knopf;
}

/* Karte C – was übrig bleibt */
.lz-ergebnis {
  display: grid;
  align-content: start;
  gap: 1.1cqw;
  width: 21cqw;
  height: 20cqw;
  padding: 1.9cqw 2.1cqw;
  animation-name: lz-s3-karte-c;
}

.lz-mono {
  font: 500 max(10px, 6.4cqw)/1 var(--lz-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lz-leise);
}

.lz-balken {
  height: 5.6cqw;
  border-radius: 99px;
  background: var(--lz-hauch);
}

.lz-balken i {
  display: block;
  height: 100%;
  border-radius: 99px;
  transform-origin: left;
  animation-name: lz-s3-balken;
}

.lz-erledigt {
  display: flex;
  align-items: center;
  gap: 5cqw;
  animation-name: lz-s3-erledigt;
}

.lz-erledigt:nth-of-type(2) { animation-delay: .1s; }
.lz-erledigt:nth-of-type(3) { animation-delay: .2s; }

/* Ein Haken aus zwei Kanten – kein Zeichen, das eine Schrift braucht. */
.lz-erledigt b {
  position: relative;
  flex: none;
  width: 7.6cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lz-akzent);
}

.lz-erledigt b::after {
  content: "";
  position: absolute;
  left: 34%;
  top: 22%;
  width: 22%;
  height: 40%;
  border: solid var(--lz-hell);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.lz-s3-pfeil {
  position: relative;
  flex: none;
  width: 6cqw;
  height: 2px;
  margin-top: 10cqw;
  margin-inline: 1.6cqw;
  background: var(--lz-halb);
  transform-origin: left;
  animation-name: lz-s3-pfeil;
}

.lz-s3-p2 { animation-delay: .95s; }

.lz-s3-pfeil i {
  position: absolute;
  left: -.35cqw;
  top: calc(50% - .35cqw);
  width: .7cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lz-akzent);
  animation-name: lz-s3-punkt;
}

.lz-s3-p2 i { animation-delay: .95s; }

/* --- Szene 4 ------------------------------------------------------------ */

.lz-s4 {
  justify-items: stretch;
  padding-inline: 8cqw;
  text-align: left;
  animation-name: lz-s4;
}

.lz-s4-block {
  display: grid;
  width: 84cqw;
  transform-origin: left center;
  animation-name: lz-s4-kamera;
}

.lz-s4-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2cqw;
  padding-block: .02em;
  font: 700 10.4cqw/.9 var(--lz-display);
  letter-spacing: -.012em;
  text-transform: uppercase;
}

.lz-s4-zeile > span { white-space: nowrap; }

/* Unter 900 px fehlt neben der Zeile der Platz für die Notiz – die Aussage trägt allein. */
@container lz-buehne (max-width: 900px) {
  .lz-s4-zeile small { display: none; }
}

.lz-s4-zeile small {
  font: 400 max(11px, 1.05cqw)/1.2 var(--lz-mono);
  letter-spacing: .04em;
  text-transform: none;
  color: var(--lz-leise);
  white-space: nowrap;
}

.lz-s4-zeile:nth-child(1) { animation-name: lz-s4-hell-1; }
.lz-s4-zeile:nth-child(2) { animation-name: lz-s4-hell-2; }
.lz-s4-zeile:nth-child(3) { animation-name: lz-s4-hell-3; }
.lz-s4-zeile:nth-child(1) > span { animation-name: lz-s4-zeile-1; }
.lz-s4-zeile:nth-child(2) > span { animation-name: lz-s4-zeile-2; }
.lz-s4-zeile:nth-child(3) > span { animation-name: lz-s4-zeile-3; }
.lz-s4-zeile:nth-child(1) small { animation-name: lz-s4-notiz-1; }
.lz-s4-zeile:nth-child(2) small { animation-name: lz-s4-notiz-2; }
.lz-s4-zeile:nth-child(3) small { animation-name: lz-s4-notiz-3; }

.lz-s4-strich {
  height: 3px;
  margin-top: 2.4cqw;
  background: var(--lz-akzent);
  transform-origin: left;
  animation-name: lz-s4-strich;
}

/* --- Szene 5 ------------------------------------------------------------ */

.lz-s5 { animation-name: lz-s5; }

.lz-s5-zeichen {
  width: 7.5cqw;
  margin-bottom: 2.4cqw;
  overflow: visible;
}

.lz-s5-ring {
  stroke: var(--lz-akzent);
  stroke-dasharray: 100;
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  animation-name: lz-s5-ring;
}

.lz-s5-person {
  transform-box: fill-box;
  animation-name: lz-s5-person;
}

.lz-s5-titel {
  font: 700 6.2cqw/.92 var(--lz-display);
  text-transform: uppercase;
  letter-spacing: -.008em;
}

.lz-s5-titel > span { animation-name: lz-s5-titel; }

.lz-s5-unter {
  margin: 1.4cqw 0 0;
  font: 400 max(15px, 1.9cqw)/1.4 var(--lz-sans);
  color: var(--lz-leise);
  animation-name: lz-s5-unter;
}

.lz-s5-weg {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 54cqw;
  margin-top: 4.4cqw;
}

.lz-s5-linie {
  position: absolute;
  inset: calc(.45cqw - .5px) 0 auto;
  height: 1px;
  background: var(--lz-halb);
  transform-origin: left;
  animation-name: lz-s5-linie;
}

.lz-s5-punkt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2cqw;
  width: 0;
  white-space: nowrap;
  font: 400 max(10px, 1cqw)/1 var(--lz-mono);
  letter-spacing: .06em;
  color: var(--lz-leise);
  animation-name: lz-s5-punkt;
}

.lz-s5-punkt:nth-of-type(2) { animation-delay: .22s; }
.lz-s5-punkt:nth-of-type(3) { animation-delay: .44s; }
.lz-s5-punkt:nth-of-type(4) { animation-delay: .66s; }

.lz-s5-punkt i {
  width: .9cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lz-akzent);
}

/* --- Szene 6 ------------------------------------------------------------ */

.lz-s6 { animation-name: lz-s6; }

.lz-s6-logo {
  width: 46cqw;
}

/* Das Logo aus den Website-Bildern, weiß gezeichnet: die Fläche ist durchsichtig,
   der Filter färbt nur die Form. */
.lz-s6-logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: .97;
  animation-name: lz-s6-logo;
}

.lz-s6-claim {
  margin-top: 3.4cqw;
  font: 700 3.5cqw/1 var(--lz-display);
  text-transform: uppercase;
  letter-spacing: .01em;
}

.lz-s6-claim > span { animation-name: lz-s6-claim; }

.lz-s6-adresse {
  margin-top: 1.6cqw;
  font: 400 max(12px, 1.2cqw)/1 var(--lz-mono);
  letter-spacing: .08em;
  color: var(--lz-leise);
  animation-name: lz-s6-adresse;
}

/* --- Schmale Bühne: weniger Einzelheiten, dieselbe Aussage --------------- */

@container lz-buehne (max-width: 640px) {
  .lz-s1-wort { font-size: 19cqw; }
  .lz-s1-linie { width: 70cqw; margin-top: 3.5cqw; }
  .lz-s1-zeile { margin-top: 3cqw; }

  .lz-s2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 7cqw;
    padding-top: 12cqh;
  }

  .lz-s2-links,
  .lz-s2-rechts { justify-items: center; text-align: center; }
  .lz-s2-feld { gap: 2.4cqw; }
  .lz-s2-titel { font-size: 10cqw; }
  .lz-s2-teiler { width: 34cqw; height: 2px; }

  .lz-s3-reihe { flex-direction: column; align-items: center; }
  .lz-s3-schritt {
    grid-template-columns: 44cqw 30cqw;
    align-items: center;
    gap: 5cqw;
  }
  .lz-s3-schritt .lz-karte { width: 44cqw; height: 26cqw; }
  .lz-etikett { flex-direction: column; align-items: flex-start; gap: 1.6cqw; line-height: 1.1; }
  .lz-papier,
  .lz-ergebnis { padding: 2.6cqw 3.4cqw; }
  .lz-ergebnis { gap: 2cqw; }
  .lz-zeile { height: 12cqw; }
  .lz-weg { display: none; }
  .lz-browser-inhalt { gap: 4.6cqw; padding: 5cqw 6cqw; }
  .lz-knopf { display: none; }
  .lz-s3-pfeil {
    width: 2px;
    height: 5cqw;
    margin: 2cqw 0 2cqw calc(-35cqw);
    transform-origin: top;
  }
  .lz-s3-pfeil i { left: calc(50% - .9cqw); top: -.9cqw; width: 1.8cqw; }

  .lz-s4 { padding-inline: 7cqw; }
  .lz-s4-block { width: 86cqw; }
  .lz-s4-zeile { font-size: 14.2cqw; }
  .lz-s4-zeile small { display: none; }

  .lz-s5-zeichen { width: 15cqw; margin-bottom: 4cqw; }
  .lz-s5-titel { font-size: 10.4cqw; }
  .lz-s5-unter { margin-top: 3cqw; padding-inline: 8cqw; }
  .lz-s5-weg { width: 76cqw; margin-top: 9cqw; }
  .lz-s5-linie { inset-block-start: calc(.9cqw - .5px); }
  .lz-s5-punkt { gap: 2.4cqw; font-size: max(10px, 2.6cqw); }
  .lz-s5-punkt i { width: 1.8cqw; }

  .lz-s6-logo { width: 80cqw; }
  .lz-s6-claim { margin-top: 6cqw; padding-inline: 6cqw; font-size: 7.4cqw; line-height: 1.02; }
  .lz-s6-adresse { margin-top: 4cqw; }
}

@container lz-buehne (max-width: 640px) {
  .lz-szene {
    --lz-kicker-y: -31cqh;
    --lz-teiler-zu: 0 1;
    --lz-pan-a: 0 2cqh;
    --lz-pan-b: 0 -1.5cqh;
    --lz-pan-c: 0 -2cqh;
    --lz-pfeil-zu: 1 0;
    --lz-pfeil-weg: 0 5cqw;
  }
}

/* --- Bedienung ---------------------------------------------------------- */

.lz-pause {
  position: absolute;
  right: clamp(14px, 2cqw, 28px);
  bottom: clamp(14px, 2cqw, 28px);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--lz-hell) 35%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--lz-hell);
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s, background-color .2s;
}

.lz-pause:hover,
.lz-pause:focus-visible { opacity: 1; background: var(--lz-hauch); }
.lz-pause:focus-visible { outline: 2px solid var(--lz-akzent); outline-offset: 2px; }
.lz-pause[hidden] { display: none; }
.lz-pause svg { width: 14px; height: 14px; }
.lz-pause .lz-pause-weiter,
.lz-pause[aria-pressed="true"] .lz-pause-halt { display: none; }
.lz-pause[aria-pressed="true"] .lz-pause-weiter { display: block; }

/* --- Der Inhalt als Text ------------------------------------------------- */

/* Für Vorlesegeräte immer da, auf dem Bildschirm nur bei reduzierter Bewegung. */
.lz-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .lz-buehne,
  .lz-pause { display: none; }

  .lz-text {
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    box-sizing: border-box;
    display: grid;
    gap: 22px;
    max-width: 1320px;
    margin-inline: auto;
    padding: clamp(64px, 8cqw, 110px) 40px;
  }

  .lz-text p,
  .lz-text ul { margin: 0; }

  .lz-text-kicker {
    font: 600 15px/1.2 var(--lz-display);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lz-leise);
  }

  .lz-text-titel,
  .lz-text-gross {
    font: 700 clamp(34px, 5cqw, 64px)/1 var(--lz-display);
    text-transform: uppercase;
  }

  .lz-text-gross { padding-block: 10px; border-block: 1px solid var(--lz-linie); }

  .lz-text-bereiche {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 18px 40px;
    padding: 0;
    list-style: none;
  }

  .lz-text-bereiche li {
    padding-left: 16px;
    border-left: 2px solid var(--lz-akzent);
    font: 400 17px/1.5 var(--lz-sans);
    color: var(--lz-leise);
  }

  .lz-text-bereiche strong {
    display: block;
    font: 700 clamp(24px, 2.6cqw, 34px)/1.1 var(--lz-display);
    text-transform: uppercase;
    color: var(--lz-hell);
  }

  .lz-text-ablauf,
  .lz-text-person { font: 400 18px/1.6 var(--lz-sans); color: var(--lz-leise); }

  .lz-text-claim {
    font: 700 clamp(22px, 2.6cqw, 32px)/1.1 var(--lz-display);
    text-transform: uppercase;
  }
}
}