/* Kopf, Tiefenflug: Der Process-Engine-Satz fliegt auf den Betrachter zu, der Claim kommt aus der Tiefe.
   kopfwechsel.js setzt --a (Satz geht, 0 bis 1), --b (Claim kommt) und --kopf-lead. */

.kopfwechsel{display:grid;position:relative;width:100%}
.kopfwechsel>*{grid-area:1/1}
.ebene{display:flex;align-items:center;justify-content:center;min-width:0}
.ebene-a{opacity:calc(1 - var(--a,0));transform:scale(calc(1 + var(--a,0) * 2.2));filter:blur(calc(var(--a,0) * 10px))}
.ebene-b{opacity:var(--b,0);transform:scale(calc(.3 + var(--b,0) * .7));filter:blur(calc((1 - var(--b,0)) * 8px))}
.kopf-a{max-width:19ch;font-weight:200;font-size:clamp(1.9rem,4.2vw,3.9rem);line-height:1.12;text-wrap:balance}
.kopf-lead{opacity:var(--kopf-lead,0);transform:translateY(calc((1 - var(--kopf-lead,0)) * 14px))}

/* Bewegung reduziert: beide Zeilen stehen untereinander, ohne Effekt */
@media (prefers-reduced-motion:reduce){
  .kopfwechsel{display:block}
  .ebene{opacity:1!important;transform:none!important;filter:none!important}
  .ebene-b{margin-top:1.6rem}
  .kopf-lead{opacity:1;transform:none}
}