/* Bewegung und Verlauf im Kopf. */

/* Farbwechsel: Farben als echte Farbwerte anmelden, dann blendet die ganze Seite über */
@property --akzent{syntax:'<color>';inherits:true;initial-value:#f0302f}
@property --app-akzent{syntax:'<color>';inherits:true;initial-value:#f0302f}
:root{transition:--akzent 450ms ease-out,--app-akzent 450ms ease-out}
.kursiv{transition:none}

/* Verlauf im Hintergrund, in der gewählten Farbe */
.buehne::before{display:none}
.mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.mesh-feld{position:absolute;inset:-48px}
.mesh i{position:absolute;display:block;border-radius:50%;will-change:transform;aspect-ratio:1}
.mesh .a{left:50%;top:44%;width:min(1100px,150vw);margin-left:calc(min(1100px,150vw)/-2);background:radial-gradient(closest-side,color-mix(in srgb,var(--akzent) 34%,transparent),transparent);animation:mesh-a 13s ease-in-out infinite alternate}
.mesh .b{left:-10%;top:4%;width:min(640px,110vw);background:radial-gradient(closest-side,color-mix(in srgb,var(--akzent) 15%,transparent),transparent);background:radial-gradient(closest-side,oklch(from var(--akzent) l c calc(h + 45) / .16),transparent);animation:mesh-b 17s ease-in-out infinite alternate}
.mesh .c{right:-12%;top:24%;width:min(720px,120vw);background:radial-gradient(closest-side,color-mix(in srgb,var(--akzent) 15%,transparent),transparent);background:radial-gradient(closest-side,oklch(from var(--akzent) l c calc(h - 45) / .16),transparent);animation:mesh-c 21s ease-in-out infinite alternate}
@keyframes mesh-a{from{transform:scale(.9)}to{transform:translateY(-4%) scale(1.08)}}
@keyframes mesh-b{from{transform:none}to{transform:translate(16%,12%) scale(1.15)}}
@keyframes mesh-c{from{transform:none}to{transform:translate(-14%,-10%) scale(.9)}}

/* Schrift etwas enger */
.hero h1{letter-spacing:-.048em}
.abschnitt-kopf h2{letter-spacing:-.042em}

/* Bühne */
.buehne{margin-top:64px;height:clamp(460px,68vw,720px)}
.buehne-kipp{display:flex;justify-content:center;align-items:flex-end;width:100%;height:100%}
.exp-an .buehne .iphone{animation:none;transform:none;will-change:transform}

/* Leiste verschwindet beim Runterscrollen */
.leiste{transition:transform 240ms ease-out}
.leiste.weg{transform:translateY(-110%)}
.leiste:focus-within{transform:none}

/* Überschriften Wort für Wort, Innenabstand damit nichts abgeschnitten wird */
.wort{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .06em .16em;margin:-.1em -.06em -.16em}
.wort-i{display:inline-block;will-change:transform}